:root{
  /* SLATE + SKY palette: cool blue-slate neutrals (restored Jul 21 2026 per Adam —
     preferred over the warm "stone" experiment), sky-blue accent unchanged. */
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222c; --line:#2a2f3a;
  /* Data-table row ladder (Adam, 22 Sep 2026). Banding tuned per theme rather than
     mixed from --panel/--panel-2, because the same numeric step does NOT read the
     same in both: the eye separates near-white tones far more easily than near-black
     ones, so a mix that looked right on the light theme was almost invisible here.
     Dark therefore takes a step roughly 2.5x larger. Four levels, each clearly above
     the last: plain row, banded row, sticky header, hovered row. */
  --row-band:#21252f; --row-head:#262b37; --row-hover:#323847;
  /* Status colours, taken from the palette's existing meanings rather than invented
     (Adam, 22 Sep 2026: "color coordinate the statuses"). --warn already means watch
     this, --lead already means in the pipeline, --success already means done, so a
     draft/scheduled/posted badge reads the same way as every other signal in the app.
     Lightened here for legibility on a dark panel; the light theme sets its own. */
  --st-idea:#e0b455;     --st-idea-bg:rgba(217,164,65,.16);
  --st-scheduled:#8fb3e0; --st-scheduled-bg:rgba(91,127,176,.20);
  --st-posted:#5bbf95;    --st-posted-bg:rgba(46,158,107,.16);
  --ink:#e8ecf3; --muted:#a7b1c0; --muted-2:#98a2b3;
  --outcome:var(--success); --outcome-soft:#13351f; --lead:#5b7fb0; --lead-soft:#1a2533;
  --warn:#d9a441; --crit:var(--danger);
  /* Journey red — THE brand accent (design-system flip, Jul 21 2026). Success
     green + chart data-green are STATES/DATA and deliberately stay green. */
  --accent:#2f86cf; --accent-ink:#ffffff; --accent-soft:rgba(47,134,207,.14);
  --radius:12px; --shadow:0 1px 0 rgba(255,255,255,.03),0 8px 24px rgba(0,0,0,.35);

  /* ── Semantic state colors (design-system pass 1) ──
     The colors actually rendered across the app, promoted to tokens so the
     JS literals and CSS swap correctly in both themes. These are theme-stable. */
  --success:#2e9e6b;        /* = --outcome; "done"/up deltas/success toasts */
  --success-soft:#13351f;
  --danger:#e0736b;         /* the delete/overdue/destructive red actually used */
  --danger-strong:#c0392b;  /* record / destructive-emphasis */
  --info:#5b7fb0;           /* = --lead */
  /* Section accent — the neutral fallback bar. A section may opt into an
     intentional category accent from the --cat-* palette below; saturated
     green/red stay reserved for deltas + pace, never for section bars. */
  --jc-section-accent:#8a8f98;
  /* Category accent palette (audit M15) — the intentional per-section left bars,
     one named token per hue so the previously-scattered raw hex has a single
     source of truth and can be retuned here. Theme-stable: a thin accent bar
     reads on both the light and dark surface. */
  --cat-blue:   var(--lead, #5b7fb0);   /* informational — groups, reach */
  --cat-sky:    #4a90d9;                /* positive metric — recurring adoption */
  --cat-purple: #7e57c2;                /* social / grouped sections */
  --cat-amber:  var(--warn, #d9a441);   /* watch — at-risk givers */
  --cat-orange: #c8843f;                /* decline — pledge, slipping, shrinking */
  --cat-coral:  #cf6b5a;                /* attention — dropped after week 1 */
  --cat-slate:  #6b7383;                /* muted / neutral metric */

  /* ── Workspace (space) accent colors — one source so $wsMeta (PHP) and the
     JS META map can't drift. Theme-stable brand accents per product space. ── */
  --ws-insights:#4a90d9;
  --ws-social:#c45b9c;
  --ws-mc:#e0a43f;
  --ws-care:#e0483c; /* Care identity = red (Adam Jul 21). Global accent is sky, so red is free here. */
  --ws-comms:#8a6df0;
  --ws-outreach:#3f9e78; /* Outreach = green. The only hue left that reads distinctly
                            from the other five at icon size in BOTH themes; also the
                            one color nothing else in the app uses for identity. */

  /* ── Type scale — 8 roles, no half-pixels (matches 15px body) ── */
  --fs-caption: 0.6875rem; /* 11px — uppercase labels, badges. HARD FLOOR. */
  --fs-xs:      0.75rem;    /* 12px — meta, byline, table sub-text */
  --fs-sm:      0.8125rem; /* 13px — dense body, chips, controls, table cells */
  --fs-base:    0.9375rem; /* 15px — body */
  --fs-md:      1rem;      /* 16px — emphasized body, section sub-heads */
  --fs-lg:      1.1875rem; /* 19px — H3 / card titles */
  --fs-xl:      1.5rem;    /* 24px — page H1 */
  --fs-2xl:     1.875rem;  /* 30px — hero metric numbers */

  /* ── Line-heights — 3 roles ── */
  --lh-tight:  1.2;   /* display numbers, H1/H2 */
  --lh-snug:   1.35;  /* card titles, list rows */
  --lh-body:   1.55;  /* paragraphs, notes, post text */

  /* ── Weights — 4 stops (body is 450 = "normal") ── */
  --fw-normal: 450;
  --fw-medium: 600;
  --fw-bold:   700;
  --fw-black:  800;   /* reserve for hero numbers + H1 only */

  /* ── Spacing — 8pt scale ── */
  --sp-0:  2px;   /* hairline insets only */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;  /* default card padding */
  --sp-5:  24px;  /* content gutter */
  --sp-6:  32px;
  --sp-7:  48px;

  /* ── Radius scale ── */
  --radius-sm: 8px;    /* controls, chips */
  --radius-lg: 16px;   /* modals, composer */
  --radius-pill: 999px;
}
/* Light theme — applied when <html data-theme="light"> (set from Settings). */
html[data-theme="light"]{
  --bg:#f5f3f0; --panel:#ffffff; --panel-2:#efece7; --line:#ddd8d1;
  /* Row ladder, light. --row-band is the exact tone the earlier color-mix produced
     here, kept literally because Adam confirmed light mode already read well. */
  --row-band:#f6f5f2; --row-head:#efece7; --row-hover:#e6e2db;
  /* Same three meanings, darkened to stay readable as small bold text on a pale
     tint. --lead-soft and --success-soft are already light-theme values above. */
  --st-idea:#8a6410;     --st-idea-bg:rgba(217,164,65,.22);
  --st-scheduled:#3a5f8f; --st-scheduled-bg:var(--lead-soft);
  --st-posted:#2a6b4c;    --st-posted-bg:var(--success-soft);
  --ink:#22201d; --muted:#5c554d;
  /* Contrast pass (critique c1/a1, Jul 19): muted-2 was #737d8f (~4.0:1 on
     white — borderline for the small text it's used on); darkened to pass. */
  --muted-2:#6b645b;
  /* Light-mode accent: brand #F44236 on white is 3.7:1 (fails AA for text),
     so light mode deepens the red — #c62d22 is 5.5:1 as link text on white AND
     under white button ink. Dark mode keeps the full-strength brand red. */
  --accent:#1f6fb0; --accent-soft:rgba(31,111,176,.10);
  /* Data/status TEXT tokens (vgood/vbad, delta chips, band dots): the chart
     palette's mid tones fail as text on white, so light mode deepens them.
     Charts themselves use hardcoded series colors and are unaffected. */
  --data:#178a5d; --s2:#3f74b8; --s3:#996e14; --s4:#6f56b8; --s5:#c04338;
  --data-soft:rgba(23,138,93,.10);
  --outcome-soft:#e3f3ea; --lead-soft:#e7eef7;
  --success-soft:#e3f3ea;
  --jc-section-accent:#9097a3; /* muted neutral, readable on light panels */
  --shadow:0 1px 0 rgba(0,0,0,.02),0 8px 24px rgba(20,30,50,.08);
}
/* Light mode: chart range-selector pills inherit the page surface instead of
   staying the dark-charcoal #2b313c rest state (dark mode keeps it). The
   .active pill already swaps to the accent gradient, so it is unaffected. */
html[data-theme="light"] .period-tabs .ptab,
html[data-theme="light"] .ptabs .ptab{
  background:var(--panel-2);
  color:var(--ink);
}
/* Horizontal-scroll wrapper for wide data tables on narrow screens (matches the
   existing .an-table-wrap / onlineviews pattern). The min-width lets columns
   scroll on a phone instead of crushing; on desktop the table is already wider. */
.jc-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.jc-tscroll>table{min-width:540px}
.gearbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);text-decoration:none;font-size:var(--fs-md)}
.gearbtn:hover{color:var(--ink);border-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.seg button{background:var(--panel-2);border:none;color:var(--muted);padding:var(--sp-2) var(--sp-4);cursor:pointer;font:inherit}
.seg button.active{background:var(--lead-soft);color:var(--ink);font-weight:var(--fw-medium)}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:flex;font:15px/1.45 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:var(--fw-normal);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Browser autofill: Chrome forces a light background + its own text color on
   autofilled fields, which on the dark UI makes the value wash out / vanish on
   hover. Pin autofilled inputs to the theme (uses --panel-2 / --ink, so it's
   correct in BOTH dark and light mode). The huge inset box-shadow paints over
   Chrome's autofill background; text-fill-color sets the visible text. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink) !important;
  -webkit-box-shadow:0 0 0 1000px var(--panel-2) inset !important;
          box-shadow:0 0 0 1000px var(--panel-2) inset !important;
  caret-color:var(--ink);
  transition:background-color 600000s 0s, color 600000s 0s;
}

/* Global form-control fallback: any input/textarea/select WITHOUT its own themed
   styling now follows the active theme, so nothing renders white-on-dark (e.g. the
   Settings password fields) or dark-on-light. Component classes and inline styles
   override this via specificity, so styled fields are unaffected. */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),
textarea, select{
  background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:var(--sp-2) 10px;
  font-family:inherit; font-size:var(--fs-base);
  color-scheme:dark; /* render the native option popup dark to match the theme */
}
html[data-theme="light"] textarea, html[data-theme="light"] select{color-scheme:light}
/* Native dropdown option lists: themed dark, with priority-colour coding so the
   Urgent/High/Medium/Low popup reads at a glance (matches PRIO_META in app.js). */
select option{background:var(--panel-2); color:var(--ink); padding:4px 8px}
select option:checked{background:color-mix(in srgb, var(--accent) 22%, var(--panel-2)); font-weight:600}
select option[value="urgent"]{color:#e8695e; font-weight:600}
select option[value="high"]{color:#e59a45; font-weight:600}
select option[value="med"]{color:#d8bd55; font-weight:600}
select option[value="low"]{color:#98a2b0}
input::placeholder, textarea::placeholder{color:var(--muted-2); opacity:1}

/* Sidebar */
.sidebar{width:230px;flex:none;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px;position:relative;transition:width .14s ease}
.sidebar .brand{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-1) var(--sp-1) 20px;font-weight:var(--fw-black);letter-spacing:.2px}
.sidebar .brand-logo{width:42px;height:42px;flex:0 0 auto;border-radius:10px}
.sidebar .brand-word{display:flex;flex-direction:column;line-height:1.02}
.sidebar .brand-word .bw-1{font-size:var(--fs-lg);color:var(--ink)}
.sidebar .brand-word .bw-2{font-size:var(--fs-lg);color:var(--accent)}
.brand-mini{display:none}
.nav-collapse{position:absolute;top:14px;right:10px;z-index:5;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line,#2b313c);background:var(--panel-2,var(--panel-2));color:var(--muted);border-radius:6px;cursor:pointer;font-size:var(--fs-sm);line-height:1;padding:0}
.nav-collapse:hover{color:var(--ink);border-color:var(--muted-2)}
/* Collapsed icon rail */
.sidebar.collapsed{width:60px;padding-left:var(--sp-2);padding-right:var(--sp-2)}
.sidebar.collapsed .nav-collapse{right:auto;left:50%;transform:translateX(-50%)}
.sidebar.collapsed .brand{margin-top:34px;justify-content:center;gap:0}
.sidebar.collapsed .brand-full{display:none}
.sidebar.collapsed .brand-logo{width:34px;height:34px}
.sidebar.collapsed .ws-name,.sidebar.collapsed .ws-sub,.sidebar.collapsed .ws-caret{display:none}
.sidebar.collapsed .ws-current{justify-content:center;padding:var(--sp-2)}
.sidebar.collapsed .ws-menu{padding:var(--sp-2) var(--sp-1)}
.sidebar.collapsed .ws-menu a{justify-content:center;gap:0;padding:var(--sp-2) 0}
.sidebar.collapsed .nav-group-label,.sidebar.collapsed .nav-group-sum{display:none}
.sidebar.collapsed nav a{font-size:0;text-align:center;padding:var(--sp-2) 0}
/* Icon-less nav links (Insights/Social) get a first-letter badge when collapsed. */
.nav-letter{display:none}
.sidebar.collapsed .nav-letter{display:flex;align-items:center;justify-content:center;width:30px;height:24px;margin:0 auto;font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1}
.sidebar.collapsed nav a .nav-ico{margin-right:0}
.sidebar.collapsed .nav-top{flex-direction:column;gap:var(--sp-2);align-items:center}
.sidebar.collapsed .footer-mini,.sidebar.collapsed .nav-foot{display:none}
/* Collapsed rail: keep everything inside the 60px and never overflow. */
.sidebar.collapsed{overflow:hidden}
.sidebar.collapsed nav a .nav-badge{display:none}
.sidebar.collapsed .nav-top-btn{width:34px}
/* Footer: profile avatar + a small sign-out icon (no text). */
.foot-acct{position:relative}
.foot-acct-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;border-radius:50%}
.foot-acct-btn:hover .foot-avatar{border-color:var(--accent)}
.foot-menu{position:absolute;bottom:calc(100% + 8px);left:0;min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:var(--sp-2);display:none;z-index:70}
.foot-acct.open .foot-menu{display:block}
.foot-menu-head{font-size:var(--fs-xs);color:var(--muted-2);padding:var(--sp-0) var(--sp-2) var(--sp-2);word-break:break-all;border-bottom:1px solid var(--line);margin-bottom:var(--sp-2)}
.foot-menu-label{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2);padding:var(--sp-1) var(--sp-2) 3px}
.foot-theme{margin:0 var(--sp-1) var(--sp-2)}
.foot-menu a{display:block;padding:var(--sp-2);border-radius:7px;color:var(--ink);text-decoration:none;font-size:var(--fs-sm)}
.foot-menu a:hover{background:var(--panel-2)}
.foot-menu .foot-menu-out{color:var(--accent);border-top:1px solid var(--line);margin-top:var(--sp-1);padding-top:var(--sp-2)}
.foot-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block;margin:0;border:1px solid var(--line,#2b313c);flex:0 0 auto}
.foot-avatar-ph{display:flex;align-items:center;justify-content:center;background:var(--lead,#3b6fb0);color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-md);line-height:1}
.sidebar.collapsed .foot-avatar{width:34px;height:34px;margin:0 auto}
.brand span{color:var(--accent)}
.nav-group-label{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);margin:26px var(--sp-2) var(--sp-2)}
.sidebar nav > .nav-group-label:first-child{margin-top:var(--sp-2)}
.nav-badge{display:inline-block;min-width:16px;text-align:center;background:var(--lead);color:#0b0e13;font-size:var(--fs-caption);font-weight:var(--fw-bold);border-radius:9px;padding:1px var(--sp-1);margin-left:var(--sp-1);line-height:1.4}
/* Collapsible sidebar group (Manage) */
details.nav-group{margin:0}
details.nav-group>summary.nav-group-sum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2);user-select:none}
details.nav-group>summary.nav-group-sum::-webkit-details-marker{display:none}
details.nav-group>summary.nav-group-sum::before{content:'\25B8';font-size:var(--fs-caption);opacity:.7}
details.nav-group[open]>summary.nav-group-sum::before{content:'\25BE'}
/* Tasks hub: view sub-tabs */
/* ── Unified tab primitive (design-system pass) ──
   One base shared by the four legacy tab systems (.task-tabs, .sq-tabs underline;
   .set-tabs, .period-tabs/.ptabs pill) WITHOUT requiring markup changes — the
   existing classes opt in by grouped selectors below. New code should use .tabs +
   the modifier. `--tabs-active-style: underline | pill`. Visual look is unified;
   each legacy system keeps its own active accent color so nothing re-skins. */
.tabs,
.task-tabs,.sq-tabs,
.set-tabs,.period-tabs,.ptabs{display:flex;gap:var(--sp-0);flex-wrap:wrap;align-items:center}
.tabs{--tabs-active:var(--accent)}
.tabs.pill,.set-tabs,.period-tabs,.ptabs{gap:var(--sp-2)}
/* base tab item */
.tabs > *,
.tabs a{font:inherit;font-size:var(--fs-sm);color:var(--muted);text-decoration:none;cursor:pointer;background:none;border:none}
/* underline variant (default) */
.tabs:not(.pill) > *,
.tabs:not(.pill) a{padding:var(--sp-2) 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs:not(.pill) .active{color:var(--ink);border-bottom-color:var(--tabs-active);font-weight:var(--fw-medium)}
/* pill variant */
.tabs.pill{border-bottom:none}
.tabs.pill > *,
.tabs.pill a{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4)}
.tabs.pill .active{background:var(--tabs-active);border-color:var(--tabs-active);color:#0b0e13;font-weight:var(--fw-medium)}
.tabs > *:hover,.tabs a:hover{color:var(--ink)}

.task-tabs{display:flex;gap:var(--sp-0);flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line,#2b313c);margin:0 0 var(--sp-4)}
.task-tabs a{padding:var(--sp-2) 14px;font-size:var(--fs-base);color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;align-self:stretch;display:flex;align-items:center}
.task-tabs a:hover{color:var(--ink)}
.task-tabs a.active{color:var(--ink);border-bottom-color:var(--accent,var(--success));font-weight:var(--fw-medium)}
/* Right-side action slot inside the tab row (Board toolbar moves up here — u5).
   Empty on views that don't use it, so it costs nothing there. */
.task-tabs .tt-slot{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 0 7px}
.task-tabs .tt-slot:empty{display:none}
@media (max-width:760px){.task-tabs .tt-slot{margin-left:0;flex-basis:100%}}
/* Header utility icons (search, notifications) */
.hdr-util{color:var(--muted);text-decoration:none;font-size:var(--fs-lg);line-height:1;position:relative;padding:var(--sp-0) var(--sp-1)}
.hdr-util:hover{color:var(--ink)}
.hdr-util .nav-badge{position:absolute;top:-4px;right:-6px;margin:0}
/* Sidebar nav icons — subtle, monochrome (inherit the link text colour) */
.nav-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;margin-right:var(--sp-2);opacity:.6;vertical-align:-3px}
.nav-ico svg{display:block}
.sidebar nav a.active .nav-ico{opacity:.95}
/* Top-of-sidebar Search / Notifications — compact, side by side */
.nav-top{display:flex;flex-wrap:nowrap;gap:var(--sp-2);margin:0 var(--sp-2) 14px;justify-content:flex-start}
.nav-top-btn{flex:0 0 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:0;font-size:var(--fs-caption);width:34px;height:34px;padding:0;border-radius:8px;text-decoration:none;color:var(--muted);background:transparent;border:1px solid var(--line,#2b313c);white-space:nowrap;overflow:visible;position:relative;line-height:1}
.nav-top-btn svg{display:block}
.nav-top-btn svg{flex:0 0 auto;opacity:.7}
.nav-top-btn:hover{color:var(--ink);border-color:var(--muted-2)}
.nav-top-btn.active{color:var(--ink);border-color:var(--lead)}
#pco-nav-pop .pco-row{display:flex;align-items:center;gap:12px;padding:8px 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:var(--fs-sm);white-space:nowrap}
#pco-nav-pop .pco-row:hover{background:var(--panel-2)}
#pco-nav-pop .pco-badge{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:26px;height:26px;border-radius:8px;line-height:0}
.nav-top-btn .nav-badge{position:absolute;top:-5px;right:-5px;margin:0}
/* Red dot on the gear when a connector needs attention */
.gear-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px var(--bg,var(--panel-2))}
.sidebar nav a{display:block;padding:var(--sp-2) 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:var(--fs-base)}
.sidebar nav a:hover{background:var(--panel-2);color:var(--ink)}
.sidebar nav a.active{background:var(--lead-soft);color:var(--ink);font-weight:var(--fw-medium)}

/* Sep 3 2026 — laptop-height pass. Reported: "on laptop it makes you scroll to
   see the bottom of the left bar." The rail had no height cap and no overflow
   rule, so on a 13" screen (861px of viewport) the nav ran 84px past the fold
   and the whole PAGE scrolled to reach it — while .content scrolled on its own
   axis. Two scrollbars on two different axes is exactly the confusion a command
   center should never hand a busy person mid-task.

   Two-part fix, in this order:
   1. Density. At <=900px tall the nav tightens (rows 35px -> 29px, group gaps
      trimmed) so the WHOLE rail fits with nothing hidden — Ministries and its
      open count included. Measured on Mike's 1512x861 laptop: content 738px ->
      650px in a 650px box. Fitting beats scrolling. Excluded from body.jc-app,
      which deliberately runs 9px rows for thumbs (see the jc-app block below).
   2. Scroll, as the graceful floor. Shorter windows still overflow, so the rail
      is now a fixed-height column where only the nav list scrolls: brand,
      workspace switcher and the Inbox/account footer stay pinned. A fade at the
      scrolling edge says there's more (toggled by JS in layout.php) — without
      it the list clips flush against the footer and reads as "that's all there
      is." .ws-menu and .foot-menu are absolutely positioned siblings of nav, so
      neither dropdown is clipped by this; verified with the account menu open
      at a 600px viewport. */
.sidebar{height:100%;min-height:0}
.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidebar nav::-webkit-scrollbar{width:8px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav::-webkit-scrollbar-thumb{background:var(--line);background-clip:content-box;border:2px solid transparent;border-radius:99px}
.sidebar nav:hover::-webkit-scrollbar-thumb{background:var(--muted-2,#98a2b0);background-clip:content-box}
/* Collapsed rail has no room for a gutter — hide the track, keep the scroll. */
.sidebar.collapsed nav{scrollbar-width:none}
.sidebar.collapsed nav::-webkit-scrollbar{width:0}
/* Edge fades. Masked on the element box, so they hold still while the list
   moves under them. Only applied when the nav actually overflows, and only on
   the edge that has more content — a fade over a list that can't scroll is a
   lie about the UI. */
.sidebar nav.nav-fade{--nav-fade-t:0px;--nav-fade-b:0px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-t),#000 calc(100% - var(--nav-fade-b)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-t),#000 calc(100% - var(--nav-fade-b)),transparent 100%)}
.sidebar nav.nav-fade-up{--nav-fade-t:20px}
.sidebar nav.nav-fade-dn{--nav-fade-b:24px}
.sidebar-foot{margin-top:auto;display:flex;align-items:center;gap:var(--sp-2);padding:10px var(--sp-2);background:transparent;border:none}
.foot-signout{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line,#2b313c);border-radius:8px;color:var(--muted);text-decoration:none;font-size:var(--fs-base);line-height:1;flex:0 0 auto}
.foot-signout:hover{color:var(--ink);border-color:var(--muted-2)}
.sidebar.collapsed .sidebar-foot{flex-direction:column;gap:var(--sp-2);padding:10px 0}

/* Content */
.content{flex:1;min-width:0;padding:var(--sp-5) 30px 60px;overflow:auto}
/* Mobile nav drawer trigger + backdrop — hidden on desktop, activated at <=760px. */
.jc-navburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--ink);font-size:19px;line-height:1;cursor:pointer}
.jc-navburger:hover{background:var(--panel)}
.jc-navscrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1250;opacity:0;pointer-events:none;transition:opacity .2s ease}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin:var(--sp-2) 0 14px}
.page-head h1{font-size:var(--fs-xl);margin:0}
.lede{color:var(--muted);max-width:760px;margin:0 0 18px}
.window-note,.muted{color:var(--muted)} .small{font-size:var(--fs-xs)}
.muted-2{color:var(--muted-2)}

.demo-banner{background:repeating-linear-gradient(45deg,#3a2f12,#3a2f12 10px,#332a10 10px,#332a10 20px);border:1px solid var(--warn);color:#f4d99a;padding:10px 14px;border-radius:10px;font-size:var(--fs-sm);margin-bottom:var(--sp-4)}

/* Connector status strip */
.connector-strip{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:flex-end}
.chip{font-size:var(--fs-caption);padding:3px var(--sp-2);border-radius:20px;border:1px solid var(--line);color:var(--muted);background:var(--panel-2)}
.chip.ok{border-color:#27543c;color:#7cc6a6}
.chip.error{border-color:#5a2b27;color:#e08c84}
.chip.never,.chip.disabled{border-color:var(--line);color:var(--muted-2)}
.chip.stale{border-color:#5a4a1f;color:#e0c47a}
/* M17: status chips are dark-theme-tuned; darken them on the light panel so they pass contrast */
html[data-theme="light"] .chip.ok{color:#1a6b43;border-color:#9fceb4}
html[data-theme="light"] .chip.error{color:#a83228;border-color:#e3b3ad}
html[data-theme="light"] .chip.stale{color:#7a5c0a;border-color:#e0cf9a}

/* Cards + metric grid */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.metric-grid.subordinate{opacity:.96}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);box-shadow:var(--shadow);margin:14px 0}
.metric-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--jc-section-accent,#8a8f98);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow)}
.metric-card.leading{border-left-color:var(--lead)}
.metric-card .mlabel{display:flex;align-items:center;gap:var(--sp-2);color:var(--muted);font-size:var(--fs-sm);cursor:help}
.metric-card .mvalue{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin:var(--sp-2) 0 var(--sp-0)}
.metric-card .mmeta{font-size:var(--fs-xs);color:var(--muted-2);display:flex;gap:10px;flex-wrap:wrap}
.delta.up{color:var(--outcome)} .delta.down{color:var(--crit)} .delta.flat{color:var(--muted-2)}
.metric-card.clickable{cursor:pointer;transition:border-color .12s,transform .12s}
.metric-card.clickable:hover{border-color:var(--accent);transform:translateY(-1px)}
a.back-link{color:var(--accent);text-decoration:none}
.cat-section{margin-bottom:26px}
.cat-title{font-size:var(--fs-base);text-transform:uppercase;letter-spacing:.08em;font-weight:var(--fw-bold);border-left:4px solid var(--jc-section-accent,#8a8f98);padding-left:10px;margin:0 0 14px}
.metric-grid.compact{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.metric-card.compact{padding:10px var(--sp-3)}
.metric-card.compact .mvalue{font-size:var(--fs-lg);margin:var(--sp-0) 0 0}
.metric-card.compact .mlabel{font-size:var(--fs-xs)}
.metric-card.compact .mmeta{font-size:var(--fs-caption)}
.mroster{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2)}
.mroster b{font-size:var(--fs-lg);color:var(--ink);font-weight:var(--fw-bold)}
.myoy{margin-top:var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.period-tabs{display:flex;gap:var(--sp-2);margin:var(--sp-1) 0 14px}
.period-tabs .ptab{background:#2b313c;border:1px solid var(--line);color:#fff;border-radius:20px;padding:var(--sp-2) var(--sp-4);cursor:pointer;font:inherit;font-size:var(--fs-sm)}
.period-tabs .ptab:hover{filter:brightness(1.18)}
.period-tabs .ptab.active{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:var(--fw-medium)}
.period-tabs .psel{margin-left:var(--sp-2);background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:var(--sp-2) 10px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
/* Standard chart-control toggles (range / grain / labels / type) — charcoal with
   white text; selected stays green with white text. Used by every chart page. */
.ptabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.ptabs .ptab{background:#2b313c;border:1px solid var(--line);color:#fff;border-radius:20px;padding:var(--sp-2) var(--sp-4);cursor:pointer;font:inherit;font-size:var(--fs-sm)}
.ptabs .ptab:hover{filter:brightness(1.18)}
.ptabs .ptab.active{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:var(--fw-medium)}
.metric-card.muted{opacity:.9}
.metric-card.muted .mvalue{color:var(--muted)}
.metric-card.muted .mlabel{color:var(--muted-2)}
/* breathing room under each category title before its cards */
.cat-title{margin-bottom:18px}
.window-note{margin:var(--sp-2) 0 20px}
.pace{margin-top:var(--sp-2);height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden}
.pace > i{display:block;height:100%;background:var(--outcome)}
.badge{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;padding:var(--sp-0) var(--sp-2);border-radius:20px;border:1px solid}
.badge.leading{color:var(--lead);border-color:var(--lead)}
.badge.outcome{color:var(--outcome);border-color:var(--outcome)}
.info-i{display:inline-flex;width:14px;height:14px;border-radius:50%;border:1px solid var(--muted-2);color:var(--muted-2);font-size:var(--fs-caption);align-items:center;justify-content:center;cursor:help;vertical-align:middle}
.info-i:hover{border-color:var(--accent);color:var(--accent)}
.eye{cursor:help;opacity:.65;font-size:var(--fs-xs);vertical-align:middle}
.eye:hover{opacity:1}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted-2)}
.dot.red{background:var(--crit)} .dot.yellow{background:var(--warn)}
.atrisk-red td{background:rgba(208,90,79,.06)}
.gjtable th .info-i{text-transform:none}

/* Funnel */
.funnel{display:flex;flex-direction:column;gap:var(--sp-0)}
.stage{display:grid;grid-template-columns:160px 1fr 130px;align-items:center;gap:14px;padding:var(--sp-2) 0;cursor:pointer}
.stage:hover .bar > i{filter:brightness(1.12)}
.stage .sname{font-weight:var(--fw-medium)}.stage .skind{font-size:var(--fs-caption);color:var(--muted-2)}
.bar{background:var(--panel-2);border-radius:6px;height:30px;position:relative;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--lead)}
.stage.outcome .bar > i{background:var(--outcome)}
.bar .bval{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:var(--fs-sm)}
.conv{font-size:var(--fs-sm);text-align:right;color:var(--muted)}
.conv .pct{font-weight:var(--fw-bold);color:var(--ink)}
.stage.flag .bar{outline:2px solid var(--crit)}
.headline{background:var(--lead-soft);border:1px solid var(--lead);border-radius:10px;padding:var(--sp-3) 14px;margin-bottom:14px}
.headline.flagcrit{background:#321c19;border-color:var(--crit)}
html[data-theme="light"] .headline.flagcrit{background:#fbe9e7;color:#8a2a20} /* L13: readable critical headline in light mode */
.drill{margin-top:var(--sp-4)}

/* Feedback */
.filters{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-3);flex-wrap:wrap}
.filters button{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:var(--sp-1) var(--sp-3);cursor:pointer}
.filters button.active{color:#fff;border-color:var(--accent)}
.feedback-list{display:flex;flex-direction:column;gap:10px}
.fb{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:var(--sp-3) 14px;border-left:3px solid var(--muted-2)}
.fb.positive{border-left-color:var(--outcome)} .fb.negative{border-left-color:var(--crit)} .fb.neutral{border-left-color:var(--lead)}
.fb .fhead{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);color:var(--muted)}
.fb .fbody{margin:var(--sp-2) 0}
.fb .factions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.fb select,.fb button,.control-form select,.control-form textarea,.control-form button{font:inherit}
.fb .factions .btn.ghost.active{border-color:var(--accent);color:var(--accent)}
/* Quick-submit: keep the chosen review mode (One approval for all / Separate for each) clearly highlighted. */
.btn.ghost.cr-qmode-opt.active{border-color:var(--accent);background:rgba(91,124,250,.20);color:var(--accent);font-weight:600}
.fb .fhead .chip{text-transform:capitalize}
.handled-folder{margin-top:20px;border-top:1px solid var(--line);padding-top:var(--sp-3)}
.handled-folder > summary{cursor:pointer;color:var(--muted);font-size:var(--fs-base);font-weight:var(--fw-medium);padding:var(--sp-2) 0;list-style:none;user-select:none}
.handled-folder > summary::-webkit-details-marker{display:none}
.handled-folder > summary:hover{color:var(--ink)}
.handled-folder[open] > summary{color:var(--ink)}
.handled-list{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-3);opacity:.85}

/* Alerts */
.alerts{display:flex;flex-direction:column;gap:10px}
.alert{border-radius:10px;padding:var(--sp-3) 14px;border:1px solid var(--line);background:var(--panel)}
.alert.critical{border-left:4px solid var(--crit)} .alert.warning{border-left:4px solid var(--warn)}
.alert .atype{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}

/* Control */
.control-form{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-end}
.control-form label{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--muted)}
.control-form label.grow{flex:1;min-width:280px}
.control-form select,.control-form textarea{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:var(--sp-2)}
.btn{background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;padding:var(--sp-2) var(--sp-4);font-weight:var(--fw-medium);cursor:pointer}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.danger{background:var(--crit);color:#fff}
.btn:disabled,.btn[disabled],.btn-sm:disabled,.btn-sm[disabled],.btn-xs:disabled,.btn-xs[disabled]{opacity:.5;cursor:not-allowed}
/* ── Micro/compact button primitives (design-system pass) ──
   Match the inline string `padding:2px 8px;font-size:12px` used ~hundreds of
   times so those can be swapped for a class with ZERO visual change. A-5 floor
   of 28px keeps the desktop hit target comfortable. Same fill/hover as .btn. */
.btn-xs,.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius-sm);font:inherit;font-weight:var(--fw-medium);cursor:pointer;text-decoration:none;line-height:var(--lh-snug)}
.btn-xs{padding:var(--sp-0) var(--sp-2);font-size:var(--fs-xs);min-height:28px}
.btn-sm{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);min-height:32px}
.btn-xs:hover,.btn-sm:hover{filter:brightness(1.06)}
.btn-xs.ghost,.btn-sm.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-xs.ghost:hover,.btn-sm.ghost:hover{filter:none;border-color:var(--accent);color:var(--accent)}
.btn-xs.danger,.btn-sm.danger{background:var(--danger);color:#fff}
.pending-confirm{margin-top:14px;background:#2a2410;border:1px solid var(--warn);border-radius:10px;padding:var(--sp-3)}
html[data-theme="light"] .pending-confirm{background:#fff8e1;color:#6b5300} /* L13: readable pending-confirm in light mode */
table.audit{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.audit th,table.audit td{text-align:left;padding:var(--sp-2) var(--sp-2);border-bottom:1px solid var(--line);vertical-align:top}
table.audit .st-executed{color:var(--outcome)} table.audit .st-failed{color:var(--crit)} table.audit .st-pending{color:var(--warn)}

/* Mobile pass — stack the sidebar, shrink padding, let wide tables scroll. */
@media (max-width: 760px) {
  body{flex-direction:column}
  /* The global nav becomes an off-canvas drawer so it no longer eats a whole
     screen of scrolling on top of every page. Toggled by body.jc-nav-open. */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:84vw;flex-direction:column;padding:16px 14px;border-right:1px solid var(--line);border-bottom:none;transform:translateX(-100%);transition:transform .2s ease;z-index:1300;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.5)}
  body.jc-nav-open .sidebar{transform:none}
  .nav-collapse{display:none}                 /* desktop collapse toggle is n/a in the drawer */
  .jc-navburger{display:inline-flex}
  body.jc-nav-open .jc-navscrim{opacity:1;pointer-events:auto}
  .page-head{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  .page-head h1{flex:1;min-width:0}
  .content{padding:var(--sp-4) 14px var(--sp-7)}
  .page-head{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .page-head h1{font-size:var(--fs-lg)}
  .connector-strip{justify-content:flex-start}
  .card{overflow-x:auto}
  table.gjtable, table.audit{min-width:560px}
  .period-tabs{flex-wrap:wrap}
  .period-tabs .psel{margin-left:0}
  .stage{grid-template-columns:120px 1fr 92px;gap:var(--sp-2)}
}

/* Guest Journey / assimilation */
.gj-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.gj-scard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--outcome);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow)}
.gj-scard .mvalue{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin:var(--sp-2) 0 var(--sp-0)}
table.gjtable{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
table.gjtable th{text-align:left;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);font-weight:var(--fw-bold);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
table.gjtable td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);vertical-align:middle}
table.gjtable tr:last-child td{border-bottom:none}
.gjtable .gjmo{font-weight:var(--fw-medium);white-space:nowrap}
.gjtable .gjnum{text-align:right;font-variant-numeric:tabular-nums}
.gjbar{display:inline-block;vertical-align:middle;width:90px;height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden;margin-right:var(--sp-2)}
.gjbar > i{display:block;height:100%}
.gjbar > i.f{background:var(--lead)} .gjbar > i.s{background:var(--accent)} .gjbar > i.g{background:var(--warn)} .gjbar > i.d{background:var(--outcome)}
.gjp{font-variant-numeric:tabular-nums;color:var(--ink)}

/* Tooltip */
.metric-tooltip{position:fixed;max-width:340px;background:#0b0d11;border:1px solid var(--line);border-radius:10px;padding:var(--sp-3);font-size:var(--fs-xs);color:#e8ecf3;box-shadow:var(--shadow);z-index:50}
.metric-tooltip b{color:var(--accent)} .metric-tooltip dl{margin:var(--sp-2) 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.metric-tooltip dt{color:#a7b1c0}

/* ---- Workspace switcher (Planning Center–style product dropdown) ---- */
.ws-switch{position:relative;margin:var(--sp-0) 0 var(--sp-4)}
.ws-current{display:flex;align-items:center;gap:var(--sp-2);width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:var(--sp-2) 10px;cursor:pointer;color:var(--ink);font:inherit;font-weight:var(--fw-medium)}
.ws-current:hover{border-color:var(--accent)}
.ws-ico{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#0b0e13;flex:none}
.ws-current .ws-name{flex:1;text-align:left;font-size:var(--fs-base)}
.ws-current .ws-caret{color:var(--muted-2);font-size:var(--fs-caption);transition:transform .15s}
.ws-switch.open .ws-current .ws-caret{transform:rotate(180deg)}
.ws-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:var(--sp-2);z-index:60;display:none}
.ws-switch.open .ws-menu{display:block}
.ws-menu a{display:flex;align-items:center;gap:10px;padding:var(--sp-2) 10px;border-radius:8px;color:var(--ink);text-decoration:none}
.ws-menu a:hover{background:var(--panel-2)}
.ws-menu a.active{background:var(--lead-soft)}
.ws-menu .ws-name{font-size:var(--fs-base);font-weight:var(--fw-medium);line-height:1.2}
.ws-menu .ws-sub{font-size:var(--fs-caption);color:var(--muted-2);display:block;font-weight:400}

/* ---- Styled file picker (Buffer-like drop zone) ---- */
/* Buffer-style media drop: a compact dashed square with a line-icon + 2-line label */
.filebox{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);width:190px;min-height:150px;border:1.6px dashed var(--line);border-radius:12px;padding:18px;cursor:pointer;color:var(--muted);background:var(--panel-2);transition:border-color .12s,color .12s,background .12s;text-align:center}
.filebox:hover,.filebox.drag{border-color:var(--accent);color:var(--ink);background:var(--lead-soft)}
.filebox .fb-ico{line-height:0;color:var(--muted)}
.filebox:hover .fb-ico,.filebox.drag .fb-ico{color:var(--accent)}
.filebox .fb-main{font-size:var(--fs-sm);line-height:1.4}
.filebox .fb-pick{color:var(--accent);font-weight:var(--fw-medium)}
.filebox input[type=file]{display:none}
.filebox .fb-names{font-size:var(--fs-xs);color:var(--ink);margin-top:var(--sp-0);font-weight:var(--fw-medium)}
.fb-help{margin:var(--sp-2) 0 0;max-width:430px}
/* Header pill / tool icons inherit text color so they track light/dark mode */
.sp-hd-ico{vertical-align:-2px}
.sp-tool svg,.sp-hd-pill svg,.sp-hd-btn svg{vertical-align:middle}
/* Inline monochrome icons in social cards/headers track the text (theme) color */
.sq-iconbtn svg,.sq-tz svg,.sq-tagpill svg,.jc-statline svg{vertical-align:-2px}

/* ---- Buffer-style channel pills (platform selector) ---- */
.chan-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chan{display:inline-flex;align-items:center;gap:var(--sp-2);border:1px solid var(--line);border-radius:24px;padding:var(--sp-1) 14px var(--sp-1) var(--sp-2);cursor:pointer;background:var(--panel-2);user-select:none;transition:border-color .12s,background .12s}
.chan:hover{border-color:var(--muted)}
.chan input{display:none}
.chan .chan-dot{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:#fff;flex:none}
.chan .chan-name{font-size:var(--fs-sm);color:var(--muted)}
.chan.on{border-color:var(--accent);background:var(--lead-soft)}
.chan.on .chan-name{color:var(--ink);font-weight:var(--fw-medium)}

/* ---- Button + tab polish ---- */
a.btn{display:inline-block;text-decoration:none;text-align:center}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.set-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:var(--sp-2) 0 18px}
.set-tabs .set-tab{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);cursor:pointer;font:inherit}
.set-tabs .set-tab:hover{color:var(--ink)}
.set-tabs .set-tab.active{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:var(--fw-bold)}

/* ---- Reach category spacing (Insights → Reach & Engagement) ---- */
.reach-cats .reach-cat{margin-top:var(--sp-6);padding-top:22px;border-top:1px solid var(--line)}
.reach-cats .reach-cat:first-child{margin-top:10px;padding-top:0;border-top:none}

/* ---- Mobile polish for the newer components ---- */
@media (max-width: 760px) {
  .set-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .ptabs{flex-wrap:wrap}
  .sp-preview-wrap{width:100%}
  .ws-menu{position:static;margin-top:var(--sp-2)}            /* dropdown inline so it isn't clipped */
  .metric-grid{grid-template-columns:1fr}             /* single-column stat cards on phones */
  .chan-row{gap:var(--sp-2)}
  .pv-card{max-width:100%}
}

/* ---- Compose two-column + live preview (Buffer-style) ---- */
.sp-grid{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.sp-compose{flex:1;min-width:320px}
.sp-preview-wrap{width:340px;flex:none}
@media (max-width:860px){.sp-preview-wrap{width:100%}}
.pv-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.pv-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pv-avatar{width:38px;height:38px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);flex:none}
.pv-name{font-weight:var(--fw-bold);font-size:var(--fs-base);line-height:1.1}
.pv-handle{font-size:var(--fs-xs);color:var(--muted-2)}
.pv-net{margin-left:auto;display:flex;gap:var(--sp-1)}
.pv-net .chan-dot{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-caption);font-weight:var(--fw-bold);color:#fff}
.pv-text{font-size:var(--fs-base);white-space:pre-wrap;overflow-wrap:anywhere;min-height:20px;color:var(--ink)}
.pv-text.empty{color:var(--muted-2)}
.pv-media{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin-top:10px}
.pv-media.one{grid-template-columns:1fr}
.pv-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:var(--panel-2);border:1px solid var(--line)}
.pv-vid{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm);gap:var(--sp-2);margin-top:10px}
.pv-foot{margin-top:10px;font-size:var(--fs-caption);color:var(--muted-2)}

/* Make native date/time picker icons visible on the dark theme */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(0.85);opacity:.7;cursor:pointer}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{opacity:1}

/* ===== Events page ===== */
.ev-layout{display:flex;gap:var(--sp-4);align-items:flex-start}
.ev-main{flex:1;min-width:0}
.ev-rail{flex:0 0 320px;position:sticky;top:14px;align-self:flex-start}
.ev-imp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--sp-2)}
.ev-imp-card{background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:9px;padding:var(--sp-2) 10px}
.ev-card{transition:box-shadow .2s}
@keyframes evpulse{0%{box-shadow:0 0 0 0 rgba(244,66,54,.5)}100%{box-shadow:0 0 0 14px rgba(244,66,54,0)}}
.ev-flash{animation:evpulse 1.1s ease-out 2}
@media (max-width:900px){.ev-layout{flex-direction:column}.ev-rail{flex-basis:auto;width:100%;position:static}}

/* ===== Compact popup modal (task / event create) ===== */
.jc-modal-overlay{position:fixed;inset:0;background:rgba(4,6,10,.6);display:flex;align-items:flex-start;justify-content:center;z-index:1000;padding:8vh var(--sp-4) var(--sp-5);overflow:auto}
.jc-modal{background:var(--panel,var(--panel-2));border:1px solid var(--line,#2b313c);border-radius:14px;width:100%;max-width:480px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
/* themed confirm / prompt dialogs (replace native confirm()/prompt()) */
/* Confirm/prompt dialogs must ALWAYS sit on top of whatever spawned them — including
   the email modal and its popovers — or they render invisibly behind it and the click
   they're waiting on can never happen. */
.jc-confirm-overlay{align-items:center;padding:var(--sp-4);z-index:10500}
.jc-confirm{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.5);padding:20px 22px;max-width:390px;width:100%;margin:auto}
.jc-confirm-title{font-weight:var(--fw-bold);font-size:var(--fs-base);margin-bottom:var(--sp-2);color:var(--ink)}
/* pre-wrap so a confirmation can show the actual message being sent (line breaks
   and blank lines intact) instead of collapsing it into one blob. */
.jc-confirm-msg{font-size:var(--fs-base);color:var(--ink);line-height:1.45;white-space:pre-wrap;max-height:46vh;overflow:auto}
.jc-confirm-acts{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:18px}
.jc-confirm .jc-c-input{width:100%;margin-top:var(--sp-3);background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-base);outline:none}
.jc-confirm .jc-c-input:focus{border-color:var(--accent)}
/* Pulse chat module — embedded app */
.pulse-embed{display:flex;flex-direction:column;gap:10px}
.pulse-bar{display:flex;align-items:center;gap:var(--sp-2)}
.pulse-frame{width:100%;height:calc(100vh - 250px);min-height:480px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.pulse-hint{margin:var(--sp-0) 0 0}
/* Full-page Pulse module: drop the page title and let chat fill the area.
   The gear (which links to Settings -> Pulse) stays in the header bar. */
body[data-route="pulse"] .page-head h1{display:none}
body[data-route="pulse"] .page-head{margin-bottom:var(--sp-2);min-height:0}
.pulse-frame-full{display:block;width:100%;height:calc(100vh - 118px);min-height:520px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
/* Pulse header button + unread badge + dropdown panel (any module) */
.pulsebtn{border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pulse-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 var(--sp-1);border-radius:9px;background:var(--crit);color:#fff;font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
/* Pulse as a right-docked side panel: slides in from the right and the dashboard
   reflows into the remaining width (body is a flexbox, so padding-right pushes
   the nav + content over). Stays open beside your work; toggle with the bubble. */
.pulse-pop{position:fixed;top:0;right:0;height:100vh;width:min(460px,92vw);background:var(--panel);border-left:1px solid var(--line);box-shadow:-18px 0 50px rgba(0,0,0,.4);z-index:99996;display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .22s ease,left .2s ease,width .2s ease}
.pulse-pop.open{transform:translateX(0)}
/* Expanded: stretch from the JC left nav (left set inline in JS) to the right edge. */
.pulse-pop.wide{width:auto}
/* While expanded, hide the floating corner bubble — close via the header ✕. */
body.jc-pulse-wide .pulse-fab{display:none}
body{transition:padding-right .22s ease}
body.jc-pulse-docked{padding-right:min(460px,92vw)}
body.jc-pulse-docked .pulse-fab{right:calc(min(460px,92vw) + 22px);transition:right .22s ease}
.pulse-nav-btn{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;line-height:1}
.pulse-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.pulse-nav-btn svg{flex:none}
/* Match Pulse's typeface (Inter) across the whole dock chrome. */
.pulse-pop,.pulse-dm-menu,.pulse-fab{font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.pulse-dm-menu{position:absolute;z-index:50;width:256px;max-width:300px;display:flex;flex-direction:column;gap:3px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);padding:var(--sp-2)}
.pulse-dm-head{padding:var(--sp-2) var(--sp-2) var(--sp-1);color:var(--muted);font-size:var(--fs-xs);font-weight:500}
.pulse-dm-list{display:flex;flex-direction:column;gap:var(--sp-0);max-height:300px;overflow:auto}
.pulse-dm-item{display:flex;align-items:center;gap:8px;width:100%;color:var(--ink);padding:6px 8px;border:0;background:transparent;text-align:left;font-family:inherit;border-radius:8px;font-size:13px;cursor:pointer;transition:background .1s ease}
.pulse-dm-item:hover{background:color-mix(in srgb, var(--accent) 16%, transparent)}
.pulse-dm-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:5px}
.pulse-dm-chips:empty{display:none;margin:0}
.pulse-dm-chip{display:inline-flex;align-items:center;gap:2px;background:color-mix(in srgb, var(--accent) 22%, transparent);color:var(--ink);border-radius:999px;padding:2px 3px 2px 9px;font-size:12px;line-height:1.4;white-space:nowrap}
.pulse-dm-chip-x{border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.pulse-dm-chip-x:hover{color:var(--accent)}
.pulse-dm-search{width:100%;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px;font-family:inherit;padding:7px 9px;margin-bottom:4px;outline:none}
.pulse-dm-search:focus{border-color:var(--accent)}
.pulse-dm-search::placeholder{color:var(--muted)}
.pulse-dm-cb{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;margin:0;cursor:pointer;border:1.5px solid var(--line);border-radius:5px;background:var(--panel);display:inline-grid;place-content:center;transition:background .1s ease,border-color .1s ease}
.pulse-dm-cb:hover{border-color:var(--accent)}
.pulse-dm-cb:checked{background:var(--accent);border-color:var(--accent)}
.pulse-dm-cb:checked::after{content:"";width:5px;height:9px;border:solid #0f1115;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:var(--sp-0)}
.pulse-dm-av{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:none;background:var(--panel)}
.pulse-dm-av-ph{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#0f1115;font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.pulse-dm-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.pulse-dm-go{margin-top:3px;background:var(--accent);color:#0f1115;border:0;border-radius:7px;padding:var(--sp-2) 10px;font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer}
.pulse-dm-go:hover{filter:brightness(1.06)}
.pulse-dm-load{padding:10px var(--sp-3)}
.pulse-pop-bar{display:flex;align-items:center;gap:var(--sp-2);padding:10px var(--sp-3);border-bottom:1px solid var(--line);font-size:var(--fs-base)}
.pulse-pop-btn{background:transparent;border:0;color:var(--muted);cursor:pointer;display:inline-flex;padding:var(--sp-1);border-radius:6px}
.pulse-pop-btn:hover{color:var(--accent);background:var(--panel-2)}
.pulse-pop-body{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.pulse-pop-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--panel);z-index:1}
.pulse-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:pulse-spin .8s linear infinite}
@keyframes pulse-spin{to{transform:rotate(360deg)}}
.pulse-pop-frame{flex:1;width:100%;border:0;background:var(--panel)}
.pulse-pop-foot{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line)}
.pulse-pop-empty{padding:18px;text-align:center}
@media (max-width:560px){ .pulse-pop{width:100vw} body.jc-pulse-docked{padding-right:0} body.jc-pulse-docked .pulse-fab{right:22px} }
/* Floating corner chat widget — the bubble replaces the old header button. */
#pulse-launch{display:none}
.pulse-fab{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;background:var(--accent);color:#0f1115;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:99997;transition:transform .15s ease,background .15s ease}
.pulse-fab:hover{transform:translateY(-2px)}
.pulse-fab.open{background:var(--panel-2);color:var(--ink)}
.pulse-fab-ico{display:inline-flex;line-height:0}
.pulse-fab-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 var(--sp-1);border-radius:11px;background:var(--crit);color:#fff;font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.pulse-pop-btn.on{color:var(--crit)}
/* On the full-page Pulse module the bubble is redundant — hide it there. */
body[data-route="pulse"] .pulse-fab{display:none}
.jc-modal h3{margin:0 0 14px;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.jc-modal-x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--muted);background:none;border:none;font-size:var(--fs-lg);line-height:1}
.jc-mrow{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-2)}
.jc-mrow > label{width:78px;flex:0 0 78px;color:var(--muted);font-size:var(--fs-xs)}
.jc-mfield{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:var(--sp-2) 10px;font-size:var(--fs-sm)}
.jc-modal-foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-2);margin-top:14px}
/* Form-submission viewer (redesign): each submission is a card with a header strip
   and stacked question/answer fields — uppercase label, readable answer below. */
.fmsub-link{margin-bottom:6px;word-break:break-all}
.fmsub-link a{color:var(--lead)}
.fmsub-count{margin-bottom:12px;font-weight:600}
.fmsub-card{border:1px solid var(--line);border-radius:10px;margin:0 0 12px;overflow:hidden;background:var(--panel-2)}
.fmsub-head{display:flex;align-items:center;gap:6px;padding:9px 14px;font-size:12px;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--line)}
.fmsub-head svg{opacity:.7;flex:none}
.fmsub-sep{opacity:.5}
.fmsub-task{color:var(--lead);text-decoration:none;font-weight:600}
.fmsub-task:hover{text-decoration:underline}
.fmsub-fields{padding:2px 14px 8px}
.fmsub-field{padding:9px 0;border-top:1px solid var(--line)}
.fmsub-field:first-child{border-top:0}
.fmsub-q{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin-bottom:3px}
.fmsub-a{font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.fmsub-a.empty{color:var(--muted-2)}
.fmsub-empty{padding:24px;text-align:center}
.tk-quick{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.tk-quick button{background:var(--panel-2);color:var(--muted-2);border:1px solid var(--line,#2b313c);border-radius:6px;padding:3px var(--sp-2);font-size:var(--fs-caption);cursor:pointer}
.tk-quick button:hover{color:var(--ink);border-color:var(--muted-2)}
.tk-switch{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.tk-daypick{display:flex;gap:var(--sp-1)}
.tk-day{width:28px;height:28px;border-radius:6px;border:1px solid var(--line,#2b313c);background:var(--panel-2);color:var(--muted-2);font-size:var(--fs-xs);cursor:pointer;display:flex;align-items:center;justify-content:center}
.tk-day.on{background:var(--ws-insights);border-color:var(--ws-insights);color:#fff;font-weight:var(--fw-medium)}
.tk-datebtn{text-align:left;cursor:pointer}
.tk-datepop{position:fixed;z-index:1100;display:flex;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:12px;box-shadow:0 16px 50px rgba(0,0,0,.6);overflow:hidden}
.tk-datepop .dp-cal{padding:10px var(--sp-3);border-right:1px solid var(--line,#2b313c);width:236px}
.tk-datepop .dp-quick{width:184px;padding:var(--sp-2)}
.dp-q{display:flex;justify-content:space-between;gap:10px;padding:var(--sp-2) 10px;border-radius:7px;cursor:pointer;font-size:var(--fs-sm);color:var(--ink)}
.dp-q:hover{background:var(--lead-soft)}
.dp-q .d{color:var(--muted)}
.dp-q.clear{color:var(--danger)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}
.dp-head button{background:none;border:none;color:var(--muted-2);cursor:pointer;font-size:var(--fs-base);padding:var(--sp-0) var(--sp-2)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-0)}
.dp-dow{font-size:var(--fs-caption);color:var(--muted);text-align:center;padding-bottom:var(--sp-0)}
.dp-day{text-align:center;font-size:var(--fs-xs);padding:var(--sp-1) 0;border-radius:6px;cursor:pointer}
.dp-day:hover{background:var(--panel-2,var(--panel-2));outline:1px solid var(--line,#2b313c)}
.dp-day.other{color:var(--muted-2);opacity:.45}
.dp-day.today{color:#5aa0e6;font-weight:var(--fw-bold)}
.dp-day.sel{background:var(--ws-insights);color:#fff}

/* ===== Planner (Motion-style) ===== */
.sc-head{margin-bottom:var(--sp-2)}
.sc-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-3);flex-wrap:wrap}
.sc-title{margin:0;min-width:230px;text-align:center;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.sc-ctrl{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:var(--sp-2) var(--sp-2);font-size:var(--fs-sm)}
.sc-nav{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-md);line-height:1}
.sc-add-wrap{position:relative}
.sc-new-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:10px;padding:var(--sp-1);min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.sc-new-item{padding:var(--sp-2) var(--sp-3);border-radius:7px;font-size:var(--fs-base);cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:var(--sp-2)}
.sc-new-item:hover{background:var(--lead-soft)}
.sc-layout{display:flex;gap:var(--sp-4);align-items:flex-start}
.sc-grid-wrap{flex:1;min-width:0}
.sc-rail{width:290px;flex:0 0 290px;transition:width .14s ease}
.sc-rail.collapsed{width:0;flex-basis:0;overflow:hidden;opacity:0;pointer-events:none}
.sc-set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin:0 0 var(--sp-2)}
.sc-set-row .sc-ctrl{flex:0 0 auto}
/* Calendar color swatches */
.sc-cal-row{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2);font-size:var(--fs-sm)}
.sc-cal-row input[type=checkbox]{flex:0 0 auto}
.sc-cal-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.25);cursor:pointer;flex:0 0 auto}
.sc-swatch-pop{position:absolute;z-index:60;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:8px;padding:var(--sp-2);display:flex;flex-wrap:wrap;gap:var(--sp-1);width:118px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sc-swatch-opt{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid rgba(255,255,255,.2)}
/* Hover-to-complete dot on a scheduled task block */
.sc-block .sc-done-dot{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.25);display:none;align-items:center;justify-content:center;cursor:pointer;font-size:var(--fs-caption);line-height:1;color:#fff}
.sc-block:hover .sc-done-dot{display:flex}
.sc-block .sc-done-dot:hover{background:var(--success);border-color:var(--success)}
/* Planner "thinking" spinner. Reuses the existing pulse-spin keyframe rather than
   declaring a second identical rotate — one less thing to keep in step. */
.sc-spin{animation:pulse-spin .7s linear infinite}
@media (prefers-reduced-motion:reduce){.sc-spin{animation-duration:2s}}

/* ===== Buffer-style Social experience ===== */
.sq-shell{margin:0 0 var(--sp-4)}
/* Account-group switcher (Main / Kids / Youth) */
.sq-grouprow{display:inline-flex;gap:3px;margin-bottom:var(--sp-3);background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.sq-group{appearance:none;border:none;background:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:var(--sp-2) 14px;border-radius:7px;cursor:pointer;white-space:nowrap}
.sq-group:hover{color:var(--ink)}
.sq-group.active{background:var(--ink);color:var(--bg)}
.sq-grouptag{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.02em;text-transform:uppercase;color:var(--accent);background:rgba(244,66,54,.14);border:1px solid rgba(244,66,54,.45);border-radius:5px;padding:1px var(--sp-2);margin-left:var(--sp-2);vertical-align:middle}
.sq-shell-top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:10px}
.sq-rail{display:flex;align-items:center;gap:var(--sp-2);flex:1;min-width:0;flex-wrap:wrap}
.sq-newpost{flex:0 0 auto;padding:var(--sp-2) var(--sp-4);font-weight:var(--fw-medium);background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.sq-newpost:hover{background:var(--panel-2)}
/* Buffer-style primary "New Post" CTA in the sidebar, under the workspace switcher. */
.nav-newpost{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;margin:var(--sp-0) 0 var(--sp-3);padding:var(--sp-3) 14px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:24px;font-weight:var(--fw-bold);font-size:var(--fs-base);line-height:1;cursor:pointer;font-family:inherit}
.nav-newpost:hover{filter:brightness(1.04)}
.nav-newpost .nav-newpost-plus{font-size:var(--fs-md);font-weight:var(--fw-medium)}
.sidebar.collapsed .nav-newpost{padding:var(--sp-3) 0;gap:0}
.sidebar.collapsed .nav-newpost .nav-newpost-lbl{display:none}
.sq-tabs{display:flex;gap:var(--sp-0);border-bottom:1px solid var(--line,#2b313c);flex-wrap:wrap}
.sq-tab{padding:var(--sp-2) 14px;font-size:var(--fs-base);color:var(--muted,#9aa4b2);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500}
.sq-tab:hover{color:var(--ink,#e8ecf2)}
.sq-tab.active{color:var(--ink,#e8ecf2);border-bottom-color:var(--lead,#3b6fb0);font-weight:var(--fw-medium)}
.sq-tabn{display:inline-block;min-width:18px;text-align:center;font-size:var(--fs-caption);background:var(--line,#2b313c);color:var(--ink,#e8ecf2);border-radius:9px;padding:0 var(--sp-1);margin-left:3px}
.sq-tab.active .sq-tabn{background:var(--lead,#3b6fb0);color:#fff}
.sq-daygroup{margin:0 0 18px}
.sq-dayhdr{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--muted,#9aa4b2);text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-2) 0;border-bottom:1px solid var(--line,#2b313c);margin-bottom:var(--sp-2)}
.sq-card{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:12px;padding:var(--sp-3) 14px;margin:0 0 var(--sp-2)}
.sq-card-time{flex:0 0 70px;font-size:var(--fs-base);color:var(--ink,#e8ecf2);padding-top:var(--sp-0)}
.sq-card-body{flex:1;min-width:0}
.sq-card-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-1)}
.sq-card-acts{margin-left:auto;display:flex;gap:var(--sp-1);flex-wrap:wrap;opacity:0;transition:opacity .12s}
.sq-card:hover .sq-card-acts{opacity:1}
.sq-card-acts .btn{padding:3px 10px;font-size:var(--fs-xs)}
.sq-card-text{font-size:var(--fs-base);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.sq-pill{font-size:var(--fs-caption);padding:1px var(--sp-2);border-radius:10px;text-transform:capitalize}
.sq-chrow{display:flex;align-items:center;gap:var(--sp-3);padding:10px 0;border-top:1px solid var(--line,#2b313c)}
/* Channels, grouped by ministry (Settings → Social). One row per ministry with its
   own + per platform, so an add is always scoped to the row it was clicked in.
   Replaces the flat list + single Add form, which could only ever save to 'main'. */
.sq-chgroup{padding:12px 0;border-top:1px solid var(--line,#2b313c)}
.sq-chgroup:first-of-type{border-top:none;padding-top:4px}
.sq-chgroup-hd{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.02em;margin-bottom:8px}
.sq-chgroup-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sq-chpill{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--line,#2b313c);max-width:100%}
.sq-chpill.off{opacity:.55}
.sq-chpill-txt{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.sq-chpill-b{background:none;border:0;color:var(--muted);cursor:pointer;padding:0 2px;line-height:1;font-size:var(--fs-xs)}
.sq-chpill-b:hover{color:var(--ink)}
.sq-chadd-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:transparent;border:1px dashed var(--line,#2b313c);color:var(--muted);
  font-size:var(--fs-xs);cursor:pointer}
.sq-chadd-pill:hover{color:var(--ink);border-color:var(--lead);border-style:solid}
@media (max-width:560px){.sq-chpill-txt{max-width:130px}}
.sq-chrow:first-of-type{border-top:none}
.sq-schgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2)}
.sq-schcol{background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:8px;padding:var(--sp-2) var(--sp-2);min-height:90px}
.sq-schhdr{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted,#9aa4b2);text-align:center;margin-bottom:var(--sp-2)}
.sq-slotchip{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb, var(--lead,#3b6fb0) 13%, transparent);color:var(--ink,#e8ecf2);border-radius:6px;padding:3px var(--sp-2);font-size:var(--fs-xs);margin-bottom:var(--sp-1)}
.sq-slotchip a{color:var(--danger);text-decoration:none;margin-left:var(--sp-1)}
@media(max-width:760px){.sq-schgrid{grid-template-columns:repeat(2,1fr)}.sq-card-acts{opacity:1}}

/* ============================================================
   Mobile / touch pass — make every surface usable on a phone.
   These rules live last so they win over the component defaults.
   ============================================================ */
@media (max-width: 760px) {
  /* Board: columns stack full-width and are comfortably tappable. */
  #task-board{flex-direction:column;gap:10px}
  #task-board .tk-col{width:100%!important;flex:1 1 auto!important;min-width:0!important}
  /* Toolbars / filter rows wrap instead of overflowing. */
  .sc-toolbar,.sq-shell-top,.sq-rail{flex-wrap:wrap}
  .sc-title{min-width:0;width:100%;font-size:var(--fs-lg)}
  /* Planner: rail drops below the grid; grid scrolls sideways if needed. */
  .sc-layout{flex-direction:column}
  .sc-rail{width:100%!important;flex:1 1 auto!important}
  .sc-rail.collapsed{display:none}
  .sc-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Modals: use the screen — small top inset, room to scroll, capped height. */
  .jc-modal-overlay{padding:4vh 10px var(--sp-4);align-items:flex-start}
  .jc-modal{max-width:100%!important;width:100%;padding:var(--sp-4);max-height:92vh;overflow:auto}
  .jc-mrow{flex-wrap:wrap}
  .jc-mrow > label{width:100%;flex:1 1 100%}
  /* Date popup: stack the calendar over the quick list, never overflow. */
  .tk-datepop{flex-direction:column;max-width:94vw;max-height:80vh;overflow:auto}
  .tk-datepop .dp-cal{border-right:none;border-bottom:1px solid var(--line,#2b313c);width:100%}
  .tk-datepop .dp-quick{width:100%}
  /* Buffer post card: time sits above the body. */
  .sq-card{flex-direction:column;gap:var(--sp-2)}
  .sq-card-time{flex-basis:auto}
  /* Toasts span the width so they're readable on a narrow screen. */
  #jc-toasts{left:12px!important;right:12px!important}
  #jc-toasts > div{max-width:none!important}
}
@media (max-width: 480px) {
  /* Tighter type + spacing on small phones. */
  .content{padding:14px var(--sp-3) 44px}
  .page-head h1{font-size:var(--fs-lg)}
  /* Tap targets: give buttons a little more height. */
  .btn{padding:var(--sp-2) 14px}
  .sidebar nav a{padding:var(--sp-2) var(--sp-3)}
}

/* ============================================================
   Buffer-style Queue (rebuilt cards + toolbar)
   ============================================================ */
.sq-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-0) 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.sq-allchan{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-bold);font-size:var(--fs-md)}
.sq-tb-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Posts / Reels / Stories toggle (30 Sep 2026). Uses the List / Calendar pill look. */
.sq-tb-left{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.sq-kt-n{font-size:var(--fs-xs);color:var(--muted-2);font-variant-numeric:tabular-nums}
.sq-kt.active .sq-kt-n{color:var(--ink)}
.sq-viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.sq-vt{background:var(--panel-2);border:none;color:var(--muted);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);cursor:pointer;font:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:var(--sp-1)}
.sq-vt:hover{color:var(--ink)}
.sq-vt.active{background:var(--lead-soft);color:var(--ink);font-weight:var(--fw-medium)}
.sq-ddl{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:var(--sp-2) 10px;font-size:var(--fs-sm);cursor:pointer}
.sq-tz{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--muted);font-size:var(--fs-sm)}

.sq-row{display:flex;gap:var(--sp-4);align-items:flex-start;margin:0 0 14px}
.sq-row-time{flex:0 0 84px;text-align:right;padding-top:15px}
.sq-row-time b{font-size:var(--fs-base);color:var(--ink)}
.sq-row-type{font-size:var(--fs-xs);color:var(--muted-2);margin-top:3px;white-space:nowrap}
.sq-row-cards{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

.sq-postcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.sq-postcard-top{display:flex;gap:14px;padding:14px var(--sp-4)}
.sq-postcard-body{flex:1;min-width:0}
.sq-acct-row{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-2)}
.sq-acct-meta{min-width:0}
.sq-acct-name{font-weight:var(--fw-bold);font-size:var(--fs-base);line-height:1.2}
.sq-acct-sub{font-size:var(--fs-xs);color:var(--muted-2)}
.sq-tagpill{margin-left:auto;flex:0 0 auto}
/* What the card goes out as on that channel: Reel, Story, Feed post (28 Sep 2026).
   Neutral for a normal post, accent for a Reel, amber for a Story because it
   disappears after 24 hours, red when the publisher will drop or refuse it. */
.sq-kind{flex:0 0 auto;font-size:var(--fs-caption,11px);font-weight:var(--fw-bold,700);text-transform:uppercase;
  letter-spacing:.05em;line-height:1.5;padding:1px 8px;border-radius:var(--radius-pill,999px);
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.sq-kind.k-reel{color:var(--accent);border-color:currentColor}
.sq-kind.k-story{color:var(--warn);border-color:currentColor}
.sq-kind.k-bad{color:var(--danger);border-color:currentColor}
.sq-text{font-size:var(--fs-base);line-height:1.5;color:var(--ink);word-break:break-word}
.sq-text.muted{color:var(--muted-2)}
.sq-text .sq-more,.sq-text .sq-less{color:var(--muted);text-decoration:none;font-weight:var(--fw-medium);white-space:nowrap}
.sq-text .sq-more:hover,.sq-text .sq-less:hover{color:var(--ink)}
.sq-replyrow{margin-top:var(--sp-2);color:var(--muted);font-size:var(--fs-sm)}
.sq-media{flex:0 0 auto;display:grid;gap:var(--sp-1);width:152px}
.sq-media-1{grid-template-columns:1fr}
.sq-media-2,.sq-media-3,.sq-media-4{grid-template-columns:1fr 1fr}
.sq-mthumb{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.sq-media-1 .sq-mthumb{aspect-ratio:4/3}
.sq-mthumb img{width:100%;height:100%;object-fit:cover;display:block}
.sq-mthumb-vid{display:flex;align-items:center;justify-content:center;color:#fff;background:var(--panel-2)}
.sq-mplay{font-size:var(--fs-lg);opacity:.85}
.sq-mthumb-more{position:absolute;inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-md);pointer-events:none}
/* pointer-events:none lets the hover zoom reach the image under the "+2" (28 Sep 2026). */

/* Sent post engagement strip + live-post link */
.sq-sentstrip{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sq-stats{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}
.sq-stat{font-size:var(--fs-sm)}
.sq-stat b{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink);margin-right:4px}
.sq-viewpost{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--accent);text-decoration:none;white-space:nowrap;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:8px;padding:4px 12px}
.sq-viewpost:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.sq-postcard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:var(--sp-2) 14px var(--sp-2) var(--sp-4);border-top:1px solid var(--line);flex-wrap:wrap}
.sq-byline{font-size:var(--fs-xs);color:var(--muted-2);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.sq-footacts{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.sq-iconbtn{padding:var(--sp-1) 10px;font-size:var(--fs-base);line-height:1}
.sq-pub{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
.sq-ovf{position:relative;display:inline-block}
.sq-ovf-menu{position:absolute;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:var(--sp-1);min-width:172px;z-index:60;display:none}
.sq-ovf.open .sq-ovf-menu{display:block}
.sq-ovf-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:var(--sp-2) 10px;border-radius:7px;cursor:pointer}
.sq-ovf-item:hover{background:var(--panel-2)}

@media (max-width: 760px) {
  .sq-row{flex-direction:column;gap:var(--sp-2)}
  .sq-row-time{flex-basis:auto;text-align:left;padding-top:0;display:flex;gap:var(--sp-2);align-items:baseline}
  .sq-row-type{margin-top:0}
  .sq-postcard-top{flex-direction:column}
  .sq-media{width:100%;grid-template-columns:repeat(4,1fr)}
  .sq-toolbar{align-items:flex-start}
}

/* ---- Social Calendar: Buffer-style full-height month grid ---- */
.cal-month{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
/* Bold weekday header row (full names, abbreviated on narrow screens) */
.cal-dow{padding:var(--sp-3) var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel-2)}
.cal-dow-ab{display:none}
/* Month day cells scale with the viewport so a month fills the screen like Buffer.
   Sizing is scoped to .cal-month so the week/day views (which set their own inline
   min-height) are not clipped. */
.cal-cell{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}
.cal-month .cal-cell{min-height:clamp(120px,16vh,220px);padding:var(--sp-2) var(--sp-2);overflow:hidden}
.cal-cell.today{background:rgba(90,160,120,.08)}
.cal-empty{cursor:default;background:var(--panel-2)}
.scal-chip{position:relative;display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);line-height:1.3;margin-bottom:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:7px;overflow:hidden;min-height:34px;transition:box-shadow .12s,filter .12s,transform .06s}
.scal-chip:hover{filter:brightness(1.18);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 3px 10px rgba(0,0,0,.32)}
.scal-chip .scal-time{flex:0 0 auto;font-weight:var(--fw-bold);color:var(--ink);opacity:.85}
.scal-chip .scal-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
/* Status dot replaces the colored stripe and tint (30 Sep 2026). */
.scal-chip{background:var(--panel-2);border:1px solid var(--line)}
.scal-sdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.scal-sdot.s-ok{background:var(--success)}
.scal-sdot.s-bad{background:var(--danger)}
.scal-sdot.s-wait{background:#c8843f}
.scal-sdot.s-draft{background:transparent;border:1.5px solid var(--muted);width:7px;height:7px;box-sizing:border-box}
/* What the chip goes out as: Post, Reel, Story (30 Sep 2026). Small so the caption keeps its room. */
.scal-kind{flex:0 0 auto;font-size:10px;font-weight:var(--fw-bold,700);text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);white-space:nowrap}
/* The day a campaign points at: an event, a series launch, a project date (23 Sep 2026).
   A thin labelled bar at the top of the day rather than a chip, so it reads as a
   marker for the posts around it and never as one more post. */
.scal-moment{display:flex;align-items:center;gap:5px;font-size:var(--fs-caption,11px);font-weight:var(--fw-bold,700);line-height:1.2;
  margin:0 0 var(--sp-1);padding:3px 7px;border-radius:6px;text-decoration:none;color:var(--ink);
  background:var(--accent-soft,rgba(47,134,207,.16));border-left:3px solid var(--accent)}
.scal-moment span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scal-moment:hover{filter:brightness(1.15)}
.scal-moment.k-series{border-left-color:#c45b9c;background:rgba(196,91,156,.14)}
.scal-moment.k-project{border-left-color:#e0a43f;background:rgba(224,164,63,.14)}
.scal-thumb{flex:0 0 auto;width:30px;height:30px;border-radius:5px;object-fit:cover;border:1px solid var(--line)}
/* A row planned on the Schedule board, shown here once it is scheduled or posted
   (Adam, 22 Sep 2026). Dashed and unfilled on purpose: it has to be legible as a
   PLAN at a glance, not mistaken for a post that is really queued to send. */
.scal-plan{background:transparent !important;border:1px dashed var(--line) !important;
  border-left:3px solid var(--muted) !important;opacity:.92}
.scal-plantag{flex:0 0 auto;font-size:var(--fs-caption,11px);font-weight:var(--fw-bold,700);
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--radius-pill,999px);padding:0 6px}
/* Video thumbnails (jcVidThumb in app.js, 22 Sep 2026). A Reel has no stored poster
   image, so the <video> element draws its own first frame and these rules size the
   wrapper rather than an <img>. The badge is what says "this plays"; clicking
   anywhere on one opens the player. Three sizes, one per place a still would sit. */
.jc-vthumb{position:relative;display:inline-block;overflow:hidden;cursor:pointer;flex:0 0 auto;line-height:0;background:#000}
.jc-vthumb video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.jc-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));pointer-events:none}
/* In a month-grid chip, standing in for the 30px still. */
.scal-thumb.jc-vthumb .jc-vplay{border-width:4px 0 4px 7px}
/* In the hover card, where it is the full width of the card. */
.scal-hv-vthumb{width:100%;display:block;border-radius:8px}
.scal-hv-vthumb video{height:auto;max-height:300px;object-fit:contain}
.scal-hv-vthumb .jc-vplay{border-width:12px 0 12px 20px}
/* In the day list, filling the 64px square. */
.scal-d-vthumb{width:100%;height:100%;border-radius:8px}
/* In a Queue card, filling the media tile so a Reel can be watched before it posts. */
.sq-vthumb{display:block;width:100%;height:100%}
.sq-vthumb .jc-vplay{border-width:12px 0 12px 20px}
.sq-vthumb:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Per-post "⋯" menu button (revealed on hover) + its popup */
.scal-menu{position:absolute;right:3px;top:50%;transform:translateY(-50%);appearance:none;border:none;cursor:pointer;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1;color:var(--ink);background:rgba(20,24,31,.85);opacity:0;transition:opacity .12s;padding:0}
.scal-chip:hover .scal-menu{opacity:1}
.scal-menu:hover{background:var(--accent);color:#0c130f}
.scal-cmenu{position:absolute;z-index:9999;min-width:184px;background:var(--panel,#161b24);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.5);padding:var(--sp-1)}
.scal-cmenu-item{display:block;width:100%;text-align:left;appearance:none;border:none;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:var(--sp-2) 10px;border-radius:6px;cursor:pointer}
.scal-cmenu-item:hover{background:var(--panel-2)}
.scal-cmenu-item.danger{color:var(--danger)}
/* Past calendar days: a slight overlay so it's clear they've already happened */
.cal-cell.cal-past::after{content:"";position:absolute;inset:0;background:rgba(128,128,128,.14);pointer-events:none;z-index:1}
.cal-cell.cal-past .cal-daynum{opacity:.5}
/* Rich hover preview card for a calendar chip (Duplicate / Repost) */
.scal-hover{position:absolute;z-index:10000;width:400px;max-width:94vw;background:var(--panel,#161b24);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(0,0,0,.5);padding:16px;color:var(--ink)}
.scal-hv-head{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.scal-hv-media{margin:0 0 10px;border-radius:8px;overflow:hidden;max-height:300px}
.scal-hv-media img{width:100%;height:auto;display:block;object-fit:cover}
.scal-hv-text{font-size:var(--fs-md,15px);line-height:1.45;max-height:170px;overflow:auto;white-space:pre-wrap;margin-bottom:12px}
.scal-hv-acts{display:flex;gap:8px}
.scal-hv-acts .btn{flex:1;padding:5px 8px;font-size:var(--fs-xs)}
.scal-hv-expand{margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:2px 4px;align-self:flex-start}
.scal-hv-expand:hover{color:var(--ink)}
.scal-hv-stats{display:flex;gap:18px;padding:10px 0;margin:2px 0 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scal-hv-stats .shv-n{font-size:16px;font-weight:800;color:var(--ink);line-height:1.1}
.scal-hv-stats .shv-l{font-size:11px;color:var(--muted)}
.scal-hv-comments{background:transparent;border:0;color:var(--accent);font-size:12px;cursor:pointer;padding:0 0 10px;text-align:left;display:block}
.scal-hv-comments:hover{text-decoration:underline}
/* Composer footer overflow menu (opens upward, sits bottom-right of the popup) */
.sp-ovf{position:relative;display:inline-flex}
.sp-ovf-menu{position:absolute;bottom:calc(100% + 6px);right:0;min-width:190px;background:var(--panel,#161b24);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.5);padding:var(--sp-1);z-index:60}
.sp-ovf-item{display:block;width:100%;text-align:left;appearance:none;border:none;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);border-radius:6px;cursor:pointer}
.sp-ovf-item:hover{background:var(--panel-2)}
.sp-ovf-item.danger{color:var(--danger)}
/* Hashtag group preview (inside the composer "#" tool) */
.sp-hgprev{margin-top:var(--sp-2);background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:var(--sp-2) var(--sp-3)}
.sp-hgprev-head{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
.sp-hgprev-count{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--accent);background:rgba(244,66,54,.14);border:1px solid rgba(244,66,54,.4);border-radius:6px;padding:1px var(--sp-2)}
.sp-hgprev-acts{margin-left:auto;display:inline-flex;gap:var(--sp-1)}
.sp-hgprev-acts button{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:var(--fs-xs);padding:3px 10px;border-radius:6px;cursor:pointer}
.sp-hgprev-acts button:hover{border-color:var(--accent);color:var(--accent)}
.sp-hgprev-acts .sp-hg-del:hover{border-color:var(--danger);color:var(--danger)}
.sp-hgprev-tags{margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:1.5;color:var(--accent);word-break:break-word}
/* Buffer-style day cell: rounded date pill, hover add (+), "+N More" link */
.cal-daynum{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:50%;font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-bottom:var(--sp-2);color:var(--muted)}
/* Today: Buffer-style filled circle around the date number with a soft halo ring. */
.cal-daynum.today{color:#0c130f;background:var(--accent);font-weight:var(--fw-bold);box-shadow:0 0 0 3px rgba(90,160,120,.25)}
.cal-add{appearance:none;font:inherit;padding:0;cursor:pointer;position:absolute;top:7px;right:9px;width:25px;height:25px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);line-height:1;color:var(--accent);background:var(--panel-2);border:1px solid var(--line);opacity:0;transition:opacity .12s;text-decoration:none;z-index:2}
.cal-cell:hover .cal-add{opacity:1}
.cal-add:hover{background:var(--accent);color:#0c130f;border-color:var(--accent)}
.cal-more{color:var(--muted);font-weight:var(--fw-medium);font-size:var(--fs-caption);padding:3px var(--sp-1);cursor:pointer}
.cal-more:hover{color:var(--accent)}
@media (max-width:900px){.cal-dow-full{display:none}.cal-dow-ab{display:inline}.cal-dow{text-align:center;padding:var(--sp-2) var(--sp-1)}.cal-month .cal-cell{min-height:96px}}
/* Character counter hidden in the composer (per request) */
#sp-count{display:none !important}
.scal-ditem{border:1px solid var(--line);border-radius:10px;padding:var(--sp-3);margin-top:10px;background:var(--panel)}
.scal-dhead{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-2)}
.scal-dacct{font-weight:var(--fw-bold);font-size:var(--fs-base);line-height:1.2}
.scal-dtext{font-size:var(--fs-base);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.scal-dacts{display:flex;gap:var(--sp-2);margin-top:10px;flex-wrap:wrap}
.scal-dacts .btn{padding:3px var(--sp-3);font-size:var(--fs-xs)}
.scal-dmedia{display:flex;gap:var(--sp-1);margin-top:var(--sp-2);flex-wrap:wrap}
.scal-dthumb{width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);flex:0 0 auto}
.scal-dthumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Retired 22 Sep 2026: the day list drew a flat play glyph in a grey box where a
   video should be. It now shows the video's own first frame (.scal-d-vthumb above),
   so nothing emits this class any more. Left as a tombstone rather than deleted
   because the class name still reads like something that should exist. */

/* ---- Channel rail: connection dot + queued count (Buffer's left list) ---- */
.sq-chan{position:relative;display:inline-flex}
.sq-chan-dot{position:absolute;top:-1px;left:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid var(--bg,#0f1218)}
.sq-chan-count{position:absolute;top:-7px;right:-7px;min-width:16px;height:16px;padding:0 var(--sp-1);border-radius:9px;background:var(--lead,#3b6fb0);color:#fff;font-size:var(--fs-caption);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--bg,#0f1218)}

/* ---- Slide-over composer (open New Post / edit over the Queue) ---- */
.jc-composer-overlay{position:fixed;inset:0;background:rgba(4,6,10,.6);z-index:2000;display:flex;align-items:flex-start;justify-content:center;padding:4vh var(--sp-4);overflow:auto}
.jc-composer-panel{width:min(1040px,96vw);height:min(900px,92vh);background:var(--bg,#0f1115);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden;animation:jcPop .16s ease}
@keyframes jcPop{from{transform:translateY(10px) scale(.99);opacity:.5}to{transform:none;opacity:1}}
.jc-composer-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:var(--fs-md);font-weight:var(--fw-bold)}
.jc-composer-x{background:none;border:none;color:var(--muted);font-size:var(--fs-lg);line-height:1;cursor:pointer}
.jc-composer-x:hover{color:var(--ink)}
.jc-composer-frame{flex:1 1 auto;min-height:0;width:100%;border:0;background:var(--bg)}
.jc-embed .content{padding:18px 20px 0}
/* Slide-over composer shows only the composer — hide the shell, the page lede,
   and the full-page "Posts" list that the /social view also renders. */
.jc-embed #sq-shell,.jc-embed #sp-posts-card,.jc-embed .lede{display:none}

/* ---- Per-post collaboration comments popover ---- */
.sq-cmtpop{position:absolute;z-index:2100;width:min(330px,92vw);max-height:60vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px}
.sq-cmt-head{font-weight:var(--fw-bold);font-size:var(--fs-sm);margin-bottom:var(--sp-2)}
.sq-cmt-list{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.sq-cmt-item{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-2)}
.sq-cmt-meta{font-size:var(--fs-xs);margin-bottom:3px;display:flex;gap:var(--sp-2);align-items:center}
.sq-cmt-meta .sq-cmt-del{margin-left:auto;color:var(--danger);text-decoration:none;font-size:var(--fs-caption)}
.sq-cmt-body{font-size:var(--fs-sm);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.sq-cmt-add{display:flex;gap:var(--sp-2);align-items:flex-end}
.sq-cmt-ta{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-2);font:inherit;font-size:var(--fs-sm);resize:vertical}
.sq-cmt-send{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-xs);white-space:nowrap}

/* ---- Managed tags: composer multi-select + inline card chips ---- */
.sp-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.sp-tag-chip{border:1px solid var(--tc,#5b7fb0);background:transparent;color:var(--ink);border-radius:14px;padding:3px var(--sp-3);font-size:var(--fs-xs);cursor:pointer;font:inherit;line-height:1.5}
.sp-tag-chip.on{background:var(--tc,#5b7fb0);color:#fff;border-color:var(--tc,#5b7fb0);font-weight:var(--fw-medium)}
.sp-tag-new{border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:14px;padding:3px var(--sp-3);font-size:var(--fs-xs);cursor:pointer;font:inherit}
.sp-tag-new:hover{color:var(--ink);border-color:var(--muted-2)}
.sq-tagpill{font-size:var(--fs-caption);padding:1px var(--sp-2);border-radius:10px;white-space:nowrap}
.sq-tags-inline{margin-left:auto;display:inline-flex;gap:var(--sp-1);flex-wrap:wrap}
.sq-tags-inline .sq-tagpill{margin-left:0}

/* ---- Composer per-network character counts ---- */
#sp-count .sp-cnet{display:inline-flex;align-items:center;gap:3px;margin-right:var(--sp-3);font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
#sp-count .sp-cnet.over{color:var(--danger);font-weight:var(--fw-bold)}

/* ---- Composer media tray (thumbnails + remove + alt-text) ---- */
.sp-tray{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.sp-tray-item{width:96px}
.sp-tray-thumb{position:relative;width:96px;height:96px;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.sp-tray-thumb img{width:100%;height:100%;object-fit:cover}
.sp-tray-vid{font-size:var(--fs-xl);color:#fff}
.sp-tray-x{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;font-size:var(--fs-base);line-height:1;display:flex;align-items:center;justify-content:center}
.sp-tray-alt{width:96px;margin-top:var(--sp-1);background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:3px var(--sp-1);font-size:var(--fs-caption)}
/* Posting-as (ministry account) chip in the composer header */
.sp-hd-group{display:inline-flex;align-items:center;gap:6px}
.sp-hd-group .mlabel{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
/* Post-type selector (Facebook/Instagram): feed Post / Reel / Story — now the primary control */
.sp-ptype-row{display:flex;align-items:center;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
.sp-ptype-row .mlabel{font-weight:var(--fw-bold);color:var(--ink)}
.sp-ptype-seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.sp-ptype-opt{appearance:none;border:none;background:none;color:var(--muted);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:5px 16px;border-radius:7px;cursor:pointer;line-height:1.2}
.sp-ptype-opt:hover{color:var(--ink)}
.sp-ptype-opt.active{background:var(--accent);color:#0c130f;font-weight:var(--fw-bold)}
.sp-ptype-hint{margin-left:2px}
/* "+" tile to append another image/video next to the attached ones */
.sp-tray-add{width:96px;height:96px;flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1.6px dashed var(--line);border-radius:8px;background:var(--panel-2);color:var(--muted);cursor:pointer;font-family:inherit;line-height:1}
.sp-tray-add:hover{border-color:var(--accent);color:var(--accent)}
.sp-tray-add>span:first-child{font-size:var(--fs-xl);font-weight:var(--fw-medium)}
.sp-tray-add-l{font-size:var(--fs-caption)}
/* Drag-to-reorder attached photos (carousel order) */
.sp-tray-thumb[draggable=true]{cursor:grab}
.sp-tray-thumb[draggable=true]:active{cursor:grabbing}
.sp-tray-ord{position:absolute;top:3px;left:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgba(0,0,0,.66);color:#fff;font-size:var(--fs-caption);font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;line-height:1}
.sp-tray-item{transition:opacity .1s}
.sp-tray-item.sp-tray-dragging{opacity:.4}
.sp-tray-item.sp-tray-over .sp-tray-thumb{outline:2px solid var(--accent);outline-offset:1px}

/* ---- Composer OG link preview ---- */
.sp-og{margin-top:var(--sp-3);display:flex;gap:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:480px;background:var(--panel-2);position:relative}
.sp-og img{width:120px;height:90px;object-fit:cover;flex:0 0 auto}
.sp-og-body{padding:var(--sp-2) 10px;min-width:0}
.sp-og-title{font-weight:var(--fw-medium);font-size:var(--fs-sm);line-height:1.3}
.sp-og-desc{font-size:var(--fs-xs);color:var(--muted);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-og-host{font-size:var(--fs-caption);color:var(--muted-2);margin-top:3px}
.sp-og-x{position:absolute;top:4px;right:6px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--fs-md)}

/* ===== Buffer-feel composer ===================================== */
/* Channel selector → round avatar chips (icon only; dim when unselected). */
#sp-platforms{gap:10px}
#sp-platforms .chan{border-radius:50%;padding:0;width:46px;height:46px;justify-content:center;gap:0;background:transparent;border:2px solid transparent;transition:opacity .12s,border-color .12s}
#sp-platforms .chan .chan-name{display:none}
#sp-platforms .chan .chan-dot{width:42px;height:42px;font-size:var(--fs-md);border:2px solid var(--bg,#0f1218)}
#sp-platforms .chan:not(.on){opacity:.45}
#sp-platforms .chan:hover{opacity:1}
#sp-platforms .chan.on{border-color:var(--accent);background:transparent}
/* Roomier, cleaner writing area. */
#sp-text{min-height:150px;line-height:1.5;border-radius:12px}
/* Right-hand preview as its own panel (Buffer's two-pane feel). */
.sp-preview-wrap{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--sp-4);align-self:flex-start}
@media (max-width:860px){.sp-preview-wrap{background:transparent;border:none;padding:0}}
/* Footer action bar: primary publish floats right. */
.sp-actions{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.sp-actions .sp-primary{margin-left:auto;padding:var(--sp-2) 22px;font-weight:var(--fw-medium)}
/* Inside the slide-over the modal IS the frame, so drop the nested card chrome
   and the duplicate title — one clean surface like Buffer. */
.jc-embed #sp-card{border:none;background:transparent;box-shadow:none;padding:0;margin:0}
.jc-embed #sp-card-title{display:none}
.jc-embed #sp-notice{margin:0}
/* Compact media drop tile (Buffer's small dashed bar, not a tall box). */
#sp-media-box{flex-direction:row;justify-content:flex-start;text-align:left;padding:var(--sp-3) 14px;gap:10px}
#sp-media-box .fb-ico{font-size:var(--fs-lg)}
/* Consistent rounded section blocks + roomier rhythm in the composer. */
.sp-compose .mlabel{font-size:var(--fs-xs);letter-spacing:.02em}
.sp-tags{padding:var(--sp-0) 0}
/* Friendlier preview empty state. */
.pv-card .pv-text.empty{font-style:italic}

/* ===== Buffer composer rebuild ===== */
.sp-composer{padding:0;overflow:visible}
.sp-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line)}
.sp-hd-l{display:flex;align-items:center;gap:var(--sp-3)}
.sp-hd-title{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.sp-hd-pill{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:var(--sp-1) 10px;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;font-family:inherit}
.sp-hd-pill:hover,.sp-hd-pill.on{border-color:var(--accent)}
.sp-hd-r{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}
.sp-hd-btn{display:inline-flex;align-items:center;gap:var(--sp-2);background:none;border:1px solid transparent;border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--muted);cursor:pointer;font-family:inherit}
.sp-hd-btn:hover{color:var(--ink);background:var(--panel-2)}
.sp-hd-btn.on{background:var(--lead-soft);color:var(--ink);border-color:var(--accent)}
.sp-caret{font-size:var(--fs-caption);opacity:.7}
.sp-composer .sp-grid{padding:var(--sp-4) 18px}
.sp-grid.sp-nopreview .sp-compose{min-width:100%}
.sp-add-chan{width:46px;height:46px;border-radius:50%;border:1.5px dashed var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-lg);text-decoration:none;flex:none}
.sp-add-chan:hover{border-color:var(--accent);color:var(--ink)}
.sp-aipanel{border:1px solid var(--line);border-radius:12px;padding:var(--sp-3);margin-bottom:var(--sp-3);background:var(--panel-2)}
.sp-editor{position:relative;border:1px solid var(--line);border-radius:14px;padding:var(--sp-3);background:var(--panel)}
.sp-editor:focus-within{border-color:var(--accent)}
#sp-text{width:100%;min-height:150px;line-height:1.5;border:none;background:transparent;color:var(--ink);font-size:var(--fs-base);resize:vertical;outline:none;padding:var(--sp-2) var(--sp-2) 0;font-family:inherit;border-radius:0}
#sp-text::placeholder{color:var(--muted-2)}
.sp-drop{margin-top:10px}
.sp-editor-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--line)}
.sp-tools{display:flex;align-items:center;gap:var(--sp-0)}
.sp-tool-wrap{position:relative}
.sp-tool{display:inline-flex;align-items:center;gap:3px;background:none;border:none;border-radius:7px;padding:var(--sp-1) var(--sp-2);font-size:var(--fs-base);color:var(--muted);cursor:pointer;font-family:inherit;line-height:1}
.sp-tool:hover{background:var(--panel-2);color:var(--ink)}
.sp-count{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.sp-pop{position:absolute;z-index:50;bottom:calc(100% + 8px);left:0;min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:10px}
#sp-media-menu{min-width:190px}
#sp-media-menu button{display:flex;align-items:center;gap:var(--sp-2);width:100%;background:none;border:none;color:var(--ink);text-align:left;padding:var(--sp-2) 10px;border-radius:8px;cursor:pointer;font-size:var(--fs-base);font-family:inherit}
#sp-media-menu button:hover{background:var(--panel-2)}
.sp-pop-block{position:static;bottom:auto;box-shadow:none;margin:0 0 var(--sp-3);min-width:0;background:var(--panel-2)}
.sp-inp{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) 10px;font-size:var(--fs-sm);font-family:inherit}
.sp-pernet-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);cursor:pointer;margin-top:14px}
.sp-emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-0);max-width:280px}
.sp-emoji{background:none;border:none;font-size:var(--fs-lg);padding:var(--sp-1);border-radius:6px;cursor:pointer;line-height:1}
.sp-emoji:hover{background:var(--panel-2)}
.sp-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line);background:var(--panel-2)}
/* In the slide-over composer (iframe) pin the publish bar to the bottom so the
   Post Now / Schedule Post / Save draft actions are ALWAYS visible, never below the fold. */
.jc-embed .sp-foot{position:sticky;bottom:0;z-index:6;box-shadow:0 -6px 20px rgba(0,0,0,.35)}
/* The scroll container's bottom padding was moved OFF .content (which floated the
   sticky bar up, leaving a gap that revealed content beneath it) and ONTO the grid,
   so the last field can still scroll clear of the pinned bar and the bar sits flush. */
.jc-embed .sp-composer .sp-grid{padding-bottom:84px}
.sp-foot-l{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-foot-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Send status + loading bar: full-width, sits ABOVE the buttons (order:-1) so the
   operator always sees Working… / Published ✓ / the error, right by the button. */
.sp-foot-status{flex-basis:100%;order:-1;font-size:var(--fs-sm);line-height:1.4}
.sp-foot-status:empty{display:none}
.sp-foot-bar{height:3px;border-radius:3px;background:var(--line,#2b313c);overflow:hidden;margin-bottom:7px}
.sp-foot-bar>span{display:block;height:100%;width:38%;border-radius:3px;background:var(--accent);animation:sp-foot-slide 1.1s ease-in-out infinite}
@keyframes sp-foot-slide{0%{margin-left:-38%}100%{margin-left:100%}}
/* Save split-button drop-UP menu (it lives at the bottom of the composer). */
.sp-save-wrap{position:relative}
.sp-save-menu{position:absolute;left:0;bottom:100%;top:auto;margin-bottom:6px;min-width:190px;z-index:20}
.sp-save-menu button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);font:inherit;padding:8px 12px;cursor:pointer;border-radius:6px}
.sp-save-menu button:hover{background:var(--panel-2)}
.sp-foot-chk{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);cursor:pointer}
.sp-foot .sp-primary{padding:var(--sp-2) 20px;font-weight:var(--fw-bold);margin-left:0}
.sp-when-wrap{position:relative}
.sp-whenpill{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);color:var(--ink);cursor:pointer;font-family:inherit}
.sp-whenpill:hover{border-color:var(--accent)}
#sp-when-pop{left:auto;right:0;min-width:280px}
.sp-when-opt{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink);cursor:pointer;padding:var(--sp-1) 0}
.sp-when-next{display:block;width:100%;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) 10px;font-size:var(--fs-xs);color:var(--ink);cursor:pointer;margin-top:var(--sp-1);font-family:inherit}
.sp-when-next:hover{border-color:var(--accent)}
.jc-embed #sp-posts-card{display:none}
@media (max-width:860px){.sp-hd,.sp-composer .sp-grid,.sp-foot{padding-left:14px;padding-right:14px}.sp-foot-r{width:100%;justify-content:flex-end}}
.sp-when-confirm-row{margin-top:var(--sp-3);padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:flex-end}
.sp-when-confirm-row .sp-primary{width:100%;justify-content:center}
.sq-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Honest publishing-connection status */
.sq-chan-dot.off{background:var(--ws-mc) !important;box-shadow:0 0 0 2px var(--panel)}
.sq-setup-banner{margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);border:1px solid color-mix(in srgb, var(--ws-mc) 33%, transparent);background:color-mix(in srgb, var(--ws-mc) 10%, transparent);border-radius:var(--radius-sm);font-size:var(--fs-sm);color:var(--ink)}
.sq-setup-banner a{color:var(--accent);font-weight:var(--fw-medium);text-decoration:none;white-space:nowrap}
.sq-setup-banner a:hover{text-decoration:underline}

/* jcMiniForm modal (shared small form, replaces prompt() chains) */
.jc-miniform{width:min(480px,94vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden;animation:jcPop .16s ease}
.jc-miniform-body{padding:16px 20px 18px}
/* Multi-pick chips for jcMiniForm's "multi" field (Adam, 22 Sep 2026: platforms were
   typed by hand and drifted into "TikTok, Youtube"). Chips rather than a
   <select multiple>, which needs ctrl-click to pick a second one. The value still
   leaves as a comma list, so nothing downstream changed. */
.mf-multi{display:flex;flex-wrap:wrap;gap:6px}
.mf-chip{cursor:pointer;font:inherit;font-size:var(--fs-xs);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--radius-pill,999px);
  border:1px solid var(--line,#2b313c);background:var(--panel-2);color:var(--muted)}
.mf-chip:hover{border-color:var(--accent);color:var(--ink)}
.mf-chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);
  font-weight:var(--fw-bold,700)}
/* The glyph carries its brand colour through --ic, set inline from SOCIAL_PLATFORMS.
   A custom property rather than a plain inline colour so the selected state below can
   still override it: an inline color would beat any class rule. */
.mf-chip-ic{display:inline-flex;align-items:center;justify-content:center;
  width:15px;flex:0 0 auto;color:var(--ic,currentColor);font-weight:var(--fw-bold,700);line-height:1}
/* Selected: the chip is already the accent colour, so a brand-coloured glyph on top
   of it reads as a mistake. Inherit instead. */
.mf-chip.on .mf-chip-ic{color:inherit}
.jc-miniform-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--line);background:var(--panel-2)}

/* ===== Composer: larger, bolder type + roomier editor (Adam request) ===== */
.sp-hd-title{font-size:var(--fs-lg);font-weight:var(--fw-black)}
.sp-hd-btn,.sp-hd-pill{font-size:var(--fs-base);font-weight:var(--fw-medium)}
.sp-compose .mlabel{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.01em;color:var(--ink)}
#sp-text{min-height:240px;font-size:var(--fs-md);line-height:1.55}
#sp-text::placeholder{font-size:var(--fs-md)}
.sp-editor{padding:14px}
.sp-tool{font-size:var(--fs-lg)}
.sp-count{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.sp-cnet{font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.sp-inp{font-size:var(--fs-base)}
#sp-first{font-size:var(--fs-base);min-height:64px}
.sp-pernet-toggle,.sp-foot-chk{font-size:var(--fs-base);font-weight:var(--fw-medium)}
.sp-foot .btn,.sp-foot .sp-primary,.sp-foot-l .btn,.sp-whenpill{font-size:var(--fs-base);font-weight:var(--fw-medium)}
/* Preview pane scales up with the composer */
.sp-preview-wrap{width:392px}
.pv-name{font-size:var(--fs-base);font-weight:var(--fw-black)}
.pv-handle{font-size:var(--fs-xs)}
.pv-text{font-size:var(--fs-base);line-height:1.55}
@media (max-width:860px){.sp-preview-wrap{width:100%}}

/* ===== Universal Motion-style task editor (jcOpenTaskPanel) ===== */
.jc-taskpanel{padding:0;display:flex;flex-direction:column;max-height:88vh;overflow:hidden;font-size:var(--fs-base)}
.jc-taskpanel .tp-head{display:flex;align-items:center;gap:10px;padding:var(--sp-4) 20px;border-bottom:1px solid var(--line)}
.tp-title-in{flex:1;font-size:var(--fs-lg);font-weight:var(--fw-black);background:transparent;border:none;color:var(--ink);outline:none;padding:var(--sp-1) var(--sp-0)}
.tp-title-in::placeholder{color:var(--muted-2);font-weight:var(--fw-medium)}
.tp-body{display:flex;flex:1;min-height:0;overflow:hidden}
.tp-main{flex:1;min-width:0;padding:18px 20px;overflow:auto}
.tp-rail{width:344px;flex:none;padding:18px 20px;border-left:1px solid var(--line);background:var(--panel-2);overflow:auto}
.tp-rail .tp-grid{grid-template-columns:1fr !important;gap:var(--sp-3) !important}
.tp-rail .muted.small{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);letter-spacing:.01em;margin-bottom:var(--sp-1)}
.tp-rail select,.tp-rail input{font-size:var(--fs-base) !important;padding:var(--sp-2) 10px !important;border-radius:8px !important}
.tp-notes{width:100%;min-height:130px;resize:vertical;font-size:var(--fs-base) !important;line-height:1.55;padding:10px var(--sp-3) !important;border-radius:10px !important}
.tp-main .muted.small{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:var(--sp-1)}
.tp-sec{font-weight:var(--fw-black);font-size:var(--fs-base);margin:20px 0 var(--sp-2);color:var(--ink)}
/* Task-panel redesign (comments-first). Comments are the main left content; the
   subtask/checklist/related sections collapse behind compact "+ Add" links, and
   Attachments/Linked-docs live in panels toggled from the footer bar. */
.tp-sec-lg{font-size:15px;font-weight:800;margin:4px 0 8px}
.tp-comments{margin:0 0 4px}
.tp-crow{margin-top:10px}
.tp-quicklinks{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 2px;padding-top:14px;border-top:1px solid var(--line)}
.tp-ql{background:transparent;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font:inherit;font-size:13px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.tp-ql:hover{color:var(--ink);border-color:var(--muted)}
.tp-ql.on{color:var(--accent);border-color:var(--accent);border-style:solid}
.tp-ql-ct{font-size:11px;font-weight:800;color:var(--accent)}
.tp-ql-ct:empty{display:none}
.tp-collapse{margin-top:4px}
.tp-footpop{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel-2)}
#tp-att-btn.on,#tp-doc-btn.on{color:var(--accent)}
/* Theme the native file-input "Choose Files" button so it matches the app UI
   everywhere (task panels, attachments, etc.) instead of the OS default. */
input[type=file]{color:var(--muted);font-size:var(--fs-sm)}
input[type=file]::file-selector-button{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:6px 12px;font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;margin-right:10px;transition:background .12s ease,border-color .12s ease}
input[type=file]::file-selector-button:hover{background:var(--panel);border-color:var(--accent);color:var(--accent)}
.tp-addrow{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);align-items:center}
.tp-inp{flex:1;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) 10px;font-size:var(--fs-base);font-family:inherit}
.tp-addrow .btn{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.jc-taskpanel .tp-foot{margin-top:0;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel-2)}
.jc-taskpanel .tp-foot .btn{font-size:var(--fs-base);font-weight:var(--fw-medium);padding:var(--sp-2) 18px}
@media (max-width:760px){.tp-body{flex-direction:column}.tp-rail{width:100%;border-left:none;border-top:1px solid var(--line)}.jc-taskpanel{max-height:92vh}}

/* Task editor: inline label:control rail rows (Motion-style) */
.tp-rf{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}
.tp-rf-l{flex:0 0 116px;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--muted)}
.tp-rf-c{flex:1;min-width:0}
.tp-rf-c select,.tp-rf-c input{width:100%;font-size:var(--fs-base) !important;padding:var(--sp-2) var(--sp-3) !important;border-radius:8px !important}
.tp-rule{height:1px;background:var(--line);margin:var(--sp-3) 0}
/* Rich-text description */
.tp-rtbar{display:flex;align-items:center;gap:var(--sp-0);flex-wrap:wrap;margin:var(--sp-2) 0;padding:var(--sp-1);border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
.tp-rtb{background:none;border:none;color:var(--ink);cursor:pointer;font-size:var(--fs-base);padding:var(--sp-1) var(--sp-2);border-radius:6px;min-width:30px;font-family:inherit;line-height:1}
.tp-rtb:hover{background:var(--panel)}
.tp-rtsep{width:1px;height:18px;background:var(--line);margin:0 var(--sp-1)}
.tp-notes[contenteditable]{min-height:150px;border:1px solid var(--line);border-radius:10px;padding:var(--sp-3) 14px;font-size:var(--fs-base);line-height:1.6;background:var(--panel-2);color:var(--ink);outline:none;overflow:auto}
.tp-notes[contenteditable]:focus{border-color:var(--accent)}
.tp-notes[contenteditable]:empty:before{content:attr(data-ph);color:var(--muted-2)}
#fb-intro-rich:empty:before{content:attr(data-ph);color:var(--muted-2);pointer-events:none}
.tp-notes h1{font-size:var(--fs-lg);font-weight:var(--fw-black);margin:.4em 0}
.tp-notes h2{font-size:var(--fs-md);font-weight:var(--fw-bold);margin:.4em 0}
.tp-notes pre{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:var(--sp-2) 10px;font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-sm);overflow:auto;white-space:pre-wrap}
.tp-notes img{max-width:100%;border-radius:8px;margin:var(--sp-1) 0}
.tp-notes ul,.tp-notes ol{padding-left:22px;margin:.3em 0}
.tp-notes a{color:var(--accent)}

/* Task editor: taller description in create mode + recurrence day toggles */
.tp-main-create{display:flex;flex-direction:column}
.tp-main-create .tp-notes[contenteditable]{flex:1 1 auto;min-height:300px}
.tp-dows{display:flex;gap:var(--sp-1)}
.tp-dow{flex:1;text-align:center;padding:var(--sp-2) 0;border:1px solid var(--line);border-radius:7px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);cursor:pointer;user-select:none}
.tp-dow:hover{border-color:var(--accent)}
.tp-dow.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Task editor: Repeat toggle on the description line */
.tp-desc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:var(--sp-2)}
/* Attachment / linked-doc chips on the Description line — sit just left of Repeat,
   shown only when something is attached (empty = hidden). */
.tp-topchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end;max-width:58%}
.tp-topchips:empty{display:none}
.tp-topchip{display:inline-flex;align-items:center;gap:4px;max-width:180px;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:2px 9px;font-size:var(--fs-xs);color:var(--accent);text-decoration:none}
.tp-topchip:hover{border-color:var(--accent)}
.tp-topchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-repeat-btn{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);cursor:pointer;font-family:inherit}
.tp-repeat-btn:hover{color:var(--ink);border-color:var(--accent)}
.tp-repeat-btn.on{background:var(--lead-soft);color:var(--ink);border-color:var(--accent)}

/* Task editor: date-picker button + Motion-style date popup */
.tp-datebtn{width:100%;text-align:left;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-base);cursor:pointer;font-family:inherit}
.tp-datebtn:hover{border-color:var(--accent)}
.jc-datepop{position:fixed;z-index:10001;display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.4);overflow:hidden}
.jc-dp-cal{padding:var(--sp-3) 14px;border-right:1px solid var(--line);width:248px}
.jc-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2);font-size:var(--fs-base)}
.jc-dp-head button{background:none;border:none;color:var(--muted);font-size:var(--fs-lg);cursor:pointer;padding:0 var(--sp-2);line-height:1}
.jc-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-0)}
.jc-dp-dow{text-align:center;font-size:var(--fs-caption);color:var(--muted-2);padding:3px 0}
.jc-dp-day{text-align:center;font-size:var(--fs-sm);padding:var(--sp-2) 0;border-radius:7px;cursor:pointer;color:var(--ink)}
.jc-dp-day.other{visibility:hidden}
.jc-dp-day:hover{background:var(--panel-2)}
.jc-dp-day.today{font-weight:var(--fw-black);color:var(--accent)}
.jc-dp-day.sel{background:var(--accent);color:var(--accent-ink)}
.jc-dp-quick{padding:var(--sp-2);min-width:210px}
.jc-dp-q{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:var(--sp-2) 10px;border-radius:8px;cursor:pointer;font-size:var(--fs-base);color:var(--ink)}
.jc-dp-q:hover{background:var(--panel-2)}
.jc-dp-qd{color:var(--muted-2);font-size:var(--fs-sm)}
.jc-dp-q.clear{color:var(--danger);justify-content:flex-start;margin-top:var(--sp-1);border-top:1px solid var(--line)}
/* Themed time row (opt-in jcDatePopup time mode) — keeps date+time in the dark popup */
.jc-dp-time{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.jc-dp-tlabel{font-size:var(--fs-sm);color:var(--muted);min-width:34px}
.jc-dp-timein{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:var(--fs-sm);color-scheme:dark}
html[data-theme="light"] .jc-dp-timein{color-scheme:light}
.jc-dp-set{background:var(--accent);color:var(--accent-ink);border:none;border-radius:7px;padding:5px 13px;font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer}
.jc-dp-set:hover{filter:brightness(1.06)}

/* Ministries page — tasks grouped by ministry */
.min-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);align-items:start}
@media(max-width:1100px){.min-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.min-grid{grid-template-columns:1fr}}
.min-card{padding:14px var(--sp-4)}
.min-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.min-head h3{font-size:var(--fs-md)}
.min-count{margin-left:auto}
.min-add{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.min-sub{font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);margin:10px 0 var(--sp-1)}
.min-daysub{font-size:var(--fs-caption);font-weight:var(--fw-medium);letter-spacing:.03em;color:var(--lead);margin:8px 0 2px;padding-left:10px}
.min-daysub.today{color:var(--success)}
.min-dayrows{padding-left:14px}
.tp-modeseg{display:flex;width:100%;gap:2px;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:8px;padding:2px}
.tp-modebtn{flex:1;background:none;border:none;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:6px 10px;border-radius:6px;cursor:pointer}
.tp-modebtn.on{background:var(--accent);color:var(--accent-ink,#fff)}
.min-task{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);border-radius:8px;cursor:pointer;font-size:var(--fs-sm)}
.min-task:hover{background:var(--panel-2)}
.min-dot{width:8px;height:8px;border-radius:50%;flex:none}
.min-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.min-recur{color:var(--success,#4EC48D);font-size:var(--fs-sm);flex:none}
.min-due{font-size:var(--fs-xs);color:var(--muted);flex:none}
.min-asg{font-size:var(--fs-xs);color:var(--muted-2);flex:none;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ministries: sidebar count badge + done section */
.min-navcount{display:inline-block;margin-left:var(--sp-2);background:var(--lead-soft);color:var(--ink);border-radius:9px;padding:0 var(--sp-2);font-size:var(--fs-caption);font-weight:var(--fw-bold);vertical-align:1px}
.sidebar.collapsed .min-navcount{display:none}
.min-task.done .min-t{text-decoration:line-through;opacity:.6}
.min-done{margin-top:10px;border-top:1px solid var(--line);padding-top:var(--sp-2)}
.min-done summary{cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--muted);letter-spacing:.03em;text-transform:uppercase;list-style:none}
.min-done summary::-webkit-details-marker{display:none}
.min-done[open] summary{margin-bottom:var(--sp-1)}

/* Value of the Week — always-on banner at the top of every page */
.value-week{display:flex;align-items:center;gap:var(--sp-3);background:var(--lead-soft);border:1px solid var(--accent);border-radius:12px;padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4)}
.vw-label{font-size:var(--fs-caption);font-weight:var(--fw-black);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);flex:none}
.vw-text{flex:1;font-size:var(--fs-sm);font-weight:500;line-height:1.5;color:var(--ink)}
.vw-text[data-empty]{color:var(--muted-2);font-weight:400;font-style:italic}
.vw-edit{background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--fs-base);flex:none}
.vw-edit:hover{color:var(--ink)}

/* Vision Board — distinct card look */
.vb-goal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--sp-4) 18px;margin:0 0 var(--sp-3)}
.vb-goal.vb-dim{opacity:.7}
.vb-goal.vb-hit{border-color:var(--success)}
.vb-top{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.vb-main{flex:1;min-width:200px}
.vb-name{font-size:var(--fs-lg);font-weight:var(--fw-black);color:var(--ink);line-height:1.25}
.vb-due{display:inline-block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--muted)}
.vb-desc{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.vb-pctwrap{text-align:right;flex:none}
.vb-pct{font-size:var(--fs-2xl);font-weight:var(--fw-black);line-height:1;color:var(--ink)}
.vb-goal.vb-hit .vb-pct{color:var(--success)}
.vb-count{font-size:var(--fs-xs);color:var(--muted);margin-top:3px}
.vb-bar{height:12px;background:var(--panel-2);border-radius:7px;margin-top:var(--sp-3);overflow:hidden}
.vb-fill{height:100%;border-radius:7px;transition:width .35s}
/* Idea board: cards, champion / meta chips, segmented stage rail, cost, actions */
.vb-goal{transition:transform .15s, box-shadow .15s, border-color .15s}
.vb-goal.vb-idea,.vb-goal.vb-measure{padding:18px 20px}
.vb-goal.vb-idea:hover,.vb-goal.vb-measure:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.30);border-color:var(--accent)}
.vb-idea{border-left:3px solid var(--accent)}
.vb-idea .vb-name,.vb-measure .vb-name{font-size:var(--fs-xl)}
.vb-metarow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.vb-meta{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.vb-cost{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:3px 10px;letter-spacing:.01em}
.vb-champ{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:2px 9px 2px 3px;cursor:pointer;line-height:1.6}
.vb-champ.vb-champ-static{cursor:default}
.vb-champ:not(.vb-champ-static):hover{border-color:var(--accent)}
.vb-champ.vb-champ-empty{color:var(--muted);padding:3px 11px}
/* stage badge (top-right): quiet outline at Dreaming, fills accent as it advances */
.vb-stagebadge{flex:none;align-self:flex-start;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:#0f1115;background:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:4px 13px;white-space:nowrap;letter-spacing:.02em}
.vb-stagebadge.stage-dreaming{color:var(--muted);background:var(--panel-2);border-color:var(--line)}
.vb-stagebadge.is-arch{color:var(--muted);background:var(--panel-2);border-color:var(--line)}
.vb-stagebadge.is-done{color:#0f1115;background:var(--success);border-color:var(--success)}
/* segmented stage rail */
.vb-track{display:flex;gap:6px;margin-top:18px}
.vb-seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer}
.vb-seg-bar{width:100%;height:7px;border-radius:7px;background:var(--panel-2);transition:background .18s, box-shadow .18s, opacity .18s}
.vb-seg-lbl{font-size:var(--fs-xs);color:var(--muted);transition:color .18s}
.vb-seg:hover .vb-seg-bar{box-shadow:0 0 0 1px var(--accent)}
.vb-seg:hover .vb-seg-lbl{color:var(--ink)}
.vb-seg.done .vb-seg-bar{background:var(--accent);opacity:.5}
.vb-seg.done .vb-seg-lbl{color:var(--ink)}
.vb-seg.cur .vb-seg-bar{background:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.vb-seg.cur .vb-seg-lbl{color:var(--ink);font-weight:var(--fw-bold)}
/* action rows */
.vb-subactions{display:flex;justify-content:flex-end;gap:6px;margin-top:14px}
.vb-subactions .btn{padding:3px 11px;font-size:var(--fs-xs)}
.vb-subactions .btn.btn-xs{padding:3px 7px}
.vb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--sp-3)}
.vb-actions .btn{padding:3px 11px;font-size:var(--fs-xs)}
.vb-actions .btn.btn-xs{padding:3px 7px}
.vb-actions .gl-set{width:84px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:6px;padding:3px 7px;font-size:var(--fs-xs)}
/* inline edit form */
.vb-edit{display:flex;flex-direction:column;gap:8px}
.vb-edit .sp-inp{width:100%;font-size:13px}
.vb-edit .gle-name{font-size:15px;font-weight:var(--fw-bold)}
.vb-edit-row{display:flex;flex-wrap:wrap;gap:8px}
.vb-edit-row .gle-champ{flex:2;min-width:160px}
.vb-edit-row .gle-cost{width:140px}
.vb-edit-row .gle-due{min-width:150px}
.vb-edit-acts{display:flex;gap:8px;margin-top:2px}
/* board-level rough total cost */
.vb-total{margin:14px 0 2px;font-size:var(--fs-md);color:var(--ink)}
.vb-total b{color:var(--accent);font-size:var(--fs-lg);font-weight:var(--fw-black)}
/* idea comments — kept off the card, revealed on expand */
.vb-cbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:3px 9px;font-size:var(--fs-xs);cursor:pointer;line-height:1.4}
.vb-cbtn:hover{border-color:var(--accent);color:var(--ink)}
.vb-cn{font-weight:var(--fw-bold)}
.vb-thread{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.vb-cmt-list{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.vb-cmt-head{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.vb-cmt-author{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--ink)}
.vb-cmt-time{font-size:var(--fs-xs);color:var(--muted)}
.vb-cmt-body{font-size:var(--fs-sm);color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word;padding-left:25px}
.vb-cmt-link{color:var(--accent);text-decoration:underline}
.vb-cmt-add{display:flex;gap:8px}
.vb-cmt-input{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:var(--fs-sm)}
.vb-cmt-post{padding:6px 14px;font-size:var(--fs-xs)}
/* Meetings Hub */
.mt-chip{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:14px;padding:3px var(--sp-2) 3px 10px;font-size:var(--fs-xs);color:var(--ink)}
.mt-chip-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs-caption);line-height:1;padding:var(--sp-0) var(--sp-1);border-radius:8px}
.mt-chip-x:hover{background:var(--line,#2b313c);color:var(--danger)}
.mt-badge{display:inline-block;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:10px;padding:1px var(--sp-2);font-size:var(--fs-caption);color:var(--ink)}
.mt-sent{display:inline-block;background:rgba(46,158,107,.16);color:var(--success);border-radius:10px;padding:1px var(--sp-2);font-size:var(--fs-caption)}
.mt-act-tasked{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2);margin:0 0 var(--sp-1);border:1px solid var(--line,#2b313c);border-radius:8px;cursor:pointer;font-size:var(--fs-sm)}
.mt-act-tasked:hover{background:var(--panel-2);border-color:var(--accent)}
.mt-act-check{color:var(--muted);flex:none}
.mt-act-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-act-title.done{color:var(--muted);text-decoration:line-through}
.mt-acts-done{margin-top:10px;border-top:1px solid var(--line,#2b313c);padding-top:8px}
.mt-acts-done>summary{cursor:pointer;list-style:none;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);padding:2px 0;display:flex;align-items:center;gap:6px}
.mt-acts-done>summary::-webkit-details-marker{display:none}
.mt-sessions-fold>summary{cursor:pointer;list-style:none;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);padding:8px 0;display:flex;align-items:center;gap:6px}
.mt-sessions-fold>summary::-webkit-details-marker{display:none}
.mt-act-owner{font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--ink);background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:10px;padding:1px var(--sp-2);flex:none}
.mt-act-due{font-size:var(--fs-caption);color:var(--muted);flex:none}
.mt-act-edit{font-size:var(--fs-caption);color:var(--accent);flex:none;opacity:0}
.mt-act-tasked:hover .mt-act-edit{opacity:1}
@media(max-width:700px){#mt-setup{grid-template-columns:1fr !important}}
/* Single-document meeting workspace: record bar + embedded doc editor */
.mt-recbar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:var(--sp-1) 0;min-height:30px}
.mt-actions{position:relative}
.mt-actions>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--line,#2b313c);background:var(--panel-2);color:var(--ink);border-radius:8px;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.mt-actions>summary::-webkit-details-marker{display:none}
.mt-actions[open]>summary{border-color:var(--accent);color:var(--accent)}
.mt-actions-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:220px;background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:10px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.42);display:flex;flex-direction:column;gap:2px}
.mt-actions-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 10px;border:none;background:transparent;color:var(--ink);border-radius:7px;cursor:pointer;font-size:var(--fs-sm);text-decoration:none;line-height:1.2}
.mt-actions-item:hover{background:var(--panel-2)}
.mt-doc-toolbar{display:flex;align-items:center;gap:3px;padding:var(--sp-2) 10px;border-bottom:1px solid var(--line,#2b313c);background:var(--panel-2);flex-wrap:wrap;position:sticky;top:-24px;z-index:30;border-radius:11px 11px 0 0;box-shadow:0 6px 14px rgba(0,0,0,.22)}
.mt-doc-toolbar button[data-cmd]{min-width:30px;height:28px;padding:0 var(--sp-2);border:1px solid transparent;background:transparent;color:var(--ink);border-radius:6px;cursor:pointer;font-size:var(--fs-sm);line-height:1}
.mt-doc-toolbar button[data-cmd]:hover{background:var(--line,#2b313c)}
.mt-doc-sep{width:1px;height:18px;background:var(--line,#2b313c);margin:0 var(--sp-1)}
.mt-doc-toolbar .mt-tb-btn{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 var(--sp-2);border:1px solid transparent;background:transparent;color:var(--ink);border-radius:6px;cursor:pointer;font-size:var(--fs-sm);line-height:1}
.mt-doc-toolbar .mt-tb-btn:hover{background:var(--line,#2b313c)}
.mt-doc-toolbar .mt-tb-task{font-weight:var(--fw-medium);color:var(--accent)}
.mt-rec-mini{flex:none;display:inline-flex;align-items:center;gap:var(--sp-1);height:26px;padding:0 var(--sp-3);border:1px solid #c0392b;background:#c0392b;color:#fff;border-radius:999px;cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-semibold,600);min-width:84px;justify-content:center;box-shadow:0 1px 4px rgba(192,57,43,.35)}
.mt-rec-mini:hover{background:#a93226;border-color:#a93226}
.mt-rec-mini.recording{background:#c0392b;border-color:#c0392b;color:#fff;animation:mtRecPulse 1.6s ease-in-out infinite}
@keyframes mtRecPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}50%{box-shadow:0 0 0 5px rgba(192,57,43,0)}}
.mt-color-bar{display:block;width:13px;height:3px;border-radius:2px;background:var(--danger);margin-top:-var(--sp-0)}
.mt-doc-pop{position:absolute;z-index:9999;background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:10px;padding:10px;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.mt-sw-row{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--sp-2)}
.mt-sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(128,128,128,.45);cursor:pointer;padding:0}
.mt-sw:hover{outline:2px solid var(--accent);outline-offset:1px}
.mt-sw-custom{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--muted)}
.mt-tp{width:280px;display:flex;flex-direction:column;gap:var(--sp-2)}
.mt-tp-row{display:flex;flex-direction:column;gap:3px}
.mt-tp-row label{font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-medium)}
.mt-tp-row input{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:7px;padding:var(--sp-2) var(--sp-2);font-size:var(--fs-sm);width:100%;box-sizing:border-box}
.mt-tp-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:var(--sp-0)}
.mt-doc-taskchip{display:inline-block;background:color-mix(in srgb, var(--accent) 16%, var(--panel-2));color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line,#2b313c));border-radius:10px;padding:0 var(--sp-2);font-size:var(--fs-caption);font-weight:var(--fw-medium);white-space:nowrap;vertical-align:baseline}
.mt-doc-tasktext{background:rgba(217,164,65,.32);border-radius:3px;padding:0 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Doc + right-hand Tasks rail */
.mt-doc-wrap{display:flex;align-items:stretch;position:relative}
.mt-doc-wrap>.mt-docbody{flex:1 1 auto;min-width:0}
.mt-doc-tasks{flex:0 0 360px;display:flex;flex-direction:column;border-left:1px solid var(--line,#2b313c);background:var(--panel-2);overflow:auto}
/* Collapsible right rail (Service Review / Tasks / Facilities) */
.mt-rail-bar{display:flex;justify-content:flex-end;padding:6px 8px 0}
.mt-rail-toggle{width:24px;height:24px;border-radius:6px;border:1px solid var(--line,#2b313c);background:var(--panel);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.mt-rail-toggle:hover{color:var(--ink)}
.mt-doc-wrap.mt-rail-collapsed .mt-doc-tasks{display:none}
.mt-rail-reopen{display:none;position:absolute;top:0;right:0;bottom:0;width:24px;border:0;border-left:1px solid var(--line,#2b313c);background:var(--panel-2);color:var(--muted);cursor:pointer;align-items:center;justify-content:center;font-size:14px}
.mt-doc-wrap.mt-rail-collapsed .mt-rail-reopen{display:flex}
.mt-rail-reopen:hover{color:var(--ink)}
.mt-sec-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:var(--fs-xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);padding:9px 12px 5px;margin-top:6px;border-bottom:2px solid var(--accent)}
.mt-sec-caret{flex:0 0 auto;color:var(--muted);font-size:11px;line-height:1;transition:transform .15s ease}
.mt-sec.collapsed .mt-sec-caret{transform:rotate(-90deg)}
.mt-sec-t{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-sec-n{flex:0 0 auto;color:var(--muted);font-weight:var(--fw-regular);text-transform:none;font-size:var(--fs-caption)}
.mt-sec-act{flex:0 0 auto;background:transparent;border:0;color:var(--accent);cursor:pointer;font-size:var(--fs-caption);font-weight:var(--fw-medium);text-transform:none;letter-spacing:0;text-decoration:none;padding:0 2px}
.mt-sec-body{padding:8px 12px 12px}
.mt-sec.collapsed .mt-sec-body{display:none}
.mt-sec-body>.mt-doc-tasks-list{padding:0}
.mt-doc-tasks-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:var(--fw-medium);padding:12px 12px 8px}
.mt-doc-task-add{border:1px solid var(--line,#2b313c);background:var(--panel);color:var(--accent);border-radius:6px;padding:2px 9px;font-size:var(--fs-caption);font-weight:var(--fw-medium);cursor:pointer;text-transform:none;letter-spacing:0}
.mt-doc-task-add:hover{border-color:var(--accent)}
.mt-doc-tasks-list{display:flex;flex-direction:column;gap:6px;padding:0 10px 12px;overflow:auto}
.mt-doc-taskcard{position:relative;display:block;background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:8px;padding:8px 22px 8px 10px;cursor:pointer;text-decoration:none;color:var(--ink)}
.mt-doc-taskcard:hover{border-color:var(--accent)}
.mt-doc-taskx{position:absolute;top:5px;right:5px;width:18px;height:18px;border:none;background:transparent;color:var(--muted);border-radius:5px;cursor:pointer;font-size:15px;line-height:1;opacity:0;display:flex;align-items:center;justify-content:center;padding:0}
.mt-doc-taskcard:hover .mt-doc-taskx{opacity:.85}
.mt-doc-taskx:hover{background:rgba(208,90,79,.22);color:#e08c84;opacity:1}
.mt-doc-taskcard .t{font-size:var(--fs-sm);font-weight:var(--fw-medium);display:block;line-height:1.3}
.mt-doc-taskcard .m{font-size:var(--fs-caption);color:var(--muted);margin-top:3px;display:block}
.mt-tp-datebtn{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:7px;padding:var(--sp-2);font-size:var(--fs-sm);width:100%;box-sizing:border-box;text-align:left;cursor:pointer}
.mt-tp-datebtn:hover{border-color:var(--accent)}
@media (max-width:760px){.mt-doc-wrap{flex-direction:column}.mt-doc-tasks{flex-basis:auto;border-left:none;border-top:1px solid var(--line,#2b313c)}}
/* Insert menu (task list / event) + inserted embed block */
.mt-ins{width:320px;display:flex;flex-direction:column;gap:var(--sp-2)}
.mt-ins-tabs{display:flex;gap:var(--sp-1);background:var(--panel-2);border-radius:8px;padding:3px}
.mt-ins-tab{flex:1;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-medium);padding:var(--sp-2) var(--sp-2);border-radius:6px}
.mt-ins-tab.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.mt-ins-q{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:7px;padding:var(--sp-2) var(--sp-2);font-size:var(--fs-sm)}
.mt-ins-list{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-0)}
.mt-ins-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-2);border-radius:7px}
.mt-ins-item:hover{background:var(--panel-2)}
.mt-doc-embed{border:1px solid var(--line,#2b313c);border-left:3px solid var(--accent);border-radius:8px;padding:10px 14px;margin:10px 0;background:color-mix(in srgb, var(--accent) 5%, transparent)}
.mt-doc-embed .mt-embed-h{font-weight:var(--fw-bold);font-size:var(--fs-base);margin-bottom:var(--sp-1)}
.mt-doc-embed ul{margin:var(--sp-2) 0;padding-left:20px}
.mt-doc-embed li{margin:3px 0}
.mt-doc-embed .mt-embed-f{font-size:var(--fs-caption);color:var(--muted);margin-top:var(--sp-2)}
.mt-doc-embed .mt-embed-h{display:flex;align-items:center;gap:var(--sp-2)}
.mt-embed-live{font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, transparent);border-radius:8px;padding:1px var(--sp-2)}
.mt-embed-x{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs-md);line-height:1;padding:0 var(--sp-1);border-radius:6px}
.mt-embed-x:hover{background:var(--line,#2b313c);color:var(--danger)}
.mt-docbody{min-height:320px;padding:18px 20px;line-height:1.6;font-size:var(--fs-base);color:var(--ink);outline:none;overflow-wrap:break-word}
.mt-docbody:focus{outline:none}
#mt-docbody h1{font-size:var(--fs-2xl) !important;font-weight:var(--fw-black);line-height:1.2;margin:18px 0 var(--sp-2)}
#mt-docbody h2{font-size:var(--fs-lg) !important;font-weight:var(--fw-bold);line-height:1.25;margin:var(--sp-4) 0 var(--sp-2)}
#mt-docbody h3{font-size:var(--fs-md) !important;font-weight:var(--fw-bold);margin:14px 0 var(--sp-1)}
#mt-docbody p,#mt-docbody div{font-size:var(--fs-base);font-weight:400}
.mt-docbody ul,.mt-docbody ol{margin:var(--sp-2) 0;padding-left:var(--sp-5)}
.mt-docbody li{margin:3px 0}
/* List items were inheriting a 700 weight (bullets rendered bold by default), which made
   the Bold button TOGGLE THEM OFF — so bolding a bullet looked like "my change didn't save."
   Pin the doc's lists to normal weight; only explicit bold (b/strong/inline) renders heavy. */
#mt-docbody ul,#mt-docbody ol,#mt-docbody li{font-weight:400}
#mt-docbody b,#mt-docbody strong{font-weight:var(--fw-bold)}
.mt-docbody hr{border:0;border-top:1px solid var(--line,#2b313c);margin:14px 0}
.mt-docbody:empty:before,.mt-docbody p:only-child:empty:before{content:attr(data-empty);color:var(--muted);pointer-events:none}
/* Two-pane master/detail shell */
.mt-shell{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;margin-top:14px}
.mt-shell.mt-collapsed{grid-template-columns:36px 1fr}
.mt-sidebar{background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:12px;overflow:hidden;position:sticky;top:8px;max-height:calc(100vh - 120px);display:flex;flex-direction:column}
.mt-side-head{display:flex;align-items:center;gap:var(--sp-2);padding:10px;border-bottom:1px solid var(--line,#2b313c)}
.mt-search{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:var(--sp-2) 10px;font-size:var(--fs-sm)}
.mt-iconbtn{border:1px solid var(--line,#2b313c);background:var(--panel-2);color:var(--muted);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:var(--fs-base);line-height:1;flex:none}
.mt-iconbtn:hover{color:var(--ink)}
.mt-side-scroll{overflow-y:auto;flex:1}
.mt-expand{align-self:start;border:1px solid var(--line,#2b313c);background:var(--panel);color:var(--muted);width:36px;height:44px;border-radius:10px;cursor:pointer;font-size:var(--fs-md);position:sticky;top:8px}
.mt-expand:hover{color:var(--ink)}
.mt-side-label{font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:var(--sp-3) var(--sp-3) var(--sp-1);font-weight:var(--fw-medium)}
.mt-grp{border:0}
.mt-grp>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px;font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-medium);padding:14px 12px 7px;background:transparent}
.mt-grp>summary::-webkit-details-marker{display:none}
.mt-grp>summary::before{content:"▸";font-size:9px;opacity:.5}
.mt-grp[open]>summary::before{content:"▾"}
.mt-grp-quiet>summary{opacity:.75}
.mt-grp-n{margin-left:auto;font-size:var(--fs-caption);color:var(--muted);letter-spacing:0}
.mt-row{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;cursor:pointer;border-radius:10px;margin:0 4px}
.mt-row:hover{background:var(--panel-2)}
.mt-row.active{background:color-mix(in srgb, var(--accent) 14%, var(--panel));box-shadow:inset 3px 0 0 var(--accent)}
.mt-row-ico{flex:none;margin-top:1px;color:var(--muted-2);display:inline-flex;align-items:center}
.mt-row.journey .mt-row-ico{color:var(--accent)}
.mt-row-main{flex:1;min-width:0}
.mt-row-title{font-weight:var(--fw-medium);font-size:var(--fs-sm);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-row-sub{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin-top:3px;font-size:var(--fs-caption);color:var(--muted)}
.mt-tag{flex:none;margin-top:1px;font-size:var(--fs-caption);border-radius:20px;padding:2px 9px;white-space:nowrap;line-height:1.5}
.mt-tag.recap{color:var(--success);background:rgba(46,158,107,.16)}
.mt-tag.agenda{color:var(--muted);background:var(--panel-2);border:1px solid var(--line,#2b313c)}
.mt-tag.ol{color:var(--muted);background:var(--panel-2);border:1px solid var(--line,#2b313c)}
.mt-tag.lock{color:var(--muted-2);background:transparent;padding:2px 4px}
.mt-row-act{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);line-height:1;padding:var(--sp-1) var(--sp-2);border-radius:6px;flex:none;opacity:0;margin-top:1px}
.mt-row:hover .mt-row-act{opacity:1}
.mt-row-act:hover{background:var(--line,#2b313c);color:var(--ink)}
.ms-del:hover{color:var(--danger) !important}
.mt-row-go{color:var(--muted);font-size:var(--fs-base);flex:none}
.mt-row-ro{font-size:var(--fs-caption);color:var(--muted);flex:none}
.mt-row-recur{font-size:var(--fs-xs);color:var(--muted);opacity:.7}
.mt-tools-group{border-top:1px solid var(--line,#2b313c);margin-top:10px}
.mt-tools-group>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);padding:12px;font-weight:var(--fw-medium)}
.mt-tools-group>summary::-webkit-details-marker{display:none}
.mt-ol-det>summary.mt-ol-sum{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2)}
.mt-ol-det>summary.mt-ol-sum::-webkit-details-marker{display:none}
.mt-ol-det>summary.mt-ol-sum:before{content:"▸";font-size:var(--fs-caption);transition:transform .15s}
.mt-ol-det[open]>summary.mt-ol-sum:before{transform:rotate(90deg)}
.mt-declog{border-top:1px solid var(--line,#2b313c)}
.mt-tools-group{border-top:1px solid var(--line,#2b313c);margin-top:8px}
.mt-tools-group>summary{cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);padding:10px var(--sp-3);list-style:none}
.mt-tools-group>summary::-webkit-details-marker{display:none}
.mt-tools-group .mt-declog>summary{padding-left:calc(var(--sp-3) + 12px)}
.mt-declog>summary{cursor:pointer;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);padding:10px var(--sp-3);list-style:none}
.mt-detail{min-width:0}
.mt-detail-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 var(--sp-0) 10px}
.mt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:340px;border:1px dashed var(--line,#2b313c);border-radius:12px;color:var(--ink)}
.mt-attendees-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;padding:0 var(--sp-0) 10px}
.mt-att-label{font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-medium)}
.mt-att-chip{display:inline-flex;align-items:center;gap:var(--sp-1);background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:14px;padding:3px var(--sp-2);font-size:var(--fs-xs);color:var(--ink)}
.mt-att-chip.owner{background:color-mix(in srgb, var(--accent) 14%, var(--panel-2));border-color:color-mix(in srgb, var(--accent) 40%, var(--line,#2b313c))}
.mt-att-own{font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--accent);font-weight:var(--fw-bold)}
.mt-att-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:var(--fs-caption);line-height:1;padding:1px 3px;border-radius:6px}
.mt-att-x:hover{background:var(--line,#2b313c);color:var(--danger)}
@media(max-width:760px){
  .mt-shell{grid-template-columns:1fr}
  .mt-shell.mt-collapsed{grid-template-columns:1fr}
  .mt-sidebar{position:static;max-height:none}
  .mt-doc-toolbar{position:static;box-shadow:none}
}
/* Personal Command Center (Home) */
.hm-cc-grid{display:grid;grid-template-columns:0.95fr 1.5fr 1.05fr;gap:14px;align-items:start}
/* All three top columns share one height and scroll internally so their bottoms
   line up exactly. Derived from the viewport (not a magic 812px) so short content
   on small screens never clips and tall screens get more room. Clamp keeps it sane. */
.hm-cc-grid{--hm-row-h:clamp(560px, calc(100vh - 220px), 980px)}
.hm-cc-grid > .hm-cc-col{display:flex;flex-direction:column;gap:14px;min-height:560px;max-height:var(--hm-row-h);height:var(--hm-row-h)}
.hm-cc-grid > .hm-cc-col > .hm-w{margin-bottom:0}
.hm-cc-grid > .hm-cc-col > .hm-w:last-child{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hm-cc-grid > .hm-cc-col > .hm-w:last-child > .card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;box-sizing:border-box}
.hm-cc-grid .hm-nm-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
.hm-cc-grid > .hm-cc-col[data-col="center"] #hm-todo-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
.hm-cc-grid > .hm-cc-col[data-col="right"] #hm-cal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hm-cc-grid > .hm-cc-col[data-col="right"] .hm-cal-wrap{flex:1 1 auto;min-height:0;max-height:none}
@media(max-width:1180px){.hm-cc-grid > .hm-cc-col{height:auto}}
.hm-meet-div{height:1px;background:var(--line,#2b313c);margin:14px 0}
.hm-cc-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* MID LANES — the top row's three-lane spine continues below the fold with
   natural heights (no equalizer): left = Sunday, center = act-on, right = people. */
.hm-cc-mid{display:grid;grid-template-columns:0.95fr 1.5fr 1.05fr;gap:14px;align-items:start;margin-top:14px}
.hm-cc-mid > .hm-cc-col2{display:flex;flex-direction:column;gap:14px;min-width:0}
.hm-cc-mid .hm-w{margin-bottom:0}
/* .card carries a global margin:14px 0 — inside the redesigned rows the lane gap
   IS the spacing, so the card margin goes (it was doubling every vertical gap). */
.hm-cc-mid .hm-w > .card,.hm-cc-wide .hm-w > .card,.hm-cc-note .hm-w > .card,.hm-cc-ops .hm-w > .card{margin:0}
@media(max-width:1180px){.hm-cc-mid{grid-template-columns:1fr}}
/* Equal-height mid row: all three lanes stretch to the tallest lane. Single-card
   lanes (This Sunday, People) fill it; the center's two cards (Attention, Goals)
   split it exactly in half, so the 14px vertical gap between them matches the
   14px horizontal lane gap. Anything taller than its share scrolls inside. */
@media(min-width:1181px){
  /* Cards fit their content; long lists cap + scroll so short cards never leave a big empty bar. */
  .hm-cc-mid{align-items:start}
  .hm-cc-mid #hm-sunday,.hm-cc-mid #hm-coming,.hm-cc-mid #hm-attn,.hm-cc-mid #hm-goals,.hm-cc-mid #hm-care{max-height:clamp(300px, calc(100vh - 300px), 760px);overflow-y:auto}
}
/* WIDE ROW — the full service list beside a two-thirds Outlook-style email */
.hm-cc-wide{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;margin-top:14px}
.hm-cc-wide > .hm-cc-col2{display:flex;flex-direction:column;gap:14px;min-width:0}
.hm-cc-wide .hm-w{margin-bottom:0}
@media(max-width:1180px){.hm-cc-wide{grid-template-columns:1fr}}
/* Email split pane: message list left, reading + reply pane right */
.em-split{display:flex;align-items:stretch;min-height:340px;height:100%}
.em-split{--em-h:clamp(560px, calc(100vh - 240px), 900px)}
.em-split .em-list{flex:0 0 min(420px,34%);min-width:0;border-right:1px solid var(--line,#2b313c);max-height:none;overflow-y:auto;outline:none}
.em-split .em-list:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
.em-split .em-pane{flex:1;min-width:0;min-height:0;overflow-y:auto}
/* Row hover actions: pin · schedule for later · archive · delete. Hidden until you
   hover the row (or focus a button), so the list stays calm. */
/* Outlook-style initials avatar on every message row */
.em-av{flex:0 0 auto;align-self:center;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;line-height:1;user-select:none}
.em-rowacts{display:flex;align-items:center;gap:2px;flex:0 0 auto;margin-left:2px;opacity:0;transition:opacity .1s}
.em-row:hover .em-rowacts,.em-row:focus-within .em-rowacts{opacity:1}
.em-row:hover .em-when{display:none}
.em-rowico{background:transparent;border:0;color:var(--muted);border-radius:6px;padding:4px;line-height:0;cursor:pointer}
.em-rowico:hover{background:var(--panel-2,#20252e);color:var(--ink)}
.em-rowico.em-pin.on{color:var(--accent);opacity:1}
.em-row .em-rowacts .em-pin.on{opacity:1}
.em-row.pinned{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.em-row.pinned .em-pinmark{opacity:.9}
/* Keep a pinned row's pin visible even when not hovering. */
.em-row.pinned .em-rowacts{opacity:1}
.em-row.pinned .em-rowacts .em-snooze,.em-row.pinned .em-rowacts .em-archive,.em-row.pinned .em-rowacts .em-del{opacity:0;transition:opacity .1s}
.em-row.pinned:hover .em-rowacts .em-snooze,.em-row.pinned:hover .em-rowacts .em-archive,.em-row.pinned:hover .em-rowacts .em-del{opacity:1}
/* Phase A — three-pane client: folder rail | message list | reading/compose pane */
.em-split .em-rail{flex:0 0 190px;min-width:0;border-right:1px solid var(--line,#2b313c);max-height:none;overflow-y:auto;padding:8px 7px;display:flex;flex-direction:column;gap:1px}
.em-fold{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:6px 9px;color:var(--muted);cursor:pointer;font-size:var(--fs-sm);line-height:1.3}
.em-fold:hover{background:var(--panel-2)}
.em-fold.on{background:var(--panel-2);color:var(--ink);font-weight:var(--fw-medium)}
.em-fold .ic{flex:0 0 auto;line-height:0;opacity:.8}
.em-fold .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-fold .n{flex:0 0 auto;font-size:var(--fs-caption);color:var(--accent);font-weight:var(--fw-medium)}
.em-fold.sub{padding-left:28px}
.em-rail-sec{margin:9px 9px 3px;font-size:var(--fs-caption);letter-spacing:.06em;color:var(--muted);opacity:.75;font-weight:var(--fw-bold)}
/* reading pane hosts the message plus (when the sender is a PCO person) the care sidecar */
.em-msgwrap{display:flex;align-items:stretch;min-height:100%}
.em-msgcol{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.em-pcoside{flex:0 0 236px;min-width:0;border-left:1px solid var(--line,#2b313c);padding:14px 13px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
/* ---- Email A1 "Mission control" (29 Sep 2026) ----
   Lanes in the rail, the actions ABOVE the message, quick replies and the AI brief,
   the person on the right, and "N of M cleared today" in the header. */
.em-tb{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.em-tbtn{padding:5px 11px;font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.em-tico{padding:5px 8px;line-height:0}
.em-tbdiv{width:1px;height:20px;background:var(--line,#2b313c);margin:0 3px;flex:0 0 auto}
.em-k{font-size:var(--fs-caption);font-weight:var(--fw-bold,700);letter-spacing:.07em;color:var(--muted);white-space:nowrap}
.em-qrow{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 14px;border-bottom:1px solid var(--line,#2b313c);background:color-mix(in srgb,var(--accent) 5%,transparent);overflow-x:auto}
.em-qr{flex:0 1 auto;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:999px;padding:4px 12px;font-size:var(--fs-xs);color:var(--ink);cursor:pointer;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.em-qr:hover,.em-qr:focus-visible{border-color:color-mix(in srgb,var(--accent) 55%,var(--line,#2b313c));outline:none}
.em-mhead{flex:0 0 auto;padding:0 0 10px}
.em-msubj{font-weight:var(--fw-bold,700);font-size:var(--fs-md);line-height:1.3}
.em-tag{background:rgba(91,127,176,.18);color:#9db8dd;border-radius:999px;padding:1px 9px;font-size:var(--fs-caption);font-weight:var(--fw-medium);white-space:nowrap}
.em-sum{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line,#2b313c));background:var(--accent-soft);border-radius:10px;padding:9px 12px;margin:0 0 10px;font-size:var(--fs-sm);line-height:1.5}
.em-sum .em-k{display:block;color:var(--accent);margin-bottom:3px}
.em-sum-wait{opacity:.8}
.em-dates{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.em-datechip{display:inline-flex;align-items:center;gap:6px;background:none;border:1px dashed var(--line,#2b313c);border-radius:8px;padding:5px 10px;font-size:var(--fs-xs);color:var(--ink);cursor:pointer}
.em-datechip:hover{border-style:solid;border-color:color-mix(in srgb,var(--accent) 55%,var(--line,#2b313c))}
.em-lhead{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line,#2b313c);font-size:var(--fs-sm);position:sticky;top:0;z-index:1;background:var(--panel)}
.em-tagrow{display:flex;flex-wrap:wrap;gap:5px;padding:7px 14px;border-bottom:1px solid var(--line,#2b313c)}
.em-flt{background:var(--panel-2);border:1px solid var(--line,#2b313c);color:var(--muted);border-radius:999px;padding:2px 9px;font-size:var(--fs-caption);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.em-flt span{opacity:.75}
.em-flt.on{background:rgba(91,127,176,.18);border-color:color-mix(in srgb,var(--lead,#5b7fb0) 55%,var(--line,#2b313c));color:#9db8dd}
.em-banner{display:flex;align-items:flex-start;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line,#2b313c);font-size:var(--fs-caption);line-height:1.45}
.em-banner.em-err{background:rgba(224,87,62,.08);color:#e0736b}
.em-banner.em-warn{background:rgba(224,161,62,.08);color:#e0a13e}
.em-banner.em-ask{background:var(--accent-soft);color:var(--ink);align-items:center}
.em-golane{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font:inherit}
.em-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:220px}
.em-keyhint{font-size:var(--fs-caption);opacity:.7}
.em-prog{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.em-progbar{width:110px;height:6px;border-radius:9px;background:var(--panel-2);overflow:hidden;display:inline-block}
.em-progbar i{display:block;height:100%;background:var(--success,#2e9e6b);transition:width .3s ease}
.em-popmenu{position:fixed;z-index:10006;background:var(--panel,#161b22);border:1px solid var(--line,#2b313c);border-radius:10px;padding:5px;min-width:230px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.em-mm{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);cursor:pointer;padding:7px 10px;border-radius:7px;font-size:var(--fs-sm);text-decoration:none;box-sizing:border-box}
.em-mm:hover,.em-mm:focus-visible{background:var(--panel-2);outline:none}
.em-mmsep{height:1px;background:var(--line,#2b313c);margin:4px 2px}
.em-ctxrules{border-top:1px solid var(--line,#2b313c);padding-top:9px;display:flex;flex-direction:column;gap:5px}
.em-ctxbtn{text-align:left;background:none;border:1px solid var(--line,#2b313c);border-radius:8px;padding:6px 9px;color:var(--muted);font-size:var(--fs-xs);cursor:pointer}
.em-ctxbtn:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,var(--line,#2b313c))}
.em-keys{display:flex;gap:16px;flex-wrap:wrap;padding:7px 16px;border-top:1px solid var(--line,#2b313c);font-size:var(--fs-caption);color:var(--muted);flex:0 0 auto}
.em-keys kbd{font:600 10.5px/1 ui-monospace,Menlo,monospace;border:1px solid var(--line,#2b313c);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink);background:var(--panel-2)}
@media(max-width:1180px),(hover:none){.em-keys{display:none}}
/* Reading pane: actions pinned top, body fills to the bottom, rules pinned bottom */
.em-readcol{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.em-readacts{flex:0 0 auto;padding:10px 14px;border-bottom:1px solid var(--line,#2b313c)}
.em-readbody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:12px 16px}
.em-readrules{flex:0 0 auto;padding:9px 16px;border-top:1px solid var(--line,#2b313c)}
/* Instant hover tooltip for icon-only buttons (opens leftward so it never clips) */
.em-ico{position:relative}
.em-ico:hover::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 6px);right:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:6px;padding:3px 8px;font-size:11px;line-height:1.3;white-space:nowrap;z-index:60;pointer-events:none;box-shadow:0 8px 22px rgba(0,0,0,.5)}
/* the in-pane composer fills the whole pane — body stretches down to Send */
.em-composer{display:flex;flex-direction:column;min-height:100%;padding:13px 15px;gap:9px;box-sizing:border-box}
/* Action row: plain, in-flow. NO position:sticky — inside this nested flex/overflow pane it
   detached and flew to the corner of the modal. Reachability is instead guaranteed by
   capping the EDITOR height below, so the composer always fits the pane and this row is
   simply visible underneath it. */
/* Outlook puts Send / Discard / Attach / Signature ABOVE the message, not below it. */
.em-cacts{flex:0 0 auto;padding-bottom:9px;border-bottom:1px solid var(--line,#2b313c)}
/* Drag a file onto the composer to attach it */
.em-composer.em-drop{outline:2px dashed color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:-6px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.em-cin{background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:8px;padding:7px 10px;font-size:var(--fs-sm);color:var(--ink);width:100%;box-sizing:border-box}
/* Phase B — rich (contentEditable) editor + formatting toolbar + attachments */
/* The compose surface is deliberately WHITE PAPER in BOTH themes: you're writing an email
   that lands on white for the recipient, and the quoted original below renders on white
   too — so a themed dark box made the two halves clash. Same colour either way, one sheet. */
.em-rich{background:#fff;border:1px solid var(--line,#2b313c);border-radius:9px;padding:10px 12px;font:inherit;font-size:var(--fs-sm);line-height:1.55;color:#1a1a1a;box-sizing:border-box;width:100%;overflow-y:auto;outline:none}
/* Cap the editor so it scrolls INTERNALLY (it already has overflow-y:auto). Without this it
   grew to fit the entire quoted thread, pushing Send/Attach/Signature far below the fold. */
.em-composer .em-rich{flex:1 1 auto;min-height:150px;max-height:calc(88vh - 310px)}
.em-rich:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--line,#2b313c));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
.em-rich:empty:before{content:attr(data-ph);color:#9aa0a6;pointer-events:none}
.em-rich a{color:#2563eb}
.em-rich blockquote{border-left:3px solid #dfe1e5;margin:8px 0;padding-left:12px;color:#5f6368}
.em-rich ul,.em-rich ol{margin:4px 0 4px 4px;padding-left:20px}
.em-rich p{margin:0 0 6px}
.em-rtool .em-rt{background:var(--panel-2);border:1px solid var(--line,#2b313c);color:var(--muted);border-radius:7px;padding:4px 7px;font-size:var(--fs-sm);line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.em-rtool .em-rt:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line,#2b313c))}
.em-rtool .em-rt:active{background:var(--panel)}
.em-attchip{color:var(--ink)}
.em-attdl:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line,#2b313c))!important;color:var(--accent)}
/* Phase C — stacked conversation (thread) cards */
.em-thread{display:flex;flex-direction:column}
.em-thmsg{border-bottom:1px solid var(--line,#2b313c)}
.em-thmsg .em-thhead:hover{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
.em-thmsg.open > .em-thhead{background:var(--panel-2)}
.em-waitrow:hover{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
@media(max-width:1320px){.em-split .em-rail{flex-basis:158px}.em-pcoside{flex-basis:188px}}
@media(max-width:1180px){.em-split{flex-direction:column}.em-split .em-rail{flex:none;flex-direction:row;flex-wrap:wrap;gap:3px;border-right:0;border-bottom:1px solid var(--line,#2b313c);max-height:none;padding:7px 9px}.em-fold{width:auto;padding:4px 9px}.em-fold.sub{padding-left:9px}.em-rail-sec{display:none}.em-pcoside{display:none}.em-split .em-list{flex:none;border-right:0;border-bottom:1px solid var(--line,#2b313c);max-height:300px}.em-split .em-pane{max-height:none}.em-composer{min-height:420px}.em-msgwrap{min-height:0}}
/* THE VERY BOTTOM — full-width thought capture bar */
.hm-cc-note{margin-top:14px}
.hm-cc-note .hm-w{margin-bottom:0}
.hm-th{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:10px;padding:7px 11px;font-size:var(--fs-sm);max-width:420px}
/* Ideas inbox inside Notes & Thoughts (8 Oct 2026): each idea with its AI suggestion and Accept / Change / put away */
.jc-idea-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.jc-idea{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:12px;padding:9px 12px}
.jc-idea-main{flex:1;min-width:0}
.jc-idea-t{font-size:var(--fs-sm);color:var(--ink);font-weight:var(--fw-medium);white-space:pre-wrap;word-break:break-word}
.jc-idea-o{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jc-idea-src{color:var(--muted);margin-right:6px}
.jc-idea-meta{margin-top:5px}
.jc-idea-sg{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-radius:999px;padding:2px 9px}
.jc-idea-sg.is-wait{color:var(--muted);background:transparent;padding-left:0}
.jc-idea-act{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.jc-idea-x{border:none;background:none;color:var(--muted);cursor:pointer;padding:4px;line-height:0;border-radius:6px}
.jc-idea-x:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.jc-idea-edit{width:100%;box-sizing:border-box;background:var(--panel);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:7px 9px;font:inherit;font-size:var(--fs-sm);resize:vertical}
.jc-idea-rtog{margin-top:10px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:var(--fs-xs);padding:2px 0}
.jc-idea-rtog:hover{color:var(--ink)}
.jc-idea-recent{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.jc-idea-undo{border:none;background:none;color:var(--accent);cursor:pointer;font-size:var(--fs-xs);padding:0 0 0 4px}
.jc-idea-menu{position:absolute;z-index:9999;width:240px;background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:5px;display:flex;flex-direction:column}
.jc-idea-menu button{display:flex;align-items:center;gap:8px;text-align:left;border:none;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:8px 9px;border-radius:7px;cursor:pointer}
.jc-idea-menu button:hover,.jc-idea-menu button:focus-visible{background:var(--panel-2);outline:none}
.jc-idea-mh{font-size:var(--fs-xs);color:var(--muted);padding:6px 9px 4px}
/* Ideas: the capture box grows for a brain dump; split lists; To discuss (Adam, 20 Oct 2026) */
.jc-idea-in{flex:1;min-width:230px;min-height:36px;max-height:260px;box-sizing:border-box;background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:8px 11px;font:inherit;font-size:var(--fs-sm);line-height:1.4;resize:none;overflow:auto}
.jc-idea-menu{max-height:min(420px,70vh);overflow:auto}
.jc-split{align-items:stretch}
.jc-split-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jc-split-said{font-size:var(--fs-xs);color:var(--muted);white-space:pre-wrap;word-break:break-word;margin:6px 0 2px;padding:8px 10px;border-left:2px solid var(--line,#2b313c);max-height:220px;overflow:auto}
.jc-sp-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.jc-sp-i{display:flex;align-items:flex-start;gap:10px;padding:8px 6px;border-top:1px solid var(--line,#2b313c)}
.jc-sp-i:first-child{border-top:none}
.jc-sp-i.is-off .jc-sp-b{opacity:.5}
.jc-sp-i.is-done{opacity:.75}
.jc-sp-cb{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto;cursor:pointer}
.jc-sp-ok{color:var(--success,#2e9e6b);line-height:0;margin-top:3px;flex:0 0 16px}
.jc-sp-b{flex:1;min-width:0}
.jc-sp-t{font-size:var(--fs-sm);color:var(--ink);font-weight:var(--fw-medium);word-break:break-word}
.jc-sp-d{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.jc-sp-m{margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs)}
.jc-sp-said{font-size:var(--fs-xs);color:var(--muted);font-style:italic;word-break:break-word}
.jc-sp-form{flex:1;display:flex;flex-direction:column;gap:8px}
.jc-sp-form label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);color:var(--muted)}
.jc-sp-form input,.jc-sp-form select,.jc-sp-form textarea{background:var(--panel);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:6px 8px;font:inherit;font-size:var(--fs-sm)}
.jc-sp-row{display:flex;gap:8px;flex-wrap:wrap}
.jc-sp-row label{flex:1;min-width:150px}
.jc-split-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line,#2b313c)}
.jc-disc-g{margin-bottom:8px}
.jc-disc-p{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);margin:6px 0 4px}
.jc-disc-i{display:flex;align-items:flex-start;gap:10px;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.mt-discuss{margin:0 0 12px;padding:10px 14px;background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:12px}
/* To discuss: people strip and prep drawer (Adam, 21 Oct 2026) */
.jcd-host{margin:0 0 14px}
/* My To-Do side column: Reminders, then the private prayer list (Adam, 22 Oct 2026) */
.mtd-side{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto;margin-top:var(--mtd-off,0px);display:flex;flex-direction:column;gap:16px}
.mtd-side .mtd-rem{position:static;max-height:none;overflow:visible;margin-top:0}
.mtd-side #mtd-prayer:empty{display:none}
.jcp{--jcp:#c2417a}
:root[data-theme="light"] .jcp{--jcp:#a83a6c}
.jcp-row{align-items:flex-start}
.jcp-heart{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--jcp);background:color-mix(in srgb,var(--jcp) 14%,transparent);margin-top:1px}
.jcp-b{flex:1;min-width:0;display:flex;flex-direction:column}
.jcp-b b{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.jcp-d{color:var(--muted);font-size:12.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.jcp-s{color:var(--muted);font-size:12.5px;margin-top:1px}
.jcp-s .ok{color:var(--jcp);font-weight:600}
.jcp-acts{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.jcp-pray{border:1px solid var(--jcp);color:var(--jcp);background:transparent;border-radius:999px;padding:3px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.jcp-pray:hover{background:color-mix(in srgb,var(--jcp) 14%,transparent)}
.jcp-pray.on{background:var(--jcp);color:#fff;cursor:default}
.jcp-row.is-prayed .jcp-b b{color:var(--muted)}
.jcp-anst{margin-left:auto;font-size:12.5px}
.jcp-ans{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.jcp-ans input{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:7px 9px;font:inherit;font-size:var(--fs-sm)}
.jcp-answered{border-top:1px solid var(--line);padding:4px 0}
.jcp-arow{display:flex;gap:10px;align-items:flex-start;padding:9px 18px}
.jcp-arow > div{flex:1;min-width:0;display:flex;flex-direction:column}
.jcp-arow b{font-weight:600;font-size:13.5px}
.jcp-ok{color:var(--success,#2e9e6b);line-height:0;margin-top:3px}
.jcd-host:empty{display:none}
.jcd-strip,.jcd-mrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jcd-strip{background:var(--panel);border:1px solid var(--line,#2b313c);border-radius:14px;padding:9px 12px}
.jcd-lbl{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);margin-right:4px}
.jcd-face{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#2b313c);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:3px 10px 3px 3px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.jcd-face:hover{border-color:var(--accent)}
.jcd-face.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.jcd-face .jcd-n{background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:0 6px;line-height:17px}
.jcd-addf{padding:5px 12px;color:var(--muted)}
.jcd-av{width:24px;height:24px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;flex:0 0 auto}
.jcd-av.lg{width:40px;height:40px;font-size:14px}
.jcd-drawer{position:fixed;inset:0;z-index:100000}
.jcd-menu{z-index:100001 !important}
.jcd-menu button .muted{white-space:nowrap;font-size:11px;flex:0 0 auto}
.jcd-shade{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.jcd-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--panel);border-left:1px solid var(--line,#2b313c);box-shadow:-18px 0 40px rgba(0,0,0,.35);overflow:auto;animation:jcdIn .16s ease}
@keyframes jcdIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.jcd-top{display:flex;align-items:center;gap:12px;padding:18px 18px 12px;position:sticky;top:0;background:var(--panel);z-index:1}
.jcd-name{font-weight:700;font-size:17px;color:var(--ink)}
.jcd-x{margin-left:auto;border:none;background:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;line-height:0}
.jcd-x:hover{background:var(--panel-2);color:var(--ink)}
.jcd-sec{padding:10px 18px 14px;border-top:1px solid var(--line,#2b313c)}
.jcd-sec h5{margin:6px 0 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.jcd-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--line,#2b313c) 60%,transparent)}
.jcd-sec h5 + .jcd-item{border-top:none}
.jcd-item.is-done{opacity:.45}
.jcd-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--accent);background:none;cursor:pointer;flex:0 0 auto;margin-top:2px;padding:0}
.jcd-check:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.jcd-b{flex:1;min-width:0}
.jcd-t{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);word-break:break-word}
.jcd-d{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.jcd-m{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted-2);margin-top:4px}
.jcd-m .late,.jcd-due.late{color:var(--bad,#d9534f)}
.jcd-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.jcd-add{display:flex;gap:8px;margin-top:10px}
.jcd-add input,.jcd-form input,.jcd-form textarea,.jcd-form select{background:var(--panel-2);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:7px 9px;font:inherit;font-size:var(--fs-sm);min-width:0}
.jcd-add input{flex:1}
.jcd-form{flex:1;display:flex;flex-direction:column;gap:8px}
.jcd-form label{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);color:var(--muted);flex:1}
.jcd-row{display:flex;gap:8px;flex-wrap:wrap}
.jcd-end{justify-content:flex-end}
.jcd-lat{padding:4px 0}
.jcd-task{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:none;color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:7px 6px;margin:0 -6px;border-radius:8px;cursor:pointer}
.jcd-task:hover{background:var(--panel-2)}
.jcd-ring{width:15px;height:15px;border-radius:50%;border:2px dashed var(--muted-2);flex:0 0 auto}
.jcd-tt{flex:1;min-width:0}
.jcd-due{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.jcd-last{display:block;text-decoration:none;color:var(--ink);padding:8px 10px;margin:0 -10px;border-radius:10px}
.jcd-last:hover{background:var(--panel-2)}
.jcd-sum{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.45}
.jcd-pop{margin-top:10px;padding:4px 12px 10px;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:12px}
.jcd-pop .jcd-item:first-child{border-top:none}
.jcd-more{border:none;background:none;color:var(--accent);font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;padding:6px 0 0}
.mt-discuss .jc-disc-i:last-child{margin-bottom:0}
@media(max-width:600px){.jc-sp-i,.jc-disc-i{flex-wrap:wrap}.jc-sp-i .jc-idea-act,.jc-disc-i .jc-idea-act{width:100%;justify-content:flex-end}}
@media(max-width:600px){.jc-idea{flex-direction:column;align-items:stretch}.jc-idea-act{justify-content:flex-end}}
/* Redesign atoms: segment chips, mini avatars, birthday chips, attention pulse */
.hm-seg{display:inline-flex;align-items:center;background:var(--panel-2);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:var(--fs-caption);font-weight:var(--fw-medium);white-space:nowrap}
.hm-avx{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line,#2b313c);color:var(--muted);font-size:10px;font-weight:700;flex:0 0 auto}
.hm-bd-chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line,#2b313c);color:var(--ink);border-radius:999px;padding:4px 11px 4px 5px;font-size:var(--fs-sm);cursor:pointer}
.hm-bd-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line,#2b313c))}
.hm-bd-chip .hm-bd-go{color:var(--accent);font-weight:700;font-size:var(--fs-caption)}
/* Grid beta polish: resize corners reveal on hover; header strip shows grab */
.jc-dash-grid .ui-resizable-handle{opacity:0;transition:opacity .15s}
.jc-dash-grid .grid-stack-item:hover .ui-resizable-handle,.jc-dash-grid .grid-stack-item.ui-resizable-resizing .ui-resizable-handle{opacity:.85}
.jc-dash-grid .hm-wgrip{cursor:grab}
.jc-dash-grid .jc-grid-dragging .hm-wgrip{cursor:grabbing}
.hm-pulse{animation:hmPulse 1.4s ease 2}
@keyframes hmPulse{0%,100%{box-shadow:0 0 0 0 rgba(244,66,54,0)}45%{box-shadow:0 0 0 5px rgba(244,66,54,.4)}}
.hm-cc-bottom .hm-w{margin-bottom:0}
@media(max-width:1180px){.hm-cc-bottom{grid-template-columns:1fr}}
.hm-myact-row:hover{background:var(--panel-2)}
.hm-cc-ops{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.hm-cc-col{min-width:0}
@media(max-width:1180px){.hm-cc-grid{grid-template-columns:1fr}.hm-cc-ops{grid-template-columns:1fr}}
.hm-next-card{border-left:3px solid var(--line,#2b313c)}
.hm-chip{background:var(--panel-2);border:1px solid var(--line,#2b313c);color:var(--ink);border-radius:16px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);cursor:pointer}
.hm-chip:hover{border-color:var(--accent)}
.hm-chip.active{background:var(--lead);border-color:var(--lead);color:#0b0e13;font-weight:var(--fw-medium)}
.hm-chip-n{opacity:.65;font-size:var(--fs-caption);margin-left:var(--sp-0)}
.hm-badge{font-size:var(--fs-caption);color:var(--muted);border:1px solid var(--line,#2b313c);border-radius:10px;padding:1px var(--sp-2);white-space:nowrap;flex:0 0 auto}
.hm-badge.over{color:var(--danger);border-color:rgba(224,115,107,.35);background:rgba(224,115,107,.10)}
.hm-badge.done{color:var(--success);border-color:rgba(46,158,107,.35)}
/* The due-date badge is a button. It stays quiet until you approach it — a row of
   nine overdue pills all shouting "click me" would be worse than the problem. */
.hm-duebtn{cursor:pointer;transition:border-color .12s ease,background .12s ease}
.hm-duebtn:hover{border-color:var(--accent);background:var(--accent-soft)}
.hm-duebtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hm-badge.over.hm-duebtn:hover{border-color:var(--danger);background:rgba(224,115,107,.18)}
/* No date yet: visible enough to find, faint enough not to read as a real date. */
.hm-duenone{opacity:.45;border-style:dashed}
.hm-task:hover .hm-duenone{opacity:1}
.hm-cal-wrap{position:relative;max-height:515px;overflow-y:auto}
#hm-todo-list{max-height:372px;overflow-y:auto}
.hm-sec{position:sticky;top:0;z-index:2;background:var(--panel-2);border-bottom:1px solid var(--line,#2b313c)}
/* PCO order-of-service (Next Service Plan) */
.pco-order{border:1px solid var(--line,#2b313c);border-radius:8px;max-height:420px;overflow-y:auto}
/* Section headers styled like the PCO Workflows headers: bold, uppercase, accent
   underline, sticky within the scrolling order-of-service. */
.pco-hd{position:sticky;top:0;z-index:1;background:var(--panel);padding:9px 10px 5px;font-size:var(--fs-xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border-bottom:1px solid var(--line,#2b313c)}
.pco-it{display:flex;gap:10px;padding:var(--sp-2) 10px;border-bottom:1px solid var(--line,#2b313c)}
.pco-it:last-child{border-bottom:0}
.pco-len{flex:0 0 40px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--fs-caption);padding-top:1px}
.pco-it-main{flex:1;min-width:0}
.pco-it-title{font-weight:var(--fw-medium);font-size:var(--fs-xs);color:var(--ink)}
.pco-it-desc{color:var(--muted);font-size:var(--fs-caption);margin-top:var(--sp-0);white-space:pre-wrap;line-height:1.4}
.hm-cal-grid{position:relative}
.hm-cal-hr{position:relative;border-top:1px solid var(--line,#2b313c)}
.hm-cal-hl{position:absolute;top:-8px;left:8px;font-size:var(--fs-caption);color:var(--muted);background:var(--panel);padding:0 3px}
.hm-cal-layer{position:absolute;top:0;left:44px;right:8px;bottom:0}
.hm-cal-ev{position:absolute;left:0;right:3px;border-radius:6px;padding:3px 7px;font-size:var(--fs-caption);line-height:1.2;color:var(--ink);overflow:hidden;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hm-cal-evt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-medium)}
.hm-cal-evs{color:var(--muted);font-size:var(--fs-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-cal-now{position:absolute;left:-44px;right:0;height:2px;background:#e0453a;z-index:3}
.hm-cal-now::before{content:'';position:absolute;left:-2px;top:-3px;width:8px;height:8px;border-radius:50%;background:#e0453a}
/* Gridstack core CSS bundled same-origin (the CSP blocks the jsdelivr stylesheet). */
.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item{left:0}.grid-stack.grid-stack-rtl>.grid-stack-item{right:0}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23888" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center;transform:rotate(-45deg)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,right,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,right .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,right 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack:not(.grid-stack-rtl)>.grid-stack-item[gs-x="0"]{left:0}
/* Beta drag-&-resize dashboard grid (Gridstack) — grip handle + hide legacy widget bar */
.jc-dash-grid .hm-wbar{display:none}
.jc-dash-grid .hm-w{margin:0}
/* The grid already spaces cards (8px item margin). The .card's own 14px top/bottom margin
   is classic-layout spacing and here it just doubles up — 28px of dark gap inside every
   slot, on top of row-rounding. It's most of the "dead space between Needs your attention
   and Goals". The grid owns spacing now; the card shouldn't add its own. */
.jc-dash-grid .grid-stack-item-content > .hm-w > .card{margin-top:0;margin-bottom:0}
.jc-dash-grid .grid-stack-item-content{overflow:auto;display:flex;flex-direction:column;border-radius:12px;padding:0}
/* Widget takes its NATURAL height (not stretched) so each card can be sized to fit
   its full content — see fitH() in app.js. A hand-resized card scrolls instead. */
.jc-dash-grid .grid-stack-item-content > .hm-w{flex:0 0 auto;min-height:0}
/* Release the To-Do list + Today-calendar focus caps IN THE GRID ONLY, so both show
   their full content (fitH sizes the card to fit). Classic dashboard keeps its caps. */
/* Long-list cards (My To-Do, Today's calendar) are a WINDOW onto their list, not the whole
   list: the card is a fixed height and the list scrolls INSIDE it, so the card's own header
   and filters stay put. Letting the whole card scroll took the header with it; letting the
   card grow to fit made a 4500px To-Do. Mirrors what the classic dashboard already does. */
/* EVERY card fills its slot. Forcing three columns flush always leaves slack on the shortest
   one, and because .grid-stack-item-content is transparent that slack showed the PAGE through
   it — a dark hole under the card. Filling turns it into room inside the card instead. This
   used to be an opt-in list, which is why Meetings (not on it) sat 11px shy of To-Do and the
   calendar. needOf() measures the card's INNER content, so filling can't pin the row height. */
.jc-dash-grid .grid-stack-item > .grid-stack-item-content{overflow:hidden}
.jc-dash-grid .grid-stack-item > .grid-stack-item-content > .hm-w{flex:1 1 auto;min-height:0}
/* Fill the slot WITHOUT touching the card's own internal layout. height:100% is enough —
   forcing display:flex;flex-direction:column on every card broke the ones already laid out
   as a horizontal row (Workflows, Dept budget: their header stacked and centred).
   overflow:auto is the safety net: the card fills a fixed slot, so if its content ever
   exceeds it (a hand-resize, a burst of items) it scrolls rather than clipping. */
.jc-dash-grid .grid-stack-item-content > .hm-w > .card{height:100%;min-height:0;overflow:auto}
/* Category band headers — full-width label rows that group the cards beneath them into
   Mission Control / Care / Communications / Services / Insights / Finances. They're locked
   grid items (no drag, no resize, no card chrome): just a clean uppercase label + a divider. */
.jc-dash-grid .jc-cathead-item > .grid-stack-item-content{overflow:visible;background:transparent;border:0;padding:0}
.jc-dash-grid .jc-cathead-item .ui-resizable-handle,.jc-dash-grid .jc-cathead-item .hm-wgrip,.jc-dash-grid .jc-cathead-item .hm-wx{display:none !important}
.jc-dash-grid .jc-cathead{display:flex;align-items:flex-end;height:100%;padding:12px 4px 7px;border-bottom:1px solid var(--line,#2b313c)}
.jc-dash-grid .jc-cathead-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* Only the window cards need a flex column, so their inner list is what scrolls and the
   card's own header stays pinned above it. */
.jc-dash-grid .grid-stack-item[gs-id="todo"] .hm-w > .card,
.jc-dash-grid .grid-stack-item[gs-id="calendar"] .hm-w > .card,
.jc-dash-grid .grid-stack-item[gs-id="pco_services"] .hm-w > .card,
.jc-dash-grid .grid-stack-item[gs-id="next_service"] .hm-w > .card{display:flex;flex-direction:column;overflow:hidden}
/* The To-Do toolbar is [input][📅 date][＋ Reminder] — ＋Task moved up to the card header,
   because a 4th control pushed this row past the width of a 1/3 card and wrapped. Nothing to
   force here now: the three fit on one row on their own. */

/* This Sunday: the order-of-service is hard-capped at max-height:420px, so on a taller card
   the list stopped dead at 420px and left the rest of the card blank. In the grid the card
   is a known height, so let the list STRETCH to the bottom and scroll inside — the plan is
   the point of the card, so it should use every pixel it's given. */
.jc-dash-grid #hm-sunday{display:flex;flex-direction:column}
.jc-dash-grid #hm-sunday .pco-order{flex:1 1 auto;min-height:0;max-height:none}
.jc-dash-grid #hm-todo-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
.jc-dash-grid #hm-cal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.jc-dash-grid .hm-cal-wrap{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
.jc-dash-grid #hm-coming{flex:1 1 auto;min-height:0;overflow-y:auto}
.jc-dash-grid #hm-sunday{flex:1 1 auto;min-height:0;overflow-y:auto}

/* Drag / resize / hide are EDIT affordances — they exist only in Customize mode. Outside it
   the dashboard is just content you read: no grip, no ✕, no resize corners, no accidental
   shoving a card out of place while hovering. */
.jc-dash-grid .hm-wgrip,
.jc-dash-grid .hm-wx{display:none}
.jc-dash-grid .grid-stack-item > .ui-resizable-handle{display:none !important}
.hm-customizing .jc-dash-grid .hm-wgrip{display:block}
.hm-customizing .jc-dash-grid .hm-wx{display:block}
.hm-customizing .jc-dash-grid .grid-stack-item > .ui-resizable-handle{display:block !important}
/* CRITICAL: Gridstack animates `height`, which fights the programmatic auto-fit — a card
   re-measured mid-transition never reaches its target, so EVERY card plateaued at the same
   wrong height (588px) no matter what h it was given. Keep the smooth move/width animation,
   but let height apply instantly. */
.jc-dash-grid.grid-stack-animate > .grid-stack-item,
.jc-dash-grid > .grid-stack-item{transition-property:left,top,width}
.jc-dash-grid .grid-stack-item-content{position:relative}
.hm-wgrip{cursor:move;color:var(--muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:3px 30px 5px 8px;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
.hm-wgrip:hover{color:var(--ink)}
/* ✕ hide button — top-right corner (that's why resize skips the NE corner) */
.jc-dash-grid .hm-wx{position:absolute;top:4px;right:5px;z-index:7;width:20px;height:20px;padding:0;line-height:18px;text-align:center;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;opacity:0;transition:opacity .12s ease,background .12s ease,color .12s ease}
.jc-dash-grid .grid-stack-item:hover .hm-wx{opacity:.8}
.jc-dash-grid .hm-wx:hover{opacity:1;background:rgba(217,83,79,.16);color:#e0655f}
/* Resize corners. Core CSS only positions SE; we add NW + SW and pull all three
   flush to the card's true corner (bigger hit area) so they're easy to grab. */
.jc-dash-grid .ui-resizable-nw{cursor:nw-resize;width:22px;height:22px;top:1px;left:1px}
.jc-dash-grid .ui-resizable-sw{cursor:sw-resize;width:22px;height:22px;bottom:1px;left:1px}
.jc-dash-grid .ui-resizable-se{width:22px;height:22px;right:1px;bottom:1px;background-image:none;transform:none}
.jc-dash-grid .ui-resizable-nw::after,.jc-dash-grid .ui-resizable-sw::after,.jc-dash-grid .ui-resizable-se::after{content:"";position:absolute;width:8px;height:8px;border:2px solid var(--muted);opacity:.28;transition:opacity .12s ease}
.jc-dash-grid .grid-stack-item:hover .ui-resizable-nw::after,.jc-dash-grid .grid-stack-item:hover .ui-resizable-sw::after,.jc-dash-grid .grid-stack-item:hover .ui-resizable-se::after{opacity:.85}
.jc-dash-grid .ui-resizable-nw::after{top:4px;left:4px;border-right:0;border-bottom:0}
.jc-dash-grid .ui-resizable-sw::after{bottom:4px;left:4px;border-right:0;border-top:0}
.jc-dash-grid .ui-resizable-se::after{bottom:4px;right:4px;border-left:0;border-top:0}
/* Card being dragged: lift it above the rest */
.jc-dash-grid .grid-stack-item.jc-grid-dragging{z-index:40}
.jc-dash-grid .grid-stack-item.jc-grid-dragging>.grid-stack-item-content{box-shadow:0 12px 32px rgba(0,0,0,.38);opacity:.94;cursor:grabbing}
body.jc-grid-dragging-on{cursor:grabbing !important;user-select:none}
body.jc-grid-dragging-on *{cursor:grabbing !important}
/* Planner all-day cell: reveal a + affordance on hover so it reads as clickable */
.sc-allday{padding:1px 0;transition:padding-bottom .12s ease}
.sc-allday:hover{background:rgba(244,66,54,.08);padding-bottom:26px}
.sc-allday::after{content:"+";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--accent);color:#0b0e13;font-size:15px;line-height:20px;text-align:center;font-weight:700;opacity:0;transition:opacity .12s ease;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:4}
.sc-allday:hover::after{opacity:1}
/* Planner grid hover: a cursor-following slot ghost with a + so empty time reads as clickable */
.sc-hover-add{position:absolute;z-index:5;pointer-events:none;display:none;align-items:center;justify-content:center;background:rgba(244,66,54,.10);border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:6px}
.sc-hover-plus{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#0b0e13;font-weight:700;font-size:15px;line-height:20px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* Inline quick-reminder input that pops up at the click point on the top strip */
.sc-qr{background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.45);padding:6px}
.sc-qr-in{width:232px;max-width:70vw;background:var(--panel,#161b24);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:6px;padding:8px 10px;font-size:var(--fs-sm);outline:none}
.sc-qr-in:focus{border-color:var(--accent)}
.hm-w{position:relative;margin-bottom:14px}
.hm-cc-ops{align-items:start}
/* Ops strip: slim status tiles at their natural height — browse/setup entries,
   not data dumps. (The old JS-equalized ops row is gone with the redesign.) */
.hm-cc-ops .hm-w{margin-bottom:0}
.hm-ops-tile{display:flex;align-items:center;gap:12px}
/* PCO Upcoming Services: rows share the card's full height so the list reaches the
   bottom (equal-height rows that hold a readable minimum and scroll if there are many). */
#hm-pco-services{display:flex;flex-direction:column}
/* Natural row height (not flex:1 stretch) so many services scroll at a consistent
   spacing instead of a few rows ballooning to fill the taller card. */
.hm-svc{flex:0 0 auto;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px;border-top:1px solid var(--line,#2b313c);text-decoration:none;color:var(--ink);font-size:var(--fs-sm);transition:background .12s ease,padding-left .12s ease}
.hm-svc:first-child{border-top:0}
/* Series grouping header (PCO SERIES column) — matches the Workflows header look. */
.hm-svc-series{flex:0 0 auto;position:sticky;top:0;z-index:1;background:var(--panel);padding:9px 0 5px;font-size:var(--fs-xs);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border-bottom:2px solid var(--accent)}
.hm-svc-series + .hm-svc{border-top:0}
.hm-svc:hover{background:var(--panel-2);padding-left:8px;border-radius:6px}
.hm-svc-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-medium)}
.hm-svc-date{flex:0 0 auto;font-size:var(--fs-caption);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hm-wbar{display:none;position:absolute;top:6px;right:6px;z-index:5;gap:var(--sp-0);background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:8px;padding:var(--sp-0)}
.hm-customizing .hm-wbar{display:flex}
.hm-customizing .hm-w{outline:1px dashed var(--line,#2b313c);outline-offset:2px;border-radius:12px}
.hm-wb{cursor:pointer;font-size:var(--fs-xs);line-height:1;padding:3px var(--sp-2);border-radius:6px;color:var(--muted)}
.hm-wb:hover{background:var(--line,#2b313c);color:var(--ink)}
.hm-customizing .hm-w{cursor:grab}
.hm-customizing .hm-w:active{cursor:grabbing}
.hm-w.hm-dragging{opacity:.45;outline:2px dashed var(--accent)}

/* ---- Global keyboard focus indicator (accessibility) ----
   :focus-visible only fires for keyboard / programmatic focus, so mouse clicks
   never get a ring — this restores a visible focus path across the whole app
   without disturbing the rich-text editors that intentionally use outline:none
   plus a border-color focus cue. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible,
[tabindex]:focus-visible,
.ptab:focus-visible,
.btn:focus-visible,
.task-tabs a:focus-visible,
.set-tabs .set-tab:focus-visible,
.sidebar nav a:focus-visible,
.chan:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* Sticky time-frame tabs — keep the active range visible while scrolling. Each
   bar is sticky only within its own section (period tabs through the metrics,
   the "Where reach comes from" header within that section) so they hand off
   instead of stacking. The ::before paints over the scroll-container's top
   padding so content doesn't peek above the bar while it's pinned. */
.period-tabs,.reach-bd-head{position:sticky;top:0;z-index:30;background:var(--bg);padding:var(--sp-3) 0 var(--sp-2)}
.reach-bd-head{z-index:29}
.period-tabs::before,.reach-bd-head::before{content:'';position:absolute;left:0;right:0;top:-26px;height:26px;background:var(--bg);pointer-events:none}

/* ============================================================
   Site-wide mobile polish — hardening pass (Jun 2026).
   Additive only; layered last so it overrides without touching
   the desktop layout. Two tiers: ≤760 (phone/tablet) and ≤480 (phone).
   ============================================================ */
@media (max-width: 760px){
  /* Nothing should be able to push the page wider than the screen. */
  img,video,canvas{max-width:100%;height:auto}
  .content{overflow-x:hidden}
  /* Wide data tables scroll inside their own card instead of squishing
     the whole page (covers every table: meetings, reach, staff, social, etc.). */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table{min-width:420px}
  /* Header rows with right-aligned tab strips wrap cleanly. */
  .ptabs{flex-wrap:wrap}
  /* The Social → Outcomes loop reads top-to-bottom on a phone. */
  .so-flow{flex-direction:column;align-items:stretch}
  .so-arrow{transform:rotate(90deg);align-self:center;padding:var(--sp-0) 0}
  /* Long links / tokens / names wrap instead of overflowing. */
  td,.mt-row-title,.vb-name,.so-tbl td{overflow-wrap:anywhere}
}
@media (max-width: 480px){
  body{font-size:var(--fs-base)}
  .content{padding:14px var(--sp-3) 56px}
  h1{font-size:var(--fs-lg)}
  .cat-title{font-size:var(--fs-md)}
  /* iOS zooms toward any focused control under 16px — bump form fields so
     tapping an input doesn't jerk the page. (Phone-only via the media query.) */
  input[type=text],input[type=number],input[type=date],input[type=datetime-local],
  input[type=time],input[type=email],input[type=search],input[type=password],
  input[type=tel],input[type=url],select,textarea{font-size:var(--fs-md)}
  /* Modals use the full small screen. */
  .jc-modal-overlay{padding:10px}
  .jc-modal{max-width:none;max-height:calc(100vh - 20px);overflow:auto}
  /* Stat tiles go single-column. */
  .metric-grid{grid-template-columns:1fr}
}

/* ============================================================================
   Files explorer (Dropbox-style browser over the team OneDrive)
   All colors flow from the theme variables so it tracks light/dark mode.
   ========================================================================== */
.fx{--fx-sel:color-mix(in srgb, var(--accent) 16%, transparent);
    --fx-hover:color-mix(in srgb, var(--ink) 6%, transparent);
    --fx-cols:34px minmax(0,1fr) 150px 92px 100px 132px;padding:14px var(--sp-4)}
.fx-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.fx-tb-left{min-width:0;flex:1 1 auto}
.fx-tb-right{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
/* breadcrumb */
.fx-crumbs{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap;font-size:var(--fs-base);min-width:0}
.fx-crumb{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--muted);text-decoration:none;padding:var(--sp-0) var(--sp-1);border-radius:6px;min-width:0;max-width:320px}
.fx-crumb .fx-crumb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
a.fx-crumb:hover{color:var(--accent)}
.fx-crumb.cur{color:var(--ink);font-weight:var(--fw-medium)}
.fx-crumb-sep{display:inline-flex;color:var(--muted-2)}
.fx-crumb-search{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--ink);font-size:var(--fs-base)}
.fx-crumb-search a{display:inline-flex;color:var(--muted);margin-left:var(--sp-0)}
.fx-crumb-search a:hover{color:var(--crit)}
/* search box — full-width row on top, like Dropbox. The icon and input are flex
   siblings inside a bordered wrapper, so they can never overlap (no padding/abs
   trickery to misfire). */
.fx-searchrow{margin-bottom:var(--sp-3)}
.fx-searchrow .fx-search{width:100%}
.fx-search{display:flex;align-items:center;gap:var(--sp-2);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:0 var(--sp-3);width:210px}
.fx-search:focus-within{border-color:var(--accent)}
.fx-search>svg{flex:0 0 auto;color:var(--muted-2)}
.fx-search input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--ink);font-size:var(--fs-sm);padding:var(--sp-2) 0}
.fx-search input::placeholder{color:var(--muted-2)}
/* toolbar buttons */
.fx-tool{display:inline-flex;align-items:center;gap:var(--sp-2);background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);cursor:pointer}
.fx-tool:hover{border-color:var(--accent);color:var(--accent)}
.fx-icon-btn{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);padding:var(--sp-2);border-radius:8px}
.fx-icon-btn:hover{color:var(--accent)}
.fx-views{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fx-view-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--muted);padding:var(--sp-2) var(--sp-2);cursor:pointer}
.fx-view-btn+.fx-view-btn{border-left:1px solid var(--line)}
.fx-view-btn:hover{color:var(--ink)}
.fx-view-btn.active{background:var(--panel-2);color:var(--accent)}
/* bulk action bar */
.fx-bulk{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:var(--sp-2) var(--sp-3);margin-bottom:10px}
.fx-bulk-n{font-size:var(--fs-sm);color:var(--muted);margin-right:var(--sp-1)}
.fx-bulk-n b{color:var(--ink)}
.fx-bulk-b{display:inline-flex;align-items:center;gap:var(--sp-1);background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:7px;padding:var(--sp-1) 10px;font-size:var(--fs-xs);cursor:pointer}
.fx-bulk-b:hover{border-color:var(--accent);color:var(--accent)}
.fx-bulk-b.danger:hover{border-color:var(--crit);color:var(--crit)}
.fx-bulk-b.ghost{color:var(--muted)}
.fx-msg{color:var(--muted)}
.fx-msg:not(:empty){margin:0 0 var(--sp-2)}
/* list header + rows */
.fx-head,.fx-row{display:grid;grid-template-columns:var(--fx-cols);align-items:center;gap:var(--sp-2)}
.fx-head{padding:var(--sp-2) var(--sp-2);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.fx-h{background:transparent;border:0;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-align:left;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:3px}
.fx-h:hover{color:var(--ink)}
.fx-h.on{color:var(--ink)}
.fx-arrow{font-size:var(--fs-caption);color:var(--accent)}
.fx-rows{display:flex;flex-direction:column}
.fx-row{padding:var(--sp-2) var(--sp-2);border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);cursor:default;border-radius:7px}
.fx-row:hover{background:var(--fx-hover)}
.fx-row.sel{background:var(--fx-sel)}
.fx-check{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fx-check input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}
/* Dark theme: native checkboxes default to glaring white boxes — tell the
   browser to render them in dark form-control style (light theme keeps native). */
html:not([data-theme="light"]) .fx-check input{color-scheme:dark}
/* Apply the same to EVERY checkbox in the app (event/task lists, filters, pickers):
   accent-tinted, and rendered in dark form-control style in the dark theme so they
   blend in instead of showing as glaring white boxes. Light theme keeps native
   styling. Inline accent-color (e.g. coloured status checks) still wins. */
input[type=checkbox]{accent-color:var(--accent)}
html:not([data-theme="light"]) input[type=checkbox]{color-scheme:dark}

/* ClickUp-style hover highlight on every task row, app-wide (Tasks list, project &
   event detail lists, Home, packing/order items). Rows sit on --panel; a faint
   overlay reads as a subtle highlight in both themes without matching the --panel-2
   inline-edit controls. Board/Kanban cards get a gentle lift instead. */
.tl-row,.prd-row,.evd-row,.hm-task,.eli-row{transition:background .08s ease}
.tl-row:hover,.prd-row:hover,.evd-row:hover,.hm-task:hover,.eli-row:hover{background:rgba(255,255,255,.05)}
html[data-theme="light"] .tl-row:hover,html[data-theme="light"] .prd-row:hover,html[data-theme="light"] .evd-row:hover,html[data-theme="light"] .hm-task:hover,html[data-theme="light"] .eli-row:hover{background:rgba(0,0,0,.04)}
/* Marketing flag — the "control" half of the marketing hub. Invisible on a
   resting unflagged row so task lists look exactly as they did before; revealed
   on row hover; and permanently lit once ON so the marketing work in a long
   stage is scannable straight down the column. Never display:none — that would
   reflow the row on hover, and a row that jumps under the cursor is worse than
   a quiet icon. */
.jc-mkt{border:none;background:none;padding:0;cursor:pointer;line-height:0;color:var(--muted-2);opacity:0;transition:opacity .1s ease,color .1s ease}
.tl-row:hover .jc-mkt,.prd-row:hover .jc-mkt,.evd-row:hover .jc-mkt,.hm-task:hover .jc-mkt{opacity:.45}
.jc-mkt:hover{opacity:.8}
.jc-mkt.on,.evd-row:hover .jc-mkt.on,.prd-row:hover .jc-mkt.on,.tl-row:hover .jc-mkt.on{opacity:1;color:var(--accent)}
.jc-mkt:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* Touch has no hover. The app runs as a WebView on phones and Caitlyn works from
   hers, so on a coarse pointer the icon is permanently faintly visible rather
   than hidden behind a gesture that device cannot make. */
@media (hover:none),(pointer:coarse){.jc-mkt{opacity:.4}}
.tk-card,.prd-bcard,.evd-bcard,.sc-block,.sc-split{transition:box-shadow .1s ease}
.tk-card:hover,.prd-bcard:hover,.evd-bcard:hover{box-shadow:0 2px 10px rgba(0,0,0,.22)}
.sc-block:hover,.sc-split:hover{box-shadow:0 2px 10px rgba(0,0,0,.28)}
.fx-cell-name{min-width:0;display:flex;flex-direction:column;gap:1px}
.fx-name-line{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.fx-name{display:inline-flex;align-items:center;gap:var(--sp-2);min-width:0;color:var(--ink);text-decoration:none}
a.fx-name:hover .fx-nm{color:var(--accent)}
.fx-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-medium);font-size:var(--fs-base)}
.fx-sub{margin-left:var(--sp-0);font-weight:400}
.fx-path{display:inline-flex;align-items:center;gap:var(--sp-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:39px}
.fx-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-access{font-size:var(--fs-xs);color:var(--muted-2);cursor:help}
.fx-thumb{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;background:var(--panel-2)}
.fx-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fx-thumb.ico{color:var(--muted)}
.fx-thumb.big{width:46px;height:46px}
/* per-row hover actions */
.fx-row-acts{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-0);opacity:0;transition:opacity .12s ease}
.fx-row:hover .fx-row-acts,.fx-row.sel .fx-row-acts{opacity:1}
.fx-a{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--muted);padding:var(--sp-1);border-radius:6px;cursor:pointer}
.fx-a:hover{color:var(--accent);background:var(--fx-hover)}
/* grid view */
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:var(--sp-3)}
.fx-tile{position:relative;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel);cursor:default;text-align:center}
.fx-tile:hover{border-color:color-mix(in srgb, var(--accent) 50%, var(--line))}
.fx-tile.sel{border-color:var(--accent);background:var(--fx-sel)}
.fx-tile .fx-check{position:absolute;top:7px;left:7px;opacity:0;transition:opacity .12s}
.fx-tile .fx-more{position:absolute;top:5px;right:5px;opacity:0;transition:opacity .12s}
.fx-tile:hover .fx-check,.fx-tile:hover .fx-more,.fx-tile.sel .fx-check{opacity:1}
.fx-tile-img{height:92px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border-radius:8px;overflow:hidden;margin-bottom:var(--sp-2)}
.fx-tile-img img{width:100%;height:100%;object-fit:cover}
.fx-tile-img.ico{color:var(--muted)}
.fx-tile-meta{min-width:0}
.fx-tile-nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:var(--fw-medium);font-size:var(--fs-sm)}
a.fx-tile-nm:hover{color:var(--accent)}
.fx-tile-sub{display:block;margin-top:1px}
/* preview (split) view */
.fx-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fx-split-list{max-height:62vh;overflow:auto;border-right:1px solid var(--line)}
.fx-crow{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);cursor:pointer;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.fx-crow:hover{background:var(--fx-hover)}
.fx-crow.active{background:var(--fx-sel)}
.fx-crow .fx-nm{font-weight:500}
.fx-pane{padding:22px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2)}
.fx-pane-empty{padding:40px 18px;text-align:center}
.fx-pane-img img{max-width:100%;max-height:320px;border-radius:8px;display:block}
.fx-pane-note{margin-top:var(--sp-1)}
.fx-pane-ico{color:var(--muted);padding:18px}
.fx-pane-name{font-weight:var(--fw-medium);font-size:var(--fs-base);word-break:break-word}
.fx-pane-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center;margin-top:var(--sp-2)}
.fx-pane-acts .btn{padding:var(--sp-2) 14px;font-size:var(--fs-sm)}
/* empty state */
.fx-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:46px 18px;text-align:center;color:var(--muted-2)}
.fx-empty p{margin:0}
/* context menu */
.fx-ctx{position:fixed;z-index:100000;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.4);padding:var(--sp-1);min-width:184px}
.fx-ctx-i{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:var(--ink);padding:var(--sp-2) 10px;border-radius:7px;font-size:var(--fs-sm);cursor:pointer}
.fx-ctx-i:hover{background:var(--panel-2)}
.fx-ctx-i svg{color:var(--muted)}
.fx-ctx-i.danger{color:var(--crit)}
.fx-ctx-i.danger svg{color:var(--crit)}
.fx-ctx-i.danger:hover{background:color-mix(in srgb, var(--crit) 14%, transparent)}
.fx-ctx-sep{height:1px;background:var(--line);margin:var(--sp-1) var(--sp-2)}
/* responsive: drop the secondary columns + stack the split pane */
@media (max-width:760px){
  .fx{--fx-cols:30px minmax(0,1fr) 44px}
  .fx-head button[data-sort=modified],.fx-head button[data-sort=size],.fx-head button[data-sort=access],
  .fx-row>.fx-cell{display:none}
  .fx-row-acts{opacity:1}
  .fx-row-acts .fx-a:not(.fx-more){display:none}
  .fx-split{grid-template-columns:1fr}
  .fx-split-list{max-height:38vh}
}
/* drag-and-drop highlights (P3) */
.fx-drop{box-shadow:inset 0 0 0 2px var(--accent);background:var(--fx-sel)!important;border-radius:8px}
.fx.fx-dropzone{outline:2px dashed var(--accent);outline-offset:-6px}
/* upload tray (P4) — bottom-right, survives repaints */
.fxup-tray{position:fixed;right:16px;bottom:16px;z-index:99998;width:330px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.5);overflow:hidden}
.fxup-head{display:flex;align-items:center;justify-content:space-between;padding:10px var(--sp-3);border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.fxup-close{background:transparent;border:0;color:var(--muted);cursor:pointer;display:inline-flex;padding:var(--sp-0);border-radius:5px}
.fxup-close:hover{color:var(--accent)}
.fxup-list{max-height:280px;overflow:auto}
.fxup-job{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.fxup-job:first-child{border-top:0}
.fxup-ic{color:var(--muted);display:inline-flex;flex:0 0 auto}
.fxup-job.done .fxup-ic{color:var(--accent)}
.fxup-job.error .fxup-ic{color:var(--crit)}
.fxup-meta{flex:1;min-width:0}
.fxup-name{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxup-track{height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin-top:var(--sp-1)}
.fxup-fill{height:100%;background:var(--accent);width:0;transition:width .15s ease}
.fxup-pct{flex:0 0 auto;min-width:34px;text-align:right}
.fxup-x{background:transparent;border:0;color:var(--muted);cursor:pointer;display:inline-flex;padding:3px;border-radius:5px}
.fxup-x:hover{color:var(--accent)}
.fxup-st{margin-top:var(--sp-0)}
/* move/copy folder picker (P3) */
.jc-fxpick-overlay .fxpick{max-width:480px;width:100%}
.fxpick-crumbs{padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--line);color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--sp-1);align-items:center;font-size:var(--fs-xs)}
.fxpick-crumbs a{color:var(--accent);text-decoration:none}
.fxpick-body{max-height:46vh;overflow:auto;padding:var(--sp-2)}
.fxpick-folder{display:flex;align-items:center;gap:var(--sp-2);width:100%;text-align:left;background:transparent;border:0;color:var(--ink);padding:var(--sp-2) 10px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm)}
.fxpick-folder:hover{background:var(--panel-2)}
.fxpick-folder>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fxpick-folder>svg:first-child{color:var(--muted)}
.fxpick-folder>svg:last-child{color:var(--muted-2)}
/* smart-view chips (All / Recents / Starred / Shared / Deleted) — P6 */
.fx-chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.fx-chip{display:inline-flex;align-items:center;gap:var(--sp-2);background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);cursor:pointer}
.fx-chip:hover{color:var(--ink);border-color:var(--muted-2)}
.fx-chip.active{background:var(--fx-sel);border-color:var(--accent);color:var(--ink)}
.fx-chip svg{color:inherit}
.fx-viewtitle{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--ink)}
.fx-viewtitle svg{color:var(--accent)}
/* star toggle — P6 */
.fx-star{background:transparent;border:0;cursor:pointer;color:var(--muted-2);padding:var(--sp-0);border-radius:5px;opacity:0;flex:0 0 auto;display:inline-flex;align-items:center;margin-left:var(--sp-0)}
.fx-row:hover .fx-star,.fx-crow:hover .fx-star{opacity:.55}
.fx-star:hover{opacity:1!important;color:var(--warn)}
.fx-star.on{opacity:1;color:var(--warn)}
.fx-star.on svg{fill:var(--warn)}
.fx-tile .fx-star{position:absolute;top:7px;right:30px;opacity:0}
.fx-tile:hover .fx-star,.fx-tile .fx-star.on{opacity:1}
/* share dialog — P5 */
.jc-fxshare-overlay .fxshare{max-width:460px;width:100%}
.fxshare-body{padding:14px var(--sp-4)}
.fxshare-row{margin-bottom:10px}
.fxshare-row .mlabel{display:block;margin-bottom:var(--sp-1)}
.fxshare .sp-inp{width:100%;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:var(--sp-2) 10px;font-size:var(--fs-sm)}
.fxshare .fxs-create{margin-top:var(--sp-2)}
.fxshare-result{margin-top:10px}
.fxshare-link{display:flex;gap:var(--sp-2)}
.fxshare-link input{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:var(--sp-2) var(--sp-2);font-size:var(--fs-xs)}
.fxshare-link .fxs-copy{background:var(--accent);color:var(--accent-ink);border:0;border-radius:7px;padding:0 var(--sp-3);font-weight:var(--fw-medium);cursor:pointer;font-size:var(--fs-xs)}
.fxshare-perms{margin-top:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-1)}
.fxshare-perm{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);color:var(--ink);font-size:var(--fs-xs);background:var(--panel-2);border-radius:7px;padding:var(--sp-2) var(--sp-2)}
.fxshare-perm .fxs-revoke{background:transparent;border:0;color:var(--muted);cursor:pointer;display:inline-flex;padding:var(--sp-0);border-radius:5px}
.fxshare-perm .fxs-revoke:hover{color:var(--crit)}
/* rich preview media + details — P7 */
.fx-pane-media{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:160px;margin-bottom:var(--sp-2)}
.fx-pane-media img.fx-pane-full{max-width:100%;max-height:340px;border-radius:8px;object-fit:contain}
.fx-pane-frame{width:100%;height:min(60vh,460px);border:1px solid var(--line);border-radius:8px;background:#fff}
.fx-pane-path{display:flex;align-items:center;gap:var(--sp-1);justify-content:center}
.fx-ver{padding:3px 0;border-top:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
/* per-folder access control — lock badge + manage-access dialog */
.fx-lock{display:inline-flex;align-items:center;color:var(--warn);margin-left:1px}
.jc-fxacl-overlay .fxacl{max-width:440px;width:100%}
.fxacl-body{padding:14px var(--sp-4)}
.fxacl-toggle{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--ink);cursor:pointer}
.fxacl-toggle input{width:15px;height:15px;accent-color:var(--accent)}
.fxacl-people{max-height:40vh;overflow:auto;border:1px solid var(--line);border-radius:8px;margin-top:var(--sp-1)}
.fxacl-person{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 10px;font-size:var(--fs-sm);color:var(--ink);cursor:pointer;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.fxacl-person:last-child{border-bottom:0}
.fxacl-person:hover{background:var(--panel-2)}
.fxacl-person input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto}
.fxacl-person input:disabled{opacity:.4}
.fxacl-person>span:first-of-type{flex:0 0 auto}
/* confidential Spaces — selector bar (P5-B) */
.fx-spacebar{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}
.fx-space-btn{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-base);cursor:pointer}
.fx-space-btn:hover{border-color:var(--accent)}
.fx-space-btn b{font-weight:var(--fw-medium)}
.fx-space-btn svg:last-child{color:var(--muted-2)}
.fx-space-tag{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-caption);color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 45%, var(--line));border-radius:999px;padding:var(--sp-0) var(--sp-2)}
.fx-ctx-i .fx-space-edit{margin-left:auto;color:var(--muted);display:inline-flex;padding:var(--sp-0);border-radius:5px}
.fx-ctx-i .fx-space-edit:hover{color:var(--accent)}
.jc-fxspace-overlay .fxacl{max-width:460px;width:100%}
.jc-fxspace-overlay .sp-inp{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:var(--sp-2) 10px;font-size:var(--fs-sm)}

/* ===== Accessibility & mobile polish (UX pass, 2026-06-20) ===== */
/* Skip-to-content link: hidden until keyboard-focused, then slides in top-left. */
.jc-skip{position:fixed;top:-60px;left:8px;z-index:100000;background:var(--accent);color:var(--accent-ink);font-weight:var(--fw-bold);font-size:var(--fs-sm);padding:var(--sp-2) 14px;border-radius:8px;text-decoration:none;transition:top .15s ease}
.jc-skip:focus{top:8px;outline:2px solid #fff;outline-offset:2px}
#view-root:focus{outline:none}
/* Honor reduced-motion: kill long animations/transitions for users who ask. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
/* Comfortable touch targets on phones. */
@media (max-width:760px){
  .nav-top-btn{width:40px;height:40px}
  .gearbtn{min-width:40px;min-height:40px}
}

/* Next Service order-of-service: collapsed by default, expand on click. */
.pco-details{margin-top:var(--sp-0)}
.pco-sum{cursor:pointer;font-size:var(--fs-xs);color:var(--accent);list-style:none;padding:3px 0;user-select:none}
.pco-sum::-webkit-details-marker{display:none}
.pco-sum::before{content:"▸ ";font-size:var(--fs-caption)}
.pco-details[open] .pco-sum::before{content:"▾ "}
.pco-details[open] .pco-sum{margin-bottom:var(--sp-2)}

/* Ministry Outcomes: large metric groups (e.g. Serving) collapse to a summary. */
.cat-collapse > summary.cat-sum{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:var(--sp-2)}
.cat-collapse > summary.cat-sum::-webkit-details-marker{display:none}
.cat-collapse > summary.cat-sum::after{content:"▸";font-size:var(--fs-xs);opacity:.55;-webkit-text-fill-color:currentColor}
.cat-collapse[open] > summary.cat-sum::after{content:"▾"}
.cat-count{font-size:var(--fs-xs);opacity:.7;font-weight:var(--fw-medium)}
.cat-collapse[open] > .metric-grid{margin-top:var(--sp-3)}

/* Social calendar: the per-day + appears on hover, not in every cell. */
.cal-add{opacity:0;transition:opacity .12s ease}
.cal-cell:hover .cal-add,.cal-add:focus-visible{opacity:1}

/* Collapsible sidebar nav groups. */
.nav-group-toggle{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.nav-group-toggle:hover{color:var(--ink)}
.nav-grp-caret{font-size:var(--fs-caption);opacity:.5;margin-left:var(--sp-2);flex:0 0 auto}

/* ===== FLAT brand fills (all gradients removed — Adam, Jul 21 2026) =====
   Buttons, FAB, and active pills are SOLID Journey red; hover is a solid
   lighter red. No gradient buttons, no gradient icons, anywhere. */
:root{ --accent-hover:#4d9ee0; }
html[data-theme="light"]{ --accent-hover:#2f86cf; }
.btn:not(.ghost), .btn-sm:not(.ghost), .btn-xs:not(.ghost),
.nav-newpost, .pulse-fab, .pulse-dm-go, .fxshare-link .fxs-copy{
  background: var(--accent);
  border-color: transparent;
}
.btn:not(.ghost):hover, .btn-sm:not(.ghost):hover, .btn-xs:not(.ghost):hover,
.nav-newpost:hover, .pulse-fab:hover, .pulse-dm-go:hover, .fxshare-link .fxs-copy:hover{
  background: var(--accent-hover);
}

/* Pulse chat FAB — Adam wants the classic Journey green with a WHITE glyph,
   independent of the sky accent used everywhere else (Jul 21 2026). The .open
   (close-X) state keeps its panel styling via higher specificity below. */
.pulse-fab{ background:#7cc6a6; color:#0f1115; }
.pulse-fab:hover{ background:#8ed2b3; }
.pulse-fab .pulse-fab-ico svg{ stroke-width:2.5; }

/* (gradient-text metric numbers removed — solid ink, Jul 21 2026) */

/* Brand mark: gradient "JC" monogram, letters perfectly centered (replaces the PNG). */
.sidebar .brand-mark{
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);        /* white JC glyph on the sky-accent blue tile */
  color:var(--accent-ink);-webkit-text-fill-color:var(--accent-ink);
  font-family:inherit;font-weight:800;font-size:18px;letter-spacing:-.5px;line-height:1;
  text-align:center;user-select:none;overflow:hidden;
}
.sidebar.collapsed .brand-mark{font-size:15px}

/* Workspace-switcher squares: SOLID per-space hue (gradient removed). */
.ws-ico{ background: var(--ws-c, var(--accent)); }

/* Gradient language on the colored avatar placeholders (initials).
   Care avatars get a soft brand-tinted gradient; the chat placeholder gets the
   full accent gradient. Photos (when present) sit on top and cover it. */
.care-av{ background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.care-av:has(img){ background: var(--panel-2); }
.pulse-dm-av-ph{ background: var(--accent); }

/* Facilities section in the meeting right-rail, directly under Tasks. */
.mt-doc-fac{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line,#2b313c)}
.mt-doc-fac-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:var(--fw-medium)}
.mt-doc-fac-open{text-transform:none;letter-spacing:0;font-size:var(--fs-caption);color:var(--accent);text-decoration:none;white-space:nowrap}
.mt-doc-fac-add{display:flex;flex-direction:column;gap:6px}
.mt-doc-fac-add input{width:100%;box-sizing:border-box;background:var(--panel);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:7px 9px;font-size:13px}
.mt-doc-fac-addrow{display:flex;gap:6px}
.mt-doc-fac-addrow select{flex:1 1 auto;min-width:0;background:var(--panel);color:var(--ink);border:1px solid var(--line,#2b313c);border-radius:8px;padding:7px 8px;font-size:13px}
.mt-doc-fac-addrow .btn{flex:0 0 auto;padding:7px 14px}
.mt-doc-fac-list{display:flex;flex-direction:column;overflow:auto}

/* Facilities mini-list item — compact two-line layout for the narrow rail. */
.mt-fac-item{display:block;padding:8px 2px;border-bottom:1px solid var(--line,#2b313c);font-size:13px}
.mt-fac-item:last-child{border-bottom:0}
.mt-fac-top{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.mt-fac-kind{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted-2)}
.mt-fac-descr{min-width:0;color:var(--ink);line-height:1.4;overflow-wrap:break-word}
.mt-fac-chip{margin-left:auto;flex:0 0 auto;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.mt-fac-chip.sched{color:#d9a441;border-color:rgba(217,164,65,.4)}

/* cache-bust 2026-07-03T01:58:42Z */

/* ═══════════════════════════════════════════════════════════════════════════
   App mode — the native Journey Command app renders these pages in a WebView
   (body.jc-app, set by views/layout.php from the jc_app cookie / ?app=1).
   The ≤760px mobile rules above do the heavy lifting (drawer nav, stacked
   layouts); this skin only (1) respects the phone's notch/home-indicator,
   (2) leaves room for the app's floating native tab bar, and (3) removes web
   chrome that the native shell replaces (the docked Pulse chat — chat is a
   native tab in the app). See api/mobile_session.php for how a WebView signs in.
   ═══════════════════════════════════════════════════════════════════════════ */
body.jc-app .content{
  padding-top:calc(var(--sp-4) + env(safe-area-inset-top, 0px));
  /* Native glass tab bar floats over the page bottom: keep content clear of it. */
  padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px));
}
body.jc-app .sidebar{padding-top:calc(16px + env(safe-area-inset-top, 0px))}
/* Web Pulse dock is redundant in the app (native Chat tab) — the launcher is
   already suppressed server-side; belt-and-suspenders for anything app.js adds. */
body.jc-app .pulsebtn,body.jc-app .pulse-fab,body.jc-app .pulse-pop{display:none!important}
/* Toasts + any sticky bottom bars ride above the native tab bar. */
body.jc-app #jc-toasts{bottom:calc(104px + env(safe-area-inset-bottom, 0px))!important}
body.jc-app .jc-bulkbar{bottom:calc(96px + env(safe-area-inset-bottom, 0px))!important}
/* Slightly roomier tap targets in the drawer nav (fingers, not cursors). */
body.jc-app .sidebar nav a{padding-top:9px;padding-bottom:9px}
/* Sep 3 2026 — short-viewport density (see the laptop-height pass in the Sidebar
   section). Laptops and half-height windows get a tighter rail so the whole nav
   fits above the fold. 29px rows still clear the 24px minimum target size, and
   the web-only scope keeps the native app's 9px thumb rows above untouched. */
@media (max-height: 900px){
  body:not(.jc-app) .sidebar nav a:not(.nav-top-btn){padding-top:5px;padding-bottom:5px}
  body:not(.jc-app) .sidebar .nav-group-label{margin-top:16px;margin-bottom:6px}
  body:not(.jc-app) .sidebar .brand{margin-bottom:12px}
  body:not(.jc-app) .sidebar .ws-switch{margin-bottom:10px}
  body:not(.jc-app) .sidebar .nav-top{margin-bottom:10px}
}

/* ── App mode · Phase 2 polish (audited at 390px, Jul 3 2026) ─────────────────
   Page-by-page fixes for the pages staff live in on a phone. Everything is
   scoped to body.jc-app so the desktop site is untouched. */

/* iOS zooms the page when focusing any input under 16px — the #1 "feels like a
   website" tell inside a WebView. Also stop iOS from inflating text on rotate. */
body.jc-app{-webkit-text-size-adjust:100%}
body.jc-app input,body.jc-app select,body.jc-app textarea{font-size:16px!important}
body.jc-app select,body.jc-app input{max-width:100%}

/* One-row page header (was 3 stacked rows ≈130px of chrome on every page):
   ☰ burger · page title (ellipsized) · theme + settings, all on one line. */
@media (max-width: 760px) {
  body.jc-app .page-head{flex-direction:row;align-items:center;flex-wrap:nowrap;gap:10px;margin:2px 0 12px}
  body.jc-app .page-head h1{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-lg)}
}

/* Tasks list on a phone: the fixed-width columns crushed the TITLE to nothing
   (audit: header labels overlapping, titles invisible at 390px). Keep what a
   phone needs — priority dot · title · due — and hide the rest; the full column
   set is still there on tablet/desktop and in the site's Columns picker. */
@media (max-width: 620px) {
  body.jc-app span[data-col='status'],
  body.jc-app span[data-col='assignee'],
  body.jc-app span[data-col='priority'],
  body.jc-app span[data-col='ministry'],
  body.jc-app span[data-col='event'],
  body.jc-app span[data-col='project_event'],
  body.jc-app .tl-sort-h[data-k='status'],
  body.jc-app .tl-sort-h[data-k='assignee'],
  body.jc-app .tl-sort-h[data-k='priority'],
  body.jc-app .tl-sort-h[data-k='ministry'],
  body.jc-app .tl-sort-h[data-k='event'],
  body.jc-app .tl-sort-h[data-k='project_event'],
  body.jc-app #tl-colpick,
  body.jc-app .tl-row > span:last-child{display:none!important}
  body.jc-app span[data-col='due']{flex:0 0 auto!important}
  body.jc-app .tl-row{padding:10px 4px!important} /* comfier tap rows */
}

/* Home (My To-Do): widget rows ran up to ~46px past the right edge (audit:
   .hm-fu-row/.hm-wf-row at 436px in a 390px viewport). Let rows wrap and long
   strings break instead of clipping. */
@media (max-width: 620px) {
  body.jc-app .hm-w{min-width:0;max-width:100%}
  body.jc-app .hm-w .card{overflow-x:hidden}
  body.jc-app .hm-fu-row,body.jc-app .hm-wf-row{flex-wrap:wrap}
  body.jc-app .hm-w .mlabel{white-space:normal;flex-wrap:wrap}
  body.jc-app .hm-w span.muted,body.jc-app .hm-w .small{overflow-wrap:anywhere}
}

/* Social calendar: "+ Connect a channel" was squeezed into a one-letter-per-line
   column next to the List/Calendar toggle. */
body.jc-app a.muted.small[href$='/socialset']{white-space:nowrap}

/* ── App mode · round 3 (Jul 5 2026, Adam's on-device feedback) ──────────────
   1. My To-Do in the app: hide the Next Meeting / Upcoming Meetings widget —
      too much for a phone; the task list is what people need first. (Desktop
      unchanged; the widget is still hideable per-user there via Customize.)
   2. Care person view: "Open in Planning Center →" rendered huge/wrapped on a
      phone — size it like the compact chip it's meant to be. */
@media (max-width: 760px){
body.jc-app .hm-w[data-w="meetings"]{display:none!important}
}
body.jc-app a.btn[href*="planningcenter"]{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:auto;max-width:100%;
  white-space:nowrap;font-size:var(--fs-sm);padding:6px 10px!important
}

/* App mode: hiding the Next Meeting widget left its column still claiming its
   desktop minimum height (560px) — a full blank screen before the To-Do list.
   Let Home's columns collapse to their real content on the phone. */
@media (max-width: 760px){
body.jc-app .hm-cc-grid{--hm-row-h:none}
body.jc-app .hm-cc-grid > .hm-cc-col{min-height:0!important;height:auto!important;max-height:none!important}
}

/* ── App mode · round 4 (Aug 5 2026, on-device audit) ───────────────────────
   Fixes for things that only go wrong INSIDE the native shell, where the app
   already supplies a tab bar, a header and the safe areas.
   1. Care's own fixed mobile tab bar duplicated the native tab bar (two bars
      stacked); the site's "log a touch" FAB sat underneath the native one.
   2. The task panel opened flush against the status bar — its title input sat
      under the clock/battery. Give the overlay the top safe area.
   3. The task panel's label/field rows kept a 116px label column at phone
      width, squeezing every control into the remaining ~120px. Stack them. */
body.jc-app .care-mtabs{display:none!important}
body.jc-app #care{padding-bottom:24px!important}
body.jc-app .care-fab{bottom:calc(104px + env(safe-area-inset-bottom, 0px))!important}

body.jc-app .jc-modal-overlay{
  padding-top:calc(env(safe-area-inset-top, 0px) + 12px)!important;
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 96px)!important;
}
body.jc-app .jc-taskpanel{max-height:none}

@media (max-width: 620px){
  .tp-rf{flex-direction:column;align-items:stretch;gap:6px;padding:9px 0}
  .tp-rf-l{flex:0 0 auto;font-size:var(--fs-sm)}
  .tp-rf-c{width:100%}
  .tp-rf-c select,.tp-rf-c input,.tp-datebtn{min-height:42px}
  .tp-topchips{max-width:100%;margin-left:0;justify-content:flex-start}
  .jc-taskpanel .tp-head{padding:var(--sp-3) 14px;gap:8px}
  .tp-main,.tp-rail{padding:14px}
}

/* ════════════════════════════════════════════════════════════════════════
   INSIGHTS REDESIGN — "Vitals" foundation (Direction A surfaces, C charts)
   Adam picked: Apple-Health-warm cards + Scorecard chart language, curved
   option retained. New classes only — nothing here restyles existing pages;
   pages opt in as they convert. Chart series colors live as tokens so the
   22 rogue hexes in app.js can die one renderer at a time.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* The fixed 5-color chart palette. S1 is THE data green — the only green a
     chart may use. --accent stays the UI green (buttons/tabs). Two greens,
     two jobs, on purpose — never a third. */
  --data:#4ec48d; --s2:#7fa9e0; --s3:#e3b45f; --s4:#9b87d9; --s5:#e0736b;
  --ghost:#3a4150;            /* prior year / context — "not the point" gray */
  --data-soft:rgba(78,196,141,.12);
}
html[data-theme="light"]{ --ghost:#c9cfda; --data-soft:rgba(46,158,107,.10); }

/* Vitals KPI card — 18px radius, soft vertical gradient, real shadow, no left
   accent bar (state lives in chips/rings, never borders). */
.vkpi{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
html[data-theme="light"] .vkpi{box-shadow:0 4px 14px rgba(20,30,45,.08)}
.vkpi .vlabel{font-size:var(--fs-caption);color:var(--muted)}
.vkpi .vval{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:2px 0 6px;color:var(--ink)}
.vkpi .vval .vunit{font-size:14px;font-weight:500;color:var(--muted-2)}
.vkpi .vspark{display:block;width:100%;height:30px;margin:2px 0 6px}
.vkpi.clickable{cursor:pointer;transition:transform .12s ease,border-color .12s ease}
.vkpi.clickable:hover{transform:translateY(-2px);border-color:var(--accent)}
.vkpi .vgo{color:var(--muted-2);font-weight:400;font-size:14px}
.vkpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:14px 0}

/* Delta chip (.chip is taken by status chips) — tinted pill, no border. */
.dchip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border-radius:20px;padding:2px 9px;line-height:1.5}
.dchip.up{color:var(--data);background:var(--data-soft)}
.dchip.dn{color:var(--s5);background:rgba(224,115,107,.12)}
.dchip.flat{color:var(--muted-2);background:var(--panel-2)}
.dchip.info{color:var(--s2);background:rgba(127,169,224,.12)}
.dchip.watch{color:var(--s3);background:rgba(227,180,95,.12)}

/* Verdict line — the plain-English opener on every converted page. */
.verdict{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 20px;margin:0 0 14px;font-size:18px;font-weight:600;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.22);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
html[data-theme="light"] .verdict{box-shadow:0 4px 14px rgba(20,30,45,.08)}
.verdict .vgood{color:var(--data)} .verdict .vbad{color:var(--s5)} .verdict .vwarn{color:var(--s3)}
.verdict .vstats{display:flex;gap:18px;font-size:13px;font-weight:400;color:var(--muted)}
.verdict .vstats b{color:var(--ink)}

/* Progress ring (goal metrics: budget %, attendance goal). SVG-based; JS sets
   stroke-dasharray. */
.vring{transform:rotate(-90deg)} .vring .track{stroke:var(--line);fill:none}
.vring .arc{stroke:var(--data);fill:none;stroke-linecap:round;transition:stroke-dasharray .5s ease}
.vring-num{font-weight:800;fill:var(--ink);transform:rotate(90deg);transform-origin:center}

/* Dark-native Monday Brief reading view — neutralizes the email template's
   inline light-mode colors. The "Preview as email" toggle shows the real
   white rendering deliberately. */
.brief-dark{color:var(--ink)}
.brief-dark *{background:transparent!important;color:inherit!important;border-color:var(--line)!important}
.brief-dark a{color:var(--accent)!important}
.brief-dark h1,.brief-dark h2,.brief-dark h3{color:var(--ink)!important}

/* ── Vitals page structure (first used by Ministry Outcomes → "Pulse") ── */
.vkpi .vchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.vkpi .vfoot{font-size:var(--fs-caption);color:var(--muted-2);margin-top:6px}
.vkpi.vcompact .vval{font-size:22px}
.vkpi.vdim{opacity:.72}
.vgood{color:var(--data)} .vbad{color:var(--s5)}
/* Collapsed category ledger — count + net direction visible while closed. */
details.vcat{margin:14px 0;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:0 18px;box-shadow:0 8px 24px rgba(0,0,0,.22)}
html[data-theme="light"] details.vcat{box-shadow:0 4px 14px rgba(20,30,45,.08)}
details.vcat summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:14px 2px;font-weight:600;color:var(--ink)}
details.vcat summary::-webkit-details-marker{display:none}
details.vcat summary::after{content:"▾";color:var(--muted-2);transition:transform .15s ease}
details.vcat:not([open]) summary::after{transform:rotate(-90deg)}
details.vcat .vcat-n{font-size:12px;font-weight:400;color:var(--muted-2);margin-left:auto}
details.vcat .vkpi-grid{margin-top:0;padding-bottom:16px}
details.vcat .vkpi{box-shadow:none;background:var(--panel-2)}
.vkpi-grid.vtight{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
/* Biggest movers card */
.mvcard .mvcols{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.mvcard h3{margin:0 0 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mvcard .mvrow{display:flex;align-items:center;gap:8px;padding:4px 0}
.mvcard .mvrow a{color:var(--ink);text-decoration:none}
.mvcard .mvrow a:hover{color:var(--accent)}
@media(max-width:700px){.mvcard .mvcols{grid-template-columns:1fr}}

/* Budget ring (Giving north-star card) */
.vringwrap{position:relative;display:inline-flex;flex:none}
.vringpct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--ink)}

/* Sparkline slot on Pulse cards (empty slot collapses to nothing) */
.vkpi .vsparkslot{line-height:0}
.vkpi .vsparkslot .vspark{display:block;width:100%;height:30px;margin:4px 0 6px}
.vkpi.vcompact .vsparkslot .vspark{height:22px}

/* Themed compact select (Trend compare-years; reusable) */
.jc-sel{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;cursor:pointer}
.jc-sel:hover{border-color:var(--accent)}

/* ── Customize tray → widget gallery (Option B, Jul 18) ── */
.hm-gcat{display:flex;align-items:center;gap:7px;font-size:var(--fs-caption);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold);margin:14px 0 8px}
.hm-gcat .hm-gn{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted-2)}
.hm-gdot{width:8px;height:8px;border-radius:2px;flex:none}
.hm-ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
.hm-gcard{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;transition:border-color .12s ease;user-select:none}
.hm-gcard:hover{border-color:var(--accent)}
.hm-gcard:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hm-gcard .hm-gico{color:var(--muted);flex:none;display:inline-flex}
.hm-gcard .hm-gtxt{flex:1;min-width:0}
.hm-gcard .hm-gtxt b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-gcard .hm-gtxt i{display:block;font-style:normal;font-size:var(--fs-caption);color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-gcard .hm-gsw{flex:none;width:30px;height:17px;border-radius:99px;background:var(--data);position:relative;transition:background .15s ease}
.hm-gcard .hm-gknob{position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;background:var(--panel)}
.hm-gcard.off .hm-gsw{background:var(--line)}
.hm-gcard.off .hm-gknob{right:auto;left:2px;background:var(--muted-2)}
.hm-gcard.off .hm-gtxt b{color:var(--muted)}
.hm-gcard.off .hm-gico{opacity:.55}
#hm-gsearch{width:230px;max-width:100%;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:var(--fs-sm);margin:8px 0 0}
#hm-gsearch:focus{outline:none;border-color:var(--accent)}

/* Widget picker as a DROPDOWN (Jul 21 2026) — a compact bar + a popover of
   grouped checkboxes, instead of the always-open card grid. */
.hm-tray-card{overflow:visible !important}   /* never clip the widgets dropdown */
/* Customize toolbar (Adam, Jul 21): STICKS to the top while you scroll, so
   'Add / remove widgets' stays reachable as you tick cards further down. */
#hm-tray{position:sticky;top:0;z-index:100;background:var(--bg);padding:0 0 10px}
.hm-tray-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.hm-tray-hint{white-space:nowrap}
.hm-wid-wrap{position:relative}
#hm-wid-btn{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);padding:5px 11px}
.hm-wid-count{background:var(--accent);color:var(--accent-ink);border-radius:999px;min-width:18px;height:18px;padding:0 5px;font-size:var(--fs-caption);font-weight:var(--fw-bold);display:inline-flex;align-items:center;justify-content:center}
.hm-wid-chev{color:var(--muted);font-size:11px}
.hm-wid-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:340px;max-width:92vw;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.45);padding:12px}
.hm-wid-menu #hm-gsearch{width:100%;margin:0 0 6px}
.hm-wid-scroll{max-height:min(56vh,460px);overflow:auto;padding-right:2px}
.hm-wid-scroll .hm-gcat{margin:12px 0 4px}
.hm-wid-scroll .hm-gcat:first-child{margin-top:2px}
.hm-glist{display:flex;flex-direction:column;gap:1px}
.hm-gopt{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer;user-select:none}
.hm-gopt:hover{background:var(--panel-2)}
.hm-gopt input.hm-gcb{width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer;margin:0}
.hm-gopt .hm-gico{color:var(--muted);flex:none;display:inline-flex}
.hm-gopt .hm-gtxt{flex:1;min-width:0}
.hm-gopt .hm-gtxt b{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-gopt:not(.on) .hm-gtxt b{color:var(--muted)}
.hm-gopt:not(.on) .hm-gico{opacity:.5}

/* ── Home banded sections (DEFAULT layout, Jul 18) — headers in normal flow so
   they can never detach from their band; cards in a responsive grid below. ── */
.hm-bands{display:block}
.hm-band{margin:0 0 6px}
.hm-band-h{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:18px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.hm-band:first-child .hm-band-h{margin-top:4px}
.hm-band-dot{width:9px;height:9px;border-radius:2px;flex:none}
.hm-band-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:start}
.hm-b-services .hm-band-grid{align-items:stretch}
.hm-b-services .hm-band-grid>.hm-w{max-height:none}
.hm-b-services .hm-band-grid>.hm-w>.card{height:100%}
.hm-band-grid .hm-w{min-width:0}
/* Card fills its slot and scrolls internally — a row is flush by construction,
   and a long list becomes scroll inside the card instead of a page hole. */
.hm-band-grid .hm-w > .card{height:100%;overflow-y:auto;margin:0;box-sizing:border-box}
/* Locked row heights per band (tuned to live content measurements, Jul 18) */
/* Height locks scope to the ORIGINAL big cards only — opt-in cards in the same
   band stay natural-height and pair up on their own rows. */
.hm-b-mission .hm-band-grid [data-w="meetings"],
.hm-b-mission .hm-band-grid [data-w="todo"],
.hm-b-mission .hm-band-grid [data-w="calendar"],
.hm-b-mission .hm-band-grid [data-w="myteam"]{height:640px}
/* To-Do card is a flex column so its task list fills the card and scrolls
   inside it — same height as its neighbours, no blank gap at the bottom. */
.hm-b-mission .hm-band-grid [data-w="todo"]>.card{display:flex;flex-direction:column}
.hm-b-mission .hm-band-grid [data-w="todo"]>.card>#hm-todo-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
/* Done group inside My To-Do: collapsed by default, click to expand. */
.hm-donegrp>summary{list-style:none;cursor:pointer}
.hm-donegrp>summary::-webkit-details-marker{display:none}
.hm-donecaret{display:inline-block;transition:transform .15s ease}
.hm-donegrp[open] .hm-donecaret{transform:rotate(90deg)}
/* Docs | Files segmented toggle (top of the Docs and Files pages). */
.df-toggle{display:inline-flex;gap:2px;background:var(--panel-2);border:1px solid var(--line,#2b313c);border-radius:9px;padding:3px;margin:0 0 16px}
.df-seg{padding:6px 16px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;transition:background .12s,color .12s}
.df-seg:hover{color:var(--ink)}
.df-seg.active{background:var(--accent);color:#0b0e13}
.hm-b-care .hm-band-grid [data-w="pastoralcare"],
.hm-b-care .hm-band-grid [data-w="guests"]{height:560px}
.hm-b-comms .hm-band-grid .hm-w{max-height:420px}
.hm-b-services .hm-band-grid [data-w="pco_services"],
.hm-b-services .hm-band-grid [data-w="next_service"]{height:560px}
/* workflows + attention now sit side by side and equalize per row via
   align-items:stretch above — no fixed heights, so they always match. */
/* Bands with natural heights (Insights/Finances) still stretch flush per row. */
@media(max-width:980px){
  .hm-band-grid{grid-template-columns:1fr}
  .hm-band-grid .hm-w{grid-column:auto !important;height:auto !important;max-height:none !important}
}

/* Notes & Thoughts — full-width free-writing section at the very bottom */
.hm-band-grid.hm-band-full{grid-template-columns:1fr}


/* ── Task-card calming (critique u3, Jul 19): the ◀ ▶ Details ⋮ row appears on
   hover or keyboard focus — checkbox, title, and meta stay always-on. Whole-card
   click already opens the editor, so the row is intent-only. Height is reserved
   (visibility, not display) so cards don't jump as you sweep the mouse. Touch
   devices have no hover → row stays visible there. ── */
.tk-card .tk-actions{visibility:hidden;opacity:0;transition:opacity .12s ease}
.tk-card:hover .tk-actions,.tk-card:focus-within .tk-actions{visibility:visible;opacity:1}
@media (hover:none){.tk-card .tk-actions{visibility:visible;opacity:1}}

/* ── Touch targets (critique a2, Jul 19): at tablet/phone widths every tappable
   control on a task card gets a ≥28px hit area — the tiny ◀ ▶ ⋮ buttons and the
   checkbox were ~16–22px, well under comfortable thumb size. Desktop unchanged. ── */
@media (max-width:820px){
  .tk-card .tk-actions .btn-xs,
  .tk-card .tk-more{min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center}
  .tk-card input[type=checkbox]{width:19px;height:19px;flex:none}
  .tk-card .tk-inline-asg,.tk-card .tk-inline-due{min-height:28px;display:inline-flex;align-items:center}
}

/* Docs editor (#nt-rich): style markdown-derived formatting so pasted markdown
   renders as real headings, lists, code, bold/italic/strike — not raw markers. */
#nt-rich h1{font-size:1.7em;font-weight:800;margin:.6em 0 .3em;line-height:1.25;color:var(--ink)}
#nt-rich h2{font-size:1.4em;font-weight:800;margin:.6em 0 .3em;line-height:1.25;color:var(--ink)}
#nt-rich h3{font-size:1.18em;font-weight:700;margin:.5em 0 .25em;color:var(--ink)}
#nt-rich h4,#nt-rich h5,#nt-rich h6{font-size:1.05em;font-weight:700;margin:.5em 0 .2em;color:var(--ink)}
#nt-rich p{margin:.35em 0}
#nt-rich ul,#nt-rich ol{margin:.4em 0;padding-left:1.5em}
#nt-rich li{margin:.15em 0}
#nt-rich code{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:.05em .35em;font-family:ui-monospace,Menlo,monospace;font-size:.92em}
#nt-rich b,#nt-rich strong{font-weight:700}
#nt-rich i,#nt-rich em{font-style:italic}
#nt-rich a{color:var(--lead)}
#nt-rich s,#nt-rich del{opacity:.7}

/* Ministry Systems & Processes — "Manage lists" editor chips. */
.mglist-sec{margin:14px 0 4px}
.mglabel{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.mgchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mgchip{display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:var(--fs-xs);color:var(--ink)}
.mgchip.locked{opacity:.7;border-style:dashed}
.mgchip .mgdel{color:var(--danger);text-decoration:none;display:inline-flex;line-height:0}

/* Ministry Systems: owner/cadence cells now open a themed popup on the FIRST click
   (native <select> needed a 2nd click in Safari). Cells get a green hover cue too. */
.minsys-c{cursor:pointer;border-radius:6px;transition:background .1s ease}
.minsys-c:hover{background:var(--panel-2)}
.minsys-c.minsys-editing{background:var(--panel-2)}
.minsys-pop{position:fixed;z-index:1200;background:var(--panel,var(--panel-2));border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.45);padding:4px;max-height:340px;overflow:auto;min-width:160px}
.minsys-opt{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--ink);font:inherit;font-size:var(--fs-sm);padding:6px 11px;border-radius:6px;cursor:pointer;white-space:nowrap}
.minsys-opt:hover{background:var(--panel-2)}
.minsys-opt.on{color:var(--accent);font-weight:600}

/* Event template editor: draggable task rows. */
.tm-drag{opacity:.55;transition:opacity .1s ease}
.tm-drag:hover{opacity:1;cursor:grab}
.tm-row.tm-dragging{opacity:.4}
.tm-grp-rows{min-height:6px}

/* Staff Forms directory — read-only fill-out cards, grouped by category. */
.fd-search{width:100%;max-width:420px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:var(--fs-base);margin:0 0 16px}
.fd-catwrap{margin:0 0 18px}
.fd-cat{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--lead);margin:0 0 10px}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.fd-card{display:flex;flex-direction:column;gap:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--ink);transition:border-color .1s ease,box-shadow .1s ease}
.fd-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.fd-card-name{font-weight:700;font-size:var(--fs-base)}
.fd-card-desc{font-size:var(--fs-sm);color:var(--muted);line-height:1.4;flex:1}
.fd-card-cta{font-size:var(--fs-sm);font-weight:600;color:var(--accent);margin-top:4px}

/* ══ P3 (Jul 21 2026) — Journey display type ═══════════════════════════════
   Church design system: headlines are heavy ALL-CAPS. Montserrat is the
   brand-declared FREE display face (Gotham is desktop-licensed only — do not
   ship it). Scope is deliberately narrow: page titles only. Body text, cards,
   and controls keep the existing stack. */
:root{ --font-display:'Montserrat',ui-sans-serif,system-ui,-apple-system,sans-serif; }
.page-head h1{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.015em;
  font-size:calc(var(--fs-xl) - 2px); /* caps read bigger — pull back 2px */
}

/* ══ P4 (Jul 21 2026) — standard components ════════════════════════════════
   The design-system surfaces, codified once. .card everywhere gets the vkpi-
   style treatment (soft vertical gradient + 18px radius); .jc-h/.hm-wt is THE
   uppercase display header for cards and sections going forward. */
:root{ --radius-lg:18px; }
.card{border-radius:var(--radius-lg)} /* flat surface — gradient removed Jul 21 */
.jc-h,.hm-wt{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
/* ONE header font everywhere (Adam, Jul 21): every card label (.mlabel — Home
   bands, Services, More, Insights) + PCO plan sub-headers use the display face.
   No mixed fonts on card headers, period. */
.hm-band-h{font-family:var(--font-display)}
.mlabel,.pco-hd{font-family:var(--font-display);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mlabel svg{vertical-align:-2px}

/* ══ P5 — My To-Do progress (mockup: "N of M done today" + slim bar) ══ */
.hm-prog{display:flex;align-items:center;gap:10px;padding:10px 14px 0}
.hm-prog .bar{flex:1;height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.hm-prog .fill{height:100%;border-radius:99px;background:var(--success);transition:width .3s ease}
.hm-prog .txt{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap}

/* Brand mark: the REAL Journey mark (white knockout on the flat red tile) —
   replaces the text "JC" monogram. Scales with the tile in collapsed mode. */
.sidebar .brand-mark img{width:100%;height:100%;object-fit:cover;display:block}

/* Header toolbar separators + inline Favorites bar (Jul 21 2026). */
.hm-tb-sep{width:1px;height:20px;background:var(--line);margin:0 3px;align-self:center;flex:none}
.hm-fav-bar{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.hm-fav-chip{display:inline-flex;align-items:center;gap:5px;background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:var(--fs-xs);color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1}
.hm-fav-chip:hover{border-color:var(--accent)}
.hm-fav-chip>svg{color:var(--accent);flex:none}
.hm-fav-nm{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.hm-fav-x{color:var(--muted);font-size:11px;line-height:1;opacity:0;transition:opacity .1s ease;margin-left:1px}
.hm-fav-chip:hover .hm-fav-x{opacity:.65}
.hm-fav-x:hover{opacity:1;color:var(--danger)}
.hm-fav-add{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px dashed var(--line);color:var(--muted);border-radius:999px;padding:4px 11px;font-size:var(--fs-xs);cursor:pointer;line-height:1}
.hm-fav-add:hover{border-color:var(--accent);color:var(--accent)}
.hm-fav-add>svg{flex:none}

/* Favorite picker dialog */
.fav-dlg{display:flex;flex-direction:column;margin-top:6px}
.fav-lbl{font-size:var(--fs-xs);color:var(--muted);margin:9px 0 3px}
.fav-inp{width:100%;box-sizing:border-box;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:var(--fs-sm)}
.fav-inp:focus{outline:none;border-color:var(--accent)}
.fav-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* App mode · To-Do tab (Jul 21): on a phone show ONLY the two cards staff need
   — "My To-Do" (todo) and "Needs your attention" (attention). The other band
   widgets (meetings/calendar/PCO/workflows) are desktop-dashboard noise on a
   phone; still available via Customize on desktop. */
@media (max-width: 760px){
  body.jc-app[data-route="home"] .hm-band-grid > .hm-w{display:none!important}
  body.jc-app[data-route="home"] .hm-band-grid > .hm-w[data-w="todo"],
  body.jc-app[data-route="home"] .hm-band-grid > .hm-w[data-w="attention"]{display:block!important}
}

/* App mode · Text inbox (commstext) mobile — the SMS inbox is a fixed two-pane
   grid (thread list + conversation/reply) that pushes the reply pane off a phone
   screen, so you can't open or answer a text. On a phone we make it behave like
   a real messaging app: the thread list fills the screen, and opening a thread
   swaps to a full-screen conversation with its "Reply…" box. A generated
   "← Back to inbox" bar returns to the list (the page has no back control of its
   own). Desktop keeps the two-pane layout. Uses :has() (iOS Safari 15.4+). */
@media (max-width: 760px){
  body[data-route="commstext"] .inbox-wrap{display:block!important}
  body[data-route="commstext"] .inbox-list,
  body[data-route="commstext"] .inbox-thread{min-width:0!important;width:auto!important;max-width:100%!important}

  /* Nothing open → just the thread list. */
  body[data-route="commstext"] .inbox-wrap:not(:has(.inbox-trow.active)) .inbox-thread{display:none!important}

  /* A thread is open → conversation takes the screen, list hidden. */
  body[data-route="commstext"] .inbox-wrap:has(.inbox-trow.active) .inbox-list{display:none!important}

  /* Back bar: only exists while a conversation is open. */
  body[data-route="commstext"] .inbox-wrap:has(.inbox-trow.active) .inbox-thread::before{
    content:"← Back to inbox";
    display:block;position:sticky;top:0;z-index:5;
    margin:-4px -4px 10px;padding:11px 14px;
    background:var(--panel-2,#1e222c);border:1px solid var(--line,#2a2f3a);border-radius:10px;
    color:var(--accent,#2f86cf);font-weight:600;font-size:15px;cursor:pointer;
  }
  /* Reply box: full width, comfortable, no iOS zoom-on-focus. */
  body[data-route="commstext"] #inbox-reply-body{width:100%;font-size:16px}
  /* Keep the composer clear of the app's floating tab bar. */
  body.jc-app[data-route="commstext"] .inbox-thread{padding-bottom:18px}
}

/* ── Marketing → Calendar (Sep 9 2026) ───────────────────────────────────────
   Every scheduled and sent email + text on one grid. The month grid itself is
   DELIBERATELY the Social Calendar's .cal-month / .cal-cell / .cal-daynum /
   .cal-more, not a second calendar of our own: two calendars in one app that
   look almost-but-not-quite alike is how a product starts feeling assembled
   rather than designed. Only the parts that are genuinely new live here.

   Channel is the chip's rail colour, status is the dot. Both hues are existing
   workspace colours (--ws-comms violet for email, --cat-sky blue for text) so
   they never collide with the warm/green status vocabulary the staff already
   read on the Social calendar. */
.mkc-bar{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 14px}
.mkc-title{font-size:var(--fs-md);font-weight:var(--fw-bold);min-width:150px}
.mkc-ch{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:24px;
  padding:5px 13px 5px 9px;background:var(--panel-2);font-size:var(--fs-sm);color:var(--muted);
  cursor:pointer;font:inherit;font-size:var(--fs-sm);user-select:none}
.mkc-ch input{display:none}
.mkc-ch .mkc-dot{width:9px;height:9px;border-radius:50%;background:var(--mkc-c);flex:none}
.mkc-ch.on{border-color:var(--mkc-c);background:var(--lead-soft);color:var(--ink);font-weight:var(--fw-medium)}

/* Chip. Same shape language as .scal-chip, without the media thumbnail. */
.mkc-chip{position:relative;display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);line-height:1.3;
  min-height:30px;padding:5px 7px;margin-bottom:var(--sp-1);border-radius:7px;overflow:hidden;
  border-left:3px solid var(--mkc-c);background:var(--mkc-bg);text-decoration:none;
  transition:box-shadow .12s,filter .12s}
.mkc-chip:hover{filter:brightness(1.18);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 3px 10px rgba(0,0,0,.3)}
html[data-theme="light"] .mkc-chip:hover{box-shadow:0 0 0 1px rgba(0,0,0,.08) inset,0 3px 10px rgba(20,30,50,.12)}
.mkc-chip .mkc-i{flex:none;width:13px;height:13px;color:var(--mkc-c);display:inline-flex;line-height:0}
/* Which page a social post went to: a letter in a thin ring (Mike, 8 Oct 2026, mockup "B"). */
.mkc-pg{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--ink) 60%,transparent);color:var(--ink);font-size:9.5px;font-weight:800;line-height:1;letter-spacing:0}
.mkc-lg .mkc-pg{margin-right:5px}
/* One message posted to several places (Mike, 20 Oct 2026, mockup "A"): one chip with "×N";
   its versions open under it, indented, each labelled with where it went. */
.mkc-grp{display:flex;flex-direction:column;gap:inherit;min-width:0}
.mkc-chip .mkc-n{flex:none;font-size:10px;font-weight:800;line-height:1;border-radius:999px;padding:3px 6px;background:color-mix(in srgb,var(--mkc-c) 55%,var(--panel));color:#fff}
.mkc-chip[data-grp][aria-expanded="true"]{box-shadow:0 0 0 1px color-mix(in srgb,var(--mkc-c) 70%,transparent) inset}
.mkc-grp-list{display:flex;flex-direction:column;gap:3px;margin:3px 0 2px 12px}
.mkc-grp-list[hidden]{display:none}
.mkc-chip.mkc-sub .mkc-where{font-weight:600;opacity:.75;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mkc-chip .mkc-t{flex:none;font-weight:var(--fw-bold);color:var(--ink);opacity:.85;font-variant-numeric:tabular-nums}
.mkc-chip .mkc-x{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
/* What a planned send is FOR — the event or project, sitting in the slot a real
   send uses for its time. flex:0 1 auto with a max-width means the tag and the
   title shrink together as the cell narrows instead of one shoving the other
   out; both keep an ellipsis, and the tooltip carries the untruncated pair. */
.mkc-chip .mkc-for{flex:0 1 auto;min-width:0;max-width:48%;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:var(--accent);font-weight:var(--fw-medium);
  background:var(--accent-soft);border-radius:4px;padding:1px 5px}
.mkc-chip .mkc-s{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mkc-st)}
/* PLANNED is the only hollow marker; everything with a real message behind it is
   filled. Planned and Draft were previously two greys 80 apart, which on a 7px
   dot is no difference — planned items read as drafts (Mike, 9 Sep 2026).
   Hollow-vs-filled carries the one distinction that matters ("does a message
   exist yet") without leaning on colour at all, so it still works for a
   colour-blind reader or a washed-out screen. */
.mkc-chip .mkc-s-hollow{background:transparent;border:1.5px dashed var(--mkc-st);width:8px;height:8px}
/* Standing weekly job. Small and quiet — it answers "why is this here again?"
   for anyone who asks, without competing with the title. */
.mkc-rep{flex:none;font-size:10px;line-height:1;color:var(--muted);opacity:.85}

/* ── Runway rail (10 Sep 2026) ───────────────────────────────────────────────
   The only part of the calendar that speaks first. Every other view waits to be
   opened; this says "Fall Kickoff is a month past where its own tier says
   promotion should have started" while there's still time to act.
   It shows ONLY events that need attention — eight rows of "on track" is noise
   dressed up as diligence — so a healthy month collapses to one quiet line. */
.mkc-rw{border:1px solid var(--line);border-left:3px solid var(--danger);border-radius:10px;
  background:var(--panel);margin:0 0 14px;overflow:hidden}
.mkc-rw-head{padding:11px 14px 9px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mkc-rw-head b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--danger)}
.mkc-rw-head span{font-size:var(--fs-xs);color:var(--muted)}
.mkc-rw-row{display:grid;grid-template-columns:216px 1fr auto;gap:12px;align-items:center;
  padding:9px 14px;border-top:1px solid var(--line)}
.mkc-rw-name{min-width:0}
.mkc-rw-name b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-rw-name small{font-size:var(--fs-caption);color:var(--muted)}
/* The bar IS the runway and the fill is how far into it today sits — so "late"
   is a length you can see, not a number you have to read. */
.mkc-rw-bar{position:relative;height:22px;border-radius:5px;background:var(--panel-2);overflow:hidden;min-width:0}
.mkc-rw-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.mkc-rw-row.is-late .mkc-rw-fill{background:color-mix(in srgb,var(--danger) 24%,transparent)}
.mkc-rw-row.is-behind .mkc-rw-fill{background:color-mix(in srgb,var(--warn) 26%,transparent)}
.mkc-rw-bar span{position:absolute;left:9px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:var(--fs-caption);font-weight:var(--fw-medium);overflow:hidden;max-width:calc(100% - 18px);text-overflow:ellipsis}
.mkc-rw-row.is-late .mkc-rw-bar span{color:var(--danger)}
.mkc-rw-row.is-behind .mkc-rw-bar span{color:var(--warn)}
.mkc-rw-btn{flex:none;background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:8px;
  padding:6px 13px;font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.mkc-rw-btn:hover{background:var(--accent-hover,var(--accent))}
.mkc-rw-foot{padding:8px 14px 10px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
/* Nothing wrong: one green sentence, not a table of reassurance. */
.mkc-rw-ok{border-left-color:var(--success);padding:10px 14px;font-size:var(--fs-sm)}
.mkc-rw-ok b{color:var(--success);font-weight:var(--fw-medium)}
.mkc-rw-ok span{color:var(--muted)}
@media (max-width:820px){
  .mkc-rw-row{grid-template-columns:1fr;gap:7px}
  .mkc-rw-btn{justify-self:start}
}

/* ── Plan builder ────────────────────────────────────────────────────────────
   Reuses .jc-modal-overlay / .jc-modal so it sits in the same family as every
   other dialog. Every write it makes goes to the playbook's own endpoint. */
.mkc-plan{max-width:660px;padding:0;display:flex;flex-direction:column;max-height:86vh;overflow:hidden}
.mkc-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line)}
.mkc-plan-head b{display:block;font-size:var(--fs-md);font-weight:var(--fw-bold)}
.mkc-plan-head small{display:block;margin-top:3px;font-size:var(--fs-xs);color:var(--muted)}
.mkc-plan-x{background:none;border:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:0 2px}
.mkc-plan-body{padding:16px 18px;overflow:auto;flex:1 1 auto;min-height:0}
.mkc-plan-list{padding:6px 0}
.mkc-plan-note{margin:0;font-size:var(--fs-xs);color:var(--muted);line-height:1.55}
.mkc-plan-note b{color:var(--ink)}
.mkc-pl-row{display:grid;grid-template-columns:20px 1fr 150px 70px;gap:10px;align-items:center;
  padding:8px 18px;font-size:var(--fs-sm)}
.mkc-pl-row.done{opacity:.55}
.mkc-pl-lbl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-pl-off{font-style:normal;font-size:10px;color:var(--warn);margin-left:5px}
.mkc-pl-when{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-pl-tag{font-size:10px;color:var(--muted-2);text-align:right;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.mkc-pl-row{grid-template-columns:20px 1fr}.mkc-pl-when,.mkc-pl-tag{display:none}}
.mkc-tick{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);background:transparent;
  cursor:pointer;padding:0;position:relative}
.mkc-tick.on{background:var(--accent);border-color:var(--accent)}
.mkc-tick.on::after{content:"";position:absolute;left:5px;top:1.5px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.mkc-tick[disabled]{cursor:default;opacity:.5}
.mkc-plan-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line);background:var(--panel-2)}
.mkc-tierpick{display:grid;gap:8px;margin-top:12px}
.mkc-tier{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;cursor:pointer;font:inherit;color:var(--ink)}
.mkc-tier:hover{border-color:var(--accent)}
.mkc-tier b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.mkc-tier small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted)}

/* ── Linking (10 Sep 2026, migration 112) ────────────────────────────────────
   The "N sends need an event" strip stopped being a statement and became the
   way in — a number you can't act on turns into wallpaper within a week. */
.mkc-warn-btn{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;width:100%;text-align:left;
  font:inherit;font-size:var(--fs-sm);cursor:pointer}
.mkc-warn-btn:hover{border-color:var(--warn)}
.mkc-warn-go{margin-left:auto;flex:none;color:var(--accent);font-weight:var(--fw-medium);font-size:var(--fs-xs)}

.mkc-link{max-width:860px}
.mkc-link-list{padding:0}
.mkc-lk{position:relative;display:grid;grid-template-columns:16px 1fr 240px auto;gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--line)}
.mkc-lk:last-child{border-bottom:none}
.mkc-lk.busy{opacity:.5;pointer-events:none}
.mkc-lk.filed{background:color-mix(in srgb,var(--success) 7%,transparent)}
.mkc-lk-i{width:15px;height:15px;color:var(--ch);display:inline-flex}
.mkc-lk-main{min-width:0}
.mkc-lk-main b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-lk-main small{font-size:var(--fs-xs);color:var(--muted)}
/* The guess, and WHY — a suggestion with no reason is just an instruction, and
   an instruction is what gets confirmed without reading. */
.mkc-lk-sug{min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 9px}
.mkc-lk-sug b{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-lk-sug small{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkc-lk-sug.strong{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.mkc-lk-sug.none{border-style:dashed}
.mkc-lk-sug.none b{color:var(--muted)}
.mkc-lk-act{display:flex;gap:6px;justify-content:flex-end;flex:none}
.mkc-lk-ok{font-size:var(--fs-xs);color:var(--success);font-weight:var(--fw-medium);white-space:nowrap;
  display:inline-flex;align-items:center}
.mkc-mini{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:7px;
  padding:5px 10px;font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.mkc-mini:hover{color:var(--ink);border-color:var(--muted)}
.mkc-mini.go{border-color:var(--success);color:var(--success)}
.mkc-mini.go:hover{background:color-mix(in srgb,var(--success) 12%,transparent)}
@media (max-width:860px){
  .mkc-lk{grid-template-columns:16px 1fr;row-gap:8px}
  .mkc-lk>*:nth-child(n+3){grid-column:2}
  .mkc-lk-act{justify-content:flex-start}
}
/* Inline event chooser. In-row rather than a second dialog: you're working a
   list, and a modal on a modal loses your place in it. */
.mkc-pick{grid-column:1 / -1;margin-top:8px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);overflow:hidden}
.mkc-pick-q{width:100%;background:var(--panel-2);color:var(--ink);border:none;
  border-bottom:1px solid var(--line);padding:8px 11px;font:inherit;font-size:var(--fs-sm);outline:none}
.mkc-pick-list{max-height:190px;overflow:auto}
.mkc-pick-opt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;
  text-align:left;background:none;border:none;border-bottom:1px solid var(--line);color:var(--ink);
  padding:7px 11px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.mkc-pick-opt:last-child{border-bottom:none}
.mkc-pick-opt:hover{background:var(--lead-soft)}
.mkc-pick-opt small{color:var(--muted);font-size:var(--fs-xs);flex:none}

/* ── Schedule from a day (10 Sep 2026) ───────────────────────────────────────
   The + is the Social calendar's own .cal-add, so a day cell behaves the same
   way on both calendars. It only appears on hover and only on days that haven't
   happened, and only for people who may write. */
.mkc-add{font-size:16px;font-weight:var(--fw-medium);line-height:1}
.mkc-daymenu{position:absolute;z-index:1200;min-width:238px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);overflow:hidden;padding:5px}
.mkc-daymenu-h{padding:8px 10px 7px;font-size:var(--fs-xs);color:var(--muted);
  border-bottom:1px solid var(--line);margin-bottom:4px}
.mkc-daymenu-h b{color:var(--ink);font-weight:var(--fw-medium)}
.mkc-daymenu button{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  background:none;border:none;color:var(--ink);border-radius:8px;padding:9px 10px;cursor:pointer;font:inherit}
.mkc-daymenu button:hover{background:var(--panel-2)}
.mkc-daymenu button>span:first-child{flex:none;line-height:0;margin-top:2px}
.mkc-daymenu button b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
/* The second line is the honest bit — text carries the date, email does not,
   and the menu says which before you commit rather than after. */
.mkc-daymenu button small{display:block;font-size:var(--fs-caption);color:var(--muted);margin-top:1px}
/* Email can't carry the date, so the date rides the slide-over's title bar in
   amber. Losing it silently would mean a live send going out on the wrong day. */
.mkc-datewarn{font-size:var(--fs-xs);font-weight:var(--fw-normal);color:var(--warn);
  background:color-mix(in srgb,var(--warn) 13%,transparent);border-radius:6px;padding:4px 9px;margin-left:12px}
.mkc-datewarn b{font-weight:var(--fw-bold)}
@media (max-width:700px){.mkc-datewarn{margin-left:0;margin-top:6px;display:block}}
/* Send calendar: a social post, read only, as it looks on the phone (Mike, 21 Oct 2026).
   The phone is a picture of a phone, so it stays white in dark mode on purpose. */
.mkc-sv-ov{align-items:center}
.mkc-sv{display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:min(860px,100%);outline:none}
.mkc-sv-load{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 24px}
.mkc-sv-phone{width:340px;max-width:100%;background:#fff;color:#111;border:8px solid #050505;border-radius:34px;padding:14px 0 18px;box-shadow:0 24px 60px rgba(0,0,0,.5);font:14px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;max-height:78vh;overflow:auto}
.mkc-sv-ph{display:flex;align-items:center;gap:9px;padding:0 14px 10px;font-size:13px}.mkc-sv-ph small{display:block;color:#65676b;font-size:11.5px;font-weight:400}
.mkc-sv-av{width:32px;height:32px;border-radius:50%;background:#f03d14;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.mkc-sv-media{position:relative;background:#000}.mkc-sv-media img,.mkc-sv-media video{display:block;width:100%;max-height:420px;object-fit:contain;background:#000}
.mkc-sv-arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;font-size:18px;line-height:1;cursor:pointer}.mkc-sv-arrow.l{left:8px}.mkc-sv-arrow.r{right:8px}.mkc-sv-arrow[disabled]{opacity:0;pointer-events:none}
.mkc-sv-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:4px;justify-content:center}.mkc-sv-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}.mkc-sv-dots i.on{background:#fff}
.mkc-sv-act{padding:10px 14px 4px;font-size:19px;letter-spacing:8px}
.mkc-sv-act.mkc-sv-fbk{display:flex;justify-content:space-around;letter-spacing:0;font-size:13px;font-weight:600;color:#65676b;border-top:1px solid #e4e6eb;margin:8px 10px 0;padding:8px 0 0}
.mkc-sv-cap{padding:4px 14px 0;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.mkc-sv-phone.mkc-sv-fbk .mkc-sv-cap{padding:0 14px 10px}
.mkc-sv-fc{color:#555;font-size:12.5px;margin-top:6px}
.mkc-sv-side{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px 18px;width:400px;max-width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mkc-sv-top{display:flex;align-items:center;justify-content:space-between}.mkc-sv-top b{font-size:16px}
.mkc-sv-tabs{display:inline-flex;flex-wrap:wrap;gap:4px}.mkc-sv-tabs button{border:1px solid var(--line);background:none;border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}.mkc-sv-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mkc-sv-pg{display:flex;align-items:center;gap:8px}
.mkc-sv-when{font-size:13px;color:var(--muted)}
.mkc-sv-chips{display:flex;gap:6px;flex-wrap:wrap}.mkc-sv-chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--muted)}.mkc-sv-chip.ok{color:var(--data,#4ec48d);border-color:color-mix(in srgb,var(--data,#4ec48d) 40%,var(--line))}.mkc-sv-chip.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.mkc-sv-nums{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}.mkc-sv-nums b{display:block;font-size:17px;color:var(--ink)}
/* One message posted to several places: a small tag per place on the calendar line. */
.mkc-plc{display:inline-flex;gap:2px;flex:none;margin-left:4px}.mkc-plc i{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.02em;border-radius:4px;padding:1px 4px;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--muted)}
.mkc-sv-story{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.mkc-sv-gone{font-size:12.5px;color:var(--muted);background:var(--panel-2);border-radius:12px;padding:10px 12px}.mkc-sv-gone b{color:var(--ink)}
.mkc-sv-nums.gone b{color:var(--muted-2,var(--muted))}.mkc-sv-tbl tr.gone td{color:var(--muted-2,var(--muted))}
.mkc-sv-own{font-size:12.5px;color:var(--data,#4ec48d)}
.mkc-sv-nums .eng b,.mkc-sv-tbl td.eng{color:var(--data,#4ec48d)}.mkc-sv-tbl tr.gone td.eng{color:var(--muted-2,var(--muted))}
.mkc-sv-tbl tr.on td{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.mkc-sv-tbl{border-collapse:collapse;width:100%;font-size:13px}.mkc-sv-tbl th{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2,var(--muted));font-weight:700;text-align:right;padding:4px 5px;white-space:nowrap}.mkc-sv-tbl th:first-child{text-align:left}
.mkc-sv-tbl td{border-top:1px solid var(--line);padding:7px 5px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}.mkc-sv-tbl td:first-child{text-align:left;font-weight:600;white-space:normal}.mkc-sv-tbl tr.tot td{font-weight:800;border-top:1.5px solid var(--muted)}
.mkc-sv-meta{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.mkc-sv-meta a{color:var(--accent)}
.mkc-sv-btns{display:flex;gap:8px;flex-wrap:wrap}.mkc-sv-btns .btn{text-decoration:none}
.mkc-sv-ro{font-size:12px;color:var(--muted-2,var(--muted))}
@media (max-width:760px){.mkc-sv{gap:12px}.mkc-sv-phone{max-height:none}}
/* Planned = a marketing task, nothing written yet. Drawn as a ghost so an empty
   week still LOOKS empty and a plan doesn't read as work already done. */
.mkc-chip.mkc-planned{background:transparent;border:1px dashed var(--line);border-left:3px dashed var(--mkc-c)}
.mkc-chip.mkc-planned .mkc-x{color:var(--muted)}
.mkc-chip.mkc-was{opacity:.8}
/* Social is read-only here by design — it belongs to the Social studio, which
   owns approvals, media and per-platform rules. A dotted rail says "you can look
   at this, it isn't yours to change on this page" without needing a lock icon on
   every row or a second explanation in the legend. */
.mkc-chip.mkc-ro-chip{border-left-style:dotted}
/* Slide-over escape hatch. The overlay reuses .jc-composer-* wholesale; the only
   new control is the link out to the real page, for when someone wants the full
   Comms screen with its sidebar rather than the framed view. */
.mkc-openfull{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--muted);text-decoration:none}
.mkc-openfull:hover{color:var(--accent)}
/* Chips are links now, so kill the underline the anchor would inherit. */
.mkc-chip,.mkc-chip:hover{text-decoration:none}

/* The event that owns the day, banded across the top of its cell. */
.mkc-ev{display:block;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:2px 5px;margin:0 0 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* "Not linked to an event" — the phase-1 gap, stated plainly rather than hidden. */
.mkc-warn{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:10px;
  background:var(--panel-2);padding:11px 14px;margin:0 0 14px;font-size:var(--fs-sm)}
.mkc-warn b{color:var(--warn)}
.mkc-warn span{color:var(--muted)}

.mkc-legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted)}
.mkc-lg{display:inline-flex;align-items:center;gap:6px}
.mkc-lg i{width:18px;height:10px;border-radius:3px;display:inline-block;flex:none}
.mkc-lg i.mkc-round{width:9px;height:9px;border-radius:50%}
.mkc-tz{margin-left:auto;opacity:.8}
/* Read-only viewers get no pointer affordance on a cell they can't act on. */
#mk-cal.mkc-ro .cal-cell{cursor:default}
@media (max-width:900px){.mkc-title{min-width:0}}


/* Marketing → Calendar: the "Show 1-to-1 texts" toggle sits beside the event
   filter. One-to-one texts are hidden by default — see sendcal.js state.showSolo. */
.mkc-solo{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  color:var(--muted);white-space:nowrap;cursor:pointer}
.mkc-solo input{margin:0;cursor:pointer}
.mkc-solo:hover{color:var(--ink)}

/* ── Tasks List rail (Shape 4, Mike, 22 Sep 2026) ───────────────────────────
   Summary beside the work, not on its own tab: clicking a number filters the
   table to its right in place, so nothing is a navigation. Collapses above the
   table on narrow screens, where a side rail would eat the columns. */
/* Two independent scroll areas, not one page scroll with a sticky rail.
   Sticky meant the rail travelled with the page until it pinned, so scrolling
   the list dragged the rail along for the first screenful (Mike, 22 Sep 2026).
   The shell is given the exact remaining viewport height at runtime (fitRail in
   app.js), which stops .content overflowing, so the page itself no longer
   scrolls and each side owns its own scrollbar. */
.tl-shell{display:flex;gap:14px;align-items:stretch;min-height:0}
.tl-main{flex:1;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-right:2px}
/* NO max-height HERE, on purpose. The obvious calc(100vh - 24px) is wrong: the
   rail does not start at the top of the scrollport, it starts below the page
   heading, the tab strip and the New task button, so a viewport-tall box hangs
   off the bottom by however far down it begins — and sticky only rescues it
   after you have already scrolled past. The height is measured at runtime in
   app.js (fitRail) from the rail's real position, which is the only place that
   distance is actually known. */
.tl-rail{flex:0 0 232px;width:232px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:10px;min-height:0;
  overflow-y:auto;overscroll-behavior:contain}
/* Narrow: the rail stacks above the table and the page scrolls normally. A
   split-height layout on a phone leaves two tiny scrollers and no room. */
@media (max-width:1100px){
  .tl-shell{flex-direction:column;height:auto!important}
  .tl-main{overflow:visible;min-height:0}
  .tl-rail{flex:1 1 auto;width:100%;max-height:none;overflow:visible}
}
.tl-rail-counts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
.tl-rc{cursor:pointer;font:inherit;text-align:left;background:var(--panel-2);
  border:1px solid var(--line);border-radius:9px;padding:8px 9px;color:var(--ink)}
.tl-rc b{display:block;font-size:var(--fs-lg,19px);font-weight:var(--fw-bold);line-height:1.1;
  font-variant-numeric:tabular-nums}
.tl-rc small{display:block;margin-top:3px;font-size:var(--fs-caption);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-rc:hover{border-color:var(--accent)}
.tl-rc.on{border-color:var(--accent);background:var(--accent-soft)}
.tl-rc:focus-visible,.tl-rb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tl-rs{font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px;padding-top:10px;
  border-top:1px solid var(--line)}
.tl-rs-n{display:block;margin-top:3px;font-weight:var(--fw-normal);letter-spacing:0;
  text-transform:none;opacity:.75}
.tl-rb{display:block;width:100%;cursor:pointer;font:inherit;text-align:left;background:none;
  border:1px solid transparent;border-radius:7px;padding:6px;margin-bottom:3px;color:var(--ink)}
.tl-rb:hover{background:var(--panel-2)}
.tl-rb.on{background:var(--accent-soft);border-color:var(--accent)}
.tl-rb-n{display:block;font-size:var(--fs-xs);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tl-rb-l{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-top:4px}
.tl-rb-c{font-size:var(--fs-caption);color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.tl-rb-c b{color:var(--danger);font-weight:var(--fw-bold)}
.tl-rb-d{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--muted);
  opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-rb-t{display:block;height:4px;border-radius:2px;background:var(--panel-2);
  overflow:hidden;margin-top:4px}
.tl-rb-t > i{display:block;height:100%;border-radius:2px;background:var(--accent)}
/* Recently deleted (Mike, 30 Sep 2026): the rail's last line and its panel. */
.tl-trash-link{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:8px;cursor:pointer;
  font:inherit;font-size:var(--fs-xs);text-align:left;background:none;border:0;border-top:1px solid var(--line);
  margin-top:14px;padding:10px 6px 4px;color:var(--muted)}
.tl-trash-link b{color:var(--ink);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.tl-trash-link:hover{color:var(--ink)}
.tl-trash-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:6px}
.tl-trash-ov{position:fixed;inset:0;z-index:1000;background:rgba(4,6,10,.45);opacity:0;transition:opacity .16s}
.tl-trash-ov.on{opacity:1}
.tl-trash{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--panel);
  border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(0,0,0,.35);display:flex;flex-direction:column;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(24px);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.tl-trash-ov.on .tl-trash{transform:none}
.tl-trash-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tl-trash-head h3{margin:0;font-size:var(--fs-lg,17px)}
.tl-trash-x{font:inherit;font-size:22px;line-height:1;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.tl-trash-x:hover{color:var(--ink)}
.tl-trash-x:focus-visible{outline:2px solid var(--accent)}
.tl-trash-note{margin:6px 0 10px;font-size:var(--fs-xs);color:var(--muted)}
.tl-trash-list{overflow-y:auto;min-height:0;flex:1}
.tl-trash-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl-trash-t{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--ink);word-break:break-word}
.tl-trash-t small{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--muted)}
.tl-trash-soon{color:var(--warn)}
.tl-trash-rs{font-size:var(--fs-sm);padding:6px 12px;flex:none}
.tl-trash-empty{color:var(--muted);font-size:var(--fs-sm);margin:18px 0}
@media (prefers-reduced-motion:reduce){.tl-trash-ov,.tl-trash{transition:none}}
/* The Undo toast after any task delete. Same stack as jcToast. */
.jc-undo-toast{pointer-events:auto;display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);padding:9px 10px 9px 13px;border-radius:8px;font-size:var(--fs-sm);box-shadow:0 6px 20px rgba(0,0,0,.45);
  max-width:340px;opacity:0;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease}
.jc-undo-toast.on{opacity:1;transform:none}
.jc-undo-btn{font:inherit;font-weight:var(--fw-bold,700);background:none;border:0;color:var(--accent);cursor:pointer;padding:3px 6px;border-radius:6px}
.jc-undo-btn:hover{background:var(--accent-soft)}
.jc-undo-btn:focus-visible{outline:2px solid var(--accent)}
.jc-undo-btn[disabled]{color:var(--muted);cursor:progress}
/* Event vs project, using the colour the Tasks list already gives each: events
   read violet in the Event column, projects stay neutral. Same language in two
   places rather than a new one invented for the rail. */
.tl-rb-k{font-size:var(--fs-caption);font-weight:var(--fw-bold);letter-spacing:.05em;
  text-transform:uppercase;border-radius:4px;padding:2px 6px;white-space:nowrap}
.tl-rb.k-ev .tl-rb-k{background:color-mix(in srgb,#b07bd0 18%,transparent);color:#b07bd0}
.tl-rb.k-pr .tl-rb-k{background:var(--panel-2);color:var(--muted)}
.tl-rb.k-ev{border-left:2px solid color-mix(in srgb,#b07bd0 55%,transparent)}

/* ── Hover zoom preview for thumbnails (Adam, 21 Sep 2026) ────────────────────
   Pairs with jcHoverZoom() in app.js. Asset thumbnails in the Library, the
   per-graphic Assets modal, the Graphics grid and the Events list/detail sit at
   54–170px, which is too small to tell a story cut from a square or read the
   date on a slide. Hovering one floats the same image beside the cursor at up
   to 46vw × 72vh on a black plate (same "contain on black" convention the
   Assets modal already uses). z-index sits above .jc-modal-overlay (1000) so
   it works inside modals. Pointer-only: touch devices never create it. */
.jc-zoom-pop{position:fixed;z-index:1200;left:0;top:0;pointer-events:none;opacity:0;
  transform:scale(.96);transition:opacity .14s ease,transform .14s ease;
  background:#0a0a0a;border:1px solid var(--line,#2b313c);border-radius:14px;padding:6px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.jc-zoom-pop.on{opacity:1;transform:scale(1)}
.jc-zoom-pop img{display:block;max-width:min(46vw,720px);max-height:72vh;width:auto;height:auto;
  object-fit:contain;border-radius:9px}
img.jc-zoom,img.eg-img{cursor:zoom-in}

/* "Showing <selection>" above the count tiles. The tiles re-read to whatever is
   selected, so the rail has to say what they are counting — numbers that change
   meaning without saying so are worse than numbers that never change. */
.tl-rail-sel{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);
  color:var(--muted);background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:8px;padding:5px 8px;margin-bottom:7px}
.tl-rail-sel b{color:var(--ink);font-weight:var(--fw-bold);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tl-rail-sel button{margin-left:auto;cursor:pointer;background:none;border:0;
  color:var(--muted);font-size:15px;line-height:1;padding:0 2px}
.tl-rail-sel button:hover{color:var(--ink)}

/* ---- Page view switch (Social: Calendar / Table / Board; Mission Control:
   Graphics / Photos). First thing on the page, left, filled when on. Moved here from
   views/_socialviews.php on 23 Sep 2026 so every switch looks the same. ---- */
.jc-sviews{display:inline-flex;gap:4px;padding:4px;margin:0 0 14px;background:var(--panel);
  border:1px solid var(--line,#2b313c);border-radius:12px}
.jc-sv{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9px;
  font-size:var(--fs-sm);font-weight:var(--fw-bold,700);color:var(--muted);text-decoration:none;
  line-height:1;min-height:36px;transition:background .12s,color .12s}
.jc-sv:hover{color:var(--ink);background:var(--panel-2)}
.jc-sv.on{background:var(--accent);color:#fff}
.jc-sv.on:hover{background:var(--accent);color:#fff}
.jc-sv:focus-visible{outline:2px solid var(--accent);outline-offset:2px}


/* ---- The Social card on an event or a project (23 Sep 2026) --------------------
   The campaign that promotes it: counts, the next post, missing art, a link to the
   Schedule. Shared by event detail and project detail (jcSocialCard in app.js). */
.jsoc{padding:12px 14px;margin:12px 0 14px}
.jsoc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jsoc-h b{font-size:var(--fs-base)}
.jsoc-nm{color:var(--muted);font-size:var(--fs-sm);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jsoc-go{padding:5px 11px;font-size:var(--fs-sm);text-decoration:none}
.jsoc-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:var(--fs-sm);color:var(--muted)}
.jsoc-row b{color:var(--ink)}
.jsoc-warn{color:var(--warn,#e0a43f);font-weight:var(--fw-bold,700)}
.jsoc-next{margin-top:6px;font-size:var(--fs-sm)}
.jsoc-tier{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#2b313c);font-size:var(--fs-sm)}
.jsoc-tier select{width:auto;margin-left:6px}
.jsoc .sp-mini{font-size:var(--fs-xs);color:var(--accent);cursor:pointer;background:none;border:none;padding:2px 4px}
/* A project's social campaign on its card (23 Sep 2026). */
.pr-soc{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption,11px);font-weight:var(--fw-bold,700);color:var(--accent);
  background:var(--accent-soft,rgba(47,134,207,.16));border-radius:10px;padding:1px 8px;text-decoration:none}
.pr-soc:hover{text-decoration:underline}
.pr-soc.empty{color:#c8843f;background:rgba(200,132,63,.14)}

/* ============================================================================
   SIDEBAR REDESIGN (Mike, 30 Sep 2026), from "Mission Control Redesign.html".
   One block on purpose: delete it (and the matching layout.php markup) to go
   back. Apple-style frame for every workspace: the menu sits on the page colour,
   the page you are on is a raised card with its icon in the workspace colour,
   quiet group labels, a raised workspace card, a search box, and you + the bell
   on one row at the bottom. Width, padding, the collapsed rail, the phone drawer
   and jc-app safe areas are deliberately untouched. Tokens only, both themes.
   ========================================================================== */
.sidebar{background:var(--bg)}
.sidebar .brand{margin-bottom:12px}
/* workspace card */
.sidebar .ws-switch{margin:0 0 10px}
.sidebar .ws-current{gap:10px;padding:9px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.sidebar .ws-current:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.sidebar .ws-current .ws-ico{width:28px;height:28px;border-radius:8px}
.ws-text{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;line-height:1.2}
.sidebar .ws-current .ws-name{flex:none;font-size:14px;font-weight:var(--fw-bold,600)}
.sidebar .ws-current .ws-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .ws-current .ws-caret{font-size:13px;line-height:1}
.sidebar.collapsed .ws-text{display:none}
/* search */
.sb-search{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 4px;padding:8px 10px;border:0;border-radius:10px;background:var(--panel-2);color:var(--muted);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.sb-search:hover{color:var(--ink)}
.sb-search svg{flex:none}
.sb-search-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-search kbd{margin-left:auto;font:inherit;font-size:11px;line-height:1.4;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:0 6px}
@media (hover:none){.sb-search kbd{display:none}}
.sidebar.collapsed .sb-search{justify-content:center;padding:8px 0}
.sidebar.collapsed .sb-search-lbl,.sidebar.collapsed .sb-search kbd{display:none}
/* groups and items */
.sidebar .nav-group-label{font-size:11px;font-weight:var(--fw-bold,600);text-transform:none;letter-spacing:0;color:var(--muted-2);margin:14px 10px 4px}
.sidebar nav > .nav-group-label:first-child{margin-top:4px}
.sidebar nav a{display:flex;align-items:center;gap:10px;margin:1px 0;padding:7px 10px;border-radius:10px;color:var(--ink);font-size:14px;line-height:1.3}
.sidebar nav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.sidebar nav a.active{background:var(--panel);color:var(--ink);font-weight:var(--fw-bold,600);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.sidebar .nav-ico{width:18px;margin-right:0;opacity:1;color:var(--muted);flex:none}
.sidebar nav a.active .nav-ico{color:var(--sb-accent,var(--accent))}
.sidebar nav a .nav-badge{margin-left:auto}
.sidebar .nav-ct{margin-left:auto;font-size:12px;font-weight:var(--fw-medium,500);color:var(--muted);font-variant-numeric:tabular-nums}
.sidebar .nav-ct:empty{display:none}
.sidebar .nav-ct.red{color:#fff;background:var(--danger);border-radius:999px;padding:0 7px;font-weight:var(--fw-bold,600);line-height:18px}
.sidebar .min-navcount{margin-left:auto;background:none;padding:0;font-size:12px;font-weight:var(--fw-medium,500);color:var(--muted);font-variant-numeric:tabular-nums}
.sidebar.collapsed nav a{justify-content:center;gap:0}
.sidebar.collapsed .nav-ct{display:none}
/* you + bell */
.sidebar .sidebar-foot{gap:6px;margin-top:8px;padding:10px 2px 2px;border-top:1px solid var(--line)}
.sidebar .foot-acct{flex:1;min-width:0}
.sidebar .foot-acct-btn{display:flex;align-items:center;gap:10px;width:100%;padding:6px;border-radius:12px;color:var(--ink);font:inherit;text-align:left}
.sidebar .foot-acct-btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sidebar .foot-avatar{width:32px;height:32px}
.foot-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.foot-name{font-size:13.5px;font-weight:var(--fw-bold,600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot-role{font-size:11.5px;color:var(--muted)}
.foot-inbox{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--panel-2);color:var(--muted);cursor:pointer}
.foot-inbox:hover{color:var(--ink)}
.foot-inbox .nav-badge{position:absolute;top:-3px;right:-4px;margin:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;align-items:center;justify-content:center;background:var(--danger);color:#fff;font-size:10px;font-weight:var(--fw-bold,700);border:2px solid var(--bg)}
.sb-search:focus-visible,.sidebar .ws-current:focus-visible,.sidebar .foot-acct-btn:focus-visible,.foot-inbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sidebar.collapsed .sidebar-foot{flex-direction:column;border-top:0;padding:10px 0 0}
.sidebar.collapsed .foot-who{display:none}
.sidebar.collapsed .foot-acct-btn{justify-content:center;padding:4px}

/* ============================================================================
   MY TO-DO REDESIGN (Mike, 30 Sep 2026), from "Mission Control Redesign.html".
   renderMyTodo() in app.js. Grouped cards, quiet sections, a tag that is also
   the due-date control. Tokens only, both themes.
   ========================================================================== */
#mytodo-root{max-width:1380px}
.mt2-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mt2-eyebrow{font-size:15px;font-weight:var(--fw-bold,600);color:var(--muted)}
.mt2-title{margin:2px 0 0;font-size:30px;line-height:1.1;letter-spacing:-.03em;font-weight:var(--fw-black,800);color:var(--ink)}
.mt2-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.mt2-chips{display:flex;gap:6px;flex-wrap:wrap}
.mt2-chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:var(--fw-medium,500);cursor:pointer}
.mt2-chip:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.mt2-chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mt2-chip .n{opacity:.6;font-variant-numeric:tabular-nums;margin-left:2px}
.mt2-seg{display:inline-flex;background:var(--panel-2);border-radius:10px;padding:3px;gap:2px}
.mt2-seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:var(--fw-bold,600);padding:5px 12px;border-radius:8px;cursor:pointer}
.mt2-seg button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.mt2-sec{display:flex;align-items:baseline;gap:10px;margin:22px 4px 8px}
.mt2-h{font-size:17px;font-weight:var(--fw-bold,700);letter-spacing:-.01em;color:var(--ink)}
.mt2-h.late{color:var(--danger)}
.mt2-note{font-size:13px;color:var(--muted)}
.mt2-n{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.mt2-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mt2-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);min-width:0}
.mt2-row:first-child{border-top:0}
.mt2-chk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.mt2-chk svg{width:20px;height:20px}
.mt2-chk:hover{background:var(--panel-2)}
.mt2-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;border:0;background:none;padding:0;color:var(--ink);font:inherit;cursor:pointer}
.mt2-t .a{font-size:15px;font-weight:var(--fw-medium,500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt2-t .b{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt2-row.is-done .mt2-t .a{text-decoration:line-through;color:var(--muted)}
.mt2-tag{flex:none;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;font-weight:var(--fw-bold,600);cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.mt2-tag:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.mt2-tag.late{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:transparent}
.mt2-tag.today{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:transparent}
.mt2-tag.none{background:transparent;border-style:dashed}
.mt2-tag.done{cursor:default;color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent);border-color:transparent}
.mt2-empty{padding:18px 16px;color:var(--muted);font-size:14px}
.mt2-donecard{margin-top:18px}
.mt2-link{flex:none;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:var(--fw-bold,600);cursor:pointer}
.mt2-chip:focus-visible,.mt2-seg button:focus-visible,.mt2-chk:focus-visible,.mt2-t:focus-visible,.mt2-tag:focus-visible,.mt2-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){.mt2-title{font-size:26px}.mt2-row{padding:11px 12px;gap:10px}}

/* ============================================================================
   HOME REDESIGN (Mike, 30 Sep 2026), from "Mission Control Redesign.html".
   renderHome(): greeting + summary, number cards, Coming up, then the fixed
   cards (My To-Do + Today, Care + Team). Widgets from Customize sit below.
   Tokens only, both themes.
   ========================================================================== */
.hm2-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.hm2-head-l{min-width:0;flex:1 1 320px}
.hm2-eyebrow{font-size:13px;font-weight:var(--fw-bold,600);color:var(--muted)}
.hm2-eyebrow a{color:var(--accent);text-decoration:none}
.hm2-title{font-size:32px;line-height:1.1;letter-spacing:-.035em;font-weight:var(--fw-black,800);color:var(--ink);margin:4px 0 6px}
.hm2-lede{font-size:16px;color:var(--muted);max-width:70ch;min-height:1.3em}
.hm2-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 18px}
.hm2-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:6px}
.hm2-stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 1px 2px rgba(0,0,0,.05);min-width:0}
.hm2-stat .l{font-size:13px;font-weight:var(--fw-bold,600);color:var(--muted)}
.hm2-stat .big{font-size:34px;font-weight:var(--fw-black,800);letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.hm2-stat .big.care{color:var(--ws-care,var(--danger))}
.hm2-stat .mid{font-size:22px;font-weight:var(--fw-bold,700);letter-spacing:-.02em;color:var(--ink)}
.hm2-stat .s{font-size:13px;color:var(--muted);margin-top:3px}
.hm2-stat-ring{display:flex;align-items:center;gap:16px}
.hm2-ring{--p:0;flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--ws-mc,var(--accent)) calc(var(--p)*1%),var(--panel-2) 0);-webkit-mask:radial-gradient(circle,transparent 57%,#000 58%);mask:radial-gradient(circle,transparent 57%,#000 58%)}
.hm2-sec{display:flex;align-items:baseline;gap:10px;margin:24px 2px 10px}
.hm2-sec .h{font-size:20px;font-weight:var(--fw-bold,700);letter-spacing:-.02em;color:var(--ink)}
.hm2-link{margin-left:auto;font-size:13px;font-weight:var(--fw-bold,600);color:var(--accent);text-decoration:none;white-space:nowrap}
.hm2-link:hover{text-decoration:underline}
.hm2-seeall{margin-left:10px;font-weight:var(--fw-medium,500)}
.hm2-hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,230px);gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;margin-bottom:8px}
.hm2-ev{scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);min-width:0}
.hm2-ev .ph{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ws-mc,var(--accent)) 22%,var(--panel-2));margin-bottom:4px}
.hm2-ev .ph img{width:100%;height:100%;object-fit:cover;display:block}
.hm2-ev .badge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.62);color:#fff;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:var(--fw-bold,700)}
.hm2-ev b{font-size:15px;font-weight:var(--fw-bold,600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm2-ev .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm2-ev:hover b{color:var(--accent)}
.hm2-ev:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:14px}
.hm2-g75{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:18px;margin-top:18px;align-items:start}
.hm2-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:18px;align-items:start}
.hm2-g2 > .hm2-slot{display:contents}
.hm2-fixed > .card{border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.05);margin:0}
.hm2-g75 .hm2-fixed > .card{max-height:560px;display:flex;flex-direction:column}
.hm2-g75 .hm2-fixed #hm-todo-list{overflow-y:auto;min-height:0;flex:1 1 auto}
/* The Today calendar's hour grid has its own 515px cap (.hm-cal-wrap). Inside the 560px
   Home card, the header plus all-day reminders pushed it out past the card's bottom and
   over the card below (Mike, 1 Oct 2026). Let it take only the space that's left and
   scroll inside; the card clips anything else. */
.hm2-g75 .hm2-fixed > .card{overflow:hidden}
.hm2-g75 .hm2-fixed #hm-cal{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hm2-g75 .hm2-fixed .hm-cal-wrap{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto}
.hm2-fixed .hm-wt{display:inline;font-size:16px;font-weight:var(--fw-bold,700);letter-spacing:-.01em;text-transform:none}
@media (max-width:1000px){.hm2-g75{grid-template-columns:1fr}.hm2-stats{grid-template-columns:1fr}}
@media (max-width:640px){.hm2-title{font-size:26px}.hm2-hscroll{grid-auto-columns:minmax(180px,72%)}}
.hm2-fixed .mlabel{text-transform:none;letter-spacing:-.01em;font-size:16px;font-weight:var(--fw-bold,700);color:var(--ink)}
/* PCO in the top bar (30 Sep 2026): a text button among the icon buttons. */
.pco-top-btn{width:auto;padding:0 10px;font-size:12px;letter-spacing:.04em}
#pco-nav-wrap{display:inline-flex}

/* ============================================================================
   TODAY SECTION: MATCH THE REDESIGN FILE (Mike, 30 Sep 2026)
   Home, My To-Do and Planner take the file's type, spacing and components:
   system font 15/1.45 at -.01em, 30/36 page padding, 12.5 uppercase eyebrow,
   34 title, 16.5 lede, 21 section heads 30px down, 22px cards padded 18/20,
   12/20 rows, 42 numbers, 62 ring, 250x160 event cards, pill chips/buttons,
   the page title as a small breadcrumb. Colours stay on the app's tokens (the
   sidebar and every other page share them). Delete this block to go back.
   ========================================================================== */
:is(body[data-route="home"],body[data-route="mytodo"]){
  --t-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,sans-serif;
  --t-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.5);
  --t-mc:var(--ws-mc,#e0a43f);
}
html[data-theme="light"] :is(body[data-route="home"],body[data-route="mytodo"]){--t-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
:is(body[data-route="home"],body[data-route="mytodo"]) .content{font-family:var(--t-font);font-size:15px;line-height:1.45;letter-spacing:-.01em}
:is(body[data-route="home"],body[data-route="mytodo"]) .content :is(button,input,select,textarea){font-family:inherit;letter-spacing:inherit}
@media (min-width:761px){:is(body[data-route="home"],body[data-route="mytodo"]) .content{padding:18px 36px 44px}}
/* page title as the file's breadcrumb bar */
:is(body[data-route="home"],body[data-route="mytodo"]) .page-head{margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
:is(body[data-route="home"],body[data-route="mytodo"]) .page-head h1{font-family:var(--t-font);text-transform:none;letter-spacing:-.01em;font-size:14px;font-weight:700;color:var(--ink)}
:is(body[data-route="home"],body[data-route="mytodo"]) .page-head h1::before{content:"Mission Control  ›  ";white-space:pre;font-size:13px;font-weight:500;color:var(--muted)}
/* shared pieces */
:is(body[data-route="home"],body[data-route="mytodo"]) :is(.hm2-eyebrow,.mt2-eyebrow){font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
:is(body[data-route="home"],body[data-route="mytodo"]) :is(.hm2-title,.mt2-title){font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.1;margin:4px 0 6px;color:var(--ink)}
:is(body[data-route="home"],body[data-route="mytodo"]) :is(.hm2-lede){font-size:16.5px;color:var(--muted);margin:0 0 24px;letter-spacing:-.01em}
:is(body[data-route="home"],body[data-route="mytodo"]) :is(.hm2-link,.mt2-link){color:var(--t-mc);font-weight:600;font-size:13.5px}
@media (max-width:760px){:is(body[data-route="home"],body[data-route="mytodo"]) :is(.hm2-title,.mt2-title){font-size:28px}}

/* ---- Home ---- */
body[data-route="home"] .hm2-head{margin-bottom:0}
body[data-route="home"] .hm2-lede{margin-bottom:14px}
body[data-route="home"] .hm2-tools{margin:0 0 24px}
body[data-route="home"] .hm2-stats{gap:18px;margin:0}
body[data-route="home"] .hm2-stat{border-radius:22px;padding:18px 20px;box-shadow:var(--t-shadow)}
body[data-route="home"] .hm2-stat .l{font-size:13px;font-weight:600}
body[data-route="home"] .hm2-stat .big{font-size:42px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:8px}
body[data-route="home"] .hm2-stat .mid{font-size:22px;font-weight:700;letter-spacing:-.02em}
body[data-route="home"] .hm2-stat .s{font-size:13px;margin-top:6px}
body[data-route="home"] .hm2-stat-ring .s{margin-top:2px}
body[data-route="home"] .hm2-ring{width:62px;height:62px;background:conic-gradient(var(--t-mc) calc(var(--p)*1%),var(--panel-2) 0);-webkit-mask:radial-gradient(circle closest-side,transparent 75%,#000 76%);mask:radial-gradient(circle closest-side,transparent 75%,#000 76%)}
body[data-route="home"] .hm2-sec{margin:30px 0 12px}
body[data-route="home"] .hm2-sec .h{font-size:21px;font-weight:700;letter-spacing:-.025em}
body[data-route="home"] .hm2-hscroll{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 16px;margin:0;scroll-snap-type:x mandatory}
body[data-route="home"] .hm2-hscroll::-webkit-scrollbar{height:0}
body[data-route="home"] .hm2-ev{flex:0 0 250px;gap:0}
body[data-route="home"] .hm2-ev .ph{aspect-ratio:auto;height:160px;border-radius:18px;margin:0}
body[data-route="home"] .hm2-ev .badge{top:12px;left:12px;background:rgba(255,255,255,.93);color:#1d1d1f;font-size:12px;font-weight:700;padding:4px 10px}
body[data-route="home"] .hm2-ev b{margin:10px 2px 1px;font-size:15px;font-weight:700}
body[data-route="home"] .hm2-ev .muted{margin:0 2px;font-size:13px}
body[data-route="home"] :is(.hm2-g75,.hm2-g2){gap:18px;margin-top:18px}
body[data-route="home"] .hm2-fixed > .card{border-radius:22px;box-shadow:var(--t-shadow);background:var(--panel)}
body[data-route="home"] .hm2-fixed[data-w="followups"] > .card,body[data-route="home"] .hm2-fixed[data-w="myteam"] > .card{padding:18px 20px}
body[data-route="home"] .hm2-fixed .mlabel{font-size:16.5px;font-weight:700;letter-spacing:-.02em}
body[data-route="home"] .hm2-fixed .hm-wt{font-size:16.5px;letter-spacing:-.02em}
body[data-route="home"] .hm2-fixed[data-w="todo"] > .card > div:first-child{padding:18px 20px 8px !important;border-bottom:0 !important}
body[data-route="home"] .hm2-fixed[data-w="todo"] #hm-chips{padding:6px 20px 4px !important}
body[data-route="home"] .hm2-fixed[data-w="todo"] #hm-chips + div{padding:6px 20px 12px !important}
body[data-route="home"] .hm2-fixed .hm-task{padding:12px 20px !important;font-size:15px}
body[data-route="home"] .hm2-fixed[data-w="calendar"] > .card > div:first-child{padding:16px 20px 10px !important}
body[data-route="home"] #hm-chips .hm-chip{border:0 !important;background:var(--panel-2) !important;border-radius:999px !important;padding:6px 13px !important;font-size:13px !important;color:var(--ink) !important}
body[data-route="home"] #hm-chips .hm-chip.active{background:var(--ink) !important;color:var(--bg) !important}

/* ---- My To-Do ---- */
body[data-route="mytodo"] .mt2-head{align-items:flex-end;margin-bottom:18px}
body[data-route="mytodo"] .mt2-title{margin-bottom:0}
body[data-route="mytodo"] .mt2-bar{margin:0 0 18px;gap:10px}
body[data-route="mytodo"] .mt2-chip{border:0;background:var(--panel-2);padding:6px 13px;font-size:13px;font-weight:400}
body[data-route="mytodo"] .mt2-chip .n{color:var(--muted);opacity:1;margin-left:4px}
body[data-route="mytodo"] .mt2-chip.on{background:var(--ink);color:var(--bg)}
body[data-route="mytodo"] .mt2-chip.on .n{color:var(--bg);opacity:.7}
body[data-route="mytodo"] .mt2-sec{margin:30px 0 12px}
body[data-route="mytodo"] .mt2-bar + .mt2-sec{margin-top:6px}
body[data-route="mytodo"] .mt2-h{font-size:17px;font-weight:700;letter-spacing:-.025em}
body[data-route="mytodo"] .mt2-note,body[data-route="mytodo"] .mt2-n{font-size:13px}
body[data-route="mytodo"] .mt2-card{border-radius:22px;box-shadow:var(--t-shadow)}
body[data-route="mytodo"] .mt2-row{padding:12px 20px}
body[data-route="mytodo"] .mt2-row:hover{background:color-mix(in srgb,var(--ink) 4.5%,transparent)}
body[data-route="mytodo"] .mt2-chk{width:22px;height:22px}
body[data-route="mytodo"] .mt2-chk svg{width:22px;height:22px}
body[data-route="mytodo"] .mt2-t .a{font-size:15px;font-weight:400}
body[data-route="mytodo"] .mt2-t .b{font-size:12.5px;margin-top:1px}
body[data-route="mytodo"] .mt2-tag{border:0;background:var(--panel-2);font-size:11.5px;font-weight:600;padding:3px 9px}
body[data-route="mytodo"] .mt2-tag.late{background:color-mix(in srgb,var(--danger) 13%,transparent)}
body[data-route="mytodo"] .mt2-tag.today{background:color-mix(in srgb,var(--t-mc) 17%,transparent);color:color-mix(in srgb,var(--t-mc) 78%,var(--ink))}
body[data-route="mytodo"] .mt2-tag.none{border:1px dashed var(--line);background:transparent}
body[data-route="mytodo"] .mt2-donecard{margin-top:18px}
body[data-route="mytodo"] .mt2-donecard > .mt2-row:first-child{padding:18px 20px}
body[data-route="mytodo"] .mt2-empty{padding:34px 20px;text-align:center}
:is(body[data-route="home"],body[data-route="mytodo"]) .mt2-pri{border:0;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;background:var(--ink);color:var(--bg)}
body[data-route="mytodo"] .mt2-seg{border-radius:11px;padding:3px}
body[data-route="mytodo"] .mt2-seg button{font-size:13.5px;font-weight:600;padding:6px 14px;border-radius:9px}

/* ============================================================================
   PLANNER TIMELINE VIEW (Mike, 30 Sep 2026), from "Mission Control Redesign.html".
   The "Timeline" choice in the planner's view picker (drawTimeline in
   renderSchedule). Adam's Day / Week / Month grid is untouched; everything here
   is under .tlv. Sizes are the file's; colours are the app's tokens.
   ========================================================================== */
.sc-layout.tlv-on > .sc-rail{display:none}
.sc-layout.tlv-on > .sc-grid-wrap{flex:1 1 auto;min-width:0}
.tlv{--tlv-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;--tlv-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);font-family:var(--tlv-font);font-size:15px;line-height:1.45;letter-spacing:-.01em;color:var(--ink)}
html[data-theme="light"] .tlv{--tlv-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
.tlv button{font:inherit;letter-spacing:inherit;color:inherit}
.tlv-plan{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.tlv-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.tlv-headl{flex:1;min-width:240px}
.tlv-eyebrow{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tlv-h1{font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.1;margin:4px 0 6px}
.tlv-lede{color:var(--muted);font-size:16.5px;margin:0 0 24px}
.tlv-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--panel-2);margin-bottom:24px}
.tlv-seg button{border:0;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer}
.tlv-seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:default}
.tlv-line{position:relative;margin-left:82px}
.tlv-line::before{content:"";position:absolute;left:-16px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tlv-ti{position:relative;margin:0 0 10px}
.tlv-hr{position:absolute;left:-86px;top:14px;width:62px;text-align:right;font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.tlv-pin{position:absolute;left:-21px;top:17px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg)}
.tlv-card{width:100%;text-align:left;padding:13px 16px;display:flex;align-items:center;gap:12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--tlv-shadow);cursor:pointer}
.tlv-card:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
.tlv-ti.free .tlv-card{border-style:dashed;box-shadow:none;background:transparent;cursor:default}
.tlv-ti.free.over .tlv-card{border-color:var(--ws-mc);background:color-mix(in srgb,var(--ws-mc) 10%,transparent)}
.tlv-t{flex:1;min-width:0}
.tlv-t b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlv-sub{color:var(--muted);font-size:13px}
.tlv-tag{flex:none;font-size:11.5px;font-weight:600;border-radius:980px;padding:3px 9px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.tlv-tag.late{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
.tlv-tag.today{background:color-mix(in srgb,var(--ws-mc) 17%,transparent);color:color-mix(in srgb,var(--ws-mc) 78%,var(--ink))}
.tlv-now{position:relative;border-top:2px solid var(--danger);margin:6px 0 14px}
.tlv-now span{position:absolute;left:-86px;top:-9px;width:62px;text-align:right;font-size:11px;font-weight:700;color:var(--danger)}
.tlv-chk{width:22px;height:22px;border-radius:50%;border:1.8px solid var(--muted-2);background:transparent;flex:none;cursor:pointer;display:grid;place-items:center;padding:0}
.tlv-chk:hover{border-color:var(--success)}
.tlv-chk.done{background:var(--success);border-color:var(--success)}
.tlv-chk.done::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.tlv-side{padding-top:8px}
.tlv-box{background:var(--panel);border-radius:22px;border:1px solid var(--line);box-shadow:var(--tlv-shadow);overflow:hidden}
.tlv-ch{display:flex;align-items:baseline;gap:8px;padding:18px 20px 8px}
.tlv-ch b{font-size:16.5px;letter-spacing:-.02em}
.tlv-r{margin-left:auto;color:var(--muted);font-size:13px}
.tlv-row{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line);cursor:grab}
.tlv-row:first-child{border-top:0}
.tlv-row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.tlv-row:active{cursor:grabbing}
.tlv-a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlv-b{color:var(--muted);font-size:12.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlv-b.late{color:var(--danger)}
.tlv-more{display:block;width:100%;border:0;border-top:1px solid var(--line);background:none;padding:11px 20px;text-align:left;color:var(--ws-mc);font-weight:600;font-size:13.5px;cursor:pointer}
.tlv-empty{padding:18px 20px;font-size:14px}
.tlv-line > .tlv-empty{padding:14px 0}
.tlv-pop{position:absolute;z-index:1000;max-width:320px;padding:14px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.35);color:var(--ink);font-size:14px;display:grid;gap:2px}
.tlv :is(.tlv-card,.tlv-chk,.tlv-seg button,.tlv-more):focus-visible,.tlv-row:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Drop anywhere (30 Sep 2026): the whole day is a target, highlighted while a task
   is dragged over it. Past days don't take drops. */
.tlv-drop{border-radius:18px;transition:background-color .12s ease,box-shadow .12s ease}
.tlv-line.tlv-drop{min-height:220px;padding-bottom:12px}
.tlv-drop.over{background:color-mix(in srgb,var(--ws-mc) 7%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--ws-mc) 55%,transparent)}
.tlv-task[draggable]{cursor:grab}
.tlv-task[draggable]:active{cursor:grabbing}
/* Drop slots inside open time (1 Oct 2026): drop on one to pick that exact time.
   The one under the pointer lights up while dragging. */
.tlv-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tlv-slot{font-size:12.5px;font-weight:600;padding:4px 10px;border:1px dashed var(--line);border-radius:999px;color:var(--muted);font-variant-numeric:tabular-nums;transition:background-color .1s ease,color .1s ease}
.tlv-slot.hot{background:var(--ws-mc);border-color:var(--ws-mc);border-style:solid;color:#15120a}
.tlv-ti.free .tlv-card{align-items:flex-start}
.tlv-week .tlv-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:6px}
.tlv-week .tlv-slot{font-size:11.5px;padding:3px 4px;text-align:center}
/* All-day strip (1 Oct 2026): all-day events and reminders (tasks due that day
   with no length) above the day's timeline, or under the date in each week column. */
.tlv-adwrap{position:relative;margin:0 0 14px 82px}
.tlv-adl{position:absolute;left:-86px;top:7px;width:62px;text-align:right;font-size:12.5px;font-weight:600;color:var(--muted)}
.tlv-ad{display:flex;flex-direction:column;gap:4px}
.tlv-adi{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:13.5px;cursor:pointer;min-width:0;color:var(--ink)}
.tlv-adi:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
.tlv-rem{cursor:grab}
.tlv-add{flex:none;width:8px;height:8px;border-radius:50%}
.tlv-adt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlv-adi .tlv-chk{width:16px;height:16px;border-width:1.5px}
.tlv-admore{align-self:flex-start;border:0;background:none;padding:2px 4px;color:var(--ws-mc);font-size:12.5px;font-weight:600;cursor:pointer}
.tlv-week .tlv-adwrap{margin:0 0 4px}
.tlv-week .tlv-adl{display:none}
.tlv-week .tlv-adi{padding:4px 7px;gap:6px;font-size:11.5px;border-radius:8px}
.tlv-week .tlv-adi .tlv-chk{width:13px;height:13px}
.tlv-week .tlv-admore{font-size:11px}
@media (max-width:640px){.tlv-adwrap{margin-left:72px}.tlv-adl{left:-76px;width:54px;font-size:11px}}
/* Change a planned task's time, or take it off the day (1 Oct 2026). The time label
   on a task is a button; To plan takes a planned task dragged back onto it. */
.tlv-hrbtn{border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted)}
.tlv-hrbtn:hover{color:var(--ink);text-decoration:underline}
.tlv-hrbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.tlv-week .tlv-hrbtn{font-size:11px}
.tlv-tpop{width:260px}
.tlv-tms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-height:220px;overflow-y:auto;margin:8px 0;padding-right:2px}
.tlv-tm{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:8px;padding:5px 2px;font:inherit;font-size:12px;font-variant-numeric:tabular-nums;cursor:pointer}
.tlv-tm:hover:not([disabled]){border-color:var(--ws-mc)}
.tlv-tm.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tlv-tm[disabled]{opacity:.35;cursor:not-allowed}
.tlv-unplan{border:0;background:none;padding:4px 0;color:var(--danger);font:inherit;font-size:13px;font-weight:600;cursor:pointer;justify-self:start}
.tlv-box.over{box-shadow:0 0 0 2px color-mix(in srgb,var(--ws-mc) 60%,transparent)}
.tlv-box.over .tlv-r{visibility:hidden;position:relative}
.tlv-box.over .tlv-r::after{content:"Drop to take it off the day";visibility:visible;position:absolute;right:0;white-space:nowrap;color:var(--ws-mc);font-weight:600}
/* Week: Monday to Sunday as seven columns of the same rows, compact. */
.tlv-wk .tlv-plan{grid-template-columns:minmax(0,1fr) 240px;gap:16px}
.tlv-week{display:grid;grid-template-columns:repeat(7,minmax(116px,1fr));gap:8px;overflow-x:auto;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.tlv-col{display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;background:color-mix(in srgb,var(--panel-2) 55%,transparent);min-height:420px}
.tlv-col.is-past{opacity:.6}
.tlv-colh{display:flex;align-items:baseline;gap:6px;border:0;background:none;padding:4px 4px 6px;cursor:pointer;text-align:left;border-bottom:1px solid var(--line);border-radius:0}
.tlv-colh b{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tlv-colnum{font-size:20px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.tlv-col.is-today .tlv-colnum{color:#fff;background:var(--danger);border-radius:999px;min-width:28px;height:28px;display:inline-grid;place-items:center;font-size:15px}
.tlv-colc{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tlv-colh:hover .tlv-colnum{text-decoration:underline}
.tlv-coll{display:flex;flex-direction:column;gap:5px}
.tlv-week .tlv-ti{margin:0}
.tlv-week .tlv-hr{position:static;display:block;width:auto;text-align:left;font-size:11px;margin:0 0 2px 2px}
.tlv-week .tlv-pin{display:none}
.tlv-week .tlv-card{padding:7px 9px;gap:7px;border-radius:11px;align-items:flex-start}
.tlv-week .tlv-t b{font-size:12px;font-weight:600;white-space:normal;overflow-wrap:break-word;hyphens:manual;line-height:1.3;letter-spacing:-.005em}
.tlv-week .tlv-sub{font-size:11px}
.tlv-week .tlv-tag{display:none}
.tlv-week .tlv-chk{width:16px;height:16px;margin-top:1px;border-width:1.5px}
.tlv-week .tlv-ti.free .tlv-t{font-size:11.5px}
.tlv-week .tlv-now{margin:2px 0 4px}
.tlv-week .tlv-now span{position:static;display:block;width:auto;text-align:left;margin-top:-16px;font-size:10.5px}
.tlv-week .tlv-empty{padding:10px 4px;font-size:11.5px}
@media (max-width:1000px){.tlv-wk .tlv-plan{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.tlv-drop{transition:none}}
@media (max-width:1000px){.tlv-plan{grid-template-columns:minmax(0,1fr)}.tlv-side{padding-top:0}}
@media (max-width:640px){.tlv-h1{font-size:28px}.tlv-line{margin-left:72px}.tlv-hr{left:-76px;width:54px;font-size:11px}.tlv-now span{left:-76px;width:54px}}

/* ============================================================================
   MY TO-DO: THE WEEK STRIP (Mike, 30 Sep 2026, option 1A of the layout mockups)
   A row of tiles under the chips: Overdue (only when there is some), Today,
   Tomorrow, each day to Sunday, Next week, Later. Each tile is a count and a
   filter. Below it one wide list; on big screens the project gets its own
   column. The page fills the screen (max 1380, was 980).
   ========================================================================== */
.mt2-strip{display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));gap:10px;margin:0 0 22px}
.mt2-tile{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:18px;padding:14px 16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;font:inherit;box-shadow:var(--t-shadow,0 1px 2px rgba(0,0,0,.05))}
.mt2-tile:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.mt2-tile .l{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt2-tile .d{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt2-tile .c{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums}
.mt2-tile.zero .c{color:var(--muted-2);opacity:.6}
.mt2-tile.late .c{color:var(--danger)}
.mt2-tile[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mt2-tile[aria-pressed="true"] .d{color:var(--bg);opacity:.7}
.mt2-tile[aria-pressed="true"].zero .c,.mt2-tile[aria-pressed="true"].late .c{color:var(--bg)}
.mt2-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mt2-back{margin:-8px 0 14px}
body[data-route="mytodo"] .mt2-list > .mt2-sec:first-child{margin-top:0}
.mt2-proj{display:none}
@media (min-width:901px){
  .mt2-wide .mt2-row{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,220px) auto;gap:16px}
  .mt2-wide .mt2-proj{display:block;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mt2-wide .mt2-bw,.mt2-wide .mt2-bw + .mt2-dot{display:none}
  .mt2-wide .mt2-tag{justify-self:end}
}
/* Narrow screens: one row that swipes sideways, so the tiles never push the list off screen. */
@media (max-width:900px){.mt2-strip{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:112px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:4px}.mt2-tile{scroll-snap-align:start;padding:12px 14px}.mt2-tile .c{font-size:26px}}

/* ============================================================================
   HOME: NEXT UP + CLICKABLE NUMBERS (Mike, 1 Oct 2026)
   The full My To-Do and Today calendar cards left the top of Home (they repeated
   their own pages; both are opt-in widgets now). Next up is one slim card: the
   next meeting and the three soonest tasks, each a line, with the doors through.
   The three number cards are links.
   ========================================================================== */
a.hm2-stat{display:block;color:inherit;text-decoration:none;transition:border-color .12s ease}
a.hm2-stat.hm2-stat-ring{display:flex}
a.hm2-stat:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
a.hm2-stat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hm2-next{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--t-shadow,0 1px 2px rgba(0,0,0,.05));overflow:hidden}
.hm2-nx-col{display:flex;flex-direction:column;gap:4px;padding:18px 20px;min-width:0}
.hm2-nx-tasks{border-left:1px solid var(--line)}
.hm2-nx-l{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.hm2-nx-t{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm2-nx-s{font-size:14px;color:var(--muted)}
.hm2-nx-row{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:7px 0;border-top:1px solid var(--line);text-align:left;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer;min-width:0}
.hm2-nx-l + .hm2-nx-row{border-top:0}
.hm2-nx-row:hover .hm2-nx-rt{text-decoration:underline}
.hm2-nx-rt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm2-nx-tag{flex:none;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px;background:var(--panel-2);color:var(--muted);white-space:nowrap}
.hm2-nx-tag.late{background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger)}
.hm2-nx-tag.today{background:color-mix(in srgb,var(--ws-mc) 17%,transparent);color:color-mix(in srgb,var(--ws-mc) 78%,var(--ink))}
.hm2-nx-go{margin-top:auto;margin-left:0;align-self:flex-start;padding-top:10px;font-size:13.5px;font-weight:600;text-decoration:none}
.hm2-nx-row:focus-visible,.hm2-nx-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (max-width:760px){.hm2-next{grid-template-columns:minmax(0,1fr)}.hm2-nx-tasks{border-left:0;border-top:1px solid var(--line)}}

/* ============================================================================
   PLAN SECTION: MATCH THE REDESIGN FILE (Mike, 1 Oct 2026)
   Events (with Readiness), Projects, Marketing and Ministries (with Systems)
   keep every layout and feature exactly as built; this only brings in the
   file's look, the same as the Today section: system font 15/1.45 at -.01em,
   36px page sides, the page title as a small breadcrumb with a 34px title and
   16.5px line under it (.pl-head, in each view), 18px cards on the soft
   shadow, pill buttons with ink as the one primary, segmented tabs, 12.5px
   uppercase labels, rounded fields. Colours stay on the app's tokens.
   Delete this block (and the .pl-head lines in the views) to go back.
   ========================================================================== */
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]){
  --t-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,sans-serif;
  --t-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.45);
  --t-mc:var(--ws-mc,#e0a43f);
}
html[data-theme="light"] :is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]){--t-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06)}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content{font-family:var(--t-font);font-size:15px;line-height:1.45;letter-spacing:-.01em}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content :is(button,input,select,textarea){font-family:inherit;letter-spacing:inherit}
@media (min-width:761px){:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content{padding:18px 36px 44px}}
/* page title as the breadcrumb bar, then the file's page head */
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .page-head{margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line)}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .page-head h1{font-family:var(--t-font);text-transform:none;letter-spacing:-.01em;font-size:14px;font-weight:700;color:var(--ink)}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .page-head h1::before{content:"Mission Control  ›  ";white-space:pre;font-size:13px;font-weight:500;color:var(--muted)}
.pl-head{margin:0 0 18px}
.pl-title{margin:0;font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--ink);text-transform:none}
.pl-lede{margin:6px 0 0;font-size:16.5px;color:var(--muted);letter-spacing:-.01em}
@media (max-width:760px){.pl-title{font-size:28px}}
/* An event's or a project's own page has its own title: no page head above it. */
.content:has(#events-root [class*="evd-"]) .pl-head,.content:has(#projects-root [class*="prd-"]) .pl-head{display:none}
/* cards */
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content .card{border-radius:18px;box-shadow:var(--t-shadow);background:var(--panel)}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content .card .card{box-shadow:none}
/* buttons: pills; ink is the one primary, everything else quiet */
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content :is(.btn,.btn-sm,.btn-xs){border-radius:999px !important;font-weight:600}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content .btn:not(.ghost):not(.danger),:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content :is(.btn-sm,.btn-xs):not(.ghost):not(.danger){background:var(--ink);color:var(--bg)}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content .btn:not(.ghost):not(.danger):hover{filter:none;opacity:.88}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content :is(.btn,.btn-sm,.btn-xs).ghost{background:var(--panel-2);border-color:transparent;color:var(--ink)}
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content :is(.btn,.btn-sm,.btn-xs).ghost:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
/* fields */
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content :is(input[type="text"],input[type="search"],input[type="date"],input:not([type]),select,textarea){border-radius:10px}
/* section labels: the file's eyebrow */
:is(body[data-route="events"],body[data-route="eventreadiness"],body[data-route="yearplan"],body[data-route="projects"],body[data-route="marketing"],body[data-route="ministries"],body[data-route="ministrysystems"],body[data-route="proofing"],body[data-route="files"],body[data-route="formsdir"],body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"],body[data-route="forms"],body[data-route="meetings"],body[data-route="tasklist"],body[data-route="unfiled"],body[data-route="tasks"],body[data-route="taskcal"],body[data-route="gantt"],body[data-route="schedule"]) .content .mlabel{font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--muted)}
/* segmented tabs: Marketing's Calendar / Board / Tiers, and the Ministries toggle */
body[data-route="marketing"] #mk-tabs{border:0 !important;border-radius:11px !important;background:var(--panel-2);padding:3px;gap:2px;overflow:visible !important}
body[data-route="marketing"] .mk-tab{border-radius:9px !important;padding:6px 14px !important;font-size:13.5px !important;font-weight:600;color:var(--muted) !important;background:none !important}
body[data-route="marketing"] .mk-tab[style*="--success"]{background:var(--panel) !important;color:var(--ink) !important;box-shadow:0 1px 3px rgba(0,0,0,.18)}
:is(body[data-route="ministries"],body[data-route="ministrysystems"]) .content a[href$="/ministries"][style*="border-radius:8px"],:is(body[data-route="ministries"],body[data-route="ministrysystems"]) .content a[href$="/ministrysystems"][style*="border-radius:8px"]{font-size:13.5px !important;font-weight:600 !important;padding:6px 14px !important;border-radius:9px !important}
/* page by page */
body[data-route="events"] .ev-card{border-radius:16px}
body[data-route="events"] .ev-card:hover{border-color:color-mix(in srgb,var(--ink) 18%,var(--line))}
body[data-route="projects"] .pr-card{border-radius:18px}
body[data-route="projects"] .pr-table th{font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--muted)}
body[data-route="projects"] .pr-table td{padding-top:12px;padding-bottom:12px}
:is(body[data-route="ministries"],body[data-route="ministrysystems"]) .min-card{border-radius:18px;box-shadow:var(--t-shadow)}
body[data-route="eventreadiness"] .er-card{border-radius:18px;box-shadow:var(--t-shadow)}
body[data-route="eventreadiness"] #er-panel .er-head h2{font-size:28px;font-weight:700;letter-spacing:-.03em}
/* List / Cards / Board switches (projects, project page, event page): the file's
   segmented control instead of the green block. The active one is the one the
   code paints with --success, so that stays the source of truth. */
:is(body[data-route="events"],body[data-route="projects"]) :is(span,div):has(> :is(.pr-vm,.prd-vm,.evd-vm)){border:0 !important;background:var(--panel-2) !important;border-radius:11px !important;padding:3px !important;display:inline-flex;gap:2px;overflow:visible !important}
:is(body[data-route="events"],body[data-route="projects"]) :is(.pr-vm,.prd-vm,.evd-vm){border-radius:9px !important;padding:5px 12px !important;font-size:13px !important;font-weight:600;color:var(--muted) !important;background:none !important}
:is(body[data-route="events"],body[data-route="projects"]) :is(.pr-vm,.prd-vm,.evd-vm)[style*="--success"]{background:var(--panel) !important;color:var(--ink) !important;box-shadow:0 1px 3px rgba(0,0,0,.18)}
/* One primary per page: "+ Recurring" inside each ministry card is a quiet pill,
   "+ Add ministry" stays the one ink button. */
:is(body[data-route="ministries"]) .content .min-card .btn.min-add{background:var(--panel-2);color:var(--ink);font-size:12.5px;padding:4px 11px}

/* ============================================================================
   PLAN SECTION: NEW LAYOUTS (Mike, 1 Oct 2026). The file's layouts (jcPlan* in
   app.js) are the default; "Classic" is each page as Adam built it, which keeps
   running underneath. body.pl-classic flips them. An open event or project page
   always shows (it lives in Classic's root), and the new layout steps aside.
   ========================================================================== */
.pl-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.pl-head-l{flex:1;min-width:240px}
.pl-viewseg{display:inline-flex;padding:3px;border-radius:11px;background:var(--panel-2);gap:2px;margin-bottom:4px}
.pl-viewseg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer}
.pl-viewseg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.pl-viewseg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* "A detail page is open" is checked ONLY inside the Events and Projects roots.
   Marketing's board reuses evd-row for its task rows, so a page-wide check took
   the live board for an open event and blanked Marketing (1 Oct 2026). */
body:not(.pl-classic) .content:not(:has(#events-root [class*="evd-"],#projects-root [class*="prd-"])) .pl-classic-only{display:none !important}
body.pl-classic .pl-new-only,.content:has(#events-root [class*="evd-"],#projects-root [class*="prd-"]) .pl-new-only{display:none !important}
.content:has(#events-root [class*="evd-"],#projects-root [class*="prd-"]) .pl-viewseg{display:none}
body:not(.pl-classic)[data-route="marketing"] :is(#mk-blurb,#mk-board,#mk-tiers,#mk-cal){display:none !important}
/* Marketing's four tabs (Mike, option 1, 6 Oct 2026). Send calendar, Tiers and This week
   are Classic's own panes, let through one at a time by body[data-mkpane], which
   jcPlanMarketing sets. The extra attribute outranks the hide rule above. */
body:not(.pl-classic)[data-route="marketing"][data-mkpane="calendar"] #mk-cal,
body:not(.pl-classic)[data-route="marketing"][data-mkpane="tiers"] :is(#mk-tiers,#mk-blurb),
body:not(.pl-classic)[data-route="marketing"][data-mkpane="board"] #mk-board{display:block !important}
.plv-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
.plv-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:10px 14px;font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.plv-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.plv-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.plv-tabs .n{font-weight:500;color:var(--muted);margin-left:5px}
.plv-chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);cursor:pointer}
/* THIS WEEK IS ONLY THIS WEEK (Mike, 6 Oct 2026). In the new layout's This week tab the
   board shows one card: what is overdue and what is due this week, by day. The by-event
   cards, the four stat tiles, the second weekly card and the later weeks are hidden
   here (they still show in Classic). The by-event work now opens from a Runway row. */
body:not(.pl-classic)[data-route="marketing"][data-mkpane="board"] :is(#mk-stats,#marketing-root,.mk-v2,.mk-vtag){display:none !important}
body:not(.pl-classic)[data-route="marketing"][data-mkpane="board"] .mk-v1 .tl-sec:not([data-k="10-this"]):not([data-k="00-overdue"]),
body:not(.pl-classic)[data-route="marketing"][data-mkpane="board"] .mk-v1 .tl-sec:not([data-k="10-this"]):not([data-k="00-overdue"]) + div{display:none !important}
body:not(.pl-classic)[data-route="marketing"][data-mkpane="board"] .mk-v1-t{font-size:0}
body:not(.pl-classic)[data-route="marketing"][data-mkpane="board"] .mk-v1-t::after{content:"This week";font-size:var(--fs-base)}
/* A Runway row opens that event's marketing work in a panel on the right: the board's
   own card for it, pinned (same idea as the Ministries panel below). While
   body[data-mkopen] is set the board sits invisibly over the page and only the marked
   card shows. The doubled id outranks the rule that hides the board in this layout. */
body:not(.pl-classic)[data-route="marketing"][data-mkopen] #mk-board#mk-board{display:block !important;position:fixed;inset:0;z-index:61;visibility:hidden;pointer-events:none;overflow:hidden;margin:0}
body:not(.pl-classic)[data-route="marketing"][data-mkopen] #marketing-root .mk-push.plv-mk-open{visibility:visible;pointer-events:auto;position:fixed;top:58px;right:0;bottom:0;width:min(680px,100vw);margin:0 !important;border-radius:0;border:0;border-left:1px solid var(--line);box-shadow:none;overflow:auto;background:var(--bg);padding:16px 20px 28px !important}
body[data-route="marketing"] .plv-minbar{width:min(680px,100vw)}
.plv-mkr[aria-current="true"]{background:var(--panel-2)}
/* toolbar, chips, segments */
.plv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.plv-bar .sp,.plv-evc .sp,.plv-prc .sp{flex:1}
.plv-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--panel-2);gap:2px}
.plv-seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer}
.plv-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.plv-chips{display:flex;gap:6px;flex-wrap:wrap}
.plv-chip{border:0;background:var(--panel-2);color:var(--ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;cursor:pointer}
.plv-chip .n{color:var(--muted);margin-left:4px}
.plv-chip.on{background:var(--ink);color:var(--bg)}.plv-chip.on .n{color:var(--bg);opacity:.7}
.plv-linkbtn{border:0;background:none;padding:6px 8px;color:var(--t-mc,var(--ws-mc));font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.plv-linkbtn:hover{text-decoration:underline}
.plv-foot{margin-top:22px}.plv-foot .plv-linkbtn{padding:0}
.plv-sec{display:flex;align-items:baseline;gap:10px;margin:30px 0 12px}
.plv-sec .h{font-size:21px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
.plv-grid{display:grid;gap:18px}
.plv-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.plv-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plv-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.plv-empty{padding:28px 22px;color:var(--muted);text-align:center}
.plv-prog{flex:1 1 60px;min-width:40px;height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden;display:block}
.plv-prog i{display:block;height:100%;border-radius:999px;background:var(--t-mc,var(--ws-mc))}
.plv-badge{position:absolute;left:12px;top:12px;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px)}
.plv-badge.bad{color:#ffb4ae}
.pl-new-only .bad{color:var(--danger)} .pl-new-only .warn{color:var(--warn)}
/* photos */
.plv-photo,.plv-hero-photo,.plv-thumb{position:relative;overflow:hidden;display:block}
/* Event art is made 16:9 (Church Center / slide size). Boxes are 16:9 and the
   picture is fitted whole, never cropped or stretched: a wide box had been
   cutting the words off graphics (Mike, 1 Oct 2026). */
.plv-photo img,.plv-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.plv-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* events */
.plv-evc{display:flex;flex-direction:column;text-align:left;border:0;padding:0;background:none;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.plv-evc .plv-photo{aspect-ratio:16/9;width:100%;max-width:100%;border-radius:16px}
.plv-evc:hover .plv-photo{filter:brightness(1.06)}
.plv-evc-b{display:flex;flex-direction:column;gap:3px;padding:10px 2px 0;min-width:0}
.plv-evc-b b{font-size:15.5px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv-evc-b .m{color:var(--muted);font-size:13px}
.plv-evc-b .r{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:12.5px;color:var(--muted);min-width:0}
.plv-hero{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);overflow:hidden;padding:0}
.plv-hero-photo{aspect-ratio:16/9;width:100%;max-width:100%;align-self:center}
.plv-hero-b{padding:22px 24px;display:flex;flex-direction:column;gap:6px;min-width:0}
.plv-eyebrow{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.plv-h2{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.plv-kv{display:grid;grid-template-columns:120px 1fr;gap:7px 12px;font-size:14px;margin-top:8px}
.plv-kv > span:nth-child(odd){color:var(--muted)}
.plv-hero-p{display:flex;align-items:center;gap:10px;margin-top:10px}
.plv-acts{display:flex;gap:8px;margin-top:12px}
.plv-calhead{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.plv-calhead b{font-size:18px;letter-spacing:-.02em;min-width:150px;text-align:center}
.plv-nav{width:30px;height:30px;border-radius:999px;border:0;background:var(--panel-2);color:var(--ink);font:inherit;font-size:16px;cursor:pointer}
.plv-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:var(--t-shadow)}
.plv-cal .dw{font-size:12px;font-weight:600;color:var(--muted);padding:10px;border-bottom:1px solid var(--line)}
.plv-cd{min-height:104px;padding:8px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;display:flex;flex-direction:column;gap:3px;min-width:0}
.plv-cd:nth-child(7n){border-right:0}
.plv-cd .dn{font-weight:600;margin-bottom:2px}
.plv-cd.today .dn{background:var(--danger);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}
.plv-cd.out{color:var(--muted-2);opacity:.6}
.plv-cev{border:0;border-left:3px solid var(--ws-mc);background:var(--panel-2);color:var(--ink);font:inherit;font-size:11.5px;text-align:left;padding:3px 6px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv-cd .more{color:var(--muted);font-size:11px}
/* projects */
.plv-prc{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:22px;overflow:hidden;padding:0;color:var(--ink);font:inherit;cursor:pointer;box-shadow:var(--t-shadow);min-width:0}
.plv-prc:hover{border-color:color-mix(in srgb,var(--ink) 20%,var(--line))}
.plv-band{position:relative;display:block;height:96px}
.plv-band.ongoing{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px)}
.plv-kind{position:absolute;right:12px;bottom:10px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.06em}
.plv-prc-b{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;min-width:0}
.plv-prc-b b{font-size:16px;letter-spacing:-.02em;min-height:42px;line-height:1.3}
.plv-prc-b .r{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
/* marketing */
.plv-list{padding:0;overflow:hidden}
.plv-mkr{display:flex;align-items:center;gap:14px;width:100%;padding:12px 20px;border:0;border-top:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-width:0}
.plv-mkr:first-child{border-top:0}
.plv-mkr:hover{background:color-mix(in srgb,var(--ink) 4.5%,transparent)}
.plv-thumb{width:84px;aspect-ratio:16/9;border-radius:10px;flex:none}
.plv-thumb-pr{background:var(--panel-2)}
.plv-mkr .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.plv-mkr .t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv-mkr .b{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv-mkr .plv-prog{flex:0 0 120px}
.plv-mkn{width:100px;text-align:right;font-size:13px;color:var(--muted);flex:none}
.plv-nt{display:flex;align-items:center;gap:12px;padding:16px 20px}
.plv-nt .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* ministries */
.plv-minc{display:flex;flex-direction:column;gap:4px;text-align:left;padding:18px 20px;border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.plv-minc:hover{border-color:color-mix(in srgb,var(--ink) 20%,var(--line))}
.plv-minsw{width:40px;height:40px;border-radius:12px;margin-bottom:10px}
.plv-minc b{font-size:16px;letter-spacing:-.02em}
.plv-minc .r{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:13px}
.plv-open{color:var(--t-mc,var(--ws-mc));font-weight:600}
.min-card.plv-flash{box-shadow:0 0 0 2px var(--ws-mc),var(--t-shadow)}
/* A ministry opens in a panel on the right (Mike, option 2, 6 Oct 2026). The panel is
   Classic's own card, pinned to the edge. While body[data-minopen] is set, Classic's
   root sits invisibly over the page and only the marked card shows, so it costs no
   layout and every control in it is the real one. The first selector has to outrank the
   rule that hides .pl-classic-only (its :has() carries an id), hence the doubled id. */
body:not(.pl-classic)[data-route="ministries"][data-minopen] .content #ministries-root#ministries-root.pl-classic-only{display:block !important;position:fixed;inset:0;z-index:61;visibility:hidden;pointer-events:none;overflow:hidden;margin:0}
body:not(.pl-classic)[data-route="ministries"][data-minopen] #ministries-root .min-card.plv-min-open{visibility:visible;pointer-events:auto;position:fixed;top:58px;right:0;bottom:0;width:min(620px,100vw);margin:0;border-radius:0;border:0;border-left:1px solid var(--line) !important;box-shadow:none;overflow:auto;background:var(--bg);padding:16px 20px 28px}
.plv-minscrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45)}
.plv-minbar{position:fixed;top:0;right:0;z-index:62;width:min(620px,100vw);height:58px;display:flex;align-items:center;gap:14px;padding:0 14px 0 20px;background:var(--bg);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.plv-minbar .sp{flex:1}
.plv-minbar .st{display:inline-flex;align-items:baseline;gap:5px;font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.plv-minbar .st b{font-size:var(--fs-md,16px);color:var(--ink)}
.plv-minbar .st b.bad{color:var(--danger)}
.plv-minbar .btn{padding:5px 10px !important}
.plv-minsw.sm{width:22px;height:22px;border-radius:7px;margin:0;flex:none}
.plv-minc[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
@media (max-width:620px){.plv-minbar{gap:9px;padding-left:12px}.plv-minbar .st{flex-direction:column;gap:0;align-items:flex-start;font-size:10.5px}}

:is(.plv-evc,.plv-prc,.plv-mkr,.plv-minc,.plv-cev,.plv-chip,.plv-seg button,.plv-linkbtn,.plv-nav):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:1100px){.plv-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.plv-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.plv-grid.g2,.plv-grid.g3,.plv-grid.g4{grid-template-columns:minmax(0,1fr)}.plv-hero{grid-template-columns:minmax(0,1fr)}.plv-mkr .plv-prog{display:none}.plv-cd{min-height:64px}.plv-cev{font-size:0;padding:2px;height:6px}}
@media (prefers-reduced-motion:reduce){.min-card.plv-flash{transition:none}}
/* Event cards: as many 260px+ columns as fit, like the file's 250px cards, so a
   picture is never blown up across a third of a wide screen. */
.plv-grid.plv-evgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
/* Event card quick facts (Mike, 1 Oct 2026): days left in the Classic ladder colours
   (top left) and the Planning Center status (top right), readable over any picture. */
.plv-days{position:absolute;left:10px;top:10px;z-index:1;font-size:12px;font-weight:800;color:#fff;border-radius:999px;padding:4px 10px;box-shadow:0 1px 4px rgba(0,0,0,.35);letter-spacing:.01em}
.plv-st{position:absolute;right:10px;top:10px;z-index:1;font-size:11.5px;font-weight:700;border-radius:999px;padding:4px 10px;box-shadow:0 1px 4px rgba(0,0,0,.35);background:rgba(15,17,21,.82);backdrop-filter:blur(6px)}
.plv-st.ft{color:#f0c040}.plv-st.pb{color:#4ec48d}.plv-st.up{color:#c3c9d3}.plv-st.nl{color:#ff8a80}
/* Events in the cards view: the import list opens under the toolbar, and closed out
   events on the Past tab sit a little quieter than live ones. */
.plv-imp{margin:0 0 22px}
.plv-imp > .card{margin:0 !important}
.plv-past .plv-evc{opacity:.82}
.plv-past .plv-evc:hover{opacity:1}
/* Event page, option 2 (Mike, 1 Oct 2026): tasks on the left, a status rail on the
   right (countdown and progress, Readiness, Marketing, lists, Social, About). */
body[data-route="events"] .evd-rail{display:flex;flex-direction:column;gap:14px}
body[data-route="events"] .evd-rail .card{margin:0 !important}
body[data-route="events"] .evd-rail > div:empty{display:none}
body[data-route="events"] .evd-rail-cd{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px}
body[data-route="events"] .evd-rail-lists,body[data-route="events"] .evd-rail-about{padding:16px 18px}
body[data-route="events"] .evd-rail-about > div{font-size:14px !important;max-width:none !important}
body[data-route="events"] .evd-rail b{font-size:15.5px;letter-spacing:-.015em}
/* Order List and Packing List as two buttons beside Update details that drop the list
   down in place (Mike, option 1, 1 Oct 2026). The list inside is the old card with its
   card look taken off. On a phone the list sits in the flow instead of floating, since
   .card scrolls sideways there and would clip it. */
body[data-route="events"] .evd-headcard{overflow:visible}
body[data-route="events"] .evd-lpanchor{position:relative;display:inline-flex}
body[data-route="events"] .evd-lp{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:4px 11px;font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer}
body[data-route="events"] .evd-lp .n{color:var(--muted);font-weight:500}
body[data-route="events"] .evd-lp.full .n{color:var(--success)}
body[data-route="events"] .evd-lp:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
body[data-route="events"] .evd-lp[aria-expanded="true"]{border-color:var(--accent)}
body[data-route="events"] .evd-lp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-route="events"] .evd-lpop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;width:min(600px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.4);padding:14px 16px;text-align:left}
body[data-route="events"] .evd-lpop[hidden]{display:none}
body[data-route="events"] .evd-lpop > .card{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;min-width:0 !important;overflow:visible}
@media (max-width:760px){body[data-route="events"] .evd-lpanchor{display:contents}body[data-route="events"] .evd-lpop{position:static;width:auto;flex:1 1 100%;order:10;min-width:0;max-width:100%;overflow-x:auto}body[data-route="events"] .evd-lpop > .card > div:first-child > span{flex-wrap:wrap;margin-left:0 !important}body[data-route="events"] .evd-desc-acts{flex-wrap:wrap}}
@media (max-width:1500px){body[data-route="events"] .evd-rail{display:grid}}
/* Event page header: the picture leads, About sits beside it (Mike, 1 Oct 2026). */
:is(body[data-route="events"],body[data-route="projects"]) .evd-hero-img{width:240px;aspect-ratio:16/9;height:auto;object-fit:contain;background:var(--panel-2);border-radius:14px;flex:none;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35)}
:is(body[data-route="events"],body[data-route="projects"]) .evd-desc{margin-top:10px;white-space:pre-wrap;font-size:14.5px;line-height:1.55;color:var(--ink);opacity:.9;max-width:78ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is(body[data-route="events"],body[data-route="projects"]) .evd-desc.open{-webkit-line-clamp:unset;display:block}
:is(body[data-route="events"],body[data-route="projects"]) .evd-desc-acts{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
:is(body[data-route="events"],body[data-route="projects"]) .evd-desc-more{border:0;background:none;padding:0;color:var(--t-mc,var(--ws-mc));font:inherit;font-size:13px;font-weight:600;cursor:pointer}
@media (max-width:760px){:is(body[data-route="events"],body[data-route="projects"]) .evd-hero-img{width:120px}}
/* Event header card (matches the option 2 mockup). Chips reuse the cards' days and
   status chips, sat inline here. */
:is(body[data-route="events"],body[data-route="projects"]) .evd-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;margin:0 0 12px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-crumb a{color:var(--muted);text-decoration:none}
:is(body[data-route="events"],body[data-route="projects"]) .evd-crumb a:hover{color:var(--ink)}
:is(body[data-route="events"],body[data-route="projects"]) .evd-crumb .evd-pn{color:var(--t-mc,var(--ws-mc));font-weight:600}
:is(body[data-route="events"],body[data-route="projects"]) .evd-crumb .evd-pn.off{color:var(--muted);opacity:.45;font-weight:600}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard{display:flex;align-items:flex-start;gap:20px;padding:18px 20px;margin:0 0 16px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-eyebrow{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-title{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.15}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard .plv-days,:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard .plv-st{position:static;box-shadow:none;display:inline-flex;align-items:center}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard .plv-st{background:var(--panel-2);backdrop-filter:none}
/* The title column never gets squeezed: it keeps at least 340px and the action
   buttons wrap underneath when the window is too narrow for both. */
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard{flex-wrap:wrap}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard > div[style*="flex:1"]{flex:1 1 340px !important;min-width:min(340px,100%) !important}

:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard .plv-st.ft{color:color-mix(in srgb,#f0c040 72%,var(--ink))}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard .plv-st.pb{color:color-mix(in srgb,#4ec48d 75%,var(--ink))}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard .plv-st.nl{color:var(--danger)}
/* Header, part 2 (Mike, 1 Oct 2026): countdown + progress under the picture,
   Readiness under the buttons on the right. */
:is(body[data-route="events"],body[data-route="projects"]) .evd-hero-col{display:flex;flex-direction:column;gap:8px;width:240px;flex:none}
:is(body[data-route="events"],body[data-route="projects"]) .evd-hero-col .evd-hero-img{width:100%}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdline{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdline b{font-size:22px;letter-spacing:-.02em;margin-right:2px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-prog > div{text-align:left !important;min-width:0 !important}
:is(body[data-route="events"],body[data-route="projects"]) .evd-prog > div > div:last-child{width:100% !important;margin-top:6px !important}
:is(body[data-route="events"],body[data-route="projects"]) .evd-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-left:auto;max-width:460px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard #evd-ready > .card{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
:is(body[data-route="events"],body[data-route="projects"]) .evd-headcard #evd-ready{max-width:460px}
@media (max-width:760px){:is(body[data-route="events"],body[data-route="projects"]) .evd-hero-col{width:100%}:is(body[data-route="events"],body[data-route="projects"]) .evd-head-r{align-items:flex-start;margin-left:0}}
/* Swap (Mike, 1 Oct 2026): Readiness under the picture, the countdown big on the right. */
:is(body[data-route="events"],body[data-route="projects"]) .evd-hero-col #evd-ready > .card{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox{display:flex;align-items:center;gap:18px;justify-content:flex-end;flex-wrap:wrap}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-cdline{display:flex;align-items:baseline;gap:8px;font-size:14px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-cdline b{font-size:44px;line-height:1;letter-spacing:-.04em}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-prog{min-width:170px}
/* Countdown tile (Mike, 1 Oct 2026): its own rounded box, tinted with the countdown's
   own ladder colour (--cd), so days to go and progress pop out of the header. */
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox{--cd:var(--line);display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-start;padding:14px 18px;border-radius:18px;background:color-mix(in srgb,var(--cd) 11%,var(--panel-2));border:1px solid color-mix(in srgb,var(--cd) 38%,transparent);box-shadow:0 6px 18px rgba(0,0,0,.18)}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-cdline{flex-direction:column;align-items:flex-start;gap:2px;font-size:12px;letter-spacing:.08em}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-cdline b{font-size:46px}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-prog{min-width:180px;flex:1}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox #evd-count{color:var(--ink) !important;font-size:13.5px;font-weight:600}
:is(body[data-route="events"],body[data-route="projects"]) .evd-cdbox .evd-prog > div > div:last-child{height:8px !important;background:color-mix(in srgb,var(--ink) 10%,transparent) !important}
/* Projects, option 1 (Mike, 1 Oct 2026): smaller cards, four or five across, each with
   16:9 art on top (a linked event's picture, else a designed cover in the project's
   own colour), then name, owner, due date or a warning, and progress. */
.plv-prgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.plv-prc2{display:flex;flex-direction:column;gap:9px;padding:10px;border-radius:18px;text-align:left;color:var(--ink);font:inherit;cursor:pointer;min-width:0}
.plv-prc2:hover{border-color:color-mix(in srgb,var(--ink) 20%,var(--line))}
.plv-pcov{position:relative;display:grid;place-items:end start;aspect-ratio:16/9;width:100%;max-width:100%;border-radius:13px;overflow:hidden;padding:12px 14px;color:#fff}
.plv-pcov.photo{background:#111 !important}
.plv-pcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.plv-pcov .plv-kind{position:absolute;right:11px;top:10px;bottom:auto;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.9;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.plv-pcov-t{position:relative;font-weight:800;letter-spacing:-.03em;line-height:1.03;font-size:clamp(17px,1.5vw,21px);max-width:92%;text-shadow:0 1px 10px rgba(0,0,0,.25);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.plv-prc2-n{font-weight:650;font-size:15px;line-height:1.3;min-height:39px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 2px}
.plv-prc2 .r{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-width:0;padding:0 2px}
.plv-prc2 .r .o{color:var(--ink)}
.plv-prc2 .sp{flex:1}
.plv-pb{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;background:var(--panel-2);color:var(--muted)}
.plv-pb.bad{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
.plv-pb.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.plv-pb.ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
.plv-prc2:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Set picture on a project card: a small pill over the art, shown on hover or focus
   (always on touch screens). */
.plv-pcov-wrap{position:relative;display:block}
.plv-setpic{position:absolute;left:10px;bottom:10px;z-index:2;border:0;border-radius:999px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;color:#fff;background:rgba(15,17,21,.78);backdrop-filter:blur(6px);cursor:pointer;opacity:0;transition:opacity .12s ease}
.plv-prc2:hover .plv-setpic,.plv-prc2:focus-within .plv-setpic,.plv-setpic:focus-visible{opacity:1}
.plv-setpic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:none){.plv-setpic{opacity:1}}
@media (prefers-reduced-motion:reduce){.plv-setpic{transition:none}}
/* Projects: Classic's health chips in the cards view, tinted like Classic's
   (Behind red, At risk amber, On track green, Complete blue). */
.plv-health{margin-top:-6px}
.plv-seg button .n{color:var(--muted);font-weight:500;margin-left:3px}
.plv-chip.plv-h-behind{color:var(--danger)}
.plv-chip.plv-h-at_risk{color:var(--warn)}
.plv-chip.plv-h-on_track{color:var(--success)}
.plv-chip.plv-h-done{color:var(--accent)}
.plv-chip.plv-h-behind.on{background:var(--danger);color:#fff}
.plv-chip.plv-h-at_risk.on{background:var(--warn);color:#15120a}
.plv-chip.plv-h-on_track.on{background:var(--success);color:#fff}
.plv-chip.plv-h-done.on{background:var(--accent);color:#fff}
.plv-chip[class*="plv-h-"].on .n{color:inherit;opacity:.75}
.plv-search{width:200px;max-width:100%;padding:7px 12px;border-radius:999px !important;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:13.5px}
.plv-search:focus{outline:2px solid var(--accent);outline-offset:1px}
.plv-prc2[hidden],.plv-prgrid[hidden],.plv-sec[hidden]{display:none !important}
/* Project page, option 1 (Mike, 1 Oct 2026): the event page's header card, then tasks
   on the left and a rail for Milestones, Social, Status update, linked docs and events. */
body[data-route="projects"] .prd-pic{position:relative;display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;border-radius:14px}
body[data-route="projects"] .prd-pic .plv-pcov{border-radius:14px}
body[data-route="projects"] .prd-pic-tag{position:absolute;left:10px;bottom:10px;z-index:2;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;color:#fff;background:rgba(15,17,21,.78);opacity:0;transition:opacity .12s ease}
body[data-route="projects"] .prd-pic:hover .prd-pic-tag,body[data-route="projects"] .prd-pic:focus-visible .prd-pic-tag{opacity:1}
body[data-route="projects"] .prd-pic:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (hover:none){body[data-route="projects"] .prd-pic-tag{opacity:1}}
/* Status, Docs and Events as three pills under the project's owner, due date and
   description (Mike, look 4, 1 Oct 2026). Each opens its box right under the pills. The boxes are the old rail
   cards with their card look taken off. On a phone the box sits in the flow instead
   of floating, since .card scrolls sideways there and would clip it. */
body[data-route="projects"] .prd-headcard{overflow:visible}
body[data-route="projects"] .prd-pills{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
body[data-route="projects"] .prd-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:nowrap;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer}
body[data-route="projects"] .prd-pill .n{color:var(--muted);font-weight:500}
body[data-route="projects"] .prd-pill:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
body[data-route="projects"] .prd-pill[aria-expanded="true"]{border-color:var(--accent)}
body[data-route="projects"] .prd-pill.stale{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
body[data-route="projects"] .prd-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body[data-route="projects"] .prd-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:30;grid-column:1/-1;width:min(380px,calc(100vw - 48px));background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.35);padding:14px}
body[data-route="projects"] .prd-pop[hidden]{display:none}
body[data-route="projects"] .prd-pop > .card{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;min-width:0 !important;overflow:visible}
body[data-route="projects"] .prd-latest{margin-top:10px;max-width:72ch;font-size:var(--fs-sm);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){body[data-route="projects"] .prd-pop{position:static;width:auto}}
body[data-route="projects"] .prd-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
body[data-route="projects"] .prd-main{min-width:0}
body[data-route="projects"] .prd-main > .card:first-child{margin-top:0 !important}
body[data-route="projects"] .prd-rail{display:flex;flex-direction:column;gap:14px;min-width:0}
body[data-route="projects"] .prd-rail > .card,body[data-route="projects"] .prd-rail > div > .card{margin:0 !important;min-width:0 !important}
body[data-route="projects"] .prd-rail > div:empty{display:none}
@media (max-width:1400px){body[data-route="projects"] .prd-grid{grid-template-columns:minmax(0,1fr)}body[data-route="projects"] .prd-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}}
/* Projects timeline (Mike, 1 Oct 2026, option 1): a bar per project across 12 months. */
.plv-tl{padding:0;overflow:hidden}
.plv-tlscroll{overflow-x:auto}
.plv-tlhead,.plv-tlrow{display:grid;grid-template-columns:280px minmax(720px,1fr)}
.plv-tlhead{border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.plv-tlhead .plv-tlname{padding:10px 16px}
.plv-tlmonths{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.plv-tlmonths span{padding:10px 8px;border-left:1px solid var(--line)}
.plv-tlbody{position:relative}
.plv-tlsec{padding:12px 16px 6px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.plv-tlrow{border-bottom:1px solid var(--line);min-height:56px;align-items:center;cursor:pointer}
.plv-tlrow:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.plv-tlrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.plv-tlrow[hidden],.plv-tlgroup[hidden],.plv-tlsec[hidden]{display:none !important}
.plv-tlname{display:flex;align-items:center;gap:10px;padding:8px 16px;min-width:0}
.plv-tlname .sw{width:34px;height:20px;border-radius:5px;flex:none}
.plv-tlname .nm{display:flex;flex-direction:column;min-width:0}
.plv-tlname b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plv-tlname .sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.plv-tltrack{position:relative;height:56px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),var(--line) calc(100%/12 - 1px),var(--line) calc(100%/12))}
.plv-tlbar{position:absolute;top:15px;height:26px;border-radius:8px;overflow:hidden;display:flex;align-items:center;padding:0 9px;font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.plv-tlbar.open{-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.plv-tlbar i{position:absolute;top:0;bottom:0;left:0;background:rgba(255,255,255,.24)}
.plv-tlbar span{position:relative}
.plv-tllate{position:absolute;top:15px;height:26px;border-radius:8px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--danger) 38%,transparent) 0 6px,transparent 6px 12px);border:1px dashed var(--danger)}
.plv-tlms{position:absolute;top:22px;width:12px;height:12px;transform:rotate(45deg);border-radius:2px;background:var(--ink);box-shadow:0 0 0 2px var(--panel);z-index:1}
.plv-tlms.done{background:var(--success)}
.plv-tlnone{position:absolute;left:10px;top:18px;font-size:12px;color:var(--muted)}
.plv-tltoday{position:absolute;top:0;bottom:0;left:calc(280px + (100% - 280px) * var(--x) / 100);width:2px;background:var(--danger);z-index:2;pointer-events:none}
.plv-tltoday b{position:absolute;top:2px;left:5px;font-size:10px;font-weight:800;color:var(--danger)}


/* ===== Creative Requests: Inbox and detail (Mike, option 3, 4 Oct 2026) =====
   A list on the left grouped by who has it, the chosen request on the right with its
   route on top. Scoped to #creative-root.cri-on, so Classic (same root, no class) is
   untouched. The request body is the Classic card with its old head and stepper hidden,
   since the route line replaces them. */
#creative-root.cri-on .cri-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
#creative-root .cri-head-l{flex:1;min-width:220px}
#creative-root .cri-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#creative-root .cri-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--panel-2);gap:2px}
#creative-root .cri-seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:var(--fs-xs);font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer}
#creative-root .cri-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
#creative-root .cri-split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
#creative-root .cri-list{margin:0;padding:6px;position:sticky;top:12px;max-height:calc(100vh - 140px);overflow:auto}
#creative-root .cri-gl{display:flex;gap:6px;align-items:center;padding:12px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#creative-root .cri-gl span{font-weight:500}
#creative-root .cri-gl.you{color:var(--accent)}
#creative-root summary.cri-gl{cursor:pointer;list-style-position:inside}
#creative-root .cri-item{display:flex;gap:10px;align-items:center;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#creative-root .cri-item:hover{background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
#creative-root .cri-item[aria-current="true"]{background:var(--panel-2)}
#creative-root .cri-item:focus-visible,#creative-root .cri-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#creative-root .cri-item-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;font-size:var(--fs-xs)}
#creative-root .cri-item-t b{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#creative-root .cri-item-t .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#creative-root .cri-pic{display:grid;place-items:center;flex:none;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--panel-2);color:var(--muted)}
#creative-root .cri-pic.sm{width:64px}
#creative-root .cri-pic.lg{width:200px;border-radius:14px}
#creative-root .cri-pic.lg.none{width:120px}
#creative-root .cri-pic.none{border:1px dashed var(--line)}
#creative-root .cri-pic img{width:100%;height:100%;object-fit:cover;display:block}
#creative-root .cri-detail{min-width:0;display:flex;flex-direction:column;gap:14px}
#creative-root .cri-detail > *{flex:none}
#creative-root .cri-qagrid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;gap:10px 24px !important}
#creative-root .cri-qa{display:flex;flex-direction:column;gap:1px;min-width:0;overflow-wrap:anywhere}
#creative-root .cri-qa.wide{grid-column:1 / -1}
#creative-root .cri-top{margin:0;display:flex;flex-direction:column;gap:16px}
#creative-root .cri-dh{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
#creative-root .cri-dh-t{flex:1;min-width:220px}
#creative-root .cri-title{margin:3px 0 8px;font-size:24px;line-height:1.15;letter-spacing:-.02em}
#creative-root .cri-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
#creative-root .cri-ball{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:var(--fs-xs);font-weight:600;background:var(--panel-2);color:var(--ink);white-space:nowrap}
#creative-root .cri-ball.you{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
#creative-root .cri-ball.bad{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
#creative-root .cri-ball.ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
#creative-root .cri-where{background:var(--panel-2);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
#creative-root .cri-next{font-size:var(--fs-sm)}
#creative-root .cri-route{display:flex;align-items:flex-start;min-width:0}
#creative-root .cri-stop{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;text-align:center;font-size:var(--fs-xs);color:var(--muted)}
#creative-root .cri-stop::before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:2px;background:var(--line)}
#creative-root .cri-stop:first-child::before{display:none}
#creative-root .cri-stop i{position:relative;z-index:1;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);background:var(--panel);display:grid;place-items:center;color:#fff}
#creative-root .cri-stop.done i{background:var(--success);border-color:var(--success)}
#creative-root .cri-stop.done::before,#creative-root .cri-stop.now::before{background:var(--success)}
#creative-root .cri-stop.now i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
#creative-root .cri-stop b{font-weight:600;color:var(--muted)}
#creative-root .cri-stop.done b,#creative-root .cri-stop.now b{color:var(--ink)}
#creative-root .cri-stop span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#creative-root .cri-route.sm{margin-top:2px;max-width:150px}
#creative-root .cri-route.sm .cri-stop i{width:9px;height:9px;border-width:1.5px;box-shadow:none}
#creative-root .cri-route.sm .cri-stop::before{top:4px}
#creative-root .cri-modal{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start;max-width:1100px;margin:0 auto}
#creative-root .cri-goes{margin:0;display:flex;flex-direction:column;gap:0;position:sticky;top:0}
#creative-root .cri-goes .cri-eyebrow{margin-bottom:14px}
#creative-root .cri-go{display:flex;gap:12px;padding-bottom:16px;position:relative}
#creative-root .cri-go::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
#creative-root .cri-go:last-child{padding-bottom:0}
#creative-root .cri-go:last-child::before{display:none}
#creative-root .cri-go-n{position:relative;z-index:1;flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700}
#creative-root .cri-go:first-of-type .cri-go-n{background:var(--accent);color:#fff}
#creative-root .cri-go b{font-size:var(--fs-sm)}
#creative-root .cri-body > .card{margin:0 !important}
#creative-root .cri-body .cr-oldhead{display:none}
#creative-root .cri-body details.cr-det{margin-top:0 !important}
@media (max-width:900px){#creative-root .cri-modal{grid-template-columns:minmax(0,1fr)}#creative-root .cri-goes{position:static}#creative-root .cri-split{grid-template-columns:minmax(0,1fr)}#creative-root .cri-list{position:static;max-height:none}#creative-root .cri-pic.lg{width:100%}#creative-root .cri-pic.lg.none{display:none}#creative-root .cri-stop span{display:none}}


/* ===== Docs & Files: sidebar and preview (Mike, option 2, 4 Oct 2026) =====
   A shell around the OneDrive browser. All under #files-root.dfx-on, so Classic (the
   browser on its own in the same root) is untouched. The browser's chips are hidden
   here because the sidebar does their job. */
#files-root .dfx-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px}
#files-root .dfx-head-l{flex:1;min-width:220px}
#files-root .dfx{display:grid;grid-template-columns:230px minmax(0,1fr);padding:0;margin:0;overflow:hidden}
#files-root .dfx-side{border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
#files-root .dfx-gl{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
#files-root .dfx-nav{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;min-width:0}
#files-root .dfx-nav > span:not(.c){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#files-root .dfx-nav .c{color:var(--muted);font-size:var(--fs-xs)}
#files-root .dfx-nav:hover{background:color-mix(in srgb,var(--panel-2) 70%,transparent)}
#files-root .dfx-nav[aria-current="true"]{background:var(--panel-2);font-weight:600}
#files-root .dfx-nav:focus-visible,#files-root .dfx-row:focus-visible,.dfx-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#files-root #dfx-pinned{padding:2px 6px}
#files-root #dfx-pinned .files-handbook{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#files-root #dfx-pinned .files-handbook .muted{margin-left:4px !important}
#files-root .dfx-layout{margin-top:auto;padding:14px 6px 4px}
.dfx-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--panel-2);gap:2px}
.dfx-seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:var(--fs-xs);font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer}
.dfx-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.dfx-classicbar{display:flex;justify-content:flex-end;margin:0 0 10px}
#files-root .dfx-main{min-width:0}
#files-root .dfx-main [hidden]{display:none}
#files-root .dfx-main .card.fx{border:0;border-radius:0;box-shadow:none;margin:0;background:none}
#files-root.dfx-on .fx-chips{display:none}
#files-root .dfx-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:520px}
#files-root .dfx-list{min-width:0}
#files-root .dfx-tb{display:flex;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
#files-root .dfx-tb .fx-search{flex:1;max-width:420px}
#files-root .dfx-row{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,150px) 96px 110px;gap:12px;align-items:center;width:100%;padding:9px 16px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
#files-root .dfx-row.hd{border-top:0;cursor:default;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#files-root button.dfx-row:hover,#files-root .dfx-row[aria-current="true"]{background:color-mix(in srgb,var(--panel-2) 65%,transparent)}
#files-root .dfx-row .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#files-root .dfx-row .x{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#files-root .dfx-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.02em;flex:none}
#files-root .dfx-ic.lg{width:56px;height:56px;border-radius:14px;font-size:13px}
#files-root .dfx-empty{padding:16px}
#files-root .dfx-pane{border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
#files-root .dfx-pvbox{aspect-ratio:4/3;border-radius:12px;background:var(--panel-2);display:grid;place-items:center;overflow:hidden;text-align:center;padding:12px}
#files-root .dfx-pvbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
#files-root .dfx-pvt{display:block;font-size:var(--fs-md,16px);overflow-wrap:anywhere}
#files-root .dfx-snip{color:var(--muted);overflow-wrap:anywhere}
#files-root .dfx-pvacts{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:1100px){#files-root .dfx-split{grid-template-columns:minmax(0,1fr)}#files-root .dfx-pane{border-left:0;border-top:1px solid var(--line)}#files-root .dfx-row{grid-template-columns:30px minmax(0,1fr) 96px}#files-root .dfx-row > :nth-child(3),#files-root .dfx-row > :nth-child(5){display:none}}
@media (max-width:760px){#files-root .dfx{grid-template-columns:minmax(0,1fr)}#files-root .dfx-side{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:4px}#files-root .dfx-gl{display:none}#files-root .dfx-nav{width:auto}#files-root #dfx-folders{display:contents}#files-root .dfx-layout{margin-top:0;padding:4px}}


/* ===== Forms: Fill out, My submissions, Manage (Mike, option 3, 4 Oct 2026) =====
   All under #formsdir-root.fmx-on, so Classic (same root, no class) is untouched.
   The panel a form opens in is appended to <body>, hence the unscoped .fmx-scrim rules. */
#formsdir-root .fmx-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
#formsdir-root .fmx-head-l{flex:1;min-width:200px}
#formsdir-root .fmx-classicbar{display:flex;justify-content:flex-end;margin:0 0 10px}
#formsdir-root .fmx-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto}
#formsdir-root .fmx-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:10px 14px;font:inherit;font-size:var(--fs-base);font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
#formsdir-root .fmx-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
#formsdir-root .fmx-tabs .n{font-weight:500;color:var(--muted);margin-left:4px}
#formsdir-root .fmx-tabs button:focus-visible,#formsdir-root .fmx-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#formsdir-root [hidden]{display:none}
#formsdir-root .fmx-search{width:100%;max-width:420px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:9px 12px;font:inherit;font-size:var(--fs-sm);margin:0 0 16px}
#formsdir-root .fmx-cat{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 2px 8px}
#formsdir-root .fmx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin:0 0 18px}
#formsdir-root .fmx-card{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer}
#formsdir-root .fmx-card:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
#formsdir-root .fmx-card b{font-size:var(--fs-base)}
#formsdir-root .fmx-card .d{font-size:var(--fs-sm);color:var(--muted)}
#formsdir-root .fmx-card .go{margin-top:10px;font-size:var(--fs-sm);font-weight:600;color:var(--accent)}
.fmx-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;margin-bottom:8px;flex:none}
.fmx-ic.sm{width:32px;height:32px;border-radius:9px;margin:0}
#formsdir-root .fmx-list{padding:4px 0;margin:0}
#formsdir-root .fmx-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
#formsdir-root .fmx-row:first-child{border-top:0}
#formsdir-root .fmx-row .t{flex:1;min-width:0}
#formsdir-root .fmx-row .t b{display:block;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#formsdir-root .fmx-row .t span{font-size:var(--fs-xs);color:var(--muted)}
#formsdir-root .fmx-tag{font-size:var(--fs-xs);font-weight:600;border-radius:999px;padding:3px 10px;white-space:nowrap;background:var(--panel-2)}
#formsdir-root .fmx-tag.ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:var(--success)}
#formsdir-root .fmx-tag.now{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.fmx-scrim{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.5);display:flex;justify-content:flex-end}
.fmx-sheet{width:min(640px,100vw);height:100%;background:var(--bg);border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px}
.fmx-sheet-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fmx-sheet-h b{font-size:18px}
.fmx-sheet-h .btn{border-radius:999px;padding:5px 12px;font-size:var(--fs-xs)}
.fmx-goes{background:var(--panel-2);border-radius:14px;padding:12px 14px;font-size:var(--fs-sm)}
.fmx-eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fmx-frame{flex:1;width:100%;min-height:0;border:1px solid var(--line);border-radius:14px;background:#f6f7f9}


/* ===== Form Manager list as a table (Mike, 4 Oct 2026) =====
   The rows under the Forms Dashboard: icon, name and counts, "this week" pill, who it
   goes to, an On switch, actions. Not route scoped: the Form Manager shows both under
   Operations and inside Forms > Manage. */
.fm-list .fm-row{display:grid;grid-template-columns:16px 32px minmax(0,1.5fr) 112px minmax(0,.7fr) 40px 370px;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--line)}
.fm-list .fm-row:first-child{border-top:0}
.fm-list .fm-hd{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding-block:9px}
.fm-list .fm-check{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent)}
.fm-list .fm-name{min-width:0}
.fm-list .fm-name b{display:block;font-size:var(--fs-base);font-weight:600;overflow-wrap:anywhere}
.fm-list .fm-name.dim{opacity:.55}
.fm-list .fm-goes{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-list .fm-wk{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--panel-2);color:var(--muted)}
.fm-list .fm-wk.ok{background:rgba(78,196,141,.14);color:#4ec48d}
.fm-list .fm-wk.quiet{background:rgba(224,162,58,.14);color:#e0a23a}
.fm-list .fm-sw{position:relative;width:36px;height:22px;border:0;border-radius:999px;background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;padding:0}
.fm-list .fm-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .12s ease}
.fm-list .fm-sw[aria-pressed="true"]{background:var(--success);box-shadow:none}
.fm-list .fm-sw[aria-pressed="true"]::after{left:17px}
.fm-list .fm-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fm-list .fm-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.fm-list .fm-acts .btn{border-radius:999px !important}
@media (prefers-reduced-motion:reduce){.fm-list .fm-sw::after{transition:none}}
@media (max-width:1300px){.fm-list .fm-row{grid-template-columns:16px 32px minmax(0,1.5fr) 112px minmax(0,.7fr) 40px 250px}}
@media (max-width:1100px){.fm-list .fm-row{grid-template-columns:16px 32px minmax(0,1fr) 40px}.fm-list .fm-hd{display:none}.fm-list .fm-row > :nth-child(4),.fm-list .fm-row > :nth-child(5){display:none}.fm-list .fm-acts{grid-column:3 / -1;justify-content:flex-start}}


/* ===== Operations overview (Mike, option 2, 6 Oct 2026) =====
   /ops: four numbers, Needs attention, Who's out, Go to. All under #ops-root. The five
   Operations routes also joined the Plan look above (pill buttons, rounded cards). */
#ops-root .opx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
#ops-root .opx-tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
#ops-root .opx-tile{display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:inherit;font:inherit;text-align:left;cursor:pointer}
#ops-root .opx-tile:hover,#ops-root .opx-row:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
#ops-root .opx-tile .l{font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#ops-root .opx-tile b{font-size:30px;line-height:1.15;letter-spacing:-.03em}
#ops-root .opx-tile b.warn{color:var(--warn)}
#ops-root .opx-tile .s{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ops-root .bad{color:var(--danger)}
#ops-root .opx-g2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
#ops-root .opx-side{display:flex;flex-direction:column;gap:12px;min-width:0}
#ops-root .opx-list{padding:4px 0;margin:0}
#ops-root .opx-pad{margin:0}
#ops-root .opx-sub{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 16px 4px}
#ops-root .opx-sub span{font-weight:500}
#ops-root .opx-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer}
#ops-root .opx-sub + .opx-row{border-top:0}
#ops-root .opx-row:hover{background:color-mix(in srgb,var(--panel-2) 65%,transparent)}
#ops-root .opx-row .t{flex:1;min-width:0}
#ops-root .opx-row .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ops-root .opx-row .t span{font-size:var(--fs-xs);color:var(--muted)}
#ops-root .opx-tag{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--panel-2);white-space:nowrap}
#ops-root .opx-tag.bad{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger)}
#ops-root .opx-tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
#ops-root .opx-more{padding:12px 16px}
#ops-root .opx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;text-align:center}
#ops-root .opx-cal span{padding:6px 0;border-radius:8px}
#ops-root .opx-cal .dw{color:var(--muted);font-weight:600;padding:0 0 2px}
#ops-root .opx-cal .off{background:color-mix(in srgb,var(--accent) 24%,transparent);font-weight:700}
#ops-root .opx-cal .today{box-shadow:inset 0 0 0 1.5px var(--accent)}
#ops-root .opx-outlist{display:flex;flex-direction:column;gap:4px;margin-top:12px;font-size:var(--fs-sm)}
#ops-root .opx-tile:focus-visible,#ops-root .opx-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:1000px){#ops-root .opx-tiles,#ops-root .opx-tiles.n3{grid-template-columns:repeat(2,minmax(0,1fr))}#ops-root .opx-g2{grid-template-columns:minmax(0,1fr)}}


/* ===== My To-Do: a Meetings column beside the list (Mike, option 3, 6 Oct 2026) =====
   Only when the calendar answered (.has-rail); otherwise the page is one column as
   before. Meetings are shown, never ticked. On a narrow screen the column sits above
   the list and shows today and tomorrow only. */
#mytodo-root .mt2-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
#mytodo-root .mt2-wrap.has-rail{grid-template-columns:minmax(0,1fr) 320px}
#mytodo-root .mt2-main{min-width:0}
#mytodo-root .mt2-rail{margin:var(--mt2-off,0px) 0 0;padding:4px 0 10px;position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto}
#mytodo-root .mt2-rail[hidden]{display:none}
#mytodo-root .mt2-rail-h{display:flex;align-items:flex-start;gap:10px;padding:12px 16px 4px}
#mytodo-root .mt2-rail-h > div{flex:1;min-width:0}
#mytodo-root .mt2-rail-h b{display:block;font-size:var(--fs-md,16px)}
#mytodo-root .mt2-rail-h span{font-size:var(--fs-xs);color:var(--muted)}
#mytodo-root .mt2-rail-dh{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 16px 4px}
#mytodo-root .mt2-rail-dh span{font-weight:500}
#mytodo-root .mt2-rail-day.now .mt2-rail-dh{color:var(--accent)}
#mytodo-root .mt2-mtg{display:flex;gap:10px;padding:8px 16px;border-top:1px solid var(--line);font-size:var(--fs-sm)}
#mytodo-root .mt2-rail-dh + .mt2-mtg{border-top:0}
#mytodo-root .mt2-mtg .w{flex:none;width:66px;font-size:var(--fs-xs);font-weight:700;color:var(--accent);padding-top:1px}
#mytodo-root .mt2-mtg b{display:block;font-weight:600;overflow-wrap:anywhere}
#mytodo-root .mt2-mtg span{font-size:var(--fs-xs);color:var(--muted)}
#mytodo-root .mt2-mtg.past{opacity:.5}
#mytodo-root .mt2-live{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent) !important;vertical-align:1px}
#mytodo-root .mt2-rail-free{font-size:var(--fs-xs);color:var(--muted);opacity:.7;padding:2px 16px 6px}
@media (max-width:1150px){#mytodo-root .mt2-wrap.has-rail{grid-template-columns:minmax(0,1fr)}#mytodo-root .mt2-rail{position:static;max-height:none;order:-1;margin-top:0}#mytodo-root .mt2-rail-day.far{display:none}}


/* ===== OPERATIONS, the clean pass (Mike, 6 Oct 2026) =====
   Title with a switch level with it, a Who's out column on the right for admins, the
   overview grouped by area, boards for issues and supplies, and the three Facilities
   lists restyled. Scoped to the Operations routes. */
:is(body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"]) .ops-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 22px}
:is(body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"]) .ops-top .pl-title{flex:1;margin:0}
.ops-switch{display:inline-flex;gap:2px;padding:4px;border-radius:13px;background:var(--panel-2)}
.ops-switch a{padding:8px 18px;border-radius:10px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.ops-switch a:hover{color:var(--ink)}
.ops-switch a.active{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.22)}
.ops-switch a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Who's out: a column on the right of the page (admins only; jcOpsRail adds the class). */
:is(body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"]).ops-rail-on #view-root{position:relative;padding-right:368px;min-height:600px}
#ops-rail{position:absolute;top:0;right:0;width:340px;display:flex;flex-direction:column;gap:0}
#ops-rail .opx-pad,#ops-root .opx-pad{margin:0;padding:18px}
.opx-calh{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.opx-calh b{flex:1;font-size:var(--fs-md,17px);letter-spacing:-.02em}
.opx-calh span{font-size:var(--fs-sm);color:var(--muted)}
.opx-ib{width:28px;height:28px;border-radius:50%;border:0;background:var(--panel-2);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1}
.opx-ib:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.opx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;font-size:var(--fs-sm)}
.opx-cal .dw{font-size:11px;font-weight:600;color:var(--muted);opacity:.75;padding-bottom:6px}
.opx-cal .d{aspect-ratio:1;display:grid;place-items:center;border-radius:50%}
.opx-cal .d.off{background:color-mix(in srgb,var(--accent) 24%,transparent);font-weight:600}
.opx-cal .d.wait{box-shadow:inset 0 0 0 1.5px var(--warn)}
.opx-cal .d.today{background:var(--ink);color:var(--bg);font-weight:700}
.opx-leg{display:flex;gap:14px;font-size:var(--fs-xs);color:var(--muted);margin-top:12px}
.opx-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.opx-leg i.o{background:color-mix(in srgb,var(--accent) 50%,transparent)}
.opx-leg i.w{box-shadow:inset 0 0 0 1.5px var(--warn)}
.opx-lock{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:11.5px;font-weight:600;color:var(--muted);opacity:.75}
/* Grouped lists, the way Settings groups things (overview and the rail share these). */
.opx-groups{display:flex;flex-direction:column;gap:26px}
.opx-gh{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);padding:0 4px 8px}
#ops-rail .opx-gh{margin-top:22px}
.opx-lnk{margin-left:auto;font-weight:500;color:var(--accent);text-decoration:none}
.opx-grp{margin:0 !important;padding:0 !important;overflow:hidden}
.opx-grp .opx-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 18px;border:0;background:none;color:inherit;font:inherit;text-align:left;position:relative}
.opx-grp button.opx-row{cursor:pointer}
.opx-grp button.opx-row:hover{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
.opx-grp .opx-row + .opx-row::before{content:"";position:absolute;left:18px;right:0;top:0;height:1px;background:var(--line)}
.opx-grp .opx-row .t{flex:1;min-width:0}
.opx-grp .opx-row .t b{display:block;font-weight:500;font-size:var(--fs-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opx-grp .opx-row .t span{font-size:var(--fs-sm);color:var(--muted)}
.opx-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted);opacity:.6}
.opx-dot.urgent{background:var(--danger);opacity:1}.opx-dot.high{background:var(--warn);opacity:1}
.opx-pri{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.opx-pri.urgent{color:var(--danger)}.opx-pri.high{color:var(--warn)}
.opx-chev{color:var(--muted);opacity:.6;font-size:18px;line-height:1}
.opx-empty{padding:24px 18px;text-align:center;color:var(--muted);font-size:var(--fs-sm)}
/* Facilities sub-tabs as pills. */
body[data-route="facilities"] .ops-subtabs{display:flex;gap:8px;flex-wrap:wrap;border:0;margin:0 0 18px;padding:0}
body[data-route="facilities"] .ops-subtab{border:0 !important;background:var(--panel-2);color:var(--muted);border-radius:999px;padding:7px 15px;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;margin:0}
body[data-route="facilities"] .ops-subtab.active{background:var(--ink);color:var(--bg)}
/* Boards: Facilities issues and Office Supplies. Three lanes, cards inside. */
:is(#fac-root,#supply-root){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.ops-lane{margin:0 !important;min-width:0}
.ops-lane > :is(.fac-grouplabel,.sup-grouplabel){display:flex;align-items:center;gap:8px;margin:0 4px 10px;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.ops-lanedot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.ops-lanedot:is(.reported){background:var(--danger)}.ops-lanedot:is(.scheduled,.requested){background:var(--warn)}.ops-lanedot.ordered{background:var(--accent)}.ops-lanedot:is(.fixed,.received){background:var(--success)}
.ops-lane :is(.fac-row,.sup-row){flex-direction:column;align-items:stretch;gap:10px;border-radius:16px;padding:14px;margin-bottom:10px}
.ops-lane :is(.fac-actions,.sup-actions){margin-left:0;flex-wrap:wrap}
.ops-lane .fac-descr,.ops-lane .sup-item{font-weight:500}
.ops-lane-empty{padding:14px 6px;font-size:var(--fs-sm);color:var(--muted);opacity:.8}
body[data-route="facilities"] .fac-pribtn{padding:3px 11px}
/* Thursday list: the ring, and rows in grouped blocks. */
.fac-ring{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid var(--accent);font-size:20px;font-weight:700;line-height:1}
.fac-ring::after{content:attr(data-t)}
.fac-ring.zero{border-color:var(--line);color:var(--muted)}
.fac-hero-t{font-size:var(--fs-md,17px);letter-spacing:-.02em}
body[data-route="facilities"] .fac-listhead{display:flex;align-items:center;gap:14px}
body[data-route="facilities"] :is(#fac-thur-root,#fac-wish-root,#fac-std-root) .fac-grouplabel{text-transform:none;letter-spacing:0;font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin:14px 4px 8px}
body[data-route="facilities"] :is(#fac-thur-open,.fac-ev-body,.fac-thur-done,.ops-inset,.fac-std-body) .fac-thur-row{border-radius:0;border:0;border-top:1px solid var(--line);margin:0;background:none;padding:11px 14px}
body[data-route="facilities"] :is(#fac-thur-open,.ops-inset){border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
body[data-route="facilities"] :is(#fac-thur-open,.ops-inset,.fac-ev-body,.fac-std-body) > .fac-thur-row:first-child{border-top:0}
body[data-route="facilities"] .fac-ev-group{border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-top:10px}
body[data-route="facilities"] .fac-ev-group > summary{padding:12px 14px;font-weight:600}
body[data-route="facilities"] .fac-ev-group[open] > summary{border-bottom:1px solid var(--line)}
body[data-route="facilities"] .fac-ev-body{padding:0}
body[data-route="facilities"] .fac-ev-caret,body[data-route="facilities"] .fac-ev-due{color:var(--muted)}
/* The quieter row controls (print, delete) step back until you point at the row. */
@media (hover:hover){body[data-route="facilities"] .fac-thur-row :is(.fac-thur-prt,.fac-thur-del,.fac-wish-del,.fac-std-del){opacity:0;transition:opacity .12s ease}
  body[data-route="facilities"] .fac-thur-row:is(:hover,:focus-within) :is(.fac-thur-prt,.fac-thur-del,.fac-wish-del,.fac-std-del){opacity:1}
  body[data-route="facilities"] .fac-thur-row .fac-thur-prt.off{opacity:.5}}
/* Weekly checklist: areas on the left, the printed sheet on the right. */
.fac-std-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
.fac-std-area{border:1px solid var(--line);border-radius:16px;background:var(--panel);margin-bottom:10px;overflow:hidden}
.fac-std-area > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
.fac-std-area > summary::-webkit-details-marker{display:none}
.fac-std-nm{display:flex;flex-direction:column;min-width:0}
.fac-std-nm b{font-weight:500}
.fac-std-caret{color:var(--muted);opacity:.6;font-size:18px;line-height:1;transition:transform .12s ease}
.fac-std-area[open] .fac-std-caret{transform:rotate(90deg)}
.fac-std-area[open] > summary{border-bottom:1px solid var(--line)}
.fac-std-body .fac-addrow{padding:10px 14px}
.fac-sheet{background:#fff;color:#1d1d1f;border-radius:14px;padding:24px 28px;columns:2;column-gap:32px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.fac-sheet .ar{margin-bottom:16px;break-inside:avoid}
.fac-sheet h6{margin:0 0 6px;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.fac-sheet h6 span{font-weight:500;text-transform:none;letter-spacing:0;color:#6e6e73}
.fac-sheet .bx{display:flex;gap:8px;align-items:flex-start;padding:3px 0;break-inside:avoid}
.fac-sheet .bx i{width:12px;height:12px;border:1.3px solid #1d1d1f;border-radius:3px;flex:none;margin-top:3px}
@media (prefers-reduced-motion:reduce){.fac-std-caret{transition:none}}
@media (max-width:1250px){:is(body[data-route="ops"],body[data-route="facilities"],body[data-route="supply"],body[data-route="timeoff"]).ops-rail-on #view-root{padding-right:0;min-height:0}#ops-rail{position:static;width:auto;margin-top:26px;max-width:420px}}
@media (max-width:1000px){:is(#fac-root,#supply-root){grid-template-columns:minmax(0,1fr)}.fac-std-two{grid-template-columns:minmax(0,1fr)}.fac-sheet{columns:1}}
@media (max-width:640px){.ops-switch{width:100%;overflow-x:auto}.ops-switch a{padding:8px 12px}}

/* ==========================================================================
   MEETINGS, the new layout (Mike, 6 Oct 2026). The meeting list on the left, one
   header, then three steps: Prepare, Meet, Wrap up. It is Classic's own page with
   the pieces moved (app.js, renderMeetings, "The new layout"); <body data-mtstage>
   says which step is showing and the rules at the end of this block hide the rest.
   .mt-n = new layout only, .mt-c = Classic only (the list rows carry both).
   ========================================================================== */
body[data-route="meetings"].pl-classic .mt-n{display:none !important}
body[data-route="meetings"]:not(.pl-classic) .mt-c{display:none !important}
body[data-route="meetings"]:not(.pl-classic) .pl-head{align-items:center}
.mt-newmenu>summary.btn{height:auto;padding:9px 16px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:13.5px}
.mt-newmenu[open]>summary.btn{color:var(--bg);opacity:.88}
.mt-menu-lbl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 10px 2px;margin-top:4px;border-top:1px solid var(--line)}
/* the list */
body[data-route="meetings"]:not(.pl-classic) .mt-shell{grid-template-columns:300px minmax(0,1fr);gap:18px;margin-top:0}
body[data-route="meetings"]:not(.pl-classic) .mt-shell.mt-collapsed{grid-template-columns:36px minmax(0,1fr)}
body[data-route="meetings"]:not(.pl-classic) .mt-sidebar{border-radius:18px;box-shadow:var(--t-shadow);top:12px;max-height:calc(100vh - 40px)}
body[data-route="meetings"]:not(.pl-classic) .mt-side-head{border-bottom:0;padding:12px 12px 2px}
body[data-route="meetings"]:not(.pl-classic) .mt-search{border:0;border-radius:999px;padding:8px 14px;font-size:13.5px}
body[data-route="meetings"]:not(.pl-classic) .mt-side-scroll{padding-bottom:8px}
body[data-route="meetings"]:not(.pl-classic) .mt-grp>summary{font-size:11.5px;font-weight:700;letter-spacing:.07em;padding:14px 16px 4px}
body[data-route="meetings"]:not(.pl-classic) .mt-grp>summary::before{content:none}
body[data-route="meetings"]:not(.pl-classic) .mt-row{align-items:center;gap:10px;padding:9px 12px;margin:0 6px;border-radius:12px}
body[data-route="meetings"]:not(.pl-classic) .mt-row-ico{display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-row-when{width:58px;flex:none;font-size:12px;font-weight:600;color:var(--muted);line-height:1.25}
body[data-route="meetings"]:not(.pl-classic) .mt-row-title{font-weight:600;font-size:14px;line-height:1.3}
body[data-route="meetings"]:not(.pl-classic) .mt-row-sub{margin-top:1px;font-size:12px}
body[data-route="meetings"]:not(.pl-classic) .mt-row.active{background:var(--panel-2)}
body[data-route="meetings"]:not(.pl-classic) .mt-row-ol .mt-row-title{font-weight:500;color:var(--muted)}
body[data-route="meetings"]:not(.pl-classic) .mt-tag.ol{display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-row-act{display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-row:hover .mt-row-act{display:inline-flex;opacity:1}
body[data-route="meetings"]:not(.pl-classic) .mt-tag{font-size:11px;font-weight:700;padding:2px 8px}
body[data-route="meetings"]:not(.pl-classic) .mt-empty{border-radius:18px;min-height:300px}
/* the header */
body[data-route="meetings"]:not(.pl-classic) .mt-detail-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--t-shadow)}
body[data-route="meetings"]:not(.pl-classic) .mtp-hl{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:6px}
body[data-route="meetings"]:not(.pl-classic) .mtp-hr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
body[data-route="meetings"]:not(.pl-classic) #mt-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
body[data-route="meetings"]:not(.pl-classic) #mt-eyebrow:empty{display:none}
body[data-route="meetings"]:not(.pl-classic) #mt-detail-title{flex:none !important;font-size:26px !important;font-weight:700 !important;letter-spacing:-.03em;line-height:1.15;white-space:normal !important}
body[data-route="meetings"]:not(.pl-classic) .mtp-who{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
body[data-route="meetings"]:not(.pl-classic) #mt-attendees{display:flex;gap:6px;flex-wrap:wrap}
body[data-route="meetings"]:not(.pl-classic) .mt-att-label{display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-att-chip{border:0;border-radius:999px;padding:3px 10px;font-size:12.5px}
body[data-route="meetings"]:not(.pl-classic) #mt-teams{background:var(--panel-2);color:var(--ink)}
body[data-route="meetings"]:not(.pl-classic) .mtp-hr .mt-actions>summary{height:auto;padding:6px 12px;border:0;border-radius:999px;font-weight:600}
body[data-route="meetings"]:not(.pl-classic) #mt-strip{margin:0 !important}
body[data-route="meetings"]:not(.pl-classic) #mt-strip>div:first-child{display:none !important}
body[data-route="meetings"]:not(.pl-classic) #mt-strip details{margin:10px 4px 0 !important}
/* the three steps */
.mt-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0}
.mt-stage{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;min-width:0}
.mt-stage .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);font-weight:700;font-size:13px;flex:none}
.mt-stage b{display:block;font-size:15px}
.mt-stage .s{display:block;font-size:12.5px;color:var(--muted)}
.mt-stage:hover{border-color:color-mix(in srgb,var(--ink) 25%,transparent)}
.mt-stage[aria-selected="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.mt-stage[aria-selected="true"] .n{background:var(--accent);color:#fff}
.mt-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the body: work on the left, side cards on the right */
body[data-route="meetings"]:not(.pl-classic) .mtp-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
body[data-route="meetings"]:not(.pl-classic) :is(.mtp-main,.mtp-side){display:flex;flex-direction:column;gap:14px;min-width:0}
body[data-route="meetings"]:not(.pl-classic) :is(.mtp-main,.mtp-side)>*{margin-top:0 !important;margin-bottom:0 !important}
body[data-route="meetings"]:not(.pl-classic) #meetings-root{display:flex;flex-direction:column;gap:14px}
body[data-route="meetings"]:not(.pl-classic) #meetings-root:empty{display:none}
body[data-route="meetings"]:not(.pl-classic) #meetings-root .card{margin:0}
body[data-route="meetings"]:not(.pl-classic) #meetings-root .mlabel{text-transform:none;letter-spacing:-.01em;font-size:15px !important;color:var(--ink)}
body[data-route="meetings"]:not(.pl-classic) .mtp-wrap-empty{display:none;padding:18px 20px}
body[data-route="meetings"]:not(.pl-classic) #mt-recbar{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--t-shadow);padding:12px 16px;gap:12px}
body[data-route="meetings"]:not(.pl-classic) .mt-rec-mini{height:34px;padding:0 16px;font-size:13.5px}
body[data-route="meetings"]:not(.pl-classic) #mt-rec-timer{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
body[data-route="meetings"]:not(.pl-classic) #mt-recbar .mt-upload-tb{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--panel-2);font-size:13.5px;font-weight:600;margin-left:auto}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-toolbar{border-radius:17px 17px 0 0;background:var(--panel);box-shadow:none}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-toolbar>.mt-doc-sep:first-child{display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-docbody{min-height:420px;padding:22px 28px}
body[data-route="meetings"]:not(.pl-classic) :is(.mt-rail-bar,.mt-rail-reopen){display:none !important}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks{flex:none;background:none;border:0;overflow:visible;gap:14px}
body[data-route="meetings"]:not(.pl-classic) :is(.mt-doc-tasks .mt-sec,#mt-recapcard){background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--t-shadow);overflow:hidden}
body[data-route="meetings"]:not(.pl-classic) .mt-sec-h{border-bottom:0;margin:0;padding:14px 16px 6px;font-size:15px;font-weight:700;text-transform:none;letter-spacing:-.01em}
body[data-route="meetings"]:not(.pl-classic) .mt-sec-body{padding:6px 16px 14px}
body[data-route="meetings"]:not(.pl-classic) #mt-recapcard{padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
body[data-route="meetings"]:not(.pl-classic) #mt-recapcard b{font-size:15px}
body[data-route="meetings"]:not(.pl-classic) #mt-recapcard p{margin:0}
/* which pieces each step shows */
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="prepare"] :is(#mt-recbar,#meetings-root,.mtp-wrap-empty,#mt-trans-det,#mt-sessions,#mt-recapcard){display:none !important}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="meet"] :is(#meetings-root,.mtp-wrap-empty,#mt-trans-det,#mt-sessions,#mt-recapcard){display:none !important}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="meet"] #mt-planpanel{order:3}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] .mtp-doc{display:none !important}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] #meetings-root:empty + .mtp-wrap-empty{display:block}
@media (max-width:1560px){body[data-route="meetings"]:not(.pl-classic) .mtp-body{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:1380px){body[data-route="meetings"]:not(.pl-classic) .mtp-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:960px){body[data-route="meetings"]:not(.pl-classic) .mt-shell{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.mt-stages{grid-template-columns:minmax(0,1fr)}body[data-route="meetings"]:not(.pl-classic) .mt-detail-head{padding:14px}body[data-route="meetings"]:not(.pl-classic) .mtp-hr{margin-left:0}}

/* ==========================================================================
   TEAM TASKS, the new layout (Mike, 6 Oct 2026).
   .tt-top (layout.php): the big title, one switch for List / Board / Calendar /
   Timeline, then the page's own buttons (#task-tabs-actions) on the right.
   .ttx-* (app.js, renderTaskList, NEWL): four "needs attention" boxes, the
   grouping pills, and By person's roster and person card. The table rows are
   Classic's own, restyled under .tl-shell.ttx.
   ========================================================================== */
.tt-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.tt-top .pl-title{margin:0}
.tt-top .tt-slot{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tt-top .tt-slot #tl-new{order:9}
.tt-top .tt-slot .btn:not(.ghost){background:var(--ink);color:var(--bg)}
@media (max-width:760px){.tt-top .tt-slot{margin-left:0;flex-basis:100%}}
.ttx-att{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 16px}
.ttx-att .card.ttx-ac{margin:0;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ttx-ac.on{border-color:var(--accent)}
.ttx-ah{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.ttx-ah b{font-size:15px}
.ttx-ah span{margin-left:auto;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.ttx-ac.bad .ttx-ah span{color:var(--danger)}
.ttx-ac.warn .ttx-ah span{color:var(--warn)}
.ttx-ar{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:4px 6px;margin:0 -6px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.ttx-ar:hover{background:var(--panel-2)}
.ttx-ar .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttx-ar small{color:var(--muted);font-size:12px;white-space:nowrap}
.ttx-noav{width:20px;height:20px;border-radius:50%;flex:none;border:1.5px dashed var(--line)}
.ttx-none{color:var(--muted);font-size:13px;padding:4px 0}
.ttx-more{align-self:flex-start;margin-top:auto;padding:4px 0 0;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.ttx-more:hover{text-decoration:underline}
.ttx-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.ttx-g{border:0;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;background:var(--panel-2);color:var(--muted);cursor:pointer;white-space:nowrap}
.ttx-g:hover{color:var(--ink)}
.ttx-g.on{background:var(--ink);color:var(--bg)}
.ttx-show{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;padding:9px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);font-size:13.5px}
.ttx-show .ttx-more{margin:0 0 0 auto;padding:0;align-self:center}
/* the list */
.tl-shell.ttx{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.tl-shell.ttx.ttx-person{grid-template-columns:300px minmax(0,1fr)}
.tl-shell.ttx .tl-main{overflow:visible;padding:0}
.tl-shell.ttx .tl-main>.card{margin:0 0 12px}
.tl-shell.ttx .ttx-grp{padding:6px 16px 8px}
.ttx-gh{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;user-select:none}
.ttx-gh b{font-size:15px}
.ttx-gh .tl-caret{font-size:11px;color:var(--muted);width:10px}
.ttx-grp.late .ttx-gh b{color:var(--danger)}
.ttx-grp.done .ttx-gh b{color:var(--muted)}
.ttx-prog{width:110px;height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;flex:none}
.ttx-prog i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.tl-shell.ttx .tl-row{padding:9px 4px !important}
.ttx-trash{display:inline-block;width:auto;margin:6px 4px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
/* By person */
.tl-shell.ttx .tl-rail.ttx-roster{flex:none;width:auto;max-height:calc(100vh - 40px);overflow:auto;position:sticky;top:12px;padding:8px 6px;border-radius:18px;box-shadow:var(--t-shadow)}
.ttx-rh{display:flex;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 10px 6px}
.ttx-rh span{margin-left:auto;letter-spacing:.04em}
.tl-rb.ttx-pp{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;margin:0;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.tl-rb.ttx-pp:hover,.tl-rb.ttx-pp.on{background:var(--panel-2)}
.ttx-pn{flex:1;min-width:0}
.ttx-pn b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttx-pn small{font-size:12px;color:var(--muted)}
.ttx-pn small i{font-style:normal;color:var(--danger);font-weight:600}
.ttx-ld{width:64px;height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden;display:flex;flex:none}
.tl-rb.ttx-pp.on .ttx-ld{background:var(--panel)}
.ttx-ld i{display:block;height:100%}
.ttx-ld .l{background:var(--danger)}
.ttx-ld .o{background:var(--accent)}
.card.ttx-who{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px}
.ttx-wn b{display:block;font-size:20px;letter-spacing:-.02em}
.ttx-nums{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.ttx-num{border:0;background:none;color:var(--ink);font:inherit;text-align:right;padding:6px 12px;border-radius:12px;cursor:pointer}
.ttx-num:hover,.ttx-num.on{background:var(--panel-2)}
.ttx-num b{display:block;font-size:22px;letter-spacing:-.03em;line-height:1.1}
.ttx-num span{font-size:12px;color:var(--muted)}
@media (max-width:1100px){.ttx-att{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-shell.ttx.ttx-person{grid-template-columns:minmax(0,1fr)}.tl-shell.ttx .tl-rail.ttx-roster{position:static;max-height:none}}
@media (max-width:640px){.ttx-att{grid-template-columns:minmax(0,1fr)}.ttx-nums{margin-left:0}}

/* ==========================================================================
   MEETINGS, round two (Mike, 6 Oct 2026): "I should be able to scroll and not
   have the whole screen scroll." Over 1100px the frame (.mt-shell) is given the
   height left on screen (app.js, mtpFit) and the list, the notes and the side
   panel each scroll on their own. The header is one line (name, people, the
   three steps as a small switch, Join, one Actions menu), the side panel shows
   one tab at a time (<body data-mtside>), and the service is a run sheet.
   These rules sit after the first Meetings block on purpose and override it.
   ========================================================================== */
/* one line header */
body[data-route="meetings"]:not(.pl-classic) .mt-detail-head{align-items:center;gap:14px;padding:12px 18px}
body[data-route="meetings"]:not(.pl-classic) .mtp-hl{flex:0 1 auto;gap:2px}
body[data-route="meetings"]:not(.pl-classic) #mt-eyebrow{font-size:11.5px}
body[data-route="meetings"]:not(.pl-classic) #mt-detail-title{font-size:21px !important}
body[data-route="meetings"]:not(.pl-classic) .mtp-who{flex:none;position:relative}
.mtp-ppl{position:relative}
.mtp-ppl>summary{list-style:none;cursor:pointer;display:flex;align-items:center;padding:4px 10px 4px 4px;border-radius:999px;font-size:13px;color:var(--muted)}
.mtp-ppl>summary::-webkit-details-marker{display:none}
.mtp-ppl>summary:hover,.mtp-ppl[open]>summary{background:var(--panel-2);color:var(--ink)}
.mtp-ppl>summary>span[style]{margin-left:-6px;box-shadow:0 0 0 2px var(--panel)}
.mtp-ppl>summary>span[style]:first-child{margin-left:0}
.mtp-ppl>summary>span:last-child{margin-left:8px;white-space:nowrap}
.mtp-ppl-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:60;width:320px;max-width:80vw;padding:12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.42);display:flex;flex-direction:column;gap:8px}
body[data-route="meetings"]:not(.pl-classic) .mt-stages{display:inline-flex;grid-template-columns:none;gap:2px;margin:0 0 0 auto;padding:3px;border-radius:999px;background:var(--panel-2);flex:none}
body[data-route="meetings"]:not(.pl-classic) .mt-stage{padding:6px 14px 6px 8px;gap:7px;border:0;border-radius:999px;background:none;color:var(--muted)}
body[data-route="meetings"]:not(.pl-classic) .mt-stage .n{width:20px;height:20px;font-size:11px;background:var(--panel)}
body[data-route="meetings"]:not(.pl-classic) .mt-stage b{font-size:13.5px;font-weight:600}
body[data-route="meetings"]:not(.pl-classic) .mt-stage .s{display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-stage:hover{color:var(--ink)}
body[data-route="meetings"]:not(.pl-classic) .mt-stage[aria-selected="true"]{background:var(--accent);color:#fff}
body[data-route="meetings"]:not(.pl-classic) .mt-stage[aria-selected="true"] .n{background:rgba(255,255,255,.25);color:#fff}
body[data-route="meetings"]:not(.pl-classic) .mtp-hr{margin-left:0;flex:none}
body[data-route="meetings"]:not(.pl-classic) .mtp-hr .mt-actions-menu .mt-actions-item{display:flex;width:100%;padding:8px 10px !important;border:0;border-radius:7px !important;background:none;color:var(--ink);font-size:var(--fs-sm) !important;font-weight:400;text-align:left;justify-content:flex-start}
body[data-route="meetings"]:not(.pl-classic) .mtp-hr .mt-actions-menu .mt-actions-item:hover{background:var(--panel-2)}
body[data-route="meetings"]:not(.pl-classic) .mtp-hr .mt-actions-menu .mt-actions-item[style*="display: none"],body[data-route="meetings"]:not(.pl-classic) .mtp-hr .mt-actions-menu .mt-actions-item[style*="display:none"]{display:none !important}
/* side panel: one card, one tab at a time */
.mtp-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line);flex:none}
.mtp-tabs button{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:8px 6px;border-radius:10px;cursor:pointer;white-space:nowrap}
.mtp-tabs button:hover{color:var(--ink)}
.mtp-tabs button[aria-selected="true"]{background:var(--panel-2);color:var(--ink)}
.mtp-tabs button[hidden]{display:none}
.mtp-tabs i{font-style:normal;color:var(--muted);margin-left:5px;font-weight:500}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--t-shadow);overflow:hidden;gap:0;display:flex;flex-direction:column}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks .mt-sec{display:none;background:none;border:0;border-radius:0;box-shadow:none}
body[data-route="meetings"]:not(.pl-classic)[data-mtside="service"] #mt-planpanel,body[data-route="meetings"]:not(.pl-classic)[data-mtside="tasks"] #mt-sec-tasks,body[data-route="meetings"]:not(.pl-classic)[data-mtside="fac"] #mt-sec-fac{display:flex !important;flex-direction:column;min-height:0}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks .mt-sec-h{cursor:default;padding:10px 16px 0;justify-content:flex-end;min-height:0}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks :is(.mt-sec-caret,.mt-sec-t,.mt-sec-n){display:none}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks .mt-sec.collapsed .mt-sec-body{display:block}
body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks .mt-sec-body{padding:8px 16px 14px}
/* the service as a run sheet */
body[data-route="meetings"]:not(.pl-classic) .mt-sec-body.mtp-sv{padding:0 0 10px}
.mtp-svh{padding:2px 16px 12px;border-bottom:1px solid var(--line)}
.mtp-svh small{display:block;font-size:12px;color:var(--muted)}
.mtp-svh b{display:block;font-size:15px;line-height:1.3;margin:2px 0}
.mtp-osec{position:sticky;top:0;z-index:1;background:var(--panel);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 16px 5px}
.mtp-oit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:7px 16px;font-size:13.5px}
.mtp-oit b{font-weight:500}
.mtp-oit small{display:block;margin-top:1px;font-size:12px;line-height:1.4;color:var(--muted);white-space:pre-wrap}
.mtp-oit>span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* notes: calmer headings */
body[data-route="meetings"]:not(.pl-classic) #mt-docbody h1{font-size:22px !important;font-weight:700;letter-spacing:-.02em;margin:14px 0 6px}
body[data-route="meetings"]:not(.pl-classic) #mt-docbody h2{font-size:17px !important;margin:12px 0 4px}
body[data-route="meetings"]:not(.pl-classic) #mt-docbody h3{font-size:15px !important;margin:10px 0 2px}
body[data-route="meetings"]:not(.pl-classic) #mt-docbody>:first-child{margin-top:0}
/* the fixed frame */
@media (min-width:1101px){
  body[data-route="meetings"]:not(.pl-classic) .mt-shell{grid-template-columns:280px minmax(0,1fr);align-items:stretch;gap:14px;grid-template-rows:minmax(0,1fr)}
  body[data-route="meetings"]:not(.pl-classic) .mt-shell.mt-collapsed{grid-template-columns:36px minmax(0,1fr)}
  body[data-route="meetings"]:not(.pl-classic) .mt-sidebar{position:static;max-height:none;height:100%;min-height:0}
  body[data-route="meetings"]:not(.pl-classic) .mt-detail{display:flex;flex-direction:column;gap:12px;min-height:0}
  body[data-route="meetings"]:not(.pl-classic) .mt-empty{flex:1;min-height:0}
  body[data-route="meetings"]:not(.pl-classic) :is(.mt-detail-head,#mt-strip){flex:none}
  body[data-route="meetings"]:not(.pl-classic) #mt-workspace{flex:1;min-height:0;display:flex;flex-direction:column}
  body[data-route="meetings"]:not(.pl-classic) .mtp-body{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:minmax(0,1fr);gap:14px;align-items:stretch}
  body[data-route="meetings"]:not(.pl-classic) :is(.mtp-main,.mtp-side){min-height:0;gap:12px}
  body[data-route="meetings"]:not(.pl-classic) .mtp-main>#mt-recbar,body[data-route="meetings"]:not(.pl-classic) .mtp-side>#mt-recapcard{flex:none}
  body[data-route="meetings"]:not(.pl-classic) .mtp-doc{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body[data-route="meetings"]:not(.pl-classic) .mt-doc-toolbar{position:static;flex:none}
  body[data-route="meetings"]:not(.pl-classic) .mt-doc-wrap{flex:1;min-height:0}
  body[data-route="meetings"]:not(.pl-classic) .mt-docbody{min-height:0;overflow-y:auto;overscroll-behavior:contain}
  body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] .mtp-main{overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
  body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks{flex:1;min-height:0}
  body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks .mt-sec{flex:1}
  body[data-route="meetings"]:not(.pl-classic) .mt-doc-tasks .mt-sec-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:1101px) and (max-width:1500px){body[data-route="meetings"]:not(.pl-classic) .mtp-body{grid-template-columns:minmax(0,1fr) 320px}body[data-route="meetings"]:not(.pl-classic) .mt-shell{grid-template-columns:250px minmax(0,1fr)}}
@media (max-width:1100px){body[data-route="meetings"]:not(.pl-classic) .mt-stages{margin-left:0}}

/* Team Tasks list, the fixed frame (Mike, 6 Oct 2026: "I want to be able to scroll, but
   I don't want the whole window scrolling"). The boxes and pills stay put; fitRail gives
   .tl-shell the height left on screen and the rows (and By person's roster) scroll
   inside it, with the column names pinned. Under 1100px the page scrolls as before. */
@media (min-width:1101px){
  .tl-shell.ttx.ttx-fit{grid-template-rows:minmax(0,1fr);align-items:stretch}
  .tl-shell.ttx.ttx-fit .tl-main{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
  .tl-shell.ttx.ttx-fit .tl-main>.card:has(>div>.tl-sort-h){position:sticky;top:0;z-index:5}
  .tl-shell.ttx.ttx-fit .tl-rail.ttx-roster{position:static;max-height:none;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain}
}

/* Team Tasks timeline = the Projects timeline (.plv-tl...) with two extras (Mike, 6 Oct
   2026): the number of months is a setting (--tlm), and a row opens to show its tasks. */
.plv-tl.ttl .plv-tlmonths{grid-template-columns:repeat(var(--tlm,12),minmax(0,1fr))}
.plv-tl.ttl .plv-tltrack{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/var(--tlm,12) - 1px),var(--line) calc(100%/var(--tlm,12) - 1px),var(--line) calc(100%/var(--tlm,12)))}
.ttl-chev{flex:none;width:10px;font-size:11px;color:var(--muted);transition:transform .15s cubic-bezier(.2,.7,.2,1)}
.ttl-grp[aria-expanded="true"] .ttl-chev{transform:rotate(90deg)}
.ttl-grp .plv-tlname .nm{flex:1}
.ttl-open{flex:none;display:inline-flex;padding:4px;border-radius:6px;color:var(--muted);opacity:0}
.ttl-grp:hover .ttl-open,.ttl-open:focus-visible{opacity:1}
.ttl-open:hover{color:var(--accent)}
.plv-tlrow.ttl-task{min-height:40px;background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.ttl-task .plv-tlname{padding-left:36px;gap:8px}
.ttl-task .plv-tlname .nm{flex:1}
.ttl-task .plv-tlname b{font-size:13.5px;font-weight:500}
.ttl-task .plv-tlname b.done{text-decoration:line-through;color:var(--muted)}
.ttl-gl{display:inline-flex;flex:none}
.ttl-task .plv-tltrack{height:40px}
.ttl-task .plv-tlms{top:14px}
.ttl-task .plv-tlnone{top:11px}
.plv-tlms.late{background:var(--danger)}
.plv-tlms.ttl-ev{background:var(--accent);width:14px;height:14px;top:21px;z-index:2}
.plv-tlbar.ttl-tb{top:15px;height:10px;padding:0;border-radius:5px;background:var(--ink);opacity:.75;box-shadow:none}
.plv-tlbar.ttl-tb.done{background:var(--success)}
.plv-tlbar.ttl-tb.late{background:var(--danger)}
.plv-tlnone.ttl-after{left:auto;right:10px}
.ttl-empty{cursor:default}
@media (prefers-reduced-motion:reduce){.ttl-chev{transition:none}}

/* Meetings list: one header per day, times underneath (Mike, 6 Oct 2026). A day header
   is not a fold: it always shows its meetings. */
body[data-route="meetings"]:not(.pl-classic) .mt-day>summary{pointer-events:none;cursor:default;color:var(--ink);font-size:12.5px;letter-spacing:.02em;text-transform:none;padding:14px 16px 4px}
body[data-route="meetings"]:not(.pl-classic) .mt-day .mt-row-when{width:62px;white-space:nowrap}

/* Team Tasks timeline, follow up (Mike, 6 Oct 2026): a wider name column so nothing
   spills onto the bars, the event's picture in the colour slot, and the card scrolls
   inside itself (app.js ttlFit sets the height) with the months pinned on top. */
.plv-tl.ttl .plv-tlhead,.plv-tl.ttl .plv-tlrow{grid-template-columns:340px minmax(720px,1fr)}
.plv-tl.ttl .plv-tltoday{left:calc(340px + (100% - 340px) * var(--x) / 100)}
.plv-tl.ttl .plv-tlscroll{overflow:auto;overscroll-behavior:contain}
.plv-tl.ttl .plv-tlhead{position:sticky;top:0;z-index:4;background:var(--panel)}
.ttl-grp .plv-tlname .sw{width:46px;height:30px;border-radius:7px;overflow:hidden;position:relative}
.ttl-grp .plv-tlname .sw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ttl-l1{display:flex;align-items:center;gap:8px;min-width:0}
.ttl-l1 b{flex:0 1 auto;min-width:0}
.ttl-l1 .plv-pb{flex:none;padding:2px 8px;font-size:11px}
/* Two events with the same name (Baptisms on Oct 25 and Nov 29): the date tells the rows apart. */
.ttl-l1 .ttl-dt{flex:none;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.ttl-grp .plv-tlname .sub{min-width:0}
.ttl-subt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttl-grp .plv-tlname{overflow:hidden}

/* Project page, Linked events: a search box and a list to pick from (Mike, 6 Oct 2026). */
.prd-evl{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.prd-evl input{width:100%;padding:7px 10px;font-size:13px}
.prd-evl-list{display:flex;flex-direction:column;max-height:230px;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px}
.prd-ev-add{display:flex;align-items:baseline;gap:10px;width:100%;padding:7px 8px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
.prd-ev-add:hover,.prd-ev-add:focus-visible{background:var(--panel-2);outline:none}
.prd-ev-add[hidden]{display:none}
.prd-ev-add .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prd-ev-add .d{flex:none;font-size:12px;color:var(--muted);max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prd-evl-list>.muted{padding:6px 8px}
.prd-evl-list>[hidden]{display:none !important}

/* Events: dates that changed in Planning Center (Mike, 6 Oct 2026). One box above the
   cards; each row is an event with Update and Keep. */
.plv-drift{margin:0 0 18px;padding:14px 18px;border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.plv-drift .h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.plv-drift .h span{font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.plv-drift-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line);margin-top:10px}
.plv-drift-r .t{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:2px}
.plv-drift-r .t>b{font-size:14.5px}
.plv-drift-r .t>span{font-size:13.5px;color:var(--muted)}
.plv-drift-r .t>span b{color:var(--ink);font-weight:600}
.plv-evc-b .m .warn{color:var(--warn);font-weight:600}

/* Team Tasks, By person: someone who left but still holds work (Mike, 6 Oct 2026). */
.card.ttx-gone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.ttx-gone>div{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:2px}
.ttx-ho{max-width:480px;display:flex;flex-direction:column;gap:12px}
.ttx-ho h3{margin:0;font-size:18px}
.ttx-ho p{margin:0}
.ttx-ho label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.ttx-ho select{width:100%;padding:8px 10px;font-size:14px;font-weight:400}
.ttx-ho ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.ttx-ho-f{display:flex;align-items:center;gap:8px}
.ttx-ho-f span{flex:1;min-width:0}

/* Planner timeline: meetings stand apart from tasks (Mike, 6 Oct 2026, looks 1 + 3). A
   meeting is a striped accent band with an accent edge, a calendar icon and a solid tag,
   and it grows with its length (--mlen = minutes past the first 30). Tasks stay plain.
   An event marked Free on the calendar is not blocked time, so it keeps the plain look. */
.tlv-lede{margin-bottom:10px}
.tlv-key{display:flex;gap:18px;align-items:center;margin:0 0 20px;font-size:12.5px;color:var(--muted)}
.tlv-key i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.tlv-key i.m{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 34%,var(--panel)) 0 4px,color-mix(in srgb,var(--accent) 12%,var(--panel)) 4px 8px);box-shadow:inset 3px 0 0 var(--accent)}
.tlv-key i.t{background:var(--panel);border:1px solid var(--line)}
.tlv-card.tlv-meet:not(.tlv-freeev){border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:inset 4px 0 0 var(--accent),var(--tlv-shadow);min-height:calc(58px + var(--mlen,0) * 1.2px);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 13%,var(--panel)) 0 10px,color-mix(in srgb,var(--accent) 7%,var(--panel)) 10px 20px)}
.tlv-card.tlv-meet:not(.tlv-freeev):hover{border-color:var(--accent)}
.tlv-card.tlv-meet:not(.tlv-freeev) .tlv-tag{background:var(--accent);color:var(--accent-ink,#fff)}
.tlv-mico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.tlv-freeev .tlv-mico{background:var(--panel-2);color:var(--muted)}
/* Week: the columns are narrow, so the icon steps aside and the band grows less. */
.tlv-week .tlv-mico{display:none}
.tlv-week .tlv-card.tlv-meet:not(.tlv-freeev){box-shadow:inset 3px 0 0 var(--accent);min-height:calc(40px + var(--mlen,0) * .6px)}

/* Planner: "To plan" is gone (Mike, 6 Oct 2026). What is not on a day is grouped by what
   it really is, in folds that stay quiet until opened. */
.tlv-fold{border-top:1px solid var(--line);padding:8px 0 2px}
.tlv-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:2px 4px;font-size:13.5px}
.tlv-fold>summary::-webkit-details-marker{display:none}
.tlv-fold>summary::before{content:"\25B8";font-size:10px;color:var(--muted)}
.tlv-fold[open]>summary::before{content:"\25BE"}
.tlv-fold>summary span{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.tlv-foldn{font-size:12.5px;color:var(--muted);padding:4px 4px 6px}
.sc-fold>summary::-webkit-details-marker{display:none}
.sc-fold>summary::before{content:"\25B8";font-size:10px;color:var(--muted)}
.sc-fold[open]>summary::before{content:"\25BE"}

/* ==========================================================================
   PLANNER, the week alive (Mike, 6 Oct 2026, look 1). Same planner, same controls.
   The top row is a title, one view switch and the buttons; four numbers sit above
   the grid; settings hide behind one button. On the grid, colour means something:
   a meeting is a striped band in its calendar's colour (--mc, the accent when the
   calendar has none), a task keeps its "Color by" colour, a task that will finish
   late turns red, and today's column is lit. The grid's own inline styles are
   Adam's; these rules only override the few properties named here.
   ========================================================================== */
body[data-route="schedule"] .page-head h1::before{content:"Mission Control  \203A  ";white-space:pre}
.sc-toolbar{gap:10px}
.sc-toolbar .sc-h{margin:0 6px 0 0;font-size:30px}
.sc-toolbar #sc-mode{display:none}
.sc-modeseg{display:inline-flex;gap:2px;padding:4px;border-radius:13px;background:var(--panel-2)}
.sc-modeseg button{border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
.sc-modeseg button:hover{color:var(--ink)}
.sc-modeseg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.22)}
.sc-modeseg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-toolbar .sc-title{min-width:0;font-size:16px;text-align:center}
.sc-toolbar #sc-auto{background:linear-gradient(135deg,var(--accent),#7b6cf6) !important;color:#fff !important;border-color:transparent !important}
.sc-toolbar #sc-auto svg{stroke:#fff}
.sc-setwrap{position:relative}
.sc-setpop{position:absolute;right:0;top:calc(100% + 8px);z-index:70;width:340px;max-width:92vw;max-height:72vh;overflow:auto;padding:6px;border-radius:18px;background:var(--panel);border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.sc-setpop[hidden]{display:none}
.sc-setpop .card{box-shadow:none;border:0;margin:0}
/* the four numbers */
/* The title row and the numbers line stay at the top while the page scrolls (Mike, 8 Oct
   2026). Desktop only: on a phone the two rows would eat too much of the screen. */
@media (min-width:901px){
  /* .content has 18px of padding on top and a sticky box stops below it, so pull it up by
     that much and pad it back, or rows would show in a strip above the header. */
  .sc-sticky{position:sticky;top:-18px;z-index:40;background:var(--bg);padding:18px 0 2px;margin-top:-18px}
  .sc-sticky .sc-head{margin-bottom:0}
}
/* The Planner page does not scroll (Mike, 8 Oct 2026): less empty room under the calendar,
   and a little breathing room inside the Day list's own scroll box. */
@media (min-width:901px){
  .content:has(#schedule-root){padding-bottom:16px}
  #schedule-root > .tlv{padding:4px 6px 0 0}
}
/* One line under the title row (Mike, 8 Oct 2026): the at risk warning, the four numbers,
   and the Later button. The calendar gets everything below it. */
.sc-line2{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin:0 0 10px;min-height:32px}
.sc-line2 #sc-msg{position:relative;margin:0}
.sc-line2 #sc-msg:empty{display:none}
.sc-riskpop{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:max-content;max-width:min(520px,86vw);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.sc-stats{display:flex;align-items:center;gap:6px 20px;flex-wrap:wrap;margin:0}
.sc-stats[hidden]{display:none}
.sc-st{font-size:13.5px;color:var(--muted);white-space:nowrap}
.sc-st i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}
.sc-st b{font-size:15px;color:var(--ink);letter-spacing:-.01em;margin-right:2px}
#sc-rail-toggle{padding:6px 14px;display:inline-flex;align-items:center;gap:8px;border-radius:999px}
#sc-rail-toggle.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sc-later-n{font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--panel-2);color:var(--ink)}
.sc-later-n[hidden]{display:none}
@media (min-width:901px){
  .sc-layout{position:relative}
  .sc-layout > .sc-grid-wrap{flex:1 1 auto;min-width:0}
  .sc-layout > .sc-rail{position:absolute;top:0;right:0;z-index:20;width:330px;flex:none;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
  .sc-layout > .sc-rail.collapsed{display:none}
}
/* the hour grid */
.sc-gridcard{padding:6px 10px 10px !important}
.sc-col.sc-today{background:color-mix(in srgb,var(--accent) 7%,transparent) !important}
.sc-todaynum{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;margin-left:2px;border-radius:999px;background:var(--accent);color:var(--accent-ink,#fff);font-weight:700}
.sc-meet{border:0 !important;border-radius:10px !important;padding:6px 9px !important;font-weight:600;color:var(--ink) !important;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--mc) 26%,var(--panel)) 0 8px,color-mix(in srgb,var(--mc) 15%,var(--panel)) 8px 16px) !important}
.sc-meet.sc-meetfree{background:none !important;box-shadow:none;border:1px dashed var(--line) !important;color:var(--muted) !important;font-weight:500}
.sc-meet svg{display:none}
/* Planner boxes, mockup "B" (Mike, 8 Oct 2026): the whole box carries the colour, no left
   edge, and the words start top left: the time first, then the name on up to three lines. */
.sc-block{border-radius:10px !important;font-weight:600;padding:6px 9px;background:color-mix(in srgb,var(--bc,#5b7fb0) 26%,var(--panel))}
.sc-block.sc-late{--bc:var(--danger)}
.sc-bt{font-size:11px;font-weight:700;line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:color-mix(in srgb,var(--bc,var(--mc,var(--muted))) 45%,var(--ink))}
.sc-bn{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.sc-block.sc-tiny,.sc-meet.sc-tiny{padding:2px 9px !important}
/* THE DAY VIEW (Mike, 8 Oct 2026, mockup "slim rows"). The old Timeline list is what Day
   shows now. One slim line per item so a whole day fits on a screen, each task filled
   in the same colour as its box on the week, meetings in the blue stripes. */
.tlv-slim .tlv-plan{grid-template-columns:minmax(0,1fr)}
.tlv-slim .tlv-head{align-items:flex-end;margin:0 0 14px}
.tlv-slim .tlv-h1{font-size:30px}
.tlv-slim .tlv-lede{font-size:14.5px;margin:0}
.tlv-slim .tlv-key{margin:0;flex-wrap:wrap;gap:6px 16px}
.tlv-slim .tlv-key i.m{box-shadow:none}
.tlv-slim .tlv-ti{margin:0 0 5px}
.tlv-slim .tlv-hr{top:8px}
.tlv-slim .tlv-pin{top:11px;width:10px;height:10px}
.tlv-slim .tlv-card{padding:7px 14px;border-radius:11px;gap:10px;box-shadow:none}
.tlv-slim .tlv-t{display:flex;align-items:center;gap:12px}
.tlv-slim .tlv-t b{flex:1 1 auto;min-width:0;font-size:14px}
.tlv-slim .tlv-sub{flex:0 0 auto;font-size:12.5px;font-weight:600;white-space:nowrap}
.tlv-slim .tlv-card.tlv-task{border-color:transparent;background:color-mix(in srgb,var(--bc,var(--muted-2)) 26%,var(--panel))}
.tlv-slim .tlv-card.tlv-task:hover{border-color:color-mix(in srgb,var(--bc,var(--muted-2)) 60%,var(--panel))}
.tlv-slim .tlv-task .tlv-sub{color:color-mix(in srgb,var(--bc,var(--muted-2)) 45%,var(--ink))}
.tlv-slim .tlv-task .tlv-chk{border-color:color-mix(in srgb,var(--bc,var(--muted-2)) 55%,var(--ink))}
.tlv-slim .tlv-chk{width:16px;height:16px}
.tlv-slim .tlv-card.tlv-meet:not(.tlv-freeev){border-color:transparent;box-shadow:none;min-height:0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 26%,var(--panel)) 0 7px,color-mix(in srgb,var(--accent) 15%,var(--panel)) 7px 14px)}
.tlv-slim .tlv-mico{display:none}
.tlv-slim .tlv-tag{display:none}
.tlv-slim .tlv-tag.late,.tlv-slim .tlv-tag.today{display:inline-block}
.tlv-slim .tlv-tag.late{background:var(--danger);color:#fff}
.tlv-slim .tlv-tag.today{background:color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink)}
.tlv-slim .tlv-ti.free .tlv-card{align-items:center;padding:5px 14px}
.tlv-slim .tlv-ti.free .tlv-t{flex-wrap:wrap;gap:4px 10px;font-size:13px}
.tlv-slim .tlv-slots{margin:0;gap:4px}
.tlv-slim .tlv-slot{font-size:11.5px;padding:2px 8px}
.tlv-slim .tlv-now{margin:4px 0 8px}
.tlv-slim .tlv-adwrap{margin-bottom:10px}
@media (max-width:640px){.tlv-slim .tlv-task .tlv-sub{display:none}}
.sc-dayh{cursor:pointer;border-radius:10px;transition:background .15s ease}
.sc-dayh:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sc-dayh.is-wide{background:color-mix(in srgb,var(--accent) 10%,transparent)}
/* the month */
.sc-monthcard{padding:0 !important;overflow:hidden}
.scm-day.scm-today{background:color-mix(in srgb,var(--accent) 8%,transparent) !important}
.scm-meet{font-size:var(--fs-caption);font-weight:600;margin-top:2px;padding:1px 5px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 2px 0 0 var(--mc);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--mc) 26%,var(--panel)) 0 6px,color-mix(in srgb,var(--mc) 14%,var(--panel)) 6px 12px)}
.scm-chip{border-radius:5px !important;font-weight:600}
.scm-chip.scm-late{background:color-mix(in srgb,var(--danger) 20%,var(--panel)) !important;border-left-color:var(--danger) !important;outline:0 !important}
@media (max-width:1100px){.sc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sc-stats{grid-template-columns:minmax(0,1fr)}.sc-toolbar .sc-h{flex-basis:100%}}

/* ============================================================================
   MEETINGS, check boxes in the notes and written decisions (Mike, 7 Oct 2026)
   A checklist is a plain bulleted list with the class mt-ck; a ticked line is
   li.on. The box is drawn here, so the saved notes stay plain text. Not scoped
   to the Meetings editor on purpose: the same note opened in Docs shows its
   boxes too (only Meetings can tick them; app.js, "Check boxes in the notes").
   ========================================================================== */
ul.mt-ck{list-style:none;padding-left:0}
ul.mt-ck > li{position:relative;padding-left:28px}
ul.mt-ck > li::before{content:"";position:absolute;left:2px;top:.2em;width:16px;height:16px;box-sizing:border-box;border:1.5px solid var(--muted);border-radius:5px;background:var(--panel)}
ul.mt-ck > li.on::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.8 2.8 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat}
ul.mt-ck > li.on{color:var(--muted);text-decoration:line-through}
ul.mt-ck > li.on > ul,ul.mt-ck > li.on > ol{color:var(--ink);text-decoration:none}
.mt-docbody[contenteditable="true"] ul.mt-ck > li::before{cursor:pointer}
.mt-docbody[contenteditable="true"] ul.mt-ck > li:not(.on):hover::before{border-color:var(--accent)}
#mt-ck-count{margin-left:10px;white-space:nowrap}
#mt-ck-count:empty{display:none}
/* the small button that follows an unticked line (it lives on <body>) */
.mt-ck-mk{position:absolute;z-index:60;height:24px;padding:0 9px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--panel);color:var(--accent);font:inherit;font-size:var(--fs-caption);font-weight:var(--fw-medium);line-height:1;cursor:pointer;white-space:nowrap}
.mt-ck-mk:hover{background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.mt-ck-mk[hidden]{display:none}
/* Wrap up: lines still open in the notes */
#mtp-open[hidden]{display:none !important}
body[data-route="meetings"]:not(.pl-classic):is([data-mtstage="prepare"],[data-mtstage="meet"]) #mtp-open{display:none !important}
.mtp-open-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.mtp-open-n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent) 16%,var(--panel-2));color:var(--accent);font-size:var(--fs-caption);font-weight:var(--fw-medium)}
.mtp-open-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);min-width:0}
.mtp-open-row:first-of-type{margin-top:10px}
.mtp-open-row .t{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere}
.mtp-open-box{flex:0 0 auto;width:16px;height:16px;padding:0;box-sizing:border-box;border:1.5px solid var(--muted);border-radius:5px;background:var(--panel);cursor:pointer}
.mtp-open-box:hover{border-color:var(--accent)}
.mtp-open-mk{flex:0 0 auto;padding:4px 10px;font-size:var(--fs-xs)}
/* Decisions card: take one off, write one in */
.mt-dec-x{flex:0 0 auto;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;opacity:0}
.mt-dec-row:hover .mt-dec-x,.mt-dec-x:focus-visible{opacity:1}
.mt-dec-x:hover{color:var(--danger);background:var(--panel-2)}
@media (hover:none){.mt-dec-x{opacity:1}}
.mt-dec-add{display:flex;gap:8px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.mt-dec-add input{flex:1;min-width:0;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:var(--fs-sm)}
.mt-dec-add input:focus{outline:none;border-color:var(--accent)}
.mt-dec-add .btn{padding:6px 12px;font-size:var(--fs-sm)}
/* Indented notes (Tab / Shift+Tab): a checklist inside a checklist steps in one box width,
   and a list sitting under a numbered heading can be stepped in the same way. */
ul.mt-ck ul.mt-ck{padding-left:28px;margin:2px 0}
.mt-docbody blockquote{margin:0 0 0 28px !important;padding:0;border:0}

/* ============================================================================
   MEETINGS, the agenda lives in the notes (Mike, 7 Oct 2026, mockup option 2)
   An agenda item is <h2 class="mt-ag">: a numbered header line with who leads
   it and how long, and that part's notes underneath. app.js, "The agenda lives
   in the notes". Scoped to the Meetings editor; in Docs it is a plain heading.
   ========================================================================== */
#mt-docbody{counter-reset:mtag}
#mt-docbody h2.mt-ag{counter-increment:mtag;display:flex;align-items:center;gap:12px;margin:14px 0 6px !important;padding:12px 0 2px;border-top:1px solid var(--line);font-size:15.5px !important;font-weight:650;line-height:1.3}
#mt-docbody h2.mt-ag:first-of-type{border-top:0}
#mt-docbody h2.mt-ag::before{content:counter(mtag);flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--panel-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.mt-ag-meta{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap;user-select:none;-webkit-user-select:none}
#mt-docbody[contenteditable="true"] .mt-ag-meta{cursor:pointer}
#mt-docbody[contenteditable="true"] .mt-ag-meta:hover .mt-ag-who,#mt-docbody[contenteditable="true"] .mt-ag-meta:hover .mt-ag-min{color:var(--ink)}
.mt-ag-who{display:inline-flex;align-items:center;gap:8px}
.mt-ag-none{color:var(--accent)}
.mt-ag-min{min-width:46px;text-align:right}
.mt-ag-fold{width:16px;text-align:center;font-size:12px;cursor:pointer;color:var(--muted)}
.mt-ag-fold:hover{color:var(--ink)}
#mt-docbody [data-agh]{display:none !important}
@media (max-width:640px){.mt-ag-who{font-size:0;gap:0}.mt-ag-meta{gap:8px}}
/* Meetings list: a meeting that is not on the Outlook calendar says so (Mike, 7 Oct 2026). */
.mt-tag.offcal{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--panel-2));border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line))}

/* Meetings: the template picker and editor (Mike, 7 Oct 2026; app.js, "Templates you apply") */
.mt-tpl{max-width:560px;display:flex;flex-direction:column;gap:12px}
.mt-tpl h3{margin:0;font-size:18px}
.mt-tpl p{margin:0}
.mt-tpl-list{display:flex;flex-direction:column}
.mt-tpl-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.mt-tpl-row:first-child{border-top:0}
.mt-tpl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mt-tpl-row .btn{flex:0 0 auto;padding:6px 14px;font-size:var(--fs-sm)}
.mt-tpl-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mt-tpl-f span{flex:1;min-width:0}
.mt-tpl-tabs{display:flex;flex-wrap:wrap;gap:6px}
.mt-tpl-tabs button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:5px 12px;font:inherit;font-size:var(--fs-sm);cursor:pointer}
.mt-tpl-tabs button[aria-selected="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.mt-tpl-lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.mt-tpl input{background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;font-weight:400;min-width:0}
.mt-tpl input:focus{outline:none;border-color:var(--accent)}
.mt-tpl-items{display:flex;flex-direction:column;gap:6px}
.mt-tpl-it{display:flex;align-items:center;gap:8px}
.mt-tpl-n{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--panel-2);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.mt-tpl-t{flex:1}
.mt-tpl-m{flex:0 0 72px;width:72px;text-align:right}
.mt-tpl-rm{flex:0 0 auto;width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mt-tpl-rm:hover{color:var(--danger);background:var(--panel-2)}
.mt-tpl-add{align-self:flex-start;border:0;background:transparent;color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:4px 0}

/* Meetings: a template open in the notes editor (app.js, tplMode). The bar says so, the
   frame is tinted, and the tools that belong to a real meeting step out of the way. */
.mt-tplbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel));border-radius:17px 17px 0 0}
.mt-tplbar-l{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 320px}
.mt-tplbar-k{flex:0 0 auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.mt-tplbar input{flex:1;min-width:120px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:15px;font-weight:600}
.mt-tplbar input:focus{outline:none;border-color:var(--accent)}
.mt-tplbar-r{margin-left:auto;display:inline-flex;gap:8px}
.mt-tplbar .btn{padding:6px 14px;font-size:var(--fs-sm)}
body.mt-tplmode .mt-doc-toolbar{border-radius:0 !important}
body.mt-tplmode :is(#mt-doc-task,#mt-doc-dec,#mt-doc-insert,#mt-recbar,#mt-rec-mini,#mt-doc-status){display:none !important}
body.mt-tplmode :is(#mt-stages,#mt-sidebar,.mtp-side,#mt-detail-head .mt-actions){opacity:.45;pointer-events:none}
.mt-tpl-row .btn.ghost{padding:6px 12px}
/* An agenda line with no name yet says so, and stays clickable (app.js marks it mt-ag-empty). */
#mt-docbody h2.mt-ag .mt-ag-meta{order:2}
#mt-docbody[contenteditable="true"] h2.mt-ag.mt-ag-empty{cursor:text}
#mt-docbody[contenteditable="true"] h2.mt-ag.mt-ag-empty::after{content:"Name this part";order:1;color:var(--muted);font-weight:500;opacity:.7;pointer-events:none}
/* Templates opened from the page's own Templates button, with no meeting open: only the
   editor shows (app.js, tplEnter "solo"). */
body.mt-tplsolo :is(#mt-detail-head,#mt-attendees-bar,.mtp-side,#mt-recapcard,#meetings-root,.mtp-wrap-empty,#mt-trans-det,#mt-sessions,#mtp-open){display:none !important}
body.mt-tplsolo .mtp-body{grid-template-columns:minmax(0,1fr) !important}
#mt-tplbtn{margin-right:8px}
/* Templates: the "Only me" switch and its mark in the list */
.mt-tplbar-only,.mt-tpl-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.mt-tpl-chk{white-space:normal;font-weight:400}
.mt-tplbar-only input,.mt-tpl-chk input{flex:0 0 auto;width:15px;height:15px;min-width:0;padding:0;accent-color:var(--accent)}
.mt-tpl-only{display:inline-flex;align-items:center;gap:4px;margin-left:6px;font-size:11px;font-weight:600;color:var(--muted);vertical-align:1px}

/* ============================================================================
   MEETINGS, Wrap up redesigned (Mike, 7 Oct 2026, mockup option 3)
   Left: Summary, Decisions, then the Recap card. Right: the Tasks tab holds the
   tasks that came out of the meeting (#mtp-acts, filled by draw() in app.js).
   ========================================================================== */
#mtp-acts{display:none}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] #mtp-acts{display:block}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] #mtp-acts:not(:empty) + #mt-doc-tasks-list{display:none}
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] #mtp-acts:not(:empty) ~ * .mt-doc-tasks-list{display:none}
body[data-route="meetings"]:not(.pl-classic) #mt-recapcard{display:none !important}   /* the Recap card is on the left now */
.mtp-acts-h{display:flex;align-items:center;gap:8px;padding:2px 2px 10px;flex-wrap:wrap}
.mtp-acts-h span{flex:1;min-width:0}
.mtp-acts-h .btn{padding:6px 12px;font-size:var(--fs-sm);white-space:nowrap}
.mtp-pill{flex:0 0 auto;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.mtp-pill.new{color:var(--warn);background:color-mix(in srgb,var(--warn) 15%,var(--panel-2));margin-right:auto}
.mtp-pill.task{color:var(--success);background:color-mix(in srgb,var(--success) 15%,var(--panel-2))}
/* a task row becomes a small card in the narrow panel: name on top, then who, when and the buttons */
.mtp-acts .mt-act-live{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px !important;align-items:center;padding:10px !important;border-radius:12px !important}
.mtp-acts .mt-act-live > .mt-done{grid-column:1}
.mtp-acts .mt-act-live > .mt-at{grid-column:2 / -1;min-width:0 !important;width:100%;font-weight:600}
.mtp-acts .mt-act-live > span:has(.mt-ao){grid-column:1 / 3;min-width:0}
.mtp-acts .mt-act-live > span:has(.mt-ao) .mt-ao{flex:1;min-width:0;width:auto !important}
.mtp-acts .mt-act-live > .mt-addate{grid-column:3 / -1;min-width:96px !important}
/* third line: what it is on the left, delete and Make task on the right. The "open the full
   editor" arrow is left out here: once it is a task, clicking the card opens that editor. */
.mtp-acts .mt-act-live > .mtp-pill{grid-column:1 / 3;grid-row:3;justify-self:start}
.mtp-acts .mt-act-live > .mt-act-del{grid-column:3;grid-row:3;justify-self:end}
.mtp-acts .mt-act-live > .mt-mk1{grid-column:4;grid-row:3;justify-self:end;padding:5px 12px;font-size:var(--fs-sm)}
.mtp-acts .mt-act-live > .mt-full{display:none !important}
.mtp-acts .mt-act-live{margin-bottom:8px !important}
/* one way to add in Wrap up: the card's own "+ Add a task" */
body[data-route="meetings"]:not(.pl-classic)[data-mtstage="wrap"] #mt-sec-tasks:has(#mtp-acts:not(:empty)) #mt-doc-task-add{display:none}
/* A made task (Mike's screenshot, 7 Oct 2026: an empty box alone on a line, the name cut
   off, a raw date). Now the card from the mockup he picked: the name in full, then the
   owner's face and name and the due date, with what it is on the right. */
.mtp-acts .mtp-tcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:center;padding:11px 12px;border-radius:12px;margin-bottom:8px;background:var(--panel-2)}
.mtp-acts .mtp-tcard .mt-act-title{grid-column:1 / -1;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;font-weight:600;font-size:14px}
.mtp-tmeta{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden}
.mtp-tdue.late{color:var(--danger);font-weight:600}
.mtp-pill.done{color:var(--muted);background:var(--panel)}
.mtp-acts .mtp-tcard.is-done{opacity:.75}
.mtp-acts-list > .mt-acts-done{margin-top:6px}
/* the Recap card, last on the left */
.mtp-recap-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.mtp-recap-f .btn{padding:7px 14px;font-size:var(--fs-sm)}
/* decisions: the wording is editable in place */
.mt-dec-t[contenteditable="true"]{border-radius:6px;padding:1px 4px;margin:-1px -4px;outline:none;cursor:text}
.mt-dec-t[contenteditable="true"]:hover{background:var(--panel-2)}
.mt-dec-t[contenteditable="true"]:focus{background:var(--panel-2);box-shadow:0 0 0 1px var(--accent)}
/* Wrap up: one event for every task from the meeting (app.js, mtEvSet) */
.mtp-evbtn{flex:1 1 100%;display:flex;align-items:center;gap:6px;min-width:0;padding:7px 10px;border:1px dashed var(--line);border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-sm);text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mtp-evbtn:hover{border-color:var(--accent);color:var(--ink)}
.mtp-evbtn.on{border-style:solid;color:var(--ink);background:var(--panel-2)}
.mtp-evbtn b{font-weight:600}

/* ============================================================================
   MEETINGS HOME (Mike, 7 Oct 2026). Second design, from the concept he approved:
   Apple's big type, calm surfaces and segmented switch, with Airbnb's rounded
   search bar, filter chips and browsable cards. With no meeting open
   (body.mt-athome) the page is #mt-home; with one open the side list is gone
   and the meeting has the full width. Built by mtHomePaint() in app.js.
   Tokens only, so it holds in dark and light.
   ========================================================================== */
#mt-home{display:none}
/* Full width (Mike, 7 Oct 2026): the page used to stop at 1280px, which left a blank strip on
   the right under the header buttons and put the search bar off center. */
body[data-route="meetings"]:not(.pl-classic).mt-athome #mt-home{display:flex;flex-direction:column;gap:22px}
body[data-route="meetings"]:not(.pl-classic).mt-athome #mt-shell{display:none !important}
body[data-route="meetings"]:not(.pl-classic) #mt-sidebar,body[data-route="meetings"]:not(.pl-classic) #mt-expand{display:none !important}
body[data-route="meetings"]:not(.pl-classic) .mt-shell,body[data-route="meetings"]:not(.pl-classic) .mt-shell.mt-collapsed{grid-template-columns:minmax(0,1fr) !important}
.mt-back{border:0;background:transparent;color:var(--accent);font:inherit;font-size:13px;font-weight:600;padding:0 0 2px;cursor:pointer;display:block;text-align:left}
.mt-back:hover{text-decoration:underline}
#mth-body{display:flex;flex-direction:column;gap:22px;min-width:0}
.mth-open{cursor:pointer}
.mth-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mth-link{border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* search bar and chips */
.mth-search{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:7px 7px 7px 0;max-width:780px;width:100%;margin:0 auto}
.mth-search label{flex:1;min-width:0;padding:5px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:1px}
.mth-search label:nth-of-type(3){border-right:0}
.mth-search small{font-size:11.5px;font-weight:700}
.mth-search input,.mth-search select{border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;padding:0;margin:0;width:100%;min-width:0;outline:none;appearance:none;-webkit-appearance:none}
.mth-search input::placeholder{color:var(--muted)}
.mth-search select{color:var(--muted);cursor:pointer}
.mth-search label:focus-within small{color:var(--accent)}
#mth-go{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mth-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mth-chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.mth-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg,var(--panel));border-color:var(--ink)}
.mth-chip i{font-style:normal;font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;background:color-mix(in srgb,var(--warn) 22%,var(--panel-2));color:var(--warn)}
/* the wide card */
.mth-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 40px rgba(0,0,0,.22);overflow:hidden}
.mth-hero.mth-none{grid-template-columns:minmax(0,1fr)}
.mth-hl{padding:28px 30px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mth-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mth-hl h2{margin:0;font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.mth-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14.5px}
.mth-hb{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.mth-hb .btn{padding:10px 20px;font-size:14px;border-radius:999px}
.mth-pri{background:var(--ink) !important;color:var(--bg,var(--panel)) !important;border-color:var(--ink) !important}
.mth-hr{background:var(--panel-2);padding:22px 24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mth-hr h4{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.mth-still-list{display:flex;flex-direction:column;gap:12px}
.mth-li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;min-width:0}
.mth-tick{flex:0 0 18px;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--muted);background:transparent;margin-top:2px;padding:0;cursor:pointer}
.mth-tick:hover{border-color:var(--accent)}
.mth-tick.off{border-style:dashed;cursor:default}
.mth-li-t{min-width:0;cursor:pointer;overflow-wrap:anywhere}
.mth-li-t span{display:block;color:var(--muted);font-size:13px}
.mth-li-t span.late{color:var(--danger)}
.mth-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.mth-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mth-dot.ok{color:var(--success)}.mth-dot.wn{color:var(--warn)}
/* section heads + the segmented switch */
.mth-sh{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mth-sh h3{margin:0;font-size:23px;font-weight:700;letter-spacing:-.025em;flex:1 1 auto}
.mth-seg{display:inline-flex;background:var(--panel-2);border-radius:11px;padding:3px}
.mth-seg button{border:0;background:transparent;padding:6px 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.mth-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.2)}
/* the week */
.mth-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mth-days.d7,.mth-days.d14{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.mth-day{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px;min-height:150px;display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.mth-days.d7 .mth-day,.mth-days.d14 .mth-day{padding:12px;border-radius:18px;min-height:170px}
.mth-day h5{margin:0;display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:700;color:var(--muted)}
.mth-day h5 b{font-size:26px;letter-spacing:-.03em;color:var(--ink)}
.mth-days.d7 .mth-day h5 b,.mth-days.d14 .mth-day h5 b{font-size:20px}
.mth-day.today{outline:2px solid var(--ink);outline-offset:-2px}
.mth-ev{background:var(--panel-2);border:1px solid transparent;border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.mth-ev:hover,.mth-row:hover,.mth-rc:hover,.mth-pc.mth-open:hover{border-color:var(--accent)}
.mth-ev b{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mth-ev > span{font-size:12.5px;color:var(--muted)}
.mth-ev > span.mth-dot.ok{color:var(--success)}.mth-ev > span.mth-dot.wn{color:var(--warn)}
.mth-ev .mt-tag{align-self:flex-start}
.mth-rest{display:flex;flex-direction:column;gap:10px}
.mth-rest[hidden]{display:none}
.mth-nil{color:var(--muted);opacity:.75;font-size:13.5px}
.mth-more{align-self:flex-start;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.mth-more:hover{color:var(--ink)}
/* one on ones */
.mth-ppl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mth-pc{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.mth-pc b{font-size:16px;font-weight:650;overflow-wrap:anywhere}
.mth-pc > span:not(.mth-tag){color:var(--muted);font-size:13px}
.mth-tag{font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px;white-space:nowrap}
.mth-tag.fine{background:color-mix(in srgb,var(--success) 16%,var(--panel-2));color:var(--success)}
.mth-tag.due{background:color-mix(in srgb,var(--warn) 18%,var(--panel-2));color:var(--warn)}
.mth-tag.late{background:color-mix(in srgb,var(--danger) 16%,var(--panel-2));color:var(--danger)}
/* recaps + lists */
.mth-rcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mth-rc{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.mth-rc small{color:var(--muted);font-size:12.5px;font-weight:600}
.mth-rc b{font-size:18px;font-weight:650;letter-spacing:-.015em;overflow-wrap:anywhere}
.mth-rc > span{color:var(--muted);font-size:13.5px}
.mth-rc.nudge{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));background:color-mix(in srgb,var(--warn) 7%,var(--panel))}
.mth-rcf{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.mth-rcf .mth-faces{margin-left:auto}
.mth-list{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.mth-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border:1px solid transparent;border-top-color:var(--line);min-width:0}
.mth-list > .mth-row:first-child{border-top-color:transparent}
.mth-dt{flex:0 0 46px;text-align:center;line-height:1.05}
.mth-dt small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mth-dt b{font-size:21px;letter-spacing:-.03em}
.mth-mm{flex:1;min-width:0}
.mth-mm b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mth-mm span{color:var(--muted);font-size:13px}
.mth-del{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0}
.mth-row:hover .mth-del,.mth-del:focus-visible{opacity:1}
.mth-del:hover{color:var(--danger);background:var(--panel-2)}
@media (hover:none){.mth-del{opacity:1}}
@media (max-width:1100px){.mth-hero{grid-template-columns:minmax(0,1fr)}.mth-days,.mth-days.d7,.mth-days.d14,.mth-ppl{grid-template-columns:repeat(2,minmax(0,1fr))}.mth-rcs{grid-template-columns:minmax(0,1fr)}.mth-hl h2{font-size:26px}.mth-search label:nth-of-type(2){display:none}}
@media (max-width:560px){.mth-days,.mth-days.d7,.mth-days.d14,.mth-ppl{grid-template-columns:minmax(0,1fr)}.mth-day{min-height:0}.mth-search label{padding:5px 14px}}
/* Meetings home: who is in each meeting, as overlapping faces */
.mth-faces{display:inline-flex;align-items:center;flex:0 0 auto;padding-left:6px}
.mth-faces > span{margin-left:-6px;box-shadow:0 0 0 2px var(--panel)}
.mth-faces > i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-left:5px}
.mth-who{display:flex !important;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.mth-ev .mth-faces{display:flex;margin-top:6px}
.mth-ev .mth-faces > span{box-shadow:0 0 0 2px var(--panel-2)}
.mth-rc .mth-faces{display:flex;margin-top:10px}

/* The Private switch is gone (Mike, 7 Oct 2026): every meeting is private to the people in
   it, so there is nothing to switch. The button stays in the markup, never shown. */
#mt-private{display:none !important}
/* Meetings settings dialog (app.js, mtSetOpen) */
#mt-setbtn{margin-right:8px}
.mt-set select{padding:8px 10px;font-size:14px;font-weight:400;min-width:0}
.mt-set .mt-tpl-row select{flex:0 1 170px}
.mt-set-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-top:4px}
.mt-set-log{display:flex;flex-direction:column;gap:4px}
.mt-set-log summary{cursor:pointer}
/* the search field inside the pill has no box of its own (beats the app's default input style) */
.mth-search input#mth-q,.mth-search select{border:0 !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;height:auto !important;min-height:0 !important}
.mth-search input#mth-q::-webkit-search-cancel-button{-webkit-appearance:none}
/* The week: day cards size to their own meetings (two, then "N more"), not to the busiest day. */
.mth-days{align-items:start}
/* tall enough for two meetings and the "N more" line, so the days sit level until one is opened */
.mth-days .mth-day,.mth-days.d7 .mth-day,.mth-days.d14 .mth-day{min-height:340px}
@media (max-width:1100px){.mth-days .mth-day,.mth-days.d7 .mth-day,.mth-days.d14 .mth-day{min-height:0}}

/* ============================================================================
   MY TO-DO, second design (Mike, 8 Oct 2026, mockup "3 and 6"). The Apple and
   Airbnb look the Meetings home set: big type, calm rounded cards, chips. The
   Today card on top, "Coming up" with its chips on one line, then the dated work
   on the left and the Reminders panel on the right, level with the first card.
   Rows are still the old .mt2-row (status glyph, title, project, due), drawn by
   renderMyTodo in app.js; this block lays the new page around them.
   ========================================================================== */
.mtd{display:flex;flex-direction:column;gap:16px}
.mtd-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mtd-top h1{margin:0;flex:1 1 200px;font-size:38px;font-weight:700;letter-spacing:-.035em}
.mtd-top .btn{border-radius:999px;padding:10px 18px;font-size:14px}
.mtd-pri{background:var(--ink) !important;color:var(--bg,var(--panel)) !important;border-color:var(--ink) !important}
.mtd-link{border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;align-self:flex-start}
.mtd-nil{color:var(--muted);font-size:13.5px}
/* the Today card */
.mtd-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 40px rgba(0,0,0,.2);overflow:hidden}
.mtd-hero.solo{grid-template-columns:minmax(0,1fr)}
.mtd-hl{padding:22px 26px;display:flex;flex-direction:column;gap:10px;min-width:0}
.mtd-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.mtd-hl h2{margin:0;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.mtd-late{color:var(--danger);font-weight:600;font-size:13.5px}
.mtd-today{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mtd-today .mt2-row:first-child{border-top:0}
.mtd-today .mt2-row{padding:11px 14px}
.mtd-today .mt2-proj{display:none}
.mtd-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14.5px;margin-top:4px}
.mtd-ring{flex:0 0 auto;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--success) calc(var(--p,0) * 1%),var(--panel-2) 0);display:flex;align-items:center;justify-content:center}
.mtd-ring span{width:50px;height:50px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--ink)}
.mtd-hr{background:var(--panel-2);padding:18px 22px;display:flex;flex-direction:column;gap:12px;min-width:0}
.mtd-hr h4{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.mtd-mt{display:flex;gap:12px;min-width:0}
.mtd-mt small{flex:0 0 96px;color:var(--accent);font-weight:700;font-size:13px}
.mtd-mt b{display:block;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.mtd-mt span{color:var(--muted);font-size:12.5px}
/* Coming up + chips on one line, with a little air above and below (his words) */
.mtd-sh{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 0 6px}
.mtd-sh h3{margin:0;flex:0 0 auto;font-size:23px;font-weight:700;letter-spacing:-.025em}
.mtd-chips{display:flex;gap:8px;flex-wrap:wrap}
.mtd-chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.mtd-chip i{font-style:normal;font-size:12px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--panel-2);color:var(--muted)}
.mtd-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg,var(--panel));border-color:var(--ink)}
.mtd-chip[aria-pressed="true"] i{background:color-mix(in srgb,var(--bg,var(--panel)) 22%,transparent);color:inherit}
.mtd-chip.late{color:var(--danger)}
.mtd-chip.late i{background:color-mix(in srgb,var(--danger) 18%,var(--panel-2));color:var(--danger)}
/* the two columns */
.mtd-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.mtd-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.mtd .mt2-list{display:flex;flex-direction:column;gap:16px}
.mtd .mt2-sec{margin-top:0}
.mtd .mt2-card{border-radius:22px}
.mtd-dur{flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;text-align:right}
@media (min-width:900px){.mtd .mt2-wide .mt2-row{grid-template-columns:22px minmax(0,1fr) minmax(0,200px) 58px auto}}
/* Reminders */
.mtd-rem{position:sticky;top:12px;max-height:calc(100vh - 40px);overflow:auto;border-radius:22px;margin-top:var(--mtd-off,0px)}
.mtd-remh{display:flex;align-items:baseline;gap:10px;padding:16px 18px 10px}
.mtd-remh b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.mtd-remh span{color:var(--muted);font-size:13px}
.mtd-rl{display:flex;align-items:flex-start;gap:12px;padding:12px 18px;border-top:1px solid var(--line);min-width:0}
.mtd-rbox{flex:0 0 18px;width:18px;height:18px;border-radius:6px;border:1.6px solid var(--warn);background:transparent;padding:0;margin-top:2px;cursor:pointer}
.mtd-rbox:hover{background:color-mix(in srgb,var(--warn) 25%,transparent)}
.mtd-rt{flex:1;min-width:0;border:0;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mtd-rt b{display:block;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.mtd-rt > span{color:var(--muted);font-size:12.5px}
.mtd-rt .late{color:var(--danger);font-weight:600}.mtd-rt .now{color:var(--warn);font-weight:600}
.mtd-remmore{display:block;margin:10px 18px}
.mtd-remadd{display:block;width:100%;padding:12px 18px;border-top:1px solid var(--line)}
.mtd-rembtn{border:0;border-top:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.mtd-rembtn:hover{color:var(--ink)}
.mtd-remadd input{width:100%;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:14px}
.mtd-remadd input:focus{outline:none;border-color:var(--accent)}
@media (max-width:1100px){.mtd-hero{grid-template-columns:minmax(0,1fr)}.mtd-cols{grid-template-columns:minmax(0,1fr)}.mtd-rem{position:static;max-height:none;order:-1;margin-top:0}.mtd-side{position:static;max-height:none;order:-1;margin-top:0;overflow:visible}.mtd-top h1{font-size:30px}}
/* Full width (Mike, 8 Oct 2026: "It's not filling"): the page stopped at 1380px and left a
   blank strip on the right, the same thing the Meetings home did. */
#mytodo-root{max-width:none}
/* a reminder shown in the Today card says "Reminder" where a task shows its length */
.mtd-dur.rem{color:var(--warn)}
.mtd-dur i{font-style:normal;font-weight:500;opacity:.65}
@media (min-width:900px){.mtd .mt2-wide .mt2-row{grid-template-columns:22px minmax(0,1fr) minmax(0,200px) 78px auto}}

/* ══ "SEARCH OR JUMP TO" IN THE TOP BAR (Mike, 8 Oct 2026) ═══════════════════════════
   The sidebar's search button, moved up: one rounded button centred between the page name
   and the buttons on the right. It opens the Cmd K palette. On a computer the sidebar copy
   is hidden; under 900px and in the app skin this one is hidden and the sidebar one stays. */
.page-head.has-tsearch > h1{flex:1 1 0;min-width:0}
.page-head.has-tsearch > div:last-child{flex:1 1 0;justify-content:flex-end}
.jc-tsearch{flex:0 1 460px;min-width:220px;display:flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:border-color .18s ease,color .18s ease,background-color .18s ease}
.jc-tsearch:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line));color:var(--ink);background:var(--panel-2)}
.jc-tsearch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jc-tsearch-ic{display:inline-flex;flex:none}
.jc-tsearch-lbl{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-tsearch-k{flex:none;font:inherit;font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px;background:var(--panel-2)}
@media (hover:none){.jc-tsearch-k{display:none}}
@media (prefers-reduced-motion:reduce){.jc-tsearch{transition:none}}
@media (max-width:900px){.jc-tsearch{display:none}}
@media (min-width:901px){body:not(.jc-app) .sidebar .sb-search{display:none}}

/* ══ SEARCH OR JUMP TO, THE PANEL (Mike, 8 Oct 2026) ═════════════════════════════════
   Two create buttons when it opens; grouped results when you type. */
.cmdk-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:4px 2px 2px}
.cmdk-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px 12px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.cmdk-tile i{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line)}
.cmdk-tile b{font-size:14px;font-weight:600}
.cmdk-tile.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.cmdk-tile.on i{background:transparent;border-color:color-mix(in srgb,var(--bg) 40%,transparent)}
.cmdk-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 12px 4px}
.cmdk-line{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:10px;font-size:var(--fs-base);color:var(--ink);cursor:pointer}
.cmdk-line b{font-weight:600;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-line span{flex:0 1 42%;min-width:0;text-align:right;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-line.on{background:var(--ink);color:var(--bg)}
.cmdk-line.on span{color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.cmdk-note{padding:14px 12px 8px;font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:520px){.cmdk-tiles{grid-template-columns:minmax(0,1fr)}.cmdk-tile{flex-direction:row;align-items:center;padding:10px 12px}}

/* ══ THE QUICK REMINDER (Mike, 8 Oct 2026) ════════════════════════════════════════════
   One line and four day choices. Opens from Create reminder in the search panel. */
.jc-qrem{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-start;justify-content:center;background:rgba(8,10,14,.55);backdrop-filter:blur(2px)}
.jc-qrem-box{margin-top:16vh;width:min(560px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;animation:jc-qrem-in .16s cubic-bezier(.2,.7,.2,1)}
@keyframes jc-qrem-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.jc-qrem-box{animation:none}}
.jc-qrem-in{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 20px}
.jc-qrem-ic{display:inline-flex;color:var(--muted);flex:none}
.jc-qrem .jc-qrem-in input{flex:1 1 auto;min-width:0;border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;color:var(--ink);font:inherit;font-size:18px;font-weight:600;letter-spacing:-.015em;padding:6px 0}
.jc-qrem-in input::placeholder{color:var(--muted);font-weight:500}
.jc-qrem-add{flex:none;border:0;border-radius:999px;padding:9px 18px;background:var(--ink);color:var(--bg);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.jc-qrem-add[disabled]{opacity:.5;cursor:default}
.jc-qrem-ft{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px 14px 20px;border-top:1px solid var(--line)}
.jc-qrem-days{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jc-qrem-days button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.jc-qrem-days button:hover{color:var(--ink)}
.jc-qrem-days button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.jc-qrem-days input[type=date]{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px}
.jc-qrem-days input[hidden]{display:none}
.jc-qrem-more{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;padding:4px 2px}
.jc-qrem-more:hover{color:var(--ink)}
.jc-qrem-err{padding:0 20px 14px;font-size:13px;color:var(--danger)}
.jc-qrem-err[hidden]{display:none}
.jc-qrem :is(button,input[type=date]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ══ THE NEW HOME GRID (Mike, 8 Oct 2026) ═════════════════════════════════════════════
   Only applies while "Try the new Home" is on (.h2-on on #home-root). Twelve columns,
   60px rows; each tile spans what its owner dragged it to. Under 900px every tile is full
   width and as tall as its content. The classic containers are hidden, not removed: they
   hold the cards that are not on the page. */
.h2-on .hm-cc-grid,.h2-on .hm-cc-mid,.h2-on .hm-cc-wide,.h2-on .hm-cc-ops,.h2-on .hm-cc-bottom,.h2-on .hm-cc-note,.h2-on .hm-bands,.h2-on #hm-tray,.h2-on .hm-wbar{display:none !important}
.h2-wrap{margin-top:14px}
.h2-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:60px;grid-auto-flow:dense;gap:14px}
.h2-tile{position:relative;min-width:0;min-height:0;border-radius:22px}
.h2-tile > .hm-w{height:100%;margin:0;overflow:auto;border-radius:inherit}
.h2-tile > .hm-w > .card{min-height:100%;margin:0;box-sizing:border-box}
.h2-tile > .hm-w > .hm2-stats,.h2-tile > .hm-w > .hm2-next{margin:0;height:100%}
.h2-tile > .hm-w > .hm2-sec{margin-top:0}
.h2-bar,.h2-size{display:none}
.h2-edit .h2-tile{outline:1.5px dashed color-mix(in srgb,var(--ink) 28%,transparent);outline-offset:3px}
.h2-edit .h2-tile > .hm-w{pointer-events:none;opacity:.82;padding-top:40px;box-sizing:border-box}   /* room for the name pill, so it does not sit on the card's own title */
.h2-edit .h2-bar{display:flex;align-items:center;gap:6px;position:absolute;top:8px;left:8px;right:8px;z-index:3;pointer-events:none}
.h2-grip{pointer-events:auto;cursor:grab;max-width:calc(100% - 44px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--ink);color:var(--bg);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.h2-grip:active{cursor:grabbing}
.h2-x{pointer-events:auto;margin-left:auto;width:28px;height:28px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:13px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.h2-edit .h2-size{display:block;position:absolute;right:-2px;bottom:-2px;z-index:3;width:26px;height:26px;cursor:nwse-resize;touch-action:none;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);border-bottom-right-radius:22px}
.h2-tile.h2-drag{opacity:.35}
.h2-tile.h2-sizing{outline-color:var(--accent);outline-style:solid}
.h2-shelf{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--line);border-radius:18px;background:var(--panel)}
.h2-shelf[hidden]{display:none}
.h2-shelf-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.h2-shelf-h b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.h2-shelf-h span{font-size:12.5px;color:var(--muted)}
.h2-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.h2-reset{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.h2-reset:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.h2-see{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.h2-see select{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:4px 10px;font:inherit;font-size:12.5px}
.h2-chip{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.h2-chip:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.h2-empty{grid-column:1/-1;padding:28px 4px}
.h2-on :is(.h2-chip,.h2-x,.h2-grip):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:900px){
  .h2-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .h2-tile{grid-column:1 / -1 !important;grid-row:auto !important}
  .h2-tile > .hm-w{height:auto;max-height:70vh}
  .h2-edit .h2-size{display:none}
}

/* ══ MEETINGS HOME, the top squeezed (Mike, 8 Oct 2026) ═════════════════════════════════
   No search bar on the page any more; the filter chips sit on the title's line. Shown
   only on the Meetings home, never with a meeting open or in Classic. */
#mth-chips-host{display:none}
body[data-route="meetings"]:not(.pl-classic).mt-athome #mth-chips-host{display:flex;justify-content:flex-start;gap:8px;margin-left:14px;min-width:0}
body[data-route="meetings"]:not(.pl-classic).mt-athome .mt-plan-head .pl-head-l{flex:0 0 auto}   /* the title takes only its own width, so the chips sit right beside it */
/* The old "Select a meeting" box belongs to Classic only. In the new layout the home takes
   its place, so it never shows, not even in the moment before the page's script runs
   (Mike, 8 Oct 2026: it flashed for a second on load). */
body[data-route="meetings"]:not(.pl-classic) #mt-empty{display:none !important}

/* ══ MEETINGS HOME, shorter week cards (Mike, 8 Oct 2026: the height of the week cards was
   wasted space) ══ On the 5 day board each meeting is two lines, not four: name with the
   faces at the right, then the time and the agenda mark together. The day cards drop from
   340px to fit two of those and the "N more" line, so One on ones comes up onto the
   screen. The 7 and 14 day boards are too narrow for that and keep the stacked tile. */
.mth-days:not(.d7):not(.d14) .mth-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:center;padding:9px 12px}
.mth-days:not(.d7):not(.d14) .mth-ev > b{grid-column:1 / 3;grid-row:1}
.mth-days:not(.d7):not(.d14) .mth-ev > .mth-faces{grid-column:3;grid-row:1;margin-top:0;justify-self:end}
.mth-days:not(.d7):not(.d14) .mth-ev > b + span{grid-column:1;grid-row:2;white-space:nowrap}
.mth-days:not(.d7):not(.d14) .mth-ev > span.mth-dot{grid-column:2 / -1;grid-row:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mth-days:not(.d7):not(.d14) .mth-ev > .mt-tag{grid-column:1 / -1;grid-row:3}
.mth-days:not(.d7):not(.d14) .mth-day{min-height:236px}
@media (max-width:1100px){.mth-days:not(.d7):not(.d14) .mth-day{min-height:0}}

/* Forms dashboard: a Latest responses row is a button now (Mike, 11 Oct 2026). */
.fmdash-resp:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.fmdash-resp:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Team Tasks card: the note under the title is a short preview, three lines at most
   (Mike, 13 Oct 2026). A task made from a long form response used to fill the column. */
.tk-note{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere}

/* Meetings, Wrap up: a task's name is a box that wraps and grows (Mike, 13 Oct 2026). Where
   the browser can size a field to its content by itself, let it; app.js does it otherwise. */
textarea.mt-at{field-sizing:content;min-height:0}

/* Meetings, Wrap up: "Decision" sits between the bin and Make task on a suggested task
   (Mike, 13 Oct 2026). The row gains a fifth column for it. */
.mtp-acts .mt-act-live{grid-template-columns:auto minmax(0,1fr) auto auto auto}
.mtp-acts .mt-act-live > .mt-todec{grid-column:4;grid-row:3;justify-self:end;padding:5px 10px;font-size:var(--fs-sm);color:var(--muted)}
.mtp-acts .mt-act-live > .mt-todec:hover{color:var(--ink)}
.mtp-acts .mt-act-live > .mt-mk1{grid-column:5}
/* with five columns, owner takes the first three and the due date the last two, so the
   owner box keeps its width */
.mtp-acts .mt-act-live > span:has(.mt-ao){grid-column:1 / 4}
.mtp-acts .mt-act-live > .mt-addate{grid-column:4 / -1}

/* ============================================================================
   HQ REDESIGN (Mike, 14 Oct 2026). Control room home (Today) + People & access with
   person cards, the See everyone grid and the slide-over person card. Same language
   as the Meetings home: big type, calm panels, 24px cards, segmented switches, pill
   search, chips with counts. Built by renderHq / hqTodayPaint / renderHqPeople (app.js).
   Tokens only, so it holds in dark and light.
   ========================================================================== */
body.hq2 .hq-shell{gap:24px}
body.hq2 .hq-rail{flex-basis:212px}
body.hq2 .hq-rail .hq-rl{font-size:11.5px;font-weight:700;color:var(--muted-2);letter-spacing:.07em;text-transform:uppercase;padding:14px 12px 6px}
body.hq2 .hq-rail a{border-radius:12px;padding:9px 12px;font-size:14px;font-weight:500}
body.hq2 .hq-rail a.active{background:var(--panel);color:var(--ink);font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18)}
body.hq2 .hq-rail .hq-rdot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:block}
body.hq2 .hq-rail a em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:var(--warn)}
body.hq2 .hq-search{border-radius:999px;padding:8px 14px}
#hq-sec-command:not([style*="none"]),#hq-sec-people:not([style*="none"]),#hqp-root{display:flex;flex-direction:column;gap:18px;min-width:0}
.hq2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hq2-head h2{margin:0;font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.hq2-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.hq2-status{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 20px;font-size:13.5px}
.hq2-status b{font-size:14.5px}
.hq2-status .btn{margin-left:auto}
.hq2-sp{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.hq2-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--success)}
.hq2-dot.w{background:var(--warn)}.hq2-dot.b{background:var(--danger)}
.hq2-sm{padding:6px 13px !important;font-size:12.5px !important;border-radius:999px !important;white-space:nowrap}
.hq2-g2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.hq2-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px 24px;min-width:0}
.hq2-card h3{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--muted)}
.hq2-item{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;min-width:0}
.hq2-card h3 + .hq2-item{border-top:0;padding-top:0}
a.hq2-item:hover b{text-decoration:underline;text-underline-offset:3px}
.hq2-sev{width:4px;align-self:stretch;border-radius:4px;background:var(--warn);flex:0 0 4px}
.hq2-sev.b{background:var(--danger)}.hq2-sev.i{background:var(--accent)}
.hq2-n{font-size:24px;font-weight:800;letter-spacing:-.03em;min-width:40px;font-variant-numeric:tabular-nums}
.hq2-t{flex:1;min-width:0;display:flex;flex-direction:column}
.hq2-t b{font-size:14.5px;overflow-wrap:anywhere}
.hq2-t span{font-size:12.5px;color:var(--muted)}
.hq2-empty{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:4px 0}
.hq2-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:13px}
.hq2-link{border:0;background:transparent;padding:0;color:var(--accent);font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.hq2-link:hover{text-decoration:underline}
.hq2-bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hq2-bx{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.hq2-bx:hover{border-color:var(--muted-2)}
.hq2-bx:focus-visible,.hqp-person:focus-visible,.hqp-pr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hq2-bxh{display:flex;align-items:center;gap:10px}
.hq2-bxh b{font-size:15.5px}
.hq2-g{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px;flex:0 0 34px}
.hq2-bx ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted)}
.hq2-bx li{display:flex;justify-content:space-between;gap:10px}
.hq2-bx li span:last-child{color:var(--ink);font-weight:600;text-align:right}
.hq2-bx li span.w{color:var(--warn)}
.hq2-lnk{font-size:13px;font-weight:600;color:var(--accent);margin-top:auto}
/* People & access */
.hqp-seg{display:inline-flex;background:var(--panel-2);border-radius:13px;padding:3px;gap:2px;flex-wrap:wrap}
.hqp-seg button{border:0;background:transparent;border-radius:10px;padding:7px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.hqp-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.hqp-seg button:disabled{cursor:not-allowed;opacity:.55}
.hqp-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.hqp-chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.hqp-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg,var(--panel));border-color:var(--ink)}
.hqp-chip i{font-style:normal;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 7px;background:var(--panel-2);color:var(--muted)}
.hqp-chip i.w{background:color-mix(in srgb,var(--warn) 22%,var(--panel-2));color:var(--warn)}
.hqp-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);align-items:center;justify-content:center}
.hqp-legend > span{display:inline-flex;gap:6px;align-items:center}
.hqp-wsd{display:flex;gap:4px;color:var(--muted)}
.hqp-wsd i{width:9px;height:9px;border-radius:50%;display:block;border:1.5px solid currentColor}
.hqp-wsd i.f{background:currentColor}
.hqp-wsd i.h{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.hqp-wsd i.n{opacity:.25}
.hqp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.hqp-person{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:9px;align-items:flex-start;cursor:pointer;text-align:left;min-width:0;font:inherit;color:var(--ink)}
.hqp-person:hover{border-color:var(--muted-2)}
.hqp-person b{font-size:15px;overflow-wrap:anywhere}
.hqp-r{font-size:12px;color:var(--muted);margin-top:-6px;overflow-wrap:anywhere}
.hqp-tags{display:flex;gap:6px;flex-wrap:wrap}
.hqp-lvl{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--panel-2);color:var(--muted)}
.hqp-lvl.a{background:color-mix(in srgb,var(--accent) 20%,var(--panel-2));color:var(--accent)}
.hqp-lvl.s{background:color-mix(in srgb,var(--ws-care) 18%,var(--panel-2));color:var(--ws-care)}
.hqp-lvl.w{background:color-mix(in srgb,var(--warn) 18%,var(--panel-2));color:var(--warn)}
.hqp-mapwrap{overflow-x:auto;border-radius:24px;border:1px solid var(--line);background:var(--panel)}
.hqp-map{border-collapse:collapse;width:100%;min-width:860px;font-size:13.5px}
.hqp-map th{font-size:12px;font-weight:700;color:var(--muted);text-align:center;padding:14px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.hqp-map th:first-child,.hqp-map td:first-child{text-align:left;padding-left:22px}
.hqp-map th i{display:block;width:8px;height:8px;border-radius:50%;margin:0 auto 6px}
.hqp-map td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center}
.hqp-map tr:last-child td{border-bottom:0}
.hqp-pr{cursor:pointer}
.hqp-pr:hover td{background:color-mix(in srgb,var(--panel-2) 60%,transparent)}
.hqp-nm{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.hqp-nm small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.hqp-nm small .w{color:var(--warn)}
.hqp-cell{display:inline-flex;align-items:center;justify-content:center;min-width:60px;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;border:1px solid transparent}
.hqp-cell.all{color:#fff}
.hqp-cell.none{color:var(--muted-2);font-weight:500}
.hqp-legend .hqp-cell{min-width:0}
.hqp-map tr.hqp-grp td{background:var(--panel-2);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;padding:8px 22px;text-align:left}
/* round two (14 Oct 2026): directory kinds, card tabs, contact fields, elders, guests, Add someone */
.hqp-hacts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.hqp-pri{background:var(--ink);color:var(--bg,var(--panel));border-color:var(--ink);border-radius:999px}
.hqp-kinds{display:flex;justify-content:center}
.hqp-kn{font-weight:500;color:var(--muted-2);margin-left:2px}
.hqp-center{text-align:center;max-width:640px;margin:0 auto}
.hqp-person.sel,.hqp-contact.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.hqp-lvl.o{background:var(--ink);color:var(--bg,var(--panel))}
.hqp-lvl.e{background:color-mix(in srgb,#b08a4a 20%,var(--panel-2));color:#c79d55}
.hqp-clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.hqp-contact{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 14px;min-width:0;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.hqp-contact:hover{border-color:var(--muted-2)}
.hqp-contact:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqp-cav{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;background:var(--muted-2)}
.hqp-cav.e{background:#b08a4a}
.hqp-cav.lg{flex-basis:60px;width:60px;height:60px;font-size:22px}
.hqp-ct{flex:1;min-width:0;display:flex;flex-direction:column}
.hqp-ct b{font-size:14px;overflow-wrap:anywhere}
.hqp-ct span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.hqp-tabs{align-self:flex-start}
.hqp-slrow{display:flex;align-items:center;gap:8px}
.hqp-info{border:0;background:var(--panel-2);color:var(--muted);width:20px;height:20px;border-radius:50%;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;line-height:20px;padding:0;text-transform:none;letter-spacing:0}
.hqp-info[aria-expanded="true"]{background:var(--accent);color:#fff}
.hqp-pop{background:var(--panel-2);border-radius:16px;padding:12px 14px;font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.hqp-pop b{color:var(--ink)}
.hqp-fl{display:flex;flex-direction:column;gap:6px}
.hqp-in,.hqp-sheet input.hqp-in,.hqp-sheet select.hqp-in{width:100%;background:var(--panel-2) !important;border:1px solid transparent !important;border-radius:14px !important;padding:10px 14px !important;color:var(--ink);font:inherit;font-size:14px;outline:none;box-shadow:none !important;min-width:0}
.hqp-in:focus{border-color:var(--accent) !important}
.hqp-inrow{display:flex;align-items:center;gap:10px;min-width:0}
.hqp-inrow .hqp-in{flex:1}
.hqp-ro{background:var(--panel-2);border-radius:14px;padding:10px 14px;font-size:14px;justify-content:space-between;flex-wrap:wrap}
.hqp-ro > span:first-child{overflow-wrap:anywhere;min-width:0}
.hqp-src{font-size:11px;font-weight:700;color:var(--muted);background:var(--panel-2);border-radius:999px;padding:3px 9px;white-space:nowrap}
.hqp-ok{color:var(--success);font-weight:600;font-size:13px}
.hqp-kv{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.hqp-kv:first-child{border-top:0}
.hqp-kv span{color:var(--muted)}
.hqp-danger{border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.hqp-danger p{margin:0;font-size:13px;color:var(--muted);flex:1 1 200px}
.btn.hqp-del{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line));border-radius:999px;background:transparent}
.btn.hqp-sm{padding:5px 12px;font-size:12.5px;border-radius:999px}
.hqp-kindgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hqp-kindc{border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;cursor:pointer;background:var(--panel);text-align:left;font:inherit;color:var(--ink);min-width:0}
.hqp-kindc b{font-size:14px}
.hqp-kindc span{font-size:12px;color:var(--muted)}
.hqp-kindc[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.hqp-check{display:flex;gap:10px;align-items:center;font-size:13.5px;cursor:pointer}
.hqp-ph{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:left !important}
/* the person card */
.hqp-scrim{position:fixed;inset:0;background:rgba(5,7,10,.5);z-index:900}
.hqp-sheet{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--panel);border-left:1px solid var(--line);box-shadow:-18px 0 40px rgba(0,0,0,.28);z-index:901;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.hqp-scrim[hidden],.hqp-sheet[hidden]{display:none !important}
body.hqp-lock{overflow:hidden}
.hqp-scroll{overflow-y:auto;padding:22px 24px 28px;display:flex;flex-direction:column;gap:18px;flex:1;min-height:0}
.hqp-top{display:flex;gap:14px;align-items:center}
.hqp-top > div{min-width:0}
.hqp-top h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.hqp-top span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.hqp-x{margin-left:auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px}
.hqp-note{align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-radius:999px;padding:5px 12px}
.hqp-blk{display:flex;flex-direction:column;gap:8px}
.hqp-sl{font-size:12px;font-weight:700;color:var(--muted-2);letter-spacing:.06em;text-transform:uppercase}
.hqp-ws{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.hqp-wsh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hqp-wsn{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;flex:1;min-width:120px}
.hqp-wsn i{width:10px;height:10px;border-radius:50%;display:block}
.hqp-pages{display:flex;flex-wrap:wrap;gap:6px}
.hqp-ws .hqp-pages,.hqp-ws .hqp-hint{padding-left:19px}
.hqp-pg{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 11px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.hqp-pg[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.hqp-hint{font-size:12.5px;color:var(--muted);margin:0}
.hqp-hint.w{color:var(--warn)}
.hqp-foot{border-top:1px solid var(--line);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hqp-toast{font-size:12.5px;color:var(--success);font-weight:600}
@media (prefers-reduced-motion:no-preference){.hqp-sheet:not([hidden]){animation:hqpSlide .28s cubic-bezier(.2,.7,.2,1)}}
@keyframes hqpSlide{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
@media (max-width:1000px){.hq2-g2{grid-template-columns:minmax(0,1fr)}.hq2-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){body.hq2 .hq-rail .hq-rl{display:none}body.hq2 .hq-shell{align-items:stretch}body.hq2 .hq-main{width:100%;max-width:100%}}
@media (max-width:640px){.hq2-bento{grid-template-columns:minmax(0,1fr)}.hq2-status{border-radius:22px}.hq2-status .btn{margin-left:0}}
/* app skin: keep the card above the native tab bar */
body.jc-app .hqp-sheet{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
/* Data & connections (14 Oct 2026): needs list, sync bar, connection tiles, tools, and the
   card. The card reuses the People card shell (.hqp-sheet); tools open it wider. */
#hqd-root{display:flex;flex-direction:column;gap:18px;min-width:0}
.hqd-needs{display:flex;flex-direction:column;gap:10px}
.hqd-need{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:14px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hqd-need .hq2-t{min-width:220px}
.hqd-clear{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px 18px}
.hqd-sync{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.hqd-sync-l{display:flex;flex-direction:column;gap:6px;min-width:0}
.hqd-sync-l b{font-size:15.5px}
.hqd-sync-r{display:flex;gap:8px;flex-wrap:wrap}
.hqd-prog{height:8px;background:var(--panel-2);border-radius:6px;overflow:hidden;margin-top:4px}
.hqd-prog i{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.hqd-grp{display:flex;flex-direction:column;gap:10px}
.hqd-grp-h{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.hqd-grp-h:after{content:"";flex:1;height:1px;background:var(--line)}
.hqd-grp-h span{text-transform:none;letter-spacing:0;font-weight:500}
.hqd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.hqd-tile{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;min-width:0;font:inherit;color:var(--ink)}
.hqd-tile:hover{border-color:var(--muted-2)}
.hqd-tile.bad{border-color:color-mix(in srgb,var(--danger) 50%,var(--line))}
.hqd-tile:focus-visible,.hqd-tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqd-tile-h{display:flex;align-items:center;gap:10px}
.hqd-tile-h b{font-size:14.5px;flex:1;min-width:0}
.hqd-meta{font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.hqd-g{width:36px;height:36px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px;flex:0 0 36px}
.hqd-g.lg{width:48px;height:48px;flex-basis:48px;font-size:16px;border-radius:14px}
.hqd-pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:color-mix(in srgb,var(--success) 18%,var(--panel-2));color:var(--success);white-space:nowrap}
.hqd-pill.w{background:color-mix(in srgb,var(--warn) 18%,var(--panel-2));color:var(--warn)}
.hqd-pill.b{background:color-mix(in srgb,var(--danger) 18%,var(--panel-2));color:var(--danger)}
.hqd-pill.r{background:var(--accent-soft);color:var(--accent)}
.hqd-pill.n{background:var(--panel-2);color:var(--muted)}
.hqd-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hqd-tool{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;min-width:0;font:inherit;color:var(--ink)}
.hqd-tool:hover{border-color:var(--muted-2)}
.hqd-tool b{font-size:14.5px}
.hqd-tool span{font-size:12.5px;color:var(--muted)}
.hqd-tool .hqd-lnk{font-weight:600;color:var(--accent);margin-top:auto}
.hqd-err{background:color-mix(in srgb,var(--danger) 10%,var(--panel-2));border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));border-radius:16px;padding:12px 14px;font-size:13px}
.hqd-err code{display:block;margin-top:6px;font-size:12px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;background:transparent;padding:0}
.hqd-feeds{display:flex;flex-wrap:wrap;gap:6px}
.hqd-feeds span{font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.hqd-srcs{display:flex;flex-direction:column}
.hqd-srcs label{display:flex;gap:10px;align-items:center;font-size:13.5px;padding:7px 0;border-top:1px solid var(--line);cursor:pointer}
.hqd-srcs label:first-child{border-top:0}
.hqp-sheet.hqd-wide{width:min(760px,100%)}
#hqd-tool-slot .card,#hqd-setup-slot .card{margin:0;border-radius:18px}
#hqd-tool-slot{display:flex;flex-direction:column;gap:14px;min-width:0}
@media (max-width:1000px){.hqd-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hqd-tools{grid-template-columns:minmax(0,1fr)}.hqd-sync{grid-template-columns:minmax(0,1fr)}}
/* Care settings (14 Oct 2026): journey cards drawn as timelines, the journey editor, Care
   calling and Notes cards. Reuses the Data page's needs list and the People card shell. */
#hqc-root{display:flex;flex-direction:column;gap:18px;min-width:0}
.hqc-eb{color:var(--ws-care,#e0483c)}
.hqc-jgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hqc-jc{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;text-align:left;cursor:pointer;min-width:0;font:inherit;color:var(--ink)}
.hqc-jc:hover{border-color:var(--muted-2)}
.hqc-jc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqc-jc.off{opacity:.62}
.hqc-jc.hqc-new{border-style:dashed;align-items:center;justify-content:center;color:var(--accent);font-weight:700;min-height:140px}
.hqc-jh{display:flex;align-items:center;gap:10px}
.hqc-jh b{flex:1;min-width:0;font-size:16px}
.hqc-sub{font-size:12.5px;color:var(--muted)}
.hqc-tl{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:4px;padding-top:4px}
.hqc-tl:before{content:"";position:absolute;left:14px;right:14px;top:18px;height:2px;background:var(--line)}
.hqc-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;flex:1}
.hqc-st small{font-size:11px;color:var(--muted);white-space:nowrap}
.hqc-act{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;color:#fff;font-size:11px;font-weight:800;flex:0 0 28px}
.hqc-act.more{background:var(--panel-2);color:var(--muted)}
.hqc-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.hqc-card{display:flex;flex-direction:column;gap:12px}
.hqc-ch{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hqc-ch h3{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.hqc-steps{display:flex;gap:10px;flex-wrap:wrap}
.hqc-step{flex:1;min-width:150px;background:var(--panel-2);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.hqc-step b{font-size:14px}
.hqc-step span{color:var(--muted)}
.hqc-step .n{font-size:11.5px;font-weight:800;color:var(--ws-care,#e0483c)}
.hqc-sheet{width:min(540px,100%)}
.hqc-swrow{display:flex;align-items:center;gap:12px;font-size:14px}
.hqc-swrow > span{flex:1;min-width:0;display:flex;flex-direction:column}
.hqc-swrow b{font-weight:600}
.hqc-swrow small{font-size:12.5px;color:var(--muted)}
.hqc-sw{width:42px;height:24px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);position:relative;flex:0 0 42px;cursor:pointer;padding:0}
.hqc-sw:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:left .2s cubic-bezier(.2,.7,.2,1)}
.hqc-sw[aria-checked="true"]{background:var(--success);border-color:var(--success)}
.hqc-sw[aria-checked="true"]:after{left:20px;background:#fff}
.hqc-sw:disabled{opacity:.45;cursor:not-allowed}
.hqc-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqc-vsteps{display:flex;flex-direction:column}
.hqc-vstep{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-bottom:14px}
.hqc-vstep:not(:last-child):before{content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;background:var(--line)}
.hqc-vbx{background:var(--panel-2);border-radius:16px;padding:10px 12px;display:grid;grid-template-columns:96px minmax(0,1fr) 28px;gap:8px;align-items:center;min-width:0}
.hqc-vbx .hqp-in,.hqc-sheet .hqc-vbx input.hqp-in,.hqc-sheet .hqc-vbx select.hqp-in{background:var(--panel) !important;padding:7px 10px !important;border-radius:10px !important;font-size:13.5px}
.hqc-vbx .hqc-full{grid-column:1 / -1}
.hqc-day{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.hqc-day input{width:52px !important;text-align:center}
.hqc-rm{border:0;background:transparent;color:var(--muted-2);cursor:pointer;font-size:18px;padding:0}
.hqc-ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.hqc-slot{display:flex;flex-direction:column;gap:14px}
.hqc-slot .card{margin:0;border-radius:18px}
@media (max-width:820px){.hqc-jgrid,.hqc-row2{grid-template-columns:minmax(0,1fr)}}
/* See everyone grid key (14 Oct 2026): neutral samples, each meaning in words, the
   instruction on its own line. */
.hqp-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 18px;font-size:13.5px;color:var(--ink)}
.hqp-key-t{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.hqp-key-i{display:inline-flex;align-items:center;gap:8px}
.hqp-key .hqp-key-s{min-width:0}
.hqp-key .hqp-cell.all.hqp-key-s{background:var(--ink);color:var(--bg,var(--panel))}
.hqp-key .hqp-key-o{border-color:var(--muted);color:var(--ink)}
.hqp-key .hqp-cell.none.hqp-key-s{border:1px dashed var(--line);color:var(--muted)}
.hqp-key-n{flex-basis:100%;font-size:12.5px;color:var(--muted)}
/* Communications, Social, Mission Control settings (20 Oct 2026). Reuse the needs list,
   card shell and slide-over from People / Data / Care. */
#hqm-root,#hqs-root,#hqx-root{display:flex;flex-direction:column;gap:18px;min-width:0}
.hqm-basics{display:flex;flex-direction:column;gap:12px}
.hqm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hqm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hqm-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;text-align:left;cursor:pointer;min-width:0;font:inherit;color:var(--ink)}
.hqm-card:hover{border-color:var(--muted-2)}
.hqm-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqm-card b{font-size:16px}
.hqm-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.hqm-kv span:last-child{color:var(--ink);text-align:right;overflow-wrap:anywhere;min-width:0}
.hqm-mail{background:var(--panel-2);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:9px;font-size:13.5px;min-width:0}
.hqm-from{display:flex;gap:10px;align-items:center;min-width:0}
.hqm-from > div{min-width:0}
.hqm-from b{display:block;font-size:14px}
.hqm-from small{color:var(--muted);overflow-wrap:anywhere}
.hqm-av{width:34px;height:34px;border-radius:50%;background:#8a6df0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 34px}
.hqm-subj{font-weight:700;font-size:15px;overflow-wrap:anywhere}
.hqm-body{background:var(--panel);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:6px}
.hqm-body i{display:block;height:8px;border-radius:4px;background:var(--line)}
.hqm-foot{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;overflow-wrap:anywhere}
.hqm-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.hqm-fields{display:flex;flex-direction:column;gap:12px;min-width:0}
.hqm-pvw{display:flex;flex-direction:column;gap:8px;position:sticky;top:0;min-width:0}
textarea.hqp-in{resize:vertical;min-height:64px;font:inherit}
.hqs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hqs-min{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;text-align:left;cursor:pointer;min-width:0;font:inherit;color:var(--ink)}
.hqs-min:hover{border-color:var(--muted-2)}
.hqs-min:focus-visible,.hqs-voice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqs-min b{font-size:17px}
.hqs-accts{display:flex;flex-wrap:wrap;gap:10px}
.hqs-acct{position:relative;width:46px;height:46px;border-radius:50%;background:var(--panel-2);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:0 0 46px}
.hqs-acct img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hqs-acct.sm{width:36px;height:36px;flex-basis:36px;font-size:13px}
.hqs-acct.off{opacity:.4}
.hqs-acct.add{border:1.5px dashed var(--line);background:transparent;color:var(--muted-2);font-size:18px}
.hqs-pb{position:absolute;right:-3px;bottom:-3px;min-width:19px;height:19px;padding:0 3px;border-radius:999px;border:2px solid var(--panel);font-size:9px;font-weight:800;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.hqs-mrow{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.hqs-mrow b{color:var(--ink);font-weight:600;font-size:13px}
.hqs-mrow b.w{color:var(--warn)}
.hqs-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.hqs-day{background:var(--panel-2);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;gap:6px;min-height:118px;min-width:0}
.hqs-day b{font-size:12.5px;text-align:center;color:var(--muted)}
.hqs-slot{background:color-mix(in srgb,#c45b9c 22%,var(--panel));border:0;border-radius:10px;padding:6px 4px;font:inherit;font-size:12px;font-weight:700;text-align:center;cursor:pointer;color:var(--ink)}
.hqs-slot:hover{text-decoration:line-through}
.hqs-slot.add{background:transparent;border:1px dashed var(--line);color:var(--muted-2);font-weight:500}
.hqs-slot.add:hover{text-decoration:none;color:var(--ink)}
.hqs-time{padding:5px 6px !important;font-size:12px !important;border-radius:10px !important}
.hqs-voice{text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.hqs-voice b{font-size:16px}
.hqs-vbox{background:var(--panel-2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.hqs-vbox b{font-size:14px}
.hqs-chips{display:flex;flex-wrap:wrap;gap:6px}
.hqs-chips span{font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:4px 11px}
.hqs-chips span.no{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.hqs-bml{flex-direction:row !important;align-items:center;gap:14px;flex-wrap:wrap;display:flex}
.hqs-bml > div{flex:1;min-width:220px}
.hqs-bml h3{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--ink)}
.hqs-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.hqs-row:first-child{border-top:0}
.hqs-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.hqs-rt b{font-size:14px;overflow-wrap:anywhere}
.hqs-rt span{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.hqx-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hqx-bx{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;min-width:0;font:inherit;color:var(--ink)}
.hqx-bx:hover,.hqx-card:hover{border-color:var(--muted-2)}
.hqx-bx:focus-visible,.hqx-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hqx-bx b,.hqx-card b{font-size:15px}
.hqx-bx ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.hqx-bx li{display:flex;justify-content:space-between;gap:8px}
.hqx-bx li span:last-child{color:var(--ink);font-weight:600;text-align:right}
.hqx-card{text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.hqx-cols{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.hqx-colm{flex:0 0 96px;background:var(--panel-2);border-radius:12px;padding:8px;font-size:12px;font-weight:700;display:flex;flex-direction:column;gap:6px;overflow-wrap:anywhere}
.hqx-colm i{display:block;height:14px;border-radius:6px;background:var(--panel)}
.hqx-colm.done{outline:1.5px solid var(--success)}
.hqx-kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.hqx-kv span:first-child{color:var(--muted)}
.hqx-kv span:last-child{text-align:right}
.hqx-tree{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.hqx-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.hqx-kids{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;padding-top:14px;border-top:2px solid var(--line)}
.hqx-node{display:inline-flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:999px;padding:4px 12px 4px 4px;font-size:13px;font-weight:600;white-space:nowrap}
@media (max-width:1000px){.hqm-grid{grid-template-columns:minmax(0,1fr)}.hqx-g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hqm-cards,.hqs-grid,.hqm-split,.hqx-g3{grid-template-columns:minmax(0,1fr)}.hqs-week{grid-template-columns:repeat(4,minmax(0,1fr))}.hqm-pvw{position:static}}
/* Any HQ slide-over card open (People, Data, Care, Comms, Social, Mission Control all set
   body.hqp-lock): hide the floating Pulse button so it never covers the card's Save /
   Done buttons (Mike, 20 Oct 2026). It comes back when the card closes. */
body.hqp-lock .pulse-fab{display:none !important}
/* Automations (20 Oct 2026): follow-up rules, task rules as sentences, and the borrowed
   rule builder inside the New rule card. */
#hqa-root{display:flex;flex-direction:column;gap:18px;min-width:0}
.hqa-fu{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.hqa-fu:first-of-type{border-top:0}
.hqa-fu .hq2-t{min-width:200px}
.hqa-fu .hq2-t span .w{color:var(--warn)}
.hqa-who{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.hqa-who select.hqp-in{width:auto;padding:6px 10px !important;border-radius:10px !important;font-size:13px}
.hqa-confirm{background:color-mix(in srgb,var(--warn) 12%,var(--panel-2));border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.hqa-confirm span{flex:1;min-width:200px}
.hqa-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hqa-rule{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hqa-rule.off{opacity:.6}
.hqa-rn{font-size:13px;color:var(--muted)}
.hqa-sent{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hqa-tok{display:inline-flex;align-items:center;border-radius:10px;padding:3px 10px;font-weight:700;font-size:13.5px;overflow-wrap:anywhere}
.hqa-tok.when{background:color-mix(in srgb,var(--accent) 18%,var(--panel-2))}
.hqa-tok.then{background:color-mix(in srgb,var(--success) 18%,var(--panel-2))}
.hqa-tok.scope{background:var(--panel-2);color:var(--muted);font-weight:600;font-size:12.5px}
.hqa-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hqa-builder .card{margin:0;border-radius:18px}
.hqa-builder select,.hqa-builder input{border-radius:10px !important}
@media (max-width:760px){.hqa-rules{grid-template-columns:minmax(0,1fr)}}
/* Who oversees whom (21 Oct 2026): one block per top leader, people on connector lines,
   nested leaders indented. Replaces the centred rows (.hqx-tree / .hqx-kids). */
.hqx-org{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start;text-align:left}
.hqx-team{background:var(--panel-2);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.hqx-lead{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;min-width:0}
.hqx-lead small{margin-left:auto;font-weight:500;color:var(--muted);font-size:12px;white-space:nowrap}
.hqx-ul{list-style:none;margin:0;padding:0 0 0 13px}
.hqx-ul li{position:relative;padding:4px 0 4px 18px}
.hqx-ul li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px solid var(--line)}
.hqx-ul li:last-child::before{bottom:auto;height:16px}
.hqx-ul li::after{content:"";position:absolute;left:0;top:16px;width:13px;border-top:2px solid var(--line)}
.hqx-person{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.hqx-person small{font-size:11px;font-weight:700;color:var(--muted);background:var(--panel);border-radius:999px;padding:1px 7px}