/* Main menu drawn by app/sidebar-nav.js: section headings, rows, the pinned
   Settings row, the Resources sub-menus, page tabs, the collapsed rail, the
   Tools panel and the mobile drawer. Loaded after extensions.css so that file does
   not grow. */

.app-shell{grid-template-columns:248px minmax(0,1fr)}
.app-shell.sidebar-collapsed{grid-template-columns:64px minmax(0,1fr)}
/* Trimmed so the Work and Branches rows, the two folded headings and three
   starred events (one name on two lines) fit a 790px-tall window, a 13-inch
   laptop, above the pinned Settings row; opening the folded sections scrolls
   the menu. Rows stay 32px with no gaps. */
.sidebar{padding:16px 14px 10px}
.sidebar .brand{min-height:0;padding-bottom:10px}
.sidebar #primaryNav{gap:0}

/* Section headings and rows */
.sidebar-section[hidden],.sidebar-section-heading[hidden],.sidebar .sidebar-row[hidden]{display:none!important}
.sidebar .sidebar-section-heading{margin:0;padding:10px 10px 4px;color:rgba(255,255,255,.46);font:600 11px/1.3 "Poppins",sans-serif;letter-spacing:.08em;text-transform:uppercase}
/* People & sponsors and Resources fold under their heading; a folded section
   still shows its lit row. The rail shows every icon whatever is folded. */
.sidebar nav .sidebar-section-toggle{display:flex;gap:6px;align-items:center;justify-content:space-between;width:100%;min-height:0;border:0;border-radius:6px;background:transparent;box-shadow:none;text-align:left;cursor:pointer}
.sidebar nav .sidebar-section-toggle:hover{background:transparent;color:rgba(255,255,255,.8)}
.sidebar .sidebar-section-toggle:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sidebar nav .sidebar-section-toggle span{width:auto;color:inherit;font:inherit;letter-spacing:inherit;text-align:left}
.sidebar nav .sidebar-section-toggle .sidebar-section-chevron{display:inline-block;font-size:15px;line-height:1;letter-spacing:0;transform:rotate(90deg);transition:transform .15s}
.sidebar nav .sidebar-section-folded .sidebar-section-chevron{transform:none}
.sidebar .sidebar-section-folded .sidebar-row:not(.active){display:none}
.sidebar .sidebar-row{position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:32px;margin:0;padding:0 10px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:rgba(255,255,255,.8);font:500 14px/1.25 "Bricolage Grotesque",sans-serif;text-align:left}
a.sidebar-row{text-decoration:none;cursor:pointer}
.sidebar .sidebar-row:hover,.sidebar .sidebar-row.open{background:rgba(255,255,255,.06);color:#fff}
.sidebar .sidebar-row:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sidebar .sidebar-row.active{background:rgba(255,255,255,.1);box-shadow:none;color:#fff}
.sidebar .sidebar-row.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-on-dark,#ff2365)}
.sidebar .sidebar-row-icon{flex:none;width:18px;height:18px;color:#c9c9cf}
.sidebar .sidebar-row.active .sidebar-row-icon{color:var(--accent-on-dark,#ff2365)}
/* Branches rows: each branch's own shape in its colour, the size of an icon */
.sidebar .sidebar-row-shape{display:block;object-fit:contain}
.sidebar .sidebar-row-label{flex:1;min-width:0;width:auto;overflow:hidden;color:inherit;font:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.sidebar .sidebar-row-trail{width:auto;color:rgba(255,255,255,.46);font-size:15px;line-height:1}
.sidebar-pinned{flex:0 0 auto;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}

/* The profile (#accountChip, moved from the top bar): the bottom-left of the
   menu under Settings, as the owner's mockup draws it: photo or initials in a
   52px circle, first name, role underneath. It still opens Settings. */
.sidebar .account-chip{display:grid;flex:0 0 auto;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:12px;position:static;width:100%;max-width:none;min-height:0;margin:0;padding:12px 10px 4px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:#fff;text-align:left}
.sidebar .account-chip:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar .account-chip:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sidebar .account-chip #accountInitials,.sidebar .account-chip.signed-in #accountInitials{display:grid;grid-row:1/3;place-items:center;width:52px;height:52px;border-radius:50%;background-color:#ffdae8;color:#2d2d2f;font:700 16px/1 "Poppins",sans-serif}
.sidebar .account-chip #accountInitials.has-photo{color:transparent}
.sidebar .account-chip strong{display:block;align-self:end;min-width:0;overflow:hidden;color:#fff;font:600 14px/1.25 "Poppins",sans-serif;text-overflow:ellipsis;white-space:nowrap}
.sidebar .account-chip small{display:block;align-self:start;min-width:0;overflow:hidden;color:rgba(255,255,255,.46);font:500 12px/1.3 "Bricolage Grotesque",sans-serif;text-overflow:ellipsis;white-space:nowrap}
.sidebar .account-chip:has(small[hidden]) strong{grid-row:1/3;align-self:center}
.sidebar .account-chip small[hidden]{display:none}

/* Logo: the white Workgroup logo file at 174px (owner's mockup). */
.sidebar .brand-logo{width:174px;max-width:100%}

/* On the event page the lit Events row takes the event's branch colour, as
   the header does (white on Legal and CFO, #2d2d2f on HR and CMO, grey for
   an unknown branch), and on a wide screen runs to the menu's edge so it
   joins the header. A lit starred event keeps its own look. */
body[data-event-page]{--menu-event:#6b6b70;--menu-event-ink:#fff}
body[data-event-page][data-branch-theme="legal"]{--menu-event:#0356fc}
body[data-event-page][data-branch-theme="cfo"]{--menu-event:#7b0aec}
body[data-event-page][data-branch-theme="hr"]{--menu-event:#fe7615;--menu-event-ink:#2d2d2f}
body[data-event-page][data-branch-theme="cmo"]{--menu-event:#58d994;--menu-event-ink:#2d2d2f}
body[data-event-page] .sidebar .sidebar-row-events.active{background:var(--menu-event);color:var(--menu-event-ink);font-weight:600}
body[data-event-page] .sidebar .sidebar-row-events.active::before{content:none}
body[data-event-page] .sidebar .sidebar-row-events.active .sidebar-row-icon{color:inherit}
@media(min-width:761px){
  .app-shell:not(.sidebar-collapsed) .sidebar #primaryNav{margin-right:-14px;padding-right:19px}
  body[data-event-page] .app-shell:not(.sidebar-collapsed) .sidebar .sidebar-row-events.active{width:calc(100% + 19px);margin-right:-19px;border-radius:9px 0 0 9px}
}

/* Top of the menu, no heading: up to four events (a producer's own, else starred) in date order, each with its branch dot */
#primaryNav .starred-events-nav{display:grid;gap:0;margin:0;padding:0 0 2px;border:0}
#primaryNav .starred-events-nav[hidden]{display:none!important}
#primaryNav .starred-event-nav-button{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:32px;padding:5px 10px;border:0;border-radius:9px;background:transparent;box-shadow:none;color:rgba(255,255,255,.8);font:500 14px/1.25 "Bricolage Grotesque",sans-serif;text-align:left}
#primaryNav .starred-event-nav-button:hover{background:rgba(255,255,255,.06);color:#fff}
#primaryNav .starred-event-nav-button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
#primaryNav .starred-event-nav-button.active{background:rgba(255,255,255,.1);box-shadow:none;color:#fff}
#primaryNav .starred-event-nav-button.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-on-dark,#ff2365)}
#primaryNav .starred-event-nav-button b{flex:1;min-width:0;overflow:visible;color:inherit;font:inherit;white-space:normal;overflow-wrap:break-word}
#primaryNav .starred-event-nav-button small{flex:none;color:rgba(255,255,255,.46);font:500 12px/1.25 "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums}
.starred-event-dot{flex:none;width:8px;height:8px;margin:0 5px;border-radius:50%;background:#9a9aa0}
.starred-event-dot[data-branch="legal"]{background:#0356fc}
.starred-event-dot[data-branch="cfo"]{background:#7b0aec}
.starred-event-dot[data-branch="hr"]{background:#fe7615}
.starred-event-dot[data-branch="cmo"]{background:#58d994}
.starred-event-archived-row{display:flex;align-items:center;gap:2px}
#primaryNav .starred-event-nav-button.archived{display:grid;flex:1;grid-template-columns:18px minmax(0,1fr);column-gap:10px;row-gap:1px;color:rgba(255,255,255,.46)}
#primaryNav .starred-event-nav-button.archived small{grid-column:2}
#primaryNav .starred-event-nav-button.archived .starred-event-dot{opacity:.45}
#primaryNav .starred-event-unstar,#primaryNav .starred-all-link{border:0;background:transparent;box-shadow:none;color:rgba(255,255,255,.6);font:500 13px/1.25 "Bricolage Grotesque",sans-serif}
#primaryNav .starred-event-unstar{display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;border-radius:8px;font-size:16px}
#primaryNav .starred-all-link{display:block;width:100%;padding:6px 10px 6px 33px;border-radius:9px;text-align:left}
#primaryNav .starred-event-unstar:hover,#primaryNav .starred-all-link:hover{background:rgba(255,255,255,.06);color:#fff}

/* Page tabs: the old fold-out children, above their page */
.page-tabs{max-width:1600px;margin:0 auto;padding:14px 34px 0}
.page-tabs[hidden],.page-tab-strip[hidden],.page-tab[hidden]{display:none!important}
.page-tab-strip{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.page-tab-strip::-webkit-scrollbar{display:none}
.page-tab{flex:0 0 auto;margin-bottom:-1px;padding:9px 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:600 13.5px/1.3 "Bricolage Grotesque",sans-serif;white-space:nowrap}
.page-tab:hover{color:var(--ink)}
.page-tab:focus-visible{outline:2px solid var(--accent,#ff2365);outline-offset:-2px}
.page-tab.active{border-bottom-color:var(--accent,#ff2365);color:var(--ink)}

/* The panel beside the menu (Tools) */
.sidebar-flyout{position:fixed;top:0;bottom:0;left:248px;z-index:31;width:288px;overflow-y:auto;padding:18px 14px;background:#3a3a3d;color:#fff;box-shadow:14px 0 34px rgba(0,0,0,.28)}
.sidebar-flyout[hidden]{display:none!important}
.app-shell.sidebar-collapsed .sidebar-flyout{left:64px}
.sidebar .sidebar-flyout-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:transparent;box-shadow:none;color:#fff;font-size:18px;line-height:1}
.sidebar .sidebar-flyout-close:hover{background:rgba(255,255,255,.1)}

/* Tools: every tool from app/eventflow-tools-hub.js by its icon and name (no
   description; only the signed-out Agenda Builder has a second line, its
   state), then Agenda drafts and All tools. Explicit sizes because .sidebar
   nav button span (styles.css) would otherwise squeeze these spans to 20px. */
.sidebar-flyout .sidebar-flyout-heading{margin:2px 34px 8px 0;padding:4px 12px;color:rgba(255,255,255,.6);font:600 11px/1.3 "Poppins",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.sidebar-tool-list{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.sidebar .sidebar-tool{display:flex;align-items:center;gap:10px;width:100%;min-height:0;margin:0;padding:8px 10px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:#fff;font:500 14px/1.25 "Bricolage Grotesque",sans-serif;text-align:left;text-decoration:none}
.sidebar .sidebar-tool:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar .sidebar-tool:focus-visible,.sidebar .sidebar-flyout-link:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sidebar .sidebar-tool[disabled]{background:transparent;cursor:not-allowed;opacity:.6}
.sidebar .sidebar-tool-icon{display:block;flex:none;box-sizing:border-box;width:30px;height:30px;padding:6px;border-radius:8px;background:#ffdbe4;color:#a91645}
.sidebar .sidebar-tool-text{display:grid;flex:1;gap:2px;min-width:0;width:auto;color:inherit;font:inherit;text-align:left}
.sidebar .sidebar-tool-title{width:auto;color:#fff;font:500 14px/1.25 "Bricolage Grotesque",sans-serif;text-align:left}
.sidebar .sidebar-tool-state{width:auto;color:rgba(255,255,255,.62);font:400 12.5px/1.35 "Bricolage Grotesque",sans-serif;text-align:left}
.sidebar-flyout-links{display:grid;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}
.sidebar .sidebar-flyout-link{display:block;width:100%;min-height:0;margin:0;padding:9px 12px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#fff;font:500 14px/1.25 "Bricolage Grotesque",sans-serif;text-align:left}
.sidebar .sidebar-flyout-link:hover{background:rgba(255,255,255,.1);color:#fff}
.sidebar .sidebar-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Collapsed rail: icons with their label as a tooltip, one divider per section */
.app-shell.sidebar-collapsed .sidebar-section-heading,.app-shell.sidebar-collapsed .sidebar-row-label,.app-shell.sidebar-collapsed .sidebar-row-trail{display:none}
.app-shell.sidebar-collapsed .sidebar .sidebar-row{justify-content:center;padding:0}
@media(min-width:761px){.app-shell.sidebar-collapsed .sidebar .sidebar-section-folded .sidebar-row{display:flex}}
.app-shell.sidebar-collapsed .sidebar-section::before{content:"";display:block;height:1px;margin:8px 6px;background:rgba(255,255,255,.1)}
.app-shell.sidebar-collapsed .sidebar #primaryNav{padding-right:0;scrollbar-width:none}
.app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button b,.app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button small,.app-shell.sidebar-collapsed #primaryNav .starred-event-unstar,.app-shell.sidebar-collapsed #primaryNav .starred-all-link{display:none}
.app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button,.app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button.archived{display:flex;justify-content:center;padding:0}
.app-shell.sidebar-collapsed #primaryNav .starred-events-nav::before{content:"";display:block;height:1px;margin:8px 6px;background:rgba(255,255,255,.1)}
.app-shell.sidebar-collapsed .sidebar{padding-top:22px}
.app-shell.sidebar-collapsed .sidebar .brand{padding-bottom:44px}
.app-shell.sidebar-collapsed .sidebar-toggle{top:82px;right:auto;left:50%;transform:translateX(-50%) rotate(180deg)}
.app-shell.sidebar-collapsed .sidebar .account-chip{grid-template-columns:36px;justify-content:center;padding:10px 0 4px}
.app-shell.sidebar-collapsed .sidebar .account-chip #accountInitials{width:36px;height:36px;font-size:13px}
.app-shell.sidebar-collapsed .sidebar .account-chip strong,.app-shell.sidebar-collapsed .sidebar .account-chip small{display:none}

/* Mobile drawer: slides over a dimmed backdrop that follows .sidebar.open */
.sidebar-backdrop{display:none}
@media(max-width:760px){
  .app-shell,.app-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}
  .sidebar{left:-300px;width:280px}
  .sidebar.open{left:0}
  .sidebar.open ~ .sidebar-backdrop{position:fixed;inset:0;z-index:29;display:block;background:rgba(45,45,47,.5)}
  .sidebar .sidebar-row,#primaryNav .starred-event-nav-button{min-height:44px}
  .app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button b,.app-shell.sidebar-collapsed #primaryNav .starred-all-link{display:block}
  .app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button small{display:inline}
  .app-shell.sidebar-collapsed #primaryNav .starred-event-unstar{display:grid}
  .app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button{justify-content:flex-start;padding:5px 10px}
  .app-shell.sidebar-collapsed #primaryNav .starred-event-nav-button.archived{display:grid}
  .app-shell.sidebar-collapsed #primaryNav .starred-events-nav::before{content:none}
  .page-tabs{padding:12px 16px 0}
  .sidebar-flyout,.app-shell.sidebar-collapsed .sidebar-flyout{position:relative;top:auto;bottom:auto;left:auto;width:auto;margin:2px 0 6px;padding:10px 8px 8px;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:none}
  .sidebar .sidebar-flyout-link{padding:13px 12px}
  .app-shell.sidebar-collapsed .sidebar{padding:16px 14px 10px}
  .app-shell.sidebar-collapsed .sidebar .brand{justify-content:flex-start;padding:0 8px 10px}
  .app-shell.sidebar-collapsed .brand-logo{display:block}
  .app-shell.sidebar-collapsed .brand-collapsed-mark{display:none!important}
  .app-shell.sidebar-collapsed .sidebar-section-heading{display:block}
  .app-shell.sidebar-collapsed .sidebar-row-label{display:block}
  .app-shell.sidebar-collapsed .sidebar-row-trail{display:inline}
  .app-shell.sidebar-collapsed .sidebar .sidebar-row{justify-content:flex-start;padding:0 10px;font-size:14px}
  .app-shell.sidebar-collapsed .sidebar-section::before{content:none}
  .sidebar-toggle,.app-shell.sidebar-collapsed .sidebar-toggle{top:14px;right:12px;left:auto;transform:none}
  .app-shell.sidebar-collapsed .sidebar .account-chip{grid-template-columns:52px minmax(0,1fr);justify-content:stretch;padding:12px 10px 4px}
  .app-shell.sidebar-collapsed .sidebar .account-chip #accountInitials{width:52px;height:52px;font-size:16px}
  .app-shell.sidebar-collapsed .sidebar .account-chip strong,.app-shell.sidebar-collapsed .sidebar .account-chip small{display:block}
  .app-shell.sidebar-collapsed .sidebar .account-chip small[hidden]{display:none}
}

/* Resources sub-menus (app/sidebar-groups.js): Planning and Files & tools,
   each a heading button over its rows, folding exactly like a section: a
   folded one still shows its lit row, a folded section shows neither heading,
   and the rail shows every icon. The heading reuses the section heading in
   sentence case; its rows sit a little in. */
.sidebar .sidebar-group[hidden]{display:none!important}
.sidebar nav .sidebar-group-heading{padding:8px 10px 3px 14px;font-size:11.5px;letter-spacing:.02em;text-transform:none}
.sidebar nav .sidebar-group-current>.sidebar-group-heading{color:rgba(255,255,255,.8)}
.sidebar nav .sidebar-group-folded .sidebar-section-chevron{transform:none}
.sidebar .sidebar-group-folded .sidebar-row:not(.active){display:none}
.sidebar nav .sidebar-section-folded .sidebar-group-heading{display:none}
.app-shell:not(.sidebar-collapsed) .sidebar .sidebar-group-rows .sidebar-row{padding-left:18px}
@media(min-width:761px){.app-shell.sidebar-collapsed .sidebar .sidebar-group-folded .sidebar-row{display:flex}}
@media(max-width:760px){.app-shell .sidebar .sidebar-group-rows .sidebar-row{padding-left:18px}}