/* Design 3 "Clarity" applied to every framework page (?design=3, remembered in the gwp_design cookie). Layered on v2_shell.css + v3_shell.css. */
html.gwp_v2.gwp_v3, html.gwp_v2.gwp_v3 body { background: #fff !important; }
html.gwp_v2.gwp_v3 body, html.gwp_v2.gwp_v3 #gwp_frame { font-family: 'Figtree', 'DM Sans', system-ui, sans-serif; color: var(--v2-ink); }

/* ---------- top bar: same on every page ---------- */
html.gwp_v2.gwp_v3 .gwp_topbuttonbar { background: #fff; box-shadow: none; border: 0; transition: none; }
/* output.css (base, pre-Clarity) turns off the bar's own position:sticky below 900px width —
   undocumented, no comment explaining why — so on mobile the bar scrolls away with the page
   instead of staying fixed like it does on desktop. User-reported 2026-09-29. Restored for
   Clarity only; left alone for the old design in case that was deliberate there. */
@media (max-width: 900px) {
    html.gwp_v2.gwp_v3 .gwp_topbuttonbar { position: sticky !important; top: 0; }
}
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 .gwp_topbuttonbar { padding: 10px 32px; gap: 16px; }
    html.gwp_v2.gwp_v3 #gwp_v2_head.v2_generic { padding: 28px 32px 4px; }
    /* the Library is fully styled, so it keeps the wider margins */
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_topbuttonbar { padding: 20px 88px; gap: 20px; }
}
html.gwp_v2.gwp_v3 .gwp_nav_pagetitle { font-weight: 600; }

/* page title inserted by v2_shell.js on pages that have no title of their own */
html.gwp_v2.gwp_v3 #gwp_v2_head.v2_generic h1 { margin: 0; font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; color: var(--v2-ink); }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_v2_head.v2_generic h1 { font-size: 30px; } }

/* ---------- switchers, dropdown selects, tabs used in the top bar ---------- */
html.gwp_v2.gwp_v3 .select_singleframe, html.gwp_v2.gwp_v3 .gwp_nav_filters .select_singleframe { border-radius: 999px; }
html.gwp_v2.gwp_v3 .gwp_nav_btn { border: 0; border-radius: 999px; background: var(--v3-soft); font-family: inherit; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_nav_btn:hover { background: var(--gwp_tool_tint, #eaedfa); }

/* ---------- the hamburger menu, redesigned light ---------- */
html.gwp_v2.gwp_v3 .gwp_menuoverlay { background: rgba(15, 17, 21, .18); }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show { background: #fff; width: 320px; min-width: 320px; box-shadow: 0 0 80px rgba(15, 17, 21, .16); font-family: 'Figtree', 'DM Sans', system-ui, sans-serif; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show { width: 100%; } }
html.gwp_v2.gwp_v3 .v2m_brand { padding: 36px 32px 20px; gap: 14px; }
html.gwp_v2.gwp_v3 .v2m_word { color: var(--v2-ink); font-size: 22px; font-weight: 700; letter-spacing: -.03em; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menucontent { padding: 4px 0 28px; }
html.gwp_v2.gwp_v3 .v2m_grp { margin: 32px 32px 8px; color: var(--v2-muted); font-size: 11px; letter-spacing: .14em; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show a { color: var(--v2-ink); margin: 2px 16px; padding: 11px 16px; border-radius: 14px; font-size: 15px; font-weight: 500; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show a i { color: var(--v2c, var(--v2-muted)); font-size: 20px; }
/* Log Out is a <div onclick="..."> (it needs a confirm/POST, not a plain nav link), so the
   tag-qualified rule above never touches it — it was stuck at the old design's small 3px/5px
   padding while its three <a> siblings (Account/Dashboard/Settings) got the roomier Clarity
   touch target, making the bottom icon row visually uneven. Same treatment, by class instead
   of tag, so all four match. */
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show .gwp_submenulink { margin: 2px 16px; padding: 11px 16px; border-radius: 14px; font-size: 15px; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show .gwp_submenulink i { font-size: 20px; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show>a:hover, html.gwp_v2.gwp_v3 .gwp_dropdown-menucontent>a:hover { background: var(--v3-soft); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show>a:hover i, html.gwp_v2.gwp_v3 .gwp_dropdown-menucontent>a:hover i { color: var(--v2c, var(--v2-ink)); }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show a.gwp_menuitemselected { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); font-weight: 600; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show a.gwp_menuitemselected i { color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_nav_beta { border-color: var(--v2-muted); color: var(--v2-muted); background: transparent; }
html.gwp_v2.gwp_v3 .gwp_nav_close_btn { color: var(--v2-ink); background: var(--v3-soft); top: 38px; right: 24px; }
html.gwp_v2.gwp_v3 .gwp_nav_close_btn:hover { background: #e9e9e5; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_menuitemhr { border-color: var(--v2-line); margin: 12px 32px; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show .gwp_submenu { border-top: 1px solid var(--v2-line); padding: 12px 16px; }
html.gwp_v2.gwp_v3 .gwp_submenulink { color: var(--v2-muted); border-radius: 12px; }
html.gwp_v2.gwp_v3 .gwp_submenulink:hover { background: var(--v3-soft); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_dropdown-menu-show, html.gwp_v2.gwp_v3 .gwp_dropdown-menucontent { scrollbar-color: #d6d6d0 transparent; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menucontent::-webkit-scrollbar-thumb { background: #d6d6d0; }
html.gwp_v2.gwp_v3 .gwp_dropdown-menucontent::-webkit-scrollbar-thumb:hover { background: #b9b9b2; }

/* ---------- ‹ label › switchers (Broadcasts, Database, Compliance, Groups, Expenses, Kiosk...): grow to fit their longest label ---------- */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 .gwp_lib_type_dropdown { flex: none; }
    html.gwp_v2.gwp_v3 .gwp_lib_type_dropdown .gwp_lib_type_current { width: auto !important; min-width: 0 !important; max-width: none; padding: 0 10px; gap: 6px; }
    html.gwp_v2.gwp_v3 .gwp_lib_type_current > span { flex: 1; text-align: center; white-space: nowrap; padding: 0 8px; }
    html.gwp_v2.gwp_v3 .gwp_lib_type_list { min-width: 100%; width: max-content; max-width: 360px; }
    html.gwp_v2.gwp_v3 .gwp_lib_type_item { white-space: nowrap; }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_lib_type_current > span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Calendar: header is 64px with 10px above/below, the same as every other page's bar ---------- */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 .gwp_calheader { height: 64px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_topbuttonbar { padding: 10px 32px; gap: 12px; align-items: center; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_addtopbuttons { gap: 12px; align-items: center; }
    html.gwp_v2.gwp_v3 #gwp_fa-filter, html.gwp_v2.gwp_v3 #gwp_lmsearch, html.gwp_v2.gwp_v3 #gwp_calviewwrap > .gwp_topbutton, html.gwp_v2.gwp_v3 #gwp_calmorewrap > .gwp_topbutton {
        display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; flex-shrink: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--v3-soft); box-shadow: none; color: var(--v2-ink); font-size: 20px; line-height: 1; cursor: pointer; }
    html.gwp_v2.gwp_v3 #gwp_lmsearch .gwp_topbutton { margin: 0; font-size: 20px; }
    html.gwp_v2.gwp_v3 #gwp_fa-filter:hover, html.gwp_v2.gwp_v3 #gwp_lmsearch:hover, html.gwp_v2.gwp_v3 #gwp_calviewwrap > .gwp_topbutton:hover, html.gwp_v2.gwp_v3 #gwp_calmorewrap > .gwp_topbutton:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
    html.gwp_v2.gwp_v3 #gwp_calviewwrap, html.gwp_v2.gwp_v3 #gwp_calmorewrap { display: inline-flex; align-items: center; }
}

/* Generic mobile top-bar padding was 12px a side, 8px inside the page content's own
   20px gutter (see "GUTTERS" rule below) — same specificity as v3_shell.css's correct
   12px/20px, but this file loads after it, so it silently won. That's why the top bar's
   right-hand buttons sit further right than the content below (confirmed live on Polls'
   edit screen). Match the content gutter instead — this is the rule every other page's
   20px assumes is already true.
   Exception: pages built around the type-switcher pill (Library, Broadcasts, Database,
   Compliance, Groups, Expenses, Kiosk — anywhere .gwp_lib_type_dropdown appears) genuinely
   need the tighter 12px; their switcher label is already sized to the millimetre against
   that budget (e.g. "Remote media" exactly fills it) and 20px reopens the truncation this
   was fixed for earlier. */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_topbuttonbar { padding: 10px 20px; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_topbuttonbar { padding: 12px 20px; }
    html.gwp_v2.gwp_v3 .gwp_topbuttonbar:has(.gwp_lib_type_dropdown) { padding: 10px 12px; }
}

/* Library: same compact button sizing as Calendar's bar (both carry a wide pill next to a
   full set of icon buttons, same crowding pattern — confirmed live 2026-09-29, "Recent" was
   truncating to "Rec…" at 320px). Scoped to #gwp_mediaframe (Library's own page identifier,
   already used elsewhere in this file), not rolled out generally — most pages have room to
   spare at the default 44px sizing and don't need this. */
@media (max-width: 768px) {
    /* #gwp_navigation (and the switcher inside it) has flex-grow:1 by default — fine on pages
       whose bar only ever has one flex-growing element, but on Library the add button shrinks by
       34px whenever "Bin" is selected (gwp_med_selecttype calls gwp_addbtn_set(null) there, since
       you can't add new items to the bin, which hides the "+" half entirely) and that freed width
       gets grabbed by the switcher pill instead of just disappearing — "Bin" ballooning to 216px
       for a 3-character label, confirmed live 2026-09-29. Nothing to do with the word "Bin"
       itself; any tab would do this if it triggered the same add-button state change. Calendar's
       #gwp_navigation already got this same flex:0 1 auto fix earlier — Library never did. */
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_navigation, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_lib_type_dropdown { flex: 0 1 auto; min-width: 0; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_appchooser .gwp_menubutton { width: 38px !important; height: 38px !important; line-height: 38px !important; font-size: 18px; flex-shrink: 0; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_mmultiselect, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_mmultiselectactive { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; }
    /* The wrap's own width was never constrained, only the icon inside it — 45px vs the icon's
       correct 38px, same "wrap left to its natural size" gap as the split-add fixes elsewhere,
       just never caught here since nothing else needed the wrap's outer edge before. Also the
       "button bigger than the others" the user reported 2026-09-29. */
    /* output.css (base, pre-Clarity) gives this wrap a 6px right padding on mobile — with its
       box-sizing:content-box that adds straight onto the declared width below, so it was
       actually rendering 6px wider than intended (40px, not 34/38) despite the icon inside
       being correctly sized. Found while explaining the padding/gap difference to the pill's
       width, 2026-09-29. */
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_mediasettingswrap { width: 38px; flex-shrink: 0; padding-right: 0; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_mediasettingswrap > .gwp_topbutton { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_addtb.gwp_split, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_main, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_caret { height: 38px !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_main { width: 40px !important; padding: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_caret { width: 32px !important; }
    /* [data-noprimary="true"] (no add action for the current tab — e.g. Bin, nothing to add to
       it) makes output.css show a "+ Create ⌄" label INSIDE the caret itself. User-reported
       2026-09-29 ("I can see the plus and down arrow in the oval") when squeezed into this 32px
       circle. The "+" is now hidden generally (any width, any page) by a width-independent rule
       — see the `[data-noprimary="true"] .gwp_split_plus` rule earlier in this file — so no
       mobile-specific override is needed here any more. */
    /* Multi-select + "…": merged into one pill (rounded outer corners, flat shared inner edge,
       hairline divider) instead of two separate circles with a gap — same treatment as Calendar's
       eye/kebab merge. js/dist/library_v2.js (the file actually served — library.js is a stale
       copy, kept in sync anyway) now moves #gwp_mmultiselect next to #gwp_mediasettingswrap in
       #gwp_addtopbuttons so they're adjacent siblings; the negative margin cancels the 8px gap
       measured live between them at this breakpoint. */
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_mmultiselect { flex-shrink: 0; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_mediasettingswrap { margin-left: -8px; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_mmultiselect { border-radius: 999px 0 0 999px !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_mediasettingswrap > .gwp_topbutton { border-radius: 0 999px 999px 0 !important; border-left: 1px solid var(--v2-line) !important; }
    /* Arrows restored (user-requested 2026-09-29) — "Remote media" will truncate further than
       elsewhere as a result, that's accepted. Pill height matched to the 38px icon row beside it,
       same fix as Calendar's date pill. */
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_lib_type_current { height: 38px !important; }
}
@media (max-width: 380px) {
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_appchooser .gwp_menubutton { width: 34px !important; height: 34px !important; line-height: 34px !important; font-size: 16px; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_mmultiselect, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_mmultiselectactive { width: 34px !important; height: 34px !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_mediasettingswrap { width: 34px; padding-right: 0; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_mediasettingswrap > .gwp_topbutton { width: 34px !important; height: 34px !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_addtb.gwp_split, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_main, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_caret { height: 34px !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_main { width: 34px !important; padding: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_split_caret { width: 27px !important; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_lib_type_current { height: 34px !important; }
}

/* Add button (every page with the shared split-add control): briefly collapsed to a single "+"
   tap target on mobile (2026-09-29) to save space, then restored the same day once the button
   sizing elsewhere on the bar was fixed and the room concern went away — back to the original
   two-segment split (quick-add "+" / dropdown "▾" for everything else), sized by v2_shell.css. */

/* Content Store: tabs move to the top-bar switcher; the body header (title + tab pills) is replaced by the page heading */
html.gwp_v2.gwp_v3 .gwp_so_header { display: none; }
/* Meetings and Broadcasts: the bar's own title becomes the page heading */
html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_pagetitle { display: none; }

/* ---------- Workspace ---------- */
html.gwp_v2.gwp_v3 .gwp_ts_view_tabs, html.gwp_v2.gwp_v3 .gwp_ts_view_mobilenav { display: none !important; }
html.gwp_v2.gwp_v3 .gwp_workspace_toolbar { background: transparent; border: 0; padding: 12px 0; }
html.gwp_v2.gwp_v3 .gwp_ts_proj_title_bar { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
html.gwp_v2.gwp_v3 .gwp_ts_btn { border-radius: 999px; padding: 9px 18px; font-family: inherit; font-size: 14px; font-weight: 600; transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_btn_sm { padding: 5px 12px; font-size: 12.5px; }
html.gwp_v2.gwp_v3 .gwp_ts_btn_primary { background: var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_ts_btn_primary:hover { background: var(--gwp_tool_hover, #334bc2); opacity: 1; }
html.gwp_v2.gwp_v3 .gwp_ts_btn_secondary, html.gwp_v2.gwp_v3 .gwp_ts_btn_ghost { background: var(--v3-soft); border: 0; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_btn_secondary:hover, html.gwp_v2.gwp_v3 .gwp_ts_btn_ghost:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_ts_add_card_btn, html.gwp_v2.gwp_v3 .gwp_ts_add_col_btn { border-radius: 999px; font-family: inherit; }
/* .gwp_ts_inline_add (the "Task name..." input + Add/Cancel popup opened from "Add task") was wrongly
   bundled into the pill-radius rule above — it's a 2-row container (input, then buttons), not a single-line
   button, so 999px radius distorted it into a stadium/capsule shape instead of a normal card. Given its own
   radius matching the Clarity card convention used elsewhere in Workspace (.gwp_ts_card is 14px). */
html.gwp_v2.gwp_v3 .gwp_ts_inline_add { border-radius: 14px; font-family: inherit; background: var(--ws-card, #fff); border-color: var(--gwp_tool, #4259cd); box-shadow: 0 1px 2px rgba(15,17,21,.05), 0 2px 8px rgba(15,17,21,.04); }
html.gwp_v2.gwp_v3 .gwp_ts_inline_input { border-radius: 10px; border-color: var(--v3-line, #ececec); font-family: inherit; }
html.gwp_v2.gwp_v3 .gwp_ts_inline_input:focus { outline: none; border-color: var(--gwp_tool, #4259cd); box-shadow: 0 0 0 3px var(--gwp_tool_tint, rgba(66,89,205,.14)); }
html.gwp_v2.gwp_v3 .gwp_ts_icon_btn { border-radius: 50%; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_project_item { border-radius: 12px; padding: 9px 12px; }
html.gwp_v2.gwp_v3 .gwp_ts_project_item.gwp_ts_active { background: var(--gwp_tool_tint, #eaedfa); }
html.gwp_v2.gwp_v3 .gwp_ts_project_item.gwp_ts_active .gwp_ts_project_name { color: var(--gwp_tool_text, #2e43ae); }

/* the top-bar switchers never underline (the source of the hover underline wasn't found in the plugin's own CSS, so this is a safeguard) */
html.gwp_v2.gwp_v3 .gwp_topbuttonbar, html.gwp_v2.gwp_v3 .gwp_topbuttonbar *, html.gwp_v2.gwp_v3 .gwp_lib_type_list, html.gwp_v2.gwp_v3 .gwp_lib_type_list *,
html.gwp_v2.gwp_v3 .gwp_lib_type_current:hover, html.gwp_v2.gwp_v3 .gwp_lib_type_current:hover *, html.gwp_v2.gwp_v3 .gwp_lib_type_item:hover, html.gwp_v2.gwp_v3 .gwp_lib_type_item:hover * { text-decoration: none !important; }

/* Workspace: buttons/filters that now live in the top bar are hidden in the toolbar */
html.gwp_v2.gwp_v3 .gwp_workspace_toolbar[data-v2mirror] .gwp_ts_toolbar_right button[onclick*="gwp_tasks_new_list_modal"], html.gwp_v2.gwp_v3 .gwp_workspace_toolbar[data-v2mirror] .gwp_ts_toolbar_right button[onclick*="gwp_ts_open_note_editor"] { display: none; }
html.gwp_v2.gwp_v3 .gwp_workspace_toolbar select.gwp_ts_panel_select { display: none; }
/* Workspace: the section switcher is in the top bar; the title row carries that section's own controls (project + view, group filter) */
html.gwp_v2.gwp_v3 .gwp_workspace_toolbar .gwp_ts_toolbar_left { display: none; }
html.gwp_v2.gwp_v3 .gwp_ts_master_item { display: none; }
html.gwp_v2.gwp_v3 .gwp_ts_linked_toolbar { display: none; }
/* the projects list, New project and the edit / complete / delete / reopen actions live in the project picker and its "..." menu (v2_shell.js), so the sidebar and its mobile drawer are not shown (still present in the classic look) */
html.gwp_v2.gwp_v3 .gwp_workspace_sidebar, html.gwp_v2.gwp_v3 .gwp_ts_sidebar_toggle, html.gwp_v2.gwp_v3 .gwp_ts_sidebar_backdrop { display: none !important; }
html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; margin-right: auto; }
html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .gwp_lib_type_dropdown { flex: 0 1 auto; }
html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .gwp_lib_type_current { background: var(--v3-soft); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .gwp_lib_type_list { background: var(--v2-card); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_sidebar_header { background: transparent; }
html.gwp_v2.gwp_v3 .gwp_ts_project_name { color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_sidebar_title { color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .v2_navselect { margin: 0; }
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl { width: 100%; }
    html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .gwp_lib_type_dropdown, html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .v2_navselect { flex: 1 1 0; min-width: 0; max-width: none; }
}
html.gwp_v2.gwp_v3 .v2_navselect { height: 44px; max-width: 260px; padding: 0 16px; border: 0; border-radius: 999px; background-color: var(--v3-soft); color: var(--v2-ink); font: 500 14.5px 'Figtree', system-ui, sans-serif; cursor: pointer; margin: 0 0 0 4px; }
html.gwp_v2.gwp_v3 .v2_navselect:focus { outline: 2px solid var(--gwp_tool, #4259cd); outline-offset: 0; }
/* Workspace colour tokens: everything below reads these (and the --v2-* / --v3-soft base tokens), so a dark theme only has to redefine the tokens */
html.gwp_v2.gwp_v3 { --ws-card: var(--v2-card); --ws-line: var(--v2-line); --ws-divider: color-mix(in srgb, var(--v2-ink) 7%, var(--v2-card)); --ws-hover: color-mix(in srgb, var(--v2-ink) 4%, var(--v2-card)); --ws-bad: color-mix(in srgb, #d92d20 78%, var(--v2-ink)); --ws-bad-bg: color-mix(in srgb, #d92d20 12%, var(--v2-card)); }
/* Workspace content: Clarity cards, airy spacing (no transitions on the bulk-rendered items) */
html.gwp_v2.gwp_v3 .gwp_workspace_content { padding: 8px 0 40px; font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_ts_empty_board { font-family: inherit; }
/* no sidebar any more: line the controls and cards up with the page title's text edge */
@media (min-width: 681px) {
    html.gwp_v2.gwp_v3 .gwp_workspace_toolbar, html.gwp_v2.gwp_v3 .gwp_workspace_content { padding-left: 13px; }
}
html.gwp_v2.gwp_v3 .gwp_ts_ag_drag_handle { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); padding: 0; }

/* My Agenda / project Tasks */
html.gwp_v2.gwp_v3 .gwp_ts_agenda { max-width: 880px; gap: 28px; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_group { background: var(--ws-card); border: 1px solid var(--ws-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05); overflow: hidden; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_group_header { background: transparent !important; border-bottom: 0; padding: 22px 28px 10px; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_ag_group_header i { font-size: 20px; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_overdue .gwp_ts_ag_group_header { color: var(--ws-bad); }
html.gwp_v2.gwp_v3 .gwp_ts_ag_today .gwp_ts_ag_group_header { color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_ts_ag_group_header .gwp_ts_col_count { background: var(--v3-soft); color: var(--v2-muted); font-size: 12.5px; padding: 2px 10px; margin-left: 2px; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row { gap: 14px; padding: 16px 28px; border-bottom: 1px solid var(--ws-divider); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row:hover { background: var(--ws-hover); }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row_text { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row_meta { gap: 8px; margin-top: 8px; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row .gwp_ts_card_check, html.gwp_v2.gwp_v3 .gwp_ts_card .gwp_ts_card_check { font-size: 22px; line-height: 1; transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row .gwp_ts_card_check:hover, html.gwp_v2.gwp_v3 .gwp_ts_card .gwp_ts_card_check:hover { color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_ts_project_chip, html.gwp_v2.gwp_v3 .gwp_ts_pcat_chip, html.gwp_v2.gwp_v3 .gwp_ts_due_badge, html.gwp_v2.gwp_v3 .gwp_ts_assignee_badge { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 11px; }
html.gwp_v2.gwp_v3 .gwp_ts_project_chip { border-width: 1px; opacity: 1; background: var(--ws-card); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_pcat_chip, html.gwp_v2.gwp_v3 .gwp_ts_due_badge, html.gwp_v2.gwp_v3 .gwp_ts_assignee_badge { background: var(--v3-soft); color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_due_badge.gwp_ts_overdue { background: var(--ws-bad-bg); color: var(--ws-bad); }
html.gwp_v2.gwp_v3 .gwp_ts_agenda_add_wrap { padding: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_completed_section { margin-top: 4px; }
html.gwp_v2.gwp_v3 .gwp_ts_completed_toggle { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 10px 18px; border-radius: 999px; background: var(--v3-soft); font-size: 14px; font-weight: 600; color: var(--v2-ink); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_completed_toggle:hover { background: var(--gwp_tool_tint, #eaedfa); }
html.gwp_v2.gwp_v3 .gwp_ts_completed_list { margin-top: 12px; background: var(--ws-card); border: 1px solid var(--ws-line); border-radius: 20px; overflow: hidden; }
html.gwp_v2.gwp_v3 .gwp_ts_ag_row.gwp_ts_checked { opacity: .55; }

/* Project Board: each list is a card; its columns are soft panels with white task cards */
html.gwp_v2.gwp_v3 .gwp_ts_board { gap: 28px; }
html.gwp_v2.gwp_v3 .gwp_ts_list_section { background: var(--ws-card); border: 1px solid var(--ws-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05); }
html.gwp_v2.gwp_v3 .gwp_ts_list_header { background: transparent; border-bottom: 0; padding: 22px 28px 14px; gap: 12px; }
html.gwp_v2.gwp_v3 .gwp_ts_list_dot { width: 12px; height: 12px; }
html.gwp_v2.gwp_v3 .gwp_ts_list_name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_columns_row { gap: 14px; padding: 0 20px 22px; }
html.gwp_v2.gwp_v3 .gwp_ts_column { background: var(--v3-soft); border: 0; border-radius: 16px; min-width: 220px; transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_column.gwp_ts_col_dragover { background: var(--gwp_tool_tint, #eaedfa); }
html.gwp_v2.gwp_v3 .gwp_ts_col_header { border-bottom: 0; padding: 16px 16px 6px; }
html.gwp_v2.gwp_v3 .gwp_ts_col_title { font-size: 12px; letter-spacing: .07em; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_col_header .gwp_ts_col_count { background: var(--ws-card); color: var(--v2-muted); font-size: 12px; padding: 2px 9px; }
html.gwp_v2.gwp_v3 .gwp_ts_cards { padding: 8px 12px 14px; gap: 10px; }
html.gwp_v2.gwp_v3 .gwp_ts_card { background: var(--ws-card); border: 0; border-radius: 14px; padding: 14px 16px; gap: 12px; box-shadow: 0 1px 2px rgba(15,17,21,.05), 0 2px 8px rgba(15,17,21,.04); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_card:hover { border: 0; box-shadow: 0 1px 2px rgba(15,17,21,.06), 0 6px 16px rgba(15,17,21,.09); }
html.gwp_v2.gwp_v3 .gwp_ts_card.gwp_ts_priority_high { box-shadow: inset 3px 0 0 #e76f51, 0 1px 2px rgba(15,17,21,.05), 0 2px 8px rgba(15,17,21,.04); border-left: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_card.gwp_ts_priority_low { box-shadow: inset 3px 0 0 #90caf9, 0 1px 2px rgba(15,17,21,.05), 0 2px 8px rgba(15,17,21,.04); border-left: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_card_content { font-size: 15px; line-height: 1.45; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_card_meta { gap: 6px; margin-top: 10px; }
html.gwp_v2.gwp_v3 .gwp_ts_drop_placeholder { border-radius: 14px; }

/* Notes: rounder, roomier cards; each note keeps its own chosen colour */
html.gwp_v2.gwp_v3 .gwp_ts_notes_wrap { padding: 8px 0; }
html.gwp_v2.gwp_v3 .gwp_ts_notes_section_label { font-size: 12px; letter-spacing: .08em; padding: 0 2px 14px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_notes_grid { column-gap: 20px; padding-bottom: 28px; }
html.gwp_v2.gwp_v3 .gwp_ts_note_card { margin-bottom: 20px; border-width: 1px; border-radius: 20px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_note_card:hover { transform: none; box-shadow: 0 1px 2px rgba(15,17,21,.05), 0 12px 28px rgba(15,17,21,.10); }
html.gwp_v2.gwp_v3 .gwp_ts_note_card_inner { padding: 22px 24px 10px; }
html.gwp_v2.gwp_v3 .gwp_ts_note_card_title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; color: #1c1f2a; }
html.gwp_v2.gwp_v3 .gwp_ts_note_card_body { font-size: 14.5px; line-height: 1.6; color: #3d424d; }
html.gwp_v2.gwp_v3 .gwp_ts_note_card_footer { padding: 6px 20px 16px 24px; }
/* note cards sit on the author's own pastel, so their text stays dark in every theme */
html.gwp_v2.gwp_v3 .gwp_ts_note_card_date { font-size: 12.5px; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_ts_note_badges { gap: 6px; margin-top: 12px; }
html.gwp_v2.gwp_v3 .gwp_ts_note_badge { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
html.gwp_v2.gwp_v3 .gwp_ts_note_badge_group { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
/* empty states: soft icon tile, plain heading, pill button (the button's own icon stays button-sized) */
/* note editor footer: pill controls; the group list is the standard dropdown, opening upwards from the footer */
html.gwp_v2.gwp_v3 .gwp_ts_ne_meta_row { gap: 10px; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_meta_select { -webkit-appearance: none; appearance: none; height: 36px; padding: 0 36px 0 16px; border: 0; border-radius: 999px; background-color: var(--v3-soft); color: var(--v2-ink); font: 500 13.5px 'Figtree', system-ui, sans-serif; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_share_btn { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 500 13.5px 'Figtree', system-ui, sans-serif; gap: 6px; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_share_btn:hover { background: var(--gwp_tool_tint, #eaedfa); }
html.gwp_v2.gwp_v3 .gwp_ts_ne_group_dd { position: relative; flex: 0 1 auto; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_group_dd .gwp_lib_type_current { height: 36px; min-width: 0; width: auto !important; padding: 0 14px; background: var(--v3-soft); color: var(--v2-ink); font-size: 13.5px; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_group_dd .gwp_lib_type_current > span { min-width: 0 !important; flex: 0 1 auto !important; padding: 0 6px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_group_dd .gwp_lib_type_arrow { display: none; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_group_dd .gwp_lib_type_list { top: auto; bottom: calc(100% + 8px); max-height: min(320px, 50vh); background: var(--v2-card); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_ne_close_btn { height: 36px; padding: 0 20px; font-size: 13.5px; }
html.gwp_v2.gwp_v3 .gwp_ts_notes_empty, html.gwp_v2.gwp_v3 .gwp_ts_empty_board { font-family: inherit; gap: 0; align-items: center; text-align: center; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_notes_empty { height: auto; padding: 72px 20px; }
html.gwp_v2.gwp_v3 .gwp_ts_notes_empty > i, html.gwp_v2.gwp_v3 .gwp_ts_empty_board > i { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 0 20px; border-radius: 50%; background: var(--v3-soft); color: var(--v2-muted); font-size: 38px; opacity: 1; }
html.gwp_v2.gwp_v3 .gwp_ts_notes_empty p, html.gwp_v2.gwp_v3 .gwp_ts_empty_board p { margin: 0 0 22px; font-size: 16px; font-weight: 600; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_empty_board h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_empty_board h3 + p { font-weight: 400; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_notes_empty .gwp_ts_btn, html.gwp_v2.gwp_v3 .gwp_ts_empty_board .gwp_ts_btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; font-size: 15px; }
html.gwp_v2.gwp_v3 .gwp_ts_notes_empty .gwp_ts_btn i, html.gwp_v2.gwp_v3 .gwp_ts_empty_board .gwp_ts_btn i { font-size: 16px; width: auto; height: auto; margin: 0; background: none; color: inherit; opacity: 1; }
@media (max-width: 680px) {
    html.gwp_v2.gwp_v3 .gwp_workspace_content { padding: 8px 20px 40px; }
    html.gwp_v2.gwp_v3 .gwp_workspace_toolbar { padding: 12px 20px; }
    html.gwp_v2.gwp_v3 .gwp_ts_ag_group_header { padding: 18px 18px 8px; }
    html.gwp_v2.gwp_v3 .gwp_ts_ag_row { padding: 14px 18px; }
    html.gwp_v2.gwp_v3 .gwp_ts_list_header { padding: 18px 18px 12px; }
    html.gwp_v2.gwp_v3 .gwp_ts_columns_row { padding: 0 12px 16px; }
    html.gwp_v2.gwp_v3 .gwp_ts_note_card_inner { padding: 18px 18px 8px; }
}

/* =====================================================================================
   PAGE BODIES (design 3): one gutter shared with the top bar and title, hairlines instead of boxes, pill controls
   ===================================================================================== */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_aframe, html.gwp_v2.gwp_v3 #gwp_userframe, html.gwp_v2.gwp_v3 #gwp_databaseframe, html.gwp_v2.gwp_v3 #gwp_curriculumframe { margin-left: 0 !important; margin-right: 0 !important; padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box; width: 100%; max-width: 100%; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_aframe { padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_aframe, html.gwp_v2.gwp_v3 #gwp_userframe, html.gwp_v2.gwp_v3 #gwp_databaseframe, html.gwp_v2.gwp_v3 #gwp_curriculumframe { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
}
html.gwp_v2.gwp_v3 .gwp_expenses_page, html.gwp_v2.gwp_v3 .gwp_so_content, html.gwp_v2.gwp_v3 .gwp_curriculum_listframe { background: transparent; }
html.gwp_v2.gwp_v3 .gwp_exp_search_wrap { background: transparent; border: 0; box-shadow: none; }
html.gwp_v2.gwp_v3 #gwp_curriculumframe .gwp_curriculum_grid, html.gwp_v2.gwp_v3 .gwp_taxp_grid, html.gwp_v2.gwp_v3 .gwp_groups_grid { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

/* ---- list-like items: no boxes, a hairline between them ---- */
html.gwp_v2.gwp_v3 .gwp_schedule_card, html.gwp_v2.gwp_v3 .gwp_dbitem, html.gwp_v2.gwp_v3 .gwp_tk_event_card, html.gwp_v2.gwp_v3 .gwp_bc_card, html.gwp_v2.gwp_v3 .gwp_blog_card, html.gwp_v2.gwp_v3 .gwp_so_list_item {
    background: transparent; border: 0; border-bottom: 1px solid var(--v2-line); border-radius: 0; box-shadow: none; margin-left: 0; margin-right: 0; }
html.gwp_v2.gwp_v3 .gwp_schedule_card:hover, html.gwp_v2.gwp_v3 .gwp_dbitem:hover, html.gwp_v2.gwp_v3 .gwp_tk_event_card:hover, html.gwp_v2.gwp_v3 .gwp_bc_card:hover, html.gwp_v2.gwp_v3 .gwp_blog_card:hover { box-shadow: none; background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_dbitem, html.gwp_v2.gwp_v3 .gwp_tk_event_card, html.gwp_v2.gwp_v3 .gwp_bc_card { padding-top: 22px; padding-bottom: 22px; }
html.gwp_v2.gwp_v3 .gwp_dbitem_icon { border: 0; border-radius: 14px; }

/* ---- grid cards: soft filled tiles ---- */
html.gwp_v2.gwp_v3 .gwp_cur_card, html.gwp_v2.gwp_v3 .gwp_taxp_card, html.gwp_v2.gwp_v3 .gwp_groups_card, html.gwp_v2.gwp_v3 .gwp_so_card {
    background: var(--v3-soft); border: 0; border-radius: 20px; box-shadow: none; overflow: hidden; }
html.gwp_v2.gwp_v3 .gwp_cur_card:hover, html.gwp_v2.gwp_v3 .gwp_taxp_card:hover, html.gwp_v2.gwp_v3 .gwp_groups_card:hover, html.gwp_v2.gwp_v3 .gwp_so_card:hover { box-shadow: none; background: #ecece7; transform: none; }
html.gwp_v2.gwp_v3 .gwp_cur_card_footer, html.gwp_v2.gwp_v3 .gwp_so_card_footer, html.gwp_v2.gwp_v3 .gwp_groups_card_count { border-top: 1px solid rgba(15, 17, 21, .07); background: transparent; }
html.gwp_v2.gwp_v3 .gwp_taxp_card_add { background: transparent; border: 2px dashed #d6d6d0; }
html.gwp_v2.gwp_v3 .gwp_curriculum_grid, html.gwp_v2.gwp_v3 .gwp_taxp_grid { gap: 24px; }
html.gwp_v2.gwp_v3 .gwp_so_grid { gap: 24px; }

/* ---- Members list ---- */
html.gwp_v2.gwp_v3 .gwp_members_list_header { background: transparent; border-bottom: 1px solid var(--v2-line); color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_members_item { border-bottom: 1px solid var(--v2-line); background: transparent; padding-top: 14px; padding-bottom: 14px; }
html.gwp_v2.gwp_v3 .gwp_members_item:hover { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_members_list { border: 0; box-shadow: none; background: transparent; }
html.gwp_v2.gwp_v3 .gwp_members_btn { border-radius: 999px; font-family: inherit; }
html.gwp_v2.gwp_v3 .gwp_members_btn_primary { background: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_members_btn_secondary { background: var(--v3-soft); border: 0; color: var(--v2-ink); }

/* ---- controls: pills instead of boxes ---- */
html.gwp_v2.gwp_v3 .gwp_nav_filters .select_singleframe .select_singledropdown, html.gwp_v2.gwp_v3 #gwp_navigation .select_singleframe .select_singledropdown {
    height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 18px; border: 0; border-radius: 999px; background: var(--v3-soft); font: 500 14.5px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 #gwp_navigation .select_singleframe { min-width: 150px; }
html.gwp_v2.gwp_v3 .gwp_so_search, html.gwp_v2.gwp_v3 .gwp_so_filter_select, html.gwp_v2.gwp_v3 .gwp_so_fav_toggle, html.gwp_v2.gwp_v3 .gwp_bc_filter_select, html.gwp_v2.gwp_v3 .gwp_bc_search_input,
html.gwp_v2.gwp_v3 .gwp_exp_search_input, html.gwp_v2.gwp_v3 .gwp_exp_filter_select, html.gwp_v2.gwp_v3 .gwp_exp_date_input {
    height: 44px; box-sizing: border-box; padding: 0 18px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 500 14.5px 'Figtree', system-ui, sans-serif; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_so_search:focus, html.gwp_v2.gwp_v3 .gwp_bc_search_input:focus, html.gwp_v2.gwp_v3 .gwp_exp_search_input:focus { outline: 2px solid var(--gwp_tool, #4259cd); }
/* The real <select>s in that shared rule got the same 18px padding on both sides as the
   plain text inputs it's shared with, leaving the browser's own native dropdown arrow to
   render wherever that OS/browser puts it — inconsistent, and on some mobile browsers it
   sits past where the pill visually ends. Draw the arrow ourselves so every device matches. */
html.gwp_v2.gwp_v3 select.gwp_so_filter_select, html.gwp_v2.gwp_v3 select.gwp_bc_filter_select, html.gwp_v2.gwp_v3 select.gwp_exp_filter_select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 0 40px 0 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}
html.gwp_v2.gwp_v3 .gwp_so_fav_toggle { cursor: pointer; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_so_filters, html.gwp_v2.gwp_v3 .gwp_bc_filters { gap: 12px; margin-bottom: 24px; }

/* ---- Content Store buttons ---- */
html.gwp_v2.gwp_v3 .gwp_so_btn { border-radius: 999px; font-family: inherit; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_so_btn_primary { background: var(--gwp_tool, #4259cd); color: #fff; border: 0; }
html.gwp_v2.gwp_v3 .gwp_so_btn_secondary { background: var(--v3-soft); color: var(--v2-ink); border: 0; }

/* ---- Calendar date picker ---- */
html.gwp_v2.gwp_v3 .gwp_calheader .select_date { height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 18px; border: 0; border-radius: 999px; background: var(--v3-soft); font: 600 15px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 #gwp_store_page, html.gwp_v2.gwp_v3 .gwp_bc_page, html.gwp_v2.gwp_v3 .gwp_tk_events_wrap, html.gwp_v2.gwp_v3 .gwp_expenses_page { background: transparent !important; }

/* inner wrappers that added their own 15-20px side inset: the frame's 32px gutter is the only one */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 .gwp_tk_events_wrap, html.gwp_v2.gwp_v3 .gwp_bc_page, html.gwp_v2.gwp_v3 .gwp_cp_tabcontent, html.gwp_v2.gwp_v3 .gwp_curriculum_grid, html.gwp_v2.gwp_v3 .gwp_curriculum_listframe,
    html.gwp_v2.gwp_v3 .gwpm_wrap, html.gwp_v2.gwp_v3 .gwp_taxp_total, html.gwp_v2.gwp_v3 .gwp_taxp_switcher_count, html.gwp_v2.gwp_v3 .gwp_tg_content { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_tk_events_list, html.gwp_v2.gwp_v3 .gwp_bc_filters, html.gwp_v2.gwp_v3 .gwp_bc_list, html.gwp_v2.gwp_v3 .gwp_bc_pagination { margin-left: 0 !important; margin-right: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_schedule_card, html.gwp_v2.gwp_v3 .gwp_dbitem, html.gwp_v2.gwp_v3 .gwp_tk_event_card, html.gwp_v2.gwp_v3 .gwp_bc_card, html.gwp_v2.gwp_v3 .gwp_blog_card { padding-left: 0; padding-right: 0; }
}

/* pages whose top bar is position:fixed (e.g. Teams & Groups): the heading clears it, and the frame's own compensating top space goes */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_v2_head.v2_generic { padding-top: 92px; }
    html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_aframe, html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_userframe, html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_databaseframe { padding-top: 12px !important; margin-top: 0 !important; }
}

/* Workspace: same gutter, white ground, sidebar without a divider */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_workspaceframe { padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
}
/* dropdowns and menus in the title row must never be cut off by a short page */
html.gwp_v2.gwp_v3 .gwp_workspace_wrap, html.gwp_v2.gwp_v3 .gwp_workspace_main { overflow: visible; }
html.gwp_v2.gwp_v3 .gwp_workspace_main { min-width: 0; }
html.gwp_v2.gwp_v3 .gwp_workspace_wrap { background: transparent; }
html.gwp_v2.gwp_v3 .gwp_workspace_sidebar { background: transparent; border-right: 0; }
html.gwp_v2.gwp_v3 .gwp_workspace_main { background: transparent; }

/* Calendar grid: same gutter as the bar */
@media screen and (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_calframe { margin-left: 32px !important; margin-right: 32px !important; width: auto; }
}

/* card ⋮ menus (Schedules, Blogs) stay small so they don't cover badges */
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_nav_icon_btn, html.gwp_v2.gwp_v3 .gwp_blog_card .gwp_nav_icon_btn { width: 36px; height: 36px; font-size: 17px; }

html.gwp_v2.gwp_v3 .gwp_blog_card_header { padding-right: 56px; }
@media (min-width: 769px) { html.gwp_v2.gwp_v3 .gwp_exp_panel, html.gwp_v2.gwp_v3 .gwp_exp_search_wrap, html.gwp_v2.gwp_v3 .gwp_exp_empty { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } }

/* ---- Broadcasts: streams and subscribers ---- */
html.gwp_v2.gwp_v3 .gwp_bc_stream_card { background: var(--v3-soft); border: 0; border-radius: 20px; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bc_stream_card:hover { box-shadow: none; background: #ecece7; }
html.gwp_v2.gwp_v3 .gwp_bc_sub_wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bc_sub_table thead th { background: transparent; color: var(--v2-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_bc_sub_table th, html.gwp_v2.gwp_v3 .gwp_bc_sub_table td { border-bottom: 1px solid var(--v2-line); padding: 14px 12px; }
html.gwp_v2.gwp_v3 .gwp_bc_sub_table tbody tr:hover { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_bc_sub_chip { border-radius: 999px; }
html.gwp_v2.gwp_v3 .gwp_bc_btn { border-radius: 999px; font-family: inherit; }
html.gwp_v2.gwp_v3 .gwp_bc_btn_primary { background: var(--gwp_tool, #4259cd); border-color: var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_bc_btn_secondary, html.gwp_v2.gwp_v3 .gwp_bc_btn_outline { background: var(--v3-soft); border: 0; color: var(--v2-ink); }

/* switcher hover/click: a slightly deeper fill only (no ring, no outline, no arrow boxes) */
html.gwp_v2.gwp_v3 .gwp_lib_type_current:hover, html.gwp_v2.gwp_v3 .gwp_lib_type_current:active, html.gwp_v2.gwp_v3 .gwp_lib_type_current:focus, html.gwp_v2.gwp_v3 .gwp_lib_type_current:focus-visible { box-shadow: none !important; outline: none !important; border: 0 !important; background: #ebebe6 !important; }
html.gwp_v2.gwp_v3 .gwp_lib_type_current > span, html.gwp_v2.gwp_v3 .gwp_lib_type_current > span:hover { border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; text-decoration: none !important; }
html.gwp_v2.gwp_v3 .gwp_lib_type_arrow:hover, html.gwp_v2.gwp_v3 .gwp_lib_type_arrow:active, html.gwp_v2.gwp_v3 .gwp_lib_type_arrow:focus { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_lib_type_arrow_disabled:hover { color: inherit; }

/* hover: list-style items don't change shade; grid tiles darken a touch */
html.gwp_v2.gwp_v3 .gwp_schedule_card:hover, html.gwp_v2.gwp_v3 .gwp_dbitem:hover, html.gwp_v2.gwp_v3 .gwp_tk_event_card:hover, html.gwp_v2.gwp_v3 .gwp_bc_card:hover, html.gwp_v2.gwp_v3 .gwp_blog_card:hover { background: transparent; }
html.gwp_v2.gwp_v3 .gwp_schedule_title_row:hover, html.gwp_v2.gwp_v3 .gwp_schedule_title_row .gwp_h3:hover, html.gwp_v2.gwp_v3 .gwp_scheduletitle:hover, html.gwp_v2.gwp_v3 .gwp_scheduletitle:focus { background: transparent; box-shadow: none; outline: none; }
/* Curriculum's list frame carries its own inline 16px padding: the page frame's gutter is the only one */
html.gwp_v2.gwp_v3 #gwp_curriculum_listframe { padding: 0 !important; }

html.gwp_v2.gwp_v3 #gwp_v2_head.v2_generic p { margin: 8px 0 0; color: var(--v2-muted); font-size: 16px; }
/* leftover 12-15px insets inside list rows: text and icons start on the shared 32px edge */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 .gwp_dbitem_main, html.gwp_v2.gwp_v3 .gwp_schedule_title_row, html.gwp_v2.gwp_v3 .gwp_so_content { padding-left: 0 !important; padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_curriculumframe { padding-top: 16px !important; }
}

/* ---- Kiosk Mode admin, Parent Portal and Account: same width and title rules as every other page ---- */
html.gwp_v2.gwp_v3 .gwp_kiosk_admin_wrap, html.gwp_v2.gwp_v3 .gwp_pp_page, html.gwp_v2.gwp_v3 .gwp_acct_page { max-width: none; width: 100%; box-sizing: border-box; margin: 0; padding-left: 0; padding-right: 0; }
html.gwp_v2.gwp_v3 .gwp_kiosk_admin_header, html.gwp_v2.gwp_v3 .gwp_kiosk_admin_sub, html.gwp_v2.gwp_v3 .gwp_pp_header h2 { display: none; }
html.gwp_v2.gwp_v3 .gwp_pp_header { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; }
html.gwp_v2.gwp_v3 .gwp_kiosk_device_btn, html.gwp_v2.gwp_v3 .gwp_kiosk_live_btn, html.gwp_v2.gwp_v3 .gwp_kiosk_pairing_generate_btn, html.gwp_v2.gwp_v3 .gwp_kiosk_btn_revoke_unused, html.gwp_v2.gwp_v3 .gwp_kiosk_btn_delete_revoked, html.gwp_v2.gwp_v3 .gwp_pp_btn {
    border-radius: 999px; border: 0; background: var(--v3-soft); color: var(--v2-ink); font-family: inherit; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_kiosk_device_btn:hover, html.gwp_v2.gwp_v3 .gwp_kiosk_live_btn:hover, html.gwp_v2.gwp_v3 .gwp_pp_btn:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_kiosk_pairing_generate_btn, html.gwp_v2.gwp_v3 .gwp_pp_btn_primary { background: var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_kiosk_device_btn_danger { background: #fbe6ee; color: #8f1f4d; }
html.gwp_v2.gwp_v3 .gwp_kiosk_table th { background: transparent; }
/* "Create" with no primary action (caret only): a full pill, not a square with one rounded side */
html.gwp_v2.gwp_v3 #gwp_addtb.gwp_split[data-caretonly="true"] .gwp_split_caret { border-radius: 999px; width: auto; padding: 0 16px; }
/* [data-caretonly="true"] (pages with no create action at all, e.g. KioskAdmin) is documented
   in popupfuncs.js as meaning "show just the ▾ menu button (no + and no Create text)" but that
   was never actually implemented in CSS — confirmed live 2026-10-06, still showed "+ Create ▾". */
html.gwp_v2.gwp_v3 #gwp_addtb.gwp_split[data-caretonly="true"] .gwp_split_caret .ct { display: none !important; }
/* .gwp_split_plus's own hiding (every state, not just caretonly — the earlier version of this
   comment tried to fix it per-state here) turned out to be a SECOND instance of the same
   cross-file cascade tie as line_awesome_base_rule_ties_specificity_with_component_display_flex:
   output.css's own `.gwp_split_plus { display: none }` base rule ties specificity with
   line-awesome.min.css's `.las { display: inline-block }` and was losing on load order in the
   DEFAULT (has-a-primary-button) state too, not just noprimary/caretonly — confirmed live
   2026-10-06 on a page with a real primary action ("New List"), reported directly. Fixed at the
   real source in output.css/output_v2.css instead (`display: none !important` there, split out
   from the sibling `.ct` rule so that one's own [data-noprimary="true"] override — unaffected by
   this tie, .ct has no .las class — still works); nothing needed here any more. */
html.gwp_v2.gwp_v3 #gwp_v2_head.v2_generic { display: block; }

/* Calendar: the grid scrolls inside .gwp_calframecontents, whose scrollbar made the rows narrower than the weekday header above them. The scrollbar is hidden (scrolling still works) so header and grid are exactly the same width. */
html.gwp_v2.gwp_v3 .gwp_calframecontents { scrollbar-width: none !important; -ms-overflow-style: none; }
html.gwp_v2.gwp_v3 .gwp_calframecontents::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
@media screen and (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_calframecontents { height: calc(100vh - 164px) !important; }
}

/* ---------- Mobile: one 20px gutter (same as the title). Frames used to add their own margin on top of padding, and list wrappers/cards added another 8-20px each, so content sat 36-56px in. ---------- */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_aframe, html.gwp_v2.gwp_v3 #gwp_userframe, html.gwp_v2.gwp_v3 #gwp_databaseframe, html.gwp_v2.gwp_v3 #gwp_curriculumframe { margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; width: 100%; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_aframe { padding-left: 0 !important; padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_content0, html.gwp_v2.gwp_v3 .gwp_tk_events_wrap, html.gwp_v2.gwp_v3 .gwp_bc_page, html.gwp_v2.gwp_v3 .gwp_dbitem_main, html.gwp_v2.gwp_v3 .gwp_schedule_title_row { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_tk_event_card, html.gwp_v2.gwp_v3 .gwp_bc_card, html.gwp_v2.gwp_v3 #gwp_databaseframe > div[id] { padding-left: 0 !important; padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_bc_page, html.gwp_v2.gwp_v3 .gwp_bc_list, html.gwp_v2.gwp_v3 .gwp_bc_card { max-width: 100%; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 .gwp_bc_card_title, html.gwp_v2.gwp_v3 .gwp_bc_card_meta { min-width: 0; overflow-wrap: anywhere; }
}
/* Mobile search: a 44px icon-only button that opens a fixed, full-width field on focus —
   universal now, not a per-page pattern (was built for Teams & Groups only, then copied for
   Database; user asked for it everywhere 2026-09-29). #gwp_navigation .gwp_nav_search matches
   it regardless of which page's DOM wraps it (direct child on some pages, nested a level deeper
   in .gwp_nav_controls on others) — and simply doesn't match on pages where search instead lives
   inside the "…" menu, so those are untouched. */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_navigation { flex: 1 1 0; min-width: 0; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_controls { width: 100%; min-width: 0; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_search { flex: 0 0 44px; width: 44px !important; min-width: 0; overflow: hidden; position: relative; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_search input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; background: transparent; font-size: 16px; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_search:focus-within { position: fixed; left: 12px; right: 12px; top: 10px; width: auto !important; height: 44px; z-index: 9100; overflow: visible; background: var(--v3-soft); box-shadow: 0 6px 24px rgba(20, 20, 40, .18); }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_search:focus-within input { opacity: 1; padding: 0 16px 0 46px; }
    /* Centred for the 44px collapsed circle; a fixed left:16px (right for the expanded/focused
       field below, matching its input's left padding) left it a few px off-centre in the circle
       — user-reported 2026-09-29. */
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_search > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_search:focus-within > i { left: 16px; transform: translateY(-50%); }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_calheader { height: 64px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_topbuttonbar { padding: 10px 8px !important; gap: 6px !important; flex-wrap: nowrap; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_navigation { flex: 0 1 auto; min-width: 0; }
    /* v2_shell.css's mobile hamburger size (40px) was never brought down alongside everything
       else on this bar — 38/34px matches the eye/kebab pill and date pill. User-reported 2026-09-29. */
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_appchooser .gwp_menubutton { width: 38px !important; height: 38px !important; line-height: 38px !important; font-size: 18px; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_addtopbuttons { gap: 6px !important; flex: none; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate { max-width: 100%; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date, html.gwp_v2.gwp_v3 .gwp_calheader #select_dateselect_caldate { padding: 0 6px !important; font-size: 14px !important; white-space: nowrap; }
    /* flex-shrink:0 is load-bearing here, not decoration: these are flex items of #gwp_addtopbuttons
       and without it the browser silently shrinks them a few px on the main axis (width) only —
       width:Npx!important sets the TARGET size, it doesn't opt an item out of the shrink algorithm.
       Height (the cross axis) isn't touched by shrink, so the box goes width<height — a circle
       (border-radius:50%) rendered on a box like that is an oval. Confirmed live 2026-09-29. */
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calviewwrap > .gwp_topbutton, html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap > .gwp_topbutton { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calviewwrap, html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap { width: 38px; flex-shrink: 0; }
    /* These buttons only get their soft-grey fill from the @media (min-width:769px) rule further
       up — nothing mobile-side ever set it, so below 769px they fell back to v2_shell.css's base
       (white background, 1px border): a bare outlined glyph next to the date pill's solid fill,
       which read as "smaller"/lighter than the pill even though the box itself was correctly
       sized. User-reported 2026-09-29. */
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calviewwrap > .gwp_topbutton, html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap > .gwp_topbutton { background: var(--v3-soft); border: 0; }

    /* Calendar's add button: both segments (quick-add "+" / dropdown "▾") match the 38px height
       everything else on this bar uses; widths are just enough for one icon each, tighter than
       v2_shell.css's default 40/30px since this bar has less room to spare than most pages. */
    /* Widened from a near-square 44x38 (two ~20px halves) — hard to land a thumb on the right
       half specifically — to a real pill matching the eye/kebab merge's proportions, so each
       half is an actually comfortable tap target. User-reported 2026-09-29. */
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_addtb.gwp_split, html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_main, html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_caret { height: 38px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_main { width: 40px !important; padding: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_caret { width: 32px !important; }
    /* [data-noprimary="true"]'s "+" is now hidden generally — see that rule earlier in this
       file — so no mobile-specific override is needed here any more. */

    /* Eye + kebab: merge into one pill (rounded outer corners, flat shared inner edge, hairline
       divider) instead of two separate circles with a gap between them — same two tap targets,
       less width. The negative margin cancels exactly this breakpoint's #gwp_addtopbuttons gap
       (6px, set above) between just these two items; the <380px block below matches its own gap. */
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap { margin-left: -6px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calviewwrap > .gwp_topbutton { border-radius: 999px 0 0 999px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap > .gwp_topbutton { border-radius: 0 999px 999px 0; border-left: 1px solid var(--v2-line); }
}

/* =====================================================================================
   POPUPS (design 3): colours, radii, fields and footer buttons only. No layout, z-index, display, animation or DOM changes, so opening/stacking/TinyMCE-Quill behaviour is untouched.
   ===================================================================================== */
html.gwp_v2.gwp_v3 .gwp_popup { background-color: rgba(24, 24, 36, .42); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbody, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbodyd, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbodyda { border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 20, 36, .28); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popuptitle, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popuptitlealt { font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader { border-bottom-color: var(--v2-line); }

html.gwp_v2.gwp_v3 .gwp_popup .select_singledropdown, html.gwp_v2.gwp_v3 .gwp_popup .select_dateinput, html.gwp_v2.gwp_v3 .gwp_popup .select_timeinput,
html.gwp_v2.gwp_v3 .gwp_popup input.gwp_input, html.gwp_v2.gwp_v3 .gwp_popup input[type="text"], html.gwp_v2.gwp_v3 .gwp_popup input[type="email"], html.gwp_v2.gwp_v3 .gwp_popup input[type="number"],
html.gwp_v2.gwp_v3 .gwp_popup input[type="password"], html.gwp_v2.gwp_v3 .gwp_popup input[type="date"], html.gwp_v2.gwp_v3 .gwp_popup input[type="time"], html.gwp_v2.gwp_v3 .gwp_popup input[type="search"], html.gwp_v2.gwp_v3 .gwp_popup textarea, html.gwp_v2.gwp_v3 .gwp_popup select:not(.ql-header):not(.ql-color):not(.ql-background):not(.ql-align) {
    border: 1px solid var(--v2-line); border-radius: 12px; background-color: #fff; color: var(--v2-ink); font-family: 'Figtree', system-ui, sans-serif; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_popup .select_singledropdown:hover, html.gwp_v2.gwp_v3 .gwp_popup input:hover:not([type="checkbox"]):not([type="radio"]), html.gwp_v2.gwp_v3 .gwp_popup textarea:hover { border-color: #c9ccd8; }
html.gwp_v2.gwp_v3 .gwp_popup input:focus:not([type="checkbox"]):not([type="radio"]), html.gwp_v2.gwp_v3 .gwp_popup textarea:focus, html.gwp_v2.gwp_v3 .gwp_popup select:focus { outline: 0; border-color: var(--gwp_tool, #4259cd); box-shadow: 0 0 0 3px var(--gwp_tool_tint, rgba(66, 89, 205, .14)); }

html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons { border-top-color: var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_bottombuttons button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_auth_btn_secondary {
    border-radius: 999px; text-transform: none; letter-spacing: 0; font-family: 'Figtree', system-ui, sans-serif; font-size: 14px; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_close_button { background: #fff; border: 1px solid var(--v2-line); color: var(--v2-ink); box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_close_button:hover { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_save { background: var(--gwp_tool, #4259cd); border: 1px solid var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_save_button:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_save:hover { background: var(--gwp_tool_hover, #3247b8); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_sbuttonsmall { border-radius: 999px; }

html.gwp_v2.gwp_v3 .gwp_popup h2.gwp_lmsearch, html.gwp_v2.gwp_v3 .gwp_popup h2#gwp_lmsearch, html.gwp_v2.gwp_v3 .gwp_popup h2#gwp_createactivity, html.gwp_v2.gwp_v3 .gwp_popup h2#gwp_createremotemedia { width: auto; height: auto; margin: 0 4px; padding: 4px; border: 0; border-radius: 8px; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
html.gwp_v2.gwp_v3 .gwp_popup h2.gwp_lmsearch:hover, html.gwp_v2.gwp_v3 .gwp_popup h2#gwp_lmsearch:hover { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tab.gwp_popup_tabselected, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabselected { color: var(--gwp_tool_text, #2e43ae); }

/* ---------- Schedules: each schedule is its own card so where one ends and the next begins is obvious (the inner hairlines used to look the same as the between-item ones) ---------- */
html.gwp_v2.gwp_v3 .gwp_schedule_card { background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; margin: 0 0 16px; padding: 6px 20px 14px; box-shadow: 0 1px 2px rgba(20, 20, 40, .04); }
html.gwp_v2.gwp_v3 .gwp_schedule_card:hover { background: #fff; box-shadow: 0 4px 16px rgba(20, 20, 40, .08); }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_title_row { border-bottom: 0; padding-top: 10px; }
html.gwp_v2.gwp_v3 .gwp_schedule_card [class*="gwp_schedule_"][style*="border-bottom"], html.gwp_v2.gwp_v3 .gwp_schedule_card hr { border-color: var(--v3-soft); }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_schedule_card { padding: 4px 16px 12px; border-radius: 18px; } }

/* ---------- Calendar month picker: one pill like the page switchers, arrows inside it ---------- */
html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate { display: inline-flex !important; align-items: center; height: 44px; box-sizing: border-box; padding: 0 10px; gap: 4px; border-radius: 999px; background: var(--v3-soft); vertical-align: middle; }
html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date { background: transparent; padding: 0 8px; height: 44px; }
html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmleft, html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmright { display: inline-flex !important; line-height: 1; align-self: center; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 50%; font-size: 14px; color: var(--v2-muted); cursor: pointer; position: static; }
html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmleft:hover, html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmright:hover { color: var(--gwp_tool_text, #2e43ae); background: transparent; }
html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date::after { display: none; }

/* ---------- Blog / News ---------- */
html.gwp_v2.gwp_v3 #gwp_blogs_status_filter { min-width: 0 !important; }
html.gwp_v2.gwp_v3 #gwp_blogs_status_filter .select_singledropdown { height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 34px 0 18px; border: 0; border-radius: 999px; background-color: var(--v3-soft); font: 600 14.5px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_blog_card_header { gap: 12px; }
html.gwp_v2.gwp_v3 .gwp_blog_card .gwp_blog_card_title { font-weight: 600; letter-spacing: -.01em; }
html.gwp_v2.gwp_v3 #gwp_blogs_status_filter .select_singledropdown { gap: 10px; min-width: 96px; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_blog_card { padding-left: 0 !important; padding-right: 0 !important; } html.gwp_v2.gwp_v3 .gwp_blog_card_header { padding-left: 0 !important; } }

/* ---------- Settings ---------- */
@media (min-width: 769px) { html.gwp_v2.gwp_v3 #gwp_sframe { margin-left: 32px; margin-right: 32px; } }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_sframe { margin-left: 20px; margin-right: 20px; } }
html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmcontainer { display: inline-flex; align-items: center; height: 44px; box-sizing: border-box; padding: 0 10px; gap: 4px; border: 0; border-radius: 999px; background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmdropdown { background: transparent; border: 0; padding: 0 12px; font: 600 15px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); text-align: center; }
html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmleftalt, html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmright { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 14px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmleftalt, html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmright { display: inline-flex !important; line-height: 1; align-self: center; position: static; }
html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmdropdown::after, html.gwp_v2.gwp_v3 .gwp_filtersettings .select_tabmdropdown::before { display: none !important; }

/* =====================================================================================
   BROADCASTS: content step (Block Builder / Editor) — same pills, hairlines and radii as the rest of design 3
   ===================================================================================== */
html.gwp_v2.gwp_v3 .gwp_bc_subject_input { height: 48px; padding: 0 18px; border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; font: 500 16px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bc_subject_input:focus { border-color: var(--gwp_tool, #4259cd); box-shadow: 0 0 0 3px var(--gwp_tool_tint, rgba(66, 89, 205, .14)); }
html.gwp_v2.gwp_v3 .gwp_bc_editor_wrap { border: 1px solid var(--v2-line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bc_unified_toolbar { background: #fff; border: 0; border-bottom: 1px solid var(--v2-line); padding: 10px 14px; gap: 12px; align-items: center; }
html.gwp_v2.gwp_v3 .gwp_bc_unified_left { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--v3-soft); flex: none; }
html.gwp_v2.gwp_v3 .gwp_bc_editor_tab { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 36px; border: 0; border-radius: 999px; background: transparent; font: 600 14px 'Figtree', system-ui, sans-serif; color: var(--v2-muted); white-space: nowrap; }
html.gwp_v2.gwp_v3 .gwp_bc_editor_tab:hover { color: var(--v2-ink); background: transparent; }
html.gwp_v2.gwp_v3 .gwp_bc_editor_tab.gwp_bc_editor_tab_active { background: #fff; color: var(--gwp_tool_text, #2e43ae); box-shadow: 0 1px 3px rgba(20, 20, 40, .12); border: 0; }
html.gwp_v2.gwp_v3 .gwp_bc_inuse { display: inline-flex; align-items: center; margin-left: 2px; padding: 2px 9px; border-radius: 999px; background: var(--gwp_tool, #4259cd); color: #fff; font: 700 10.5px 'Figtree', system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
html.gwp_v2.gwp_v3 .gwp_bc_unified_right .gwp_bc_tab, html.gwp_v2.gwp_v3 .gwp_bblocks_settings_tab { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 13px 'Figtree', system-ui, sans-serif; color: var(--v2-muted); background: transparent; }
html.gwp_v2.gwp_v3 .gwp_bc_unified_right .gwp_bc_tab_active, html.gwp_v2.gwp_v3 .gwp_bblocks_settings_tab.gwp_bblocks_settings_tab_active, html.gwp_v2.gwp_v3 .gwp_bblocks_settings_tab.active { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); border: 0; }
html.gwp_v2.gwp_v3 .gwp_bblocks_toolbar_btn, html.gwp_v2.gwp_v3 .gwp_bblocks_preview_device_btn { border: 1px solid var(--v2-line); border-radius: 999px; background: #fff; }
html.gwp_v2.gwp_v3 .gwp_bblocks_preview_device_btn.active, html.gwp_v2.gwp_v3 .gwp_bblocks_preview_device_btn.gwp_bblocks_active { border-color: var(--gwp_tool, #4259cd); background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_bblocks_add_btn { background: var(--gwp_tool, #4259cd); border-color: var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_bblocks_add_btn:hover { background: var(--gwp_tool_hover, #334bc2); border-color: var(--gwp_tool_hover, #334bc2); color: #fff; }

html.gwp_v2.gwp_v3 .gwp_bc_builder_palette, html.gwp_v2.gwp_v3 .gwp_bblocks_palette { background: #fff; border-right: 1px solid var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_bblocks_palette_label { font: 700 11px 'Figtree', system-ui, sans-serif; letter-spacing: .09em; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_bblocks_palette_item { border: 1px solid var(--v2-line); border-radius: 14px; background: #fff; color: var(--v2-ink); font-family: 'Figtree', system-ui, sans-serif; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bblocks_palette_item:hover { border-color: var(--gwp_tool, #4259cd); background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bc_builder_canvas_wrap, html.gwp_v2.gwp_v3 .gwp_bblocks_canvas_wrap { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_bblocks_block_selected { outline-color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_bblocks_block_toolbar { border-radius: 999px; background: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_bblocks_insert_btn { border-radius: 50%; border: 1px solid var(--v2-line); background: #fff; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_bblocks_insert_btn:hover { border-color: var(--gwp_tool, #4259cd); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_bblocks_canvas_empty { border-radius: 18px; border-color: var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_bblocks_insert_popup { border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 20, 40, .16); }

html.gwp_v2.gwp_v3 .gwp_bc_builder_settings { background: #fff; border-left: 1px solid var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_bblocks_settings_title { font: 700 15px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_bblocks_section { border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; overflow: hidden; }
html.gwp_v2.gwp_v3 .gwp_bblocks_section_header { font: 700 11px 'Figtree', system-ui, sans-serif; letter-spacing: .09em; color: var(--v2-muted); background: transparent; }
html.gwp_v2.gwp_v3 .gwp_bblocks_field label { font: 700 11px 'Figtree', system-ui, sans-serif; letter-spacing: .07em; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_bblocks_input, html.gwp_v2.gwp_v3 .gwp_bblocks_font_select, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings input[type="text"], html.gwp_v2.gwp_v3 .gwp_bc_builder_settings input[type="number"], html.gwp_v2.gwp_v3 .gwp_bc_builder_settings select, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings textarea {
    border: 1px solid var(--v2-line); border-radius: 12px; background: #fff; font-family: 'Figtree', system-ui, sans-serif; color: var(--v2-ink); box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_bblocks_input:focus, html.gwp_v2.gwp_v3 .gwp_bblocks_font_select:focus, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings input:focus, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings select:focus, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings textarea:focus { outline: 0; border-color: var(--gwp_tool, #4259cd); box-shadow: 0 0 0 3px var(--gwp_tool_tint, rgba(66, 89, 205, .14)); }
html.gwp_v2.gwp_v3 .gwp_bblocks_swatch { border-radius: 50%; }
html.gwp_v2.gwp_v3 .gwp_bblocks_template_btn, html.gwp_v2.gwp_v3 .gwp_bblocks_upload_btn { border-radius: 999px; }
html.gwp_v2.gwp_v3 .gwp_bblocks_template_btn_primary { background: var(--gwp_tool, #4259cd); border-color: var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_bblocks_template_modal, html.gwp_v2.gwp_v3 .gwp_bblocks_picker { border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 20, 36, .28); }
html.gwp_v2.gwp_v3 .gwp_bblocks_template_card { border: 1px solid var(--v2-line); border-radius: 16px; }
html.gwp_v2.gwp_v3 .gwp_bblocks_picker_search { border: 1px solid var(--v2-line); border-radius: 999px; }

/* Editor side: merge bar + attachments in the same style */
html.gwp_v2.gwp_v3 .gwp_bc_merge_bar { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--v2-line) !important; border-radius: 0 !important; padding: 12px 16px !important; }
html.gwp_v2.gwp_v3 .gwp_bc_merge_bar .gwp_bc_btn { border-radius: 999px !important; padding: 5px 12px !important; background: var(--v3-soft) !important; border: 0 !important; color: var(--v2-ink) !important; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_bc_merge_bar .gwp_bc_btn:hover { background: var(--gwp_tool_tint, #eaedfa) !important; color: var(--gwp_tool_text, #2e43ae) !important; }
html.gwp_v2.gwp_v3 #gwp_bc_spotless_container { padding: 14px 16px; }
html.gwp_v2.gwp_v3 #gwp_bc_spotless_container .gwp_quill_wrap .ql-toolbar.ql-snow { border-radius: 14px 14px 0 0; border-color: var(--v2-line); background: #fff; }
html.gwp_v2.gwp_v3 #gwp_bc_spotless_container .gwp_quill_wrap .ql-container.ql-snow { border-radius: 0 0 14px 14px; border-color: var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_bblocks_settings_tab.gwp_bblocks_tab_active { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); border: 0; }
html.gwp_v2.gwp_v3 .gwp_bc_builder_settings input, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings select, html.gwp_v2.gwp_v3 .gwp_bc_builder_settings textarea { max-width: 100%; box-sizing: border-box; }
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_bc_topbar { flex-wrap: wrap; gap: 12px; }
    html.gwp_v2.gwp_v3 .gwp_bc_topbar_actions { flex-wrap: wrap; gap: 8px; }
    html.gwp_v2.gwp_v3 .gwp_bc_editor_tab { padding: 0 12px; }
    html.gwp_v2.gwp_v3 .gwp_bc_inuse { display: none; }
    html.gwp_v2.gwp_v3 .gwp_bc_editor_wrap { overflow: visible; }
}

/* ---------- Empty states (a page with nothing in it yet): soft icon tile, plain text, one clear pill button ---------- */
html.gwp_v2.gwp_v3 :is(.gwp_cp_empty, .gwp_bc_empty, .gwp_groups_empty, .gwp_members_empty, .gwp_taxp_empty, .gwp_so_empty, .gwp_exp_empty, .gwp_curriculum_empty, .gwp_lib_empty, .gwp_empty, .gwp_reg_empty, .polls_empty) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 72px 20px; border: 0; background: transparent; }
html.gwp_v2.gwp_v3 :is(.gwp_cp_empty, .gwp_bc_empty, .gwp_groups_empty, .gwp_members_empty, .gwp_taxp_empty, .gwp_so_empty, .gwp_exp_empty, .gwp_curriculum_empty, .gwp_lib_empty, .gwp_empty, .gwp_reg_empty, .polls_empty) > i:first-child {
    display: inline-flex !important; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 0 0 20px !important; border-radius: 50%; background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae) !important; font-size: 32px !important; }
html.gwp_v2.gwp_v3 :is(.gwp_cp_empty, .gwp_bc_empty, .gwp_groups_empty, .gwp_members_empty, .gwp_taxp_empty, .gwp_so_empty, .gwp_exp_empty, .gwp_curriculum_empty, .gwp_lib_empty, .gwp_empty, .gwp_reg_empty, .polls_empty) :is(h3, .gwp_groups_empty_title, .gwp_taxp_empty_title) { margin: 0 0 6px; font: 700 20px 'Figtree', system-ui, sans-serif; letter-spacing: -.01em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 :is(.gwp_cp_empty, .gwp_bc_empty, .gwp_groups_empty, .gwp_members_empty, .gwp_taxp_empty, .gwp_so_empty, .gwp_exp_empty, .gwp_curriculum_empty, .gwp_lib_empty, .gwp_empty, .gwp_reg_empty, .polls_empty) :is(p, div, .gwp_groups_empty_text, .gwp_members_empty_text, .gwp_taxp_empty_text) { color: var(--v2-muted) !important; font-size: 15px !important; max-width: 420px; }
html.gwp_v2.gwp_v3 :is(.gwp_cp_empty, .gwp_bc_empty, .gwp_groups_empty, .gwp_members_empty, .gwp_taxp_empty, .gwp_so_empty, .gwp_exp_empty, .gwp_curriculum_empty, .gwp_lib_empty, .gwp_empty, .gwp_reg_empty, .polls_empty) button {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: 22px !important; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gwp_tool, #4259cd); color: #fff; font: 600 14.5px 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 :is(.gwp_cp_empty, .gwp_bc_empty, .gwp_groups_empty, .gwp_members_empty, .gwp_taxp_empty, .gwp_so_empty, .gwp_exp_empty, .gwp_curriculum_empty, .gwp_lib_empty, .gwp_empty, .gwp_reg_empty, .polls_empty) button:hover { background: var(--gwp_tool_hover, #3247b8); }

/* ---------- Mobile: the page switcher takes all the room the bar has left (as the original did), and fixed-bar pages keep their heading clear of the bar ---------- */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_lib_type_dropdown { flex: 1 1 0; min-width: 0; width: auto; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_lib_type_dropdown .gwp_lib_type_current { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 #gwp_navigation .gwp_lib_type_current > span { min-width: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_v2_head.v2_generic { padding-top: 84px; }
    html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_aframe, html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_userframe, html.gwp_v2.gwp_v3 #gwp_frame.v2_fixedbar #gwp_databaseframe { padding-top: 12px !important; margin-top: 0 !important; }
}

/* ---------- No movement while the page builds: body margin and the bar's height are fixed from the first paint ---------- */
html.gwp_v2.gwp_v3 body { margin: 0; }
html.gwp_v2.gwp_v3 #gwp_topbuttonbar { min-height: 64px; box-sizing: border-box; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_calframe { margin-left: 8px !important; margin-right: 8px !important; width: auto !important; } }
@media (max-width: 768px) {
    /* The switcher itself growing to fill the room the now-universally-collapsed search (above)
       frees up — .gwp_nav_search's own sizing/focus behavior is handled generically above and no
       longer repeated per page here. */
    html.gwp_v2.gwp_v3 #gwp_navigation > #gwp_tg_switcher ~ .gwp_nav_controls { margin: 0; }
    html.gwp_v2.gwp_v3 #gwp_navigation > #gwp_tg_switcher ~ .gwp_nav_controls { flex: 0 0 44px; width: 44px; }
    html.gwp_v2.gwp_v3 #gwp_tg_switcher { flex: 1 1 0; min-width: 0; width: auto; }
    html.gwp_v2.gwp_v3 #gwp_tg_switcher .gwp_lib_type_current { width: 100% !important; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 #gwp_tg_switcher .gwp_tg_tab_label { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.gwp_v2.gwp_v3 #gwp_db_typedropdown { flex: 1 1 0; min-width: 0; width: auto; }
}
html.gwp_v2.gwp_v3 #gwp_topbuttonbar > #gwp_navigation:empty { display: none; }

/* ---------- Opened top-bar menu buttons (calendar view / more): the original gave the wrapper a white "tab" that joins the dropdown, which shows as a white square behind our round buttons ---------- */
html.gwp_v2.gwp_v3 #gwp_calviewwrap.gwp_navactive, html.gwp_v2.gwp_v3 #gwp_calmorewrap.gwp_navactive { background: transparent; box-shadow: none; border-radius: 50%; border-bottom-color: transparent; }
html.gwp_v2.gwp_v3 #gwp_calviewwrap.gwp_navactive > .gwp_topbutton, html.gwp_v2.gwp_v3 #gwp_calmorewrap.gwp_navactive > .gwp_topbutton { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_navactive .gwp_dropdown-additem { border: 1px solid var(--v2-line); border-radius: 18px; box-shadow: 0 16px 40px rgba(20, 20, 40, .16); margin-top: 8px; }
html.gwp_v2.gwp_v3 .gwp_topbutton, html.gwp_v2.gwp_v3 .gwp_topbuttonc { -webkit-tap-highlight-color: transparent; }

/* ---------- Calendar on phones: use the whole width (7 equal columns, no leftover strip on the right), full month label ---------- */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_calframe { margin-left: 4px !important; margin-right: 4px !important; }
    html.gwp_v2.gwp_v3 #gwp_cframe { padding-left: 0 !important; padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 #gwp_calframe [id^="gwp_row"]:not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 #gwp_calframe [id^="gwp_row"]:not([style*="display: none"]):not([style*="display:none"]) > * { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; box-sizing: border-box; }
    /* #select_caldate sits inside #gwp_navigation, general framework markup that's allowed to
       shrink to nothing (flex-basis:0, min-width:0) so the top bar never causes page-wide
       horizontal overflow — confirmed live it gets squeezed to ~100px on a narrow phone while
       its siblings (the hamburger, the Add/Eye/More group) stay fixed-width. Making the pill
       itself refuse to shrink (flex-shrink:0) was tried first and just relocated the overflow
       from "arrow spills past the pill" to "pill spills past its own parent, into the Add
       button" — confirmed live both ways at 320–375px. Arrows stay fixed and protected; the
       month label is the one thing that gives, with a small min-width + ellipsis instead of
       demanding its full text width via min-width:max-content — full "September 2026" only
       where there's actually room for it.
       flex-grow was 1 here (and on #gwp_navigation) so the pill filled whatever bar width was
       left over — user-reported 2026-09-29 as visible empty space past the month text. 0 still
       lets it shrink under real pressure, it just no longer stretches past its own content. Also
       matches the pill's height (44px, unchanged since desktop) down to the icon buttons beside
       it (38px here, 34px under 380px) — they read as two different-sized controls otherwise. */
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate { padding: 0 6px; gap: 0; flex: 0 1 auto; min-width: 0; height: 38px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date, html.gwp_v2.gwp_v3 .gwp_calheader #select_dateselect_caldate { height: 38px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmleft, html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmright { width: 22px; height: 22px; flex: 0 0 22px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date, html.gwp_v2.gwp_v3 .gwp_calheader #select_dateselect_caldate { padding: 0 2px !important; font-size: 13.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 40px; flex: 0 1 auto; }
}

/* ---------- Mobile: strip the extra inner padding some pages add inside the shared 20px gutter ---------- */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_exp_panel_receipts, html.gwp_v2.gwp_v3 .gwp_exp_search_wrap, html.gwp_v2.gwp_v3 .gwp_so_content { padding-left: 0 !important; padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_expenses_page input[type="date"], html.gwp_v2.gwp_v3 .gwp_expenses_page select { min-width: 0; max-width: 100%; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 #gwp_addtb { flex: none; }
}

/* ---------- Mobile: things that used to run off the right edge ---------- */
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_sframe [style*="display:grid"], html.gwp_v2.gwp_v3 #gwp_sframe [style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; }
    html.gwp_v2.gwp_v3 #gwp_sframe .gwp_cgd_perm_list { max-width: 100%; }
    /* Kiosk Mode admin tables become one card per row, with every action button reachable */
    html.gwp_v2.gwp_v3 .gwp_kiosk_table, html.gwp_v2.gwp_v3 .gwp_kiosk_table tbody { display: block; width: 100%; }
    html.gwp_v2.gwp_v3 .gwp_kiosk_table thead { display: none; }
    html.gwp_v2.gwp_v3 .gwp_kiosk_table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid var(--v2-line); }
    html.gwp_v2.gwp_v3 .gwp_kiosk_table td { display: block; padding: 0; border: 0; font-size: 14px; color: var(--v2-muted); }
    html.gwp_v2.gwp_v3 .gwp_kiosk_table td:first-child { flex: 1 1 100%; font-size: 17px; font-weight: 600; color: var(--v2-ink); }
    html.gwp_v2.gwp_v3 .gwp_kiosk_table td.gwp_kiosk_device_actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_bc_card_main { min-width: 0; max-width: 100%; }
    html.gwp_v2.gwp_v3 .gwp_bc_card_meta { flex-wrap: wrap; }
}
@media (max-width: 380px) {
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_topbuttonbar { padding-left: 6px !important; padding-right: 6px !important; gap: 4px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_addtopbuttons { gap: 4px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_appchooser .gwp_menubutton { width: 34px !important; height: 34px !important; line-height: 34px !important; font-size: 16px; }
    /* Below this width even the 40px label floor (768px rule above) is tight; let it go
       smaller still rather than force the arrows or Add button to move. */
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date, html.gwp_v2.gwp_v3 .gwp_calheader #select_dateselect_caldate { min-width: 24px !important; }
    /* width without a matching height turns these circular arrows into ovals below 768px too —
       same class of bug as the eye/kebab circles, just a plain missing declaration this time
       rather than a flex-shrink cause. Fixed alongside matching the pill's height to the 34px
       icon buttons at this width (was 44px, unchanged since desktop). */
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate { height: 34px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date, html.gwp_v2.gwp_v3 .gwp_calheader #select_dateselect_caldate { height: 34px; }
    /* width alone doesn't win here: the 768px block above sets flex:0 0 22px, and flex-basis
       beats a plain width property for a flex item's main-axis size regardless of cascade order
       — this "width:18px" was silently never applying even before today's height fix, the arrows
       have been 22px (not 18px) wide under 380px this whole time. flex-basis must move too. */
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmleft, html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_calmright { width: 18px; height: 18px; flex: 0 0 18px; }
    html.gwp_v2.gwp_v3 .gwp_calheader #select_caldate > .select_date, html.gwp_v2.gwp_v3 .gwp_calheader #select_dateselect_caldate { font-size: 12.5px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calviewwrap > .gwp_topbutton, html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap > .gwp_topbutton { width: 34px !important; height: 34px !important; flex-shrink: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calviewwrap, html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap { width: 34px; flex-shrink: 0; }
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_addtb.gwp_split, html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_main, html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_caret { height: 34px !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_main { width: 34px !important; padding: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_caret { width: 27px !important; }
    /* cancel this breakpoint's own 4px gap (768px block above cancels its 6px) */
    html.gwp_v2.gwp_v3 .gwp_calheader #gwp_calmorewrap { margin-left: -4px; }
}

/* Create buttons that are a single "+ Create ⌄" control (no separate main button): one whole pill, on every width */
html.gwp_v2.gwp_v3 #gwp_addtb.gwp_split[data-noprimary="true"] .gwp_split_caret { border-radius: 999px; width: auto; padding: 0 14px 0 16px; border-left-width: 1px; }
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_addtb.gwp_split[data-noprimary="true"] .gwp_split_caret { padding: 0 12px; gap: 4px; }
    /* Matched to Calendar's bar (8px/6px padding, 6px/4px gap) — user asked 2026-09-29 why
       Library's switcher had less room than Calendar's despite the same icon clusters; this
       12px padding + the default ~8px inter-cluster gap was the answer, never tightened down
       like Calendar's was earlier in this same session. */
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_topbuttonbar { padding: 10px 8px !important; gap: 6px !important; }
}
@media (max-width: 380px) {
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_topbuttonbar { padding-left: 6px !important; padding-right: 6px !important; gap: 4px !important; }
}
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_schedule_card, html.gwp_v2.gwp_v3 #gwp_content0.gwp_schedule_card { padding-left: 16px !important; padding-right: 16px !important; } }

/* Tablet widths: the calendar bar has more controls than fit beside a text "New Event" button */
@media (min-width: 769px) and (max-width: 1100px) {
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_split_main .t { display: none; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_topbuttonbar { padding-left: 16px; padding-right: 16px; gap: 8px; }
    html.gwp_v2.gwp_v3 .gwp_calheader .gwp_addtopbuttons { gap: 8px; }
}

/* =====================================================================================
   POLLS (design 3): the host screens (list, editor, modals) move onto the shared light palette through the page's own --polls-* variables.
   The presenter and join screens are shown on a projector, so they keep their dark look.
   ===================================================================================== */
html.gwp_v2.gwp_v3 body {
    --polls-bg: #fff; --polls-surface: #fff; --polls-surface2: #f3f3f0; --polls-border: #e7e7e3;
    --polls-text: #16151f; --polls-text-dim: #5e5e6a; --polls-text-muted: #8a8a96;
    --polls-primary: var(--gwp_tool, #4259cd); --polls-primary-glow: rgba(66, 89, 205, .16); --polls-accent: #6d5bd0;
    --polls-radius: 24px; --polls-radius-sm: 999px;
}
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter, html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_join_screen, html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_join_overlay {
    --polls-bg: #0e0f13; --polls-surface: #16171c; --polls-surface2: #1f2127; --polls-border: #2a2c34; --polls-text: #f4f4f6; --polls-text-dim: #a3a5b0; --polls-text-muted: #71737f; --polls-radius: 12px; --polls-radius-sm: 8px; --polls-primary: #6366f1; --polls-primary-glow: rgba(99, 102, 241, .3); --polls-accent: #8b5cf6;
}
html.gwp_v2.gwp_v3 #gwp_topbuttonbar.ov_topbuttonbar_override { display: flex !important; padding: 10px 32px !important; min-height: 64px !important; height: auto !important; background: transparent !important; border: 0 !important; box-sizing: border-box; }
html.gwp_v2.gwp_v3 .polls_dashboard, html.gwp_v2.gwp_v3 .polls_editor { min-height: 0; background: transparent; padding: 0 32px 64px; font-family: 'Figtree', system-ui, sans-serif; color: var(--polls-text); }
html.gwp_v2.gwp_v3 .polls_header { justify-content: flex-end; padding: 8px 0 16px; border: 0; background: none; }
html.gwp_v2.gwp_v3 .polls_header h1, html.gwp_v2.gwp_v3 .polls_ham_btn { display: none; }
html.gwp_v2.gwp_v3 .polls_header_actions { display: flex; gap: 10px; }
html.gwp_v2.gwp_v3 .polls_btn { height: 42px; padding: 0 18px; border: 1px solid var(--polls-border); border-radius: 999px; background: #fff; color: var(--polls-text); font: 600 14px 'Figtree', system-ui, sans-serif; box-shadow: none; transition: none; }
html.gwp_v2.gwp_v3 .polls_btn:hover { background: var(--polls-surface2); box-shadow: none; transform: none; }
html.gwp_v2.gwp_v3 .polls_btn_sm { height: 38px; padding: 0 16px; font-size: 13.5px; }
html.gwp_v2.gwp_v3 .polls_btn_primary { background: var(--polls-primary); border-color: var(--polls-primary); color: #fff; background-image: none; }
html.gwp_v2.gwp_v3 .polls_btn_primary:hover { background: var(--gwp_tool_hover, #3247b8); }
html.gwp_v2.gwp_v3 .polls_btn_success { background: #e3f3ec; border-color: transparent; color: #0b6b49; }
html.gwp_v2.gwp_v3 .polls_btn_accent { background: #ece9fb; border-color: transparent; color: #4a3aa8; }
html.gwp_v2.gwp_v3 .polls_btn_danger { background: #fff; border-color: #f0c9d6; color: #b3264f; }
html.gwp_v2.gwp_v3 .polls_btn_danger:hover { background: #fbe6ee; }
html.gwp_v2.gwp_v3 .polls_btn_warning { background: #fdf0d9; border-color: transparent; color: #8a5300; }
html.gwp_v2.gwp_v3 .polls_btn_ghost, html.gwp_v2.gwp_v3 .polls_btn_outline { background: #fff; }

html.gwp_v2.gwp_v3 .polls_group_tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 20px; }
html.gwp_v2.gwp_v3 .polls_gtab { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--polls-surface2); color: var(--polls-text-dim); font: 600 14px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .polls_gtab_active { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .polls_list { padding: 0; gap: 16px; }
html.gwp_v2.gwp_v3 .polls_card { padding: 24px 28px; border: 1px solid var(--polls-border); border-radius: 24px; background: #fff; box-shadow: none; }
html.gwp_v2.gwp_v3 .polls_card:hover { background: #fff; border-color: #cfcfca; box-shadow: none; transform: none; }
html.gwp_v2.gwp_v3 .polls_card_header h3 { font: 700 19px 'Figtree', system-ui, sans-serif; letter-spacing: -.01em; color: var(--polls-text); }
html.gwp_v2.gwp_v3 .polls_card_meta { color: var(--polls-text-muted); }
html.gwp_v2.gwp_v3 .polls_card_actions { border-top: 1px solid var(--polls-border); }
html.gwp_v2.gwp_v3 .polls_status { border: 0; border-radius: 999px; font: 700 11px 'Figtree', system-ui, sans-serif; letter-spacing: .06em; padding: 5px 12px; }
html.gwp_v2.gwp_v3 .polls_status_live { background: #e3f3ec; color: #0b6b49; }
html.gwp_v2.gwp_v3 .polls_status_draft { background: #ecebf1; color: #575468; }
html.gwp_v2.gwp_v3 .polls_status_closed { background: #fbe6ee; color: #8f1f4d; }

html.gwp_v2.gwp_v3 .polls_editor_header { padding: 8px 0 16px; border: 0; background: none; }
html.gwp_v2.gwp_v3 .polls_editor_header h2, html.gwp_v2.gwp_v3 .polls_editor_header h1 { font: 700 26px 'Figtree', system-ui, sans-serif; letter-spacing: -.02em; color: var(--polls-text); background: none; -webkit-text-fill-color: currentColor; }
html.gwp_v2.gwp_v3 .polls_access_code_bar { border: 1px solid var(--polls-border); border-radius: 20px; background: #fff; }
html.gwp_v2.gwp_v3 .polls_editor .polls_join_code, html.gwp_v2.gwp_v3 .polls_editor .polls_code_badge { color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .polls_input, html.gwp_v2.gwp_v3 .polls_textarea, html.gwp_v2.gwp_v3 .polls_option_input, html.gwp_v2.gwp_v3 .polls_dashboard select, html.gwp_v2.gwp_v3 .polls_editor select, html.gwp_v2.gwp_v3 .polls_modal_box input, html.gwp_v2.gwp_v3 .polls_modal_box select { border: 1px solid var(--polls-border); border-radius: 14px; background: #fff; color: var(--polls-text); font-family: 'Figtree', system-ui, sans-serif; box-shadow: none; }
html.gwp_v2.gwp_v3 .polls_input:focus, html.gwp_v2.gwp_v3 .polls_textarea:focus, html.gwp_v2.gwp_v3 .polls_option_input:focus { outline: 0; border-color: var(--polls-primary); box-shadow: 0 0 0 3px var(--polls-primary-glow); }
html.gwp_v2.gwp_v3 .polls_field_label, html.gwp_v2.gwp_v3 .polls_section_header { font: 700 11.5px 'Figtree', system-ui, sans-serif; letter-spacing: .08em; color: var(--polls-text-muted); }
html.gwp_v2.gwp_v3 .polls_section { border-color: var(--polls-border); }
html.gwp_v2.gwp_v3 .polls_question_card { border: 1px solid var(--polls-border); border-radius: 24px; background: #fff; box-shadow: none; }
html.gwp_v2.gwp_v3 .polls_question_number, html.gwp_v2.gwp_v3 .polls_option_letter { background: var(--polls-primary); color: #fff; }
html.gwp_v2.gwp_v3 .polls_type_option { border: 1px solid var(--polls-border); border-radius: 999px; background: #fff; color: var(--polls-text-dim); font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .polls_type_option:hover { background: var(--polls-surface2); }
html.gwp_v2.gwp_v3 .polls_type_option_active, html.gwp_v2.gwp_v3 .polls_type_option.active, html.gwp_v2.gwp_v3 .polls_type_option.selected { background: var(--polls-primary); border-color: var(--polls-primary); color: #fff; }
html.gwp_v2.gwp_v3 .polls_modal_overlay { background: rgba(24, 24, 36, .42); }
html.gwp_v2.gwp_v3 .polls_modal_box, html.gwp_v2.gwp_v3 .polls_confirm_box { border: 0; border-radius: 28px; background: #fff; box-shadow: 0 30px 80px rgba(20, 20, 36, .28); color: var(--polls-text); }
html.gwp_v2.gwp_v3 .polls_modal_header, html.gwp_v2.gwp_v3 .polls_modal_footer { border-color: var(--polls-border); }
html.gwp_v2.gwp_v3 .polls_toast { border-radius: 999px; font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .polls_back_link { color: var(--polls-text-dim); }
@media (max-width: 768px) {
    /* Was 12px against this same block's own 20px content padding one line below —
       the actual rule governing Polls' top bar (more specific than the generic
       .gwp_topbuttonbar rule, and !important), confirmed live as the real cause of
       the bar overhanging the content on the poll editor. */
    html.gwp_v2.gwp_v3 #gwp_topbuttonbar.ov_topbuttonbar_override { padding: 10px 20px !important; }
    html.gwp_v2.gwp_v3 .polls_dashboard, html.gwp_v2.gwp_v3 .polls_editor { padding: 0 20px 48px; }
    html.gwp_v2.gwp_v3 .polls_header { justify-content: flex-start; }
    html.gwp_v2.gwp_v3 .polls_card { padding: 20px; }
    html.gwp_v2.gwp_v3 .polls_card_actions { flex-wrap: wrap; gap: 8px; }
}
html.gwp_v2.gwp_v3 .polls_gtab { display: inline-flex; align-items: center; line-height: 1; }
html.gwp_v2.gwp_v3 .polls_header { padding: 0 0 12px; }
html.gwp_v2.gwp_v3 #gwp_frame:has(.polls_editor) #gwp_v2_head, html.gwp_v2.gwp_v3 #gwp_frame:has(.polls_presenter) #gwp_v2_head, html.gwp_v2.gwp_v3 #gwp_frame:has(.polls_presenter) #gwp_topbuttonbar { display: none !important; }
html.gwp_v2.gwp_v3 .polls_editor .polls_access_code_bar { margin: 0 0 20px; }
html.gwp_v2.gwp_v3 .polls_editor .polls_section { padding-left: 0; padding-right: 0; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .polls_editor .polls_access_code_bar { padding: 16px; } html.gwp_v2.gwp_v3 .polls_editor .polls_question_card { padding: 16px; } }

/* Presenter in the dark theme keeps its own dark buttons; the light host-screen button styling must not leak in */
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter .polls_btn, html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_join_overlay .polls_btn { background: var(--polls-surface); color: var(--polls-text); border-color: var(--polls-border); }
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter .polls_btn_primary { background: var(--polls-primary); border-color: var(--polls-primary); color: #fff; }
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter .polls_btn_success { background: #16a34a; border-color: #16a34a; color: #fff; }
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter .polls_btn_accent { background: var(--polls-accent); border-color: var(--polls-accent); color: #fff; }
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter .polls_btn_danger { background: transparent; border-color: #ef4444; color: #ef4444; }
html.gwp_v2.gwp_v3:not([data-poll-theme="light"]) .polls_presenter .polls_btn_warning { background: #eab308; border-color: #eab308; color: #1c1917; }

/* Polls: "New Poll" lives in the top bar's Create button; "New Group" sits on the same row as the group tabs */
html.gwp_v2.gwp_v3 .polls_dashboard { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
html.gwp_v2.gwp_v3 .polls_dashboard > .polls_header { order: 2; margin-left: auto; padding: 0 0 20px; flex: 0 0 auto; }
html.gwp_v2.gwp_v3 .polls_dashboard > .polls_group_tabs { order: 1; flex: 1 1 auto; }
html.gwp_v2.gwp_v3 .polls_dashboard > .polls_list { order: 3; flex: 1 1 100%; }
html.gwp_v2.gwp_v3 .polls_header_actions .polls_btn_primary { display: none; }
html.gwp_v2.gwp_v3 .polls_theme_seg { background: var(--v3-soft); border: 0; }
html.gwp_v2.gwp_v3 .polls_theme_opt { font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .polls_theme_opt_on { background: #fff; color: var(--v2-ink); box-shadow: 0 1px 3px rgba(20, 20, 40, .14); }
html.gwp_v2.gwp_v3 .polls_dashboard > .polls_header { display: none; }

/* SweetAlert dialogs (confirmations, prompts) in the same shape as the other popups */
html.gwp_v2.gwp_v3 .swal2-popup { border-radius: 28px; padding: 28px 28px 24px; font-family: 'Figtree', system-ui, sans-serif; box-shadow: 0 30px 80px rgba(20, 20, 36, .28); }
html.gwp_v2.gwp_v3 .swal2-title { font-weight: 700; letter-spacing: -.02em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .swal2-input, html.gwp_v2.gwp_v3 .swal2-textarea { border: 1px solid var(--v2-line); border-radius: 14px; box-shadow: none; font-family: inherit; }
html.gwp_v2.gwp_v3 .swal2-styled { border-radius: 999px !important; height: 44px; padding: 0 24px !important; font-family: inherit; font-weight: 600; box-shadow: none !important; }
html.gwp_v2.gwp_v3 .swal2-styled.swal2-confirm { background-color: var(--gwp_tool, #4259cd) !important; }
html.gwp_v2.gwp_v3 .swal2-styled.swal2-cancel { background-color: var(--v3-soft) !important; color: var(--v2-ink) !important; }

/* Tickets: the scan and back buttons are icon-only, so they are proper 44px circles with the icon centred (they were a padded pill with an inline icon) */
html.gwp_v2.gwp_v3 #gwp_tk_btn_scan, html.gwp_v2.gwp_v3 #gwp_tk_btn_back { width: 44px; padding: 0; gap: 0; align-items: center; justify-content: center; }
html.gwp_v2.gwp_v3 #gwp_tk_btn_scan:not([style*="display: none"]):not([style*="display:none"]), html.gwp_v2.gwp_v3 #gwp_tk_btn_back:not([style*="display: none"]):not([style*="display:none"]) { display: inline-flex !important; }
html.gwp_v2.gwp_v3 #gwp_tk_btn_scan .gwp_itopbutton, html.gwp_v2.gwp_v3 #gwp_tk_btn_back .gwp_itopbutton { margin: 0; padding: 0; line-height: 1; font-size: 20px; display: block; }
html.gwp_v2.gwp_v3 #gwp_tk_btns { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; }

/* ---------- Text lines up with the page title and top bar: no inset on list rows ---------- */
html.gwp_v2.gwp_v3 .gwp_members_list_header, html.gwp_v2.gwp_v3 .gwp_members_item { padding-left: 0; padding-right: 0; }
/* Schedules stay as cards (clear where each one starts and ends); the page heading is indented to line up with the text inside the cards */
html.gwp_v2.gwp_v3 .gwp_schedule_card, html.gwp_v2.gwp_v3 #gwp_content0.gwp_schedule_card { background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; margin: 0 0 16px; padding: 14px 20px 18px !important; box-shadow: 0 1px 2px rgba(20, 20, 40, .04); }
html.gwp_v2.gwp_v3 .gwp_schedule_card:hover { background: #fff; box-shadow: 0 4px 16px rgba(20, 20, 40, .08); }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_title_row { border-bottom: 0; padding-top: 10px; }
html.gwp_v2.gwp_v3 .gwp_members_col_check { justify-content: flex-start; padding-left: 0; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_h3 { font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; }
html.gwp_v2.gwp_v3 .gwp_members_col_check input[type="checkbox"] { margin-left: 0; }

/* Card pages: the card edges stay on the shared 32px edge, and the text inside the cards plus the page heading sit at 45px, level with the hamburger's three lines */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_frame:has(.gwp_schedule_card, .gwp_cur_card, .gwp_groups_card, .gwp_so_card, .gwp_settingframe, .gwp_taxp_card) #gwp_v2_head.v2_generic { padding-left: 45px; }
    html.gwp_v2.gwp_v3 .gwp_schedule_card, html.gwp_v2.gwp_v3 #gwp_content0.gwp_schedule_card { padding-left: 12px !important; padding-right: 12px !important; }
    html.gwp_v2.gwp_v3 .gwp_groups_grid { margin-left: -4px; margin-right: -4px; }
    html.gwp_v2.gwp_v3 .gwp_groups_card { padding-left: 13px; padding-right: 13px; }
    html.gwp_v2.gwp_v3 .gwp_taxp_card { padding-left: 13px; padding-right: 13px; }
    html.gwp_v2.gwp_v3 .gwp_settingframe { padding-left: 12px; padding-right: 12px; }
    html.gwp_v2.gwp_v3 .gwp_cur_card_body { padding-left: 13px; padding-right: 13px; }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_frame:has(.gwp_schedule_card, .gwp_cur_card, .gwp_groups_card, .gwp_so_card, .gwp_settingframe, .gwp_taxp_card) #gwp_v2_head.v2_generic { padding-left: 38px; }
}

/* Member avatars whose saved colour is white (or nearly) would show white initials on white: give them a readable tint instead */
html.gwp_v2.gwp_v3 .gwp_members_avatar[style*="background:#ffffff"], html.gwp_v2.gwp_v3 .gwp_members_avatar[style*="background: #ffffff"], html.gwp_v2.gwp_v3 .gwp_members_avatar[style*="background:#fff;"], html.gwp_v2.gwp_v3 .gwp_members_avatar[style*="background:white"], html.gwp_v2.gwp_v3 .gwp_members_avatar[style*="background: rgb(255, 255, 255)"] { background: var(--gwp_tool_tint, #eaedfa) !important; color: var(--gwp_tool_text, #2e43ae) !important; }
/* Type badges saved with white text (the light blue "Member" one) would be white on pale blue */
html.gwp_v2.gwp_v3 .gwp_members_type_badge[style*="color:#ffffff"], html.gwp_v2.gwp_v3 .gwp_members_type_badge[style*="color: #ffffff"], html.gwp_v2.gwp_v3 .gwp_members_type_badge[style*="color:#fff;"], html.gwp_v2.gwp_v3 .gwp_members_type_badge[style*="color:white"] { color: #1e40af !important; }

/* =====================================================================================
   SCHEDULES LIST: card, actions, page chooser, filter
   ===================================================================================== */
/* card: one border, no inner hairlines, no empty gap under the title */
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_title_row { border: 0; padding-top: 4px; align-items: center; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_more_buttonwrap { border: 0; padding: 4px 0 0; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_tags:empty { display: none; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 12px; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_tags > div { margin: 0; }
html.gwp_v2.gwp_v3 .gwp_itemcounttext { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 600 12.5px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_sched_preview_clip { max-height: 190px; }
html.gwp_v2.gwp_v3 .gwp_schedule_card [class*="gwp_schedule_"][style*="border"], html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedulewrap { border-top: 0; border-bottom: 0; }
/* the title opens the schedule */
html.gwp_v2.gwp_v3 .gwp_sched_open[role="button"] { cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_sched_open[role="button"]:hover { color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_sched_open:focus-visible { outline: 2px solid var(--gwp_tool, #4259cd); outline-offset: 3px; border-radius: 6px; }
/* ⋮ is a real button now */
html.gwp_v2.gwp_v3 .gwp_schedule_card button.gwp_nav_icon_btn { border: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--v3-soft); color: var(--v2-ink); font-size: 18px; }
html.gwp_v2.gwp_v3 .gwp_schedule_card button.gwp_nav_icon_btn:focus-visible { outline: 2px solid var(--gwp_tool, #4259cd); outline-offset: 2px; }
html.gwp_v2.gwp_v3 .gwp_nav_dropdown { border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 20, 40, .16); padding: 6px; min-width: 190px; }
html.gwp_v2.gwp_v3 .gwp_nav_dropdown > a, html.gwp_v2.gwp_v3 .gwp_nav_dropdown > .gwp_nav_menu_item, html.gwp_v2.gwp_v3 .gwp_nav_dropdown > div { border-radius: 10px; padding: 10px 12px; font: 500 14px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_nav_dropdown > .gwp_nav_menu_item:hover, html.gwp_v2.gwp_v3 .gwp_nav_dropdown > a:hover { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_nav_dropdown > .gwp_nav_menu_danger, html.gwp_v2.gwp_v3 .gwp_nav_dropdown > .gwp_nav_menu_danger i { color: #b3264f; }
/* page chooser: same pill as the page switchers */
html.gwp_v2.gwp_v3 .select_paginateframe { display: inline-block; }
html.gwp_v2.gwp_v3 .select_paginate_current { display: inline-flex; align-items: center; gap: 2px; height: 44px; box-sizing: border-box; padding: 0 8px; border: 0; border-radius: 999px; background: var(--v3-soft); box-shadow: none; cursor: pointer; }
html.gwp_v2.gwp_v3 .select_paginate_current:hover { background: #ebebe6; border: 0; }
html.gwp_v2.gwp_v3 .select_paginate_label { min-width: 26px; text-align: center; font: 700 15px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .select_paginate_arrow { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: var(--v2-muted); font-size: 14px; }
html.gwp_v2.gwp_v3 .select_paginate_arrow:not(.select_paginate_arrow_disabled):hover { background: #fff; color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .select_paginate_panel { margin-top: 8px; padding: 6px; border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(20, 20, 40, .16); }
html.gwp_v2.gwp_v3 .select_paginate_panel > div { border-radius: 10px; font: 600 14px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .select_paginate_item_active { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
/* Filter: a neutral pill like the other bar controls */
html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 600 14px 'Figtree', system-ui, sans-serif; box-shadow: none; }
html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_btn:hover { background: #ebebe6; }
html.gwp_v2.gwp_v3 #gwp_navigation .gwp_nav_btn i { color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_title_row { margin-bottom: 0; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedule_tags { margin: 0; padding: 6px 0 12px; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedulewrap { margin-top: 0; padding-top: 0; }

/* =====================================================================================
   POPUPS, second pass: one header, one tab style, one footer across every popup.
   Colours, shapes and type only: layout, display, z-index, mobile tab dropdowns and all behaviour are untouched.
   ===================================================================================== */
/* header: title + a hairline (the thick blue rule is gone) */
html.gwp_v2.gwp_v3 .gwp_popup hr.gwp_popuptitlehr { border: 0; height: 1px; margin: 12px 0 0; background: var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader { border-bottom-color: var(--v2-line); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popuptitle, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popuptitlealt, html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_title, html.gwp_v2.gwp_v3 .gwp_popup .gwp_vevt_title, html.gwp_v2.gwp_v3 .gwp_popup .gwp_sharetitle, html.gwp_v2.gwp_v3 .gwp_popup .gwp_emediatitle { font-family: 'Figtree', system-ui, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_popup a.gwp_close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--v3-soft); color: var(--v2-muted); font-size: 20px; line-height: 1; text-decoration: none; }
html.gwp_v2.gwp_v3 .gwp_popup a.gwp_close:hover { background: #ebebe6; color: var(--v2-ink); }
/* tabs: pills, selected one tinted */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabs, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabsalt { border-bottom: 0; gap: 6px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tab, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_taba, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabselected, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabaselected {
    border: 0; border-radius: 999px; padding: 8px 16px; background: transparent; box-shadow: none; color: var(--v2-muted); font: 600 14px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tab:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_taba:hover { background: var(--v3-soft); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabselected, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabaselected, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tab.gwp_active, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tab[class*="active"], html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_taba[class*="active"] { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); border: 0; }
/* footer: the same pill buttons everywhere */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_close_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_delete_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_btn, html.gwp_v2.gwp_v3 .gwp_popup .gwp_msgcompose_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 22px; border-radius: 999px; font: 600 14px 'Figtree', system-ui, sans-serif; text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_close_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_secondary { background: var(--v3-soft); border: 0; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_close_button:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_secondary:hover { background: #ebebe6; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_save, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_btn_primary { background: var(--gwp_tool, #4259cd); border: 1px solid var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_save_button:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_save:hover { background: var(--gwp_tool_hover, #3247b8); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_delete_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_delete { background: #fbe6ee; border: 0; color: #b3264f; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_delete_button:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_btn_delete:hover { background: #f6d2df; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* fields that were underline-only or square inside popups */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_activity_input.select_input, html.gwp_v2.gwp_v3 .gwp_popup .gwp_newtaxinput.select_input, html.gwp_v2.gwp_v3 .gwp_popup .gwp_mmember_messagesubject.select_input, html.gwp_v2.gwp_v3 .gwp_popup .gwp_icsnumberinput {
    border: 1px solid var(--v2-line); border-radius: 12px; background: #fff; padding: 9px 14px; box-shadow: none; font-family: 'Figtree', system-ui, sans-serif; color: var(--v2-ink); box-sizing: border-box; }
/* .select_singlesearch/.select_esearch used to be grouped into the rule above, which is MORE
   specific than select.css's own html.gwp_v2.gwp_v3 .select_singlesearch rule (this one adds
   .gwp_popup), so it silently won whenever one of these search boxes sat inside a popup -
   overriding select.css's small, compact sizing with a taller 9px/14px box and no line-height,
   confirmed live 2026-10-21 as exactly why a popup's own single-select search box stayed
   oversized/off-centre no matter what was changed in select.css. Moved out so select.css is the
   one place that sizes these; .select_esearch kept here since it has no select.css rule of its
   own, matched to the same small box model. */
html.gwp_v2.gwp_v3 .gwp_popup .select_esearch {
    border: 1px solid transparent; border-radius: 8px; background: var(--v3-soft, #f3f3f0); padding: 6px 10px; font-size: 13px; line-height: 1.4; box-shadow: none; font-family: 'Figtree', system-ui, sans-serif; color: var(--v2-ink); box-sizing: border-box; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_activity_input.select_input:focus, html.gwp_v2.gwp_v3 .gwp_popup .gwp_newtaxinput.select_input:focus, html.gwp_v2.gwp_v3 .gwp_popup .gwp_mmember_messagesubject.select_input:focus { outline: 0; border-color: var(--gwp_tool, #4259cd); box-shadow: 0 0 0 3px var(--gwp_tool_tint, rgba(66, 89, 205, .14)); }
/* attendance popup quick buttons and date arrows */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_att_quick_btn { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 600 13.5px 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_att_quick_btn:hover { background: #ebebe6; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_att_date_nav { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--v3-soft); color: var(--v2-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* POPUPS, third pass: footer alignment, type-picker tiles, media insert button */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox > hr, html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox > .gwp_hr { display: none; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_close_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox button { margin: 0; text-transform: none; }
html.gwp_v2.gwp_v3 .gwp_popup #gwp_insertmedialink { background: var(--gwp_tool, #4259cd); color: #fff; border: 1px solid var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_popup #gwp_insertmedialink:hover { background: var(--gwp_tool_hover, #3247b8); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_ipelements { gap: 12px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_ipelement { border: 1px solid var(--v2-line); border-radius: 16px; background: #fff; min-height: 96px; padding: 18px 8px 14px; font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_ipelement:hover { background: var(--gwp_tool_tint, #eaedfa); border-color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_ipicon { width: 44px; height: 44px; border-radius: 999px; background: var(--v3-soft); display: flex; align-items: center; justify-content: center; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_ipelement:hover .gwp_ipicon { background: #fff; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_ipicon i { font-size: 24px; color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_iptitle { font-weight: 600; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_upload_btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gwp_tool, #4259cd); color: #fff; font: 600 14px 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_drop_label { border-radius: 16px; }

/* POPUPS, fourth pass: compact picker modals, tabs alignment, status/save sizing, location + add fields */
html.gwp_v2.gwp_v3 #gwp_addtolib > .gwp_popupbody, html.gwp_v2.gwp_v3 #gwp_adddocuments > .gwp_popupbody, html.gwp_v2.gwp_v3 #gwp_ticketconfig > .gwp_popupbody { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); height: auto; max-height: calc(100vh - 24px); margin: 0; padding: 22px 24px 18px; box-sizing: border-box; overflow-y: auto; }
html.gwp_v2.gwp_v3 #gwp_adddocuments > .gwp_popupbody { width: min(440px, calc(100vw - 24px)); }
html.gwp_v2.gwp_v3 #gwp_ticketconfig > .gwp_popupbody { width: min(720px, calc(100vw - 24px)); }
html.gwp_v2.gwp_v3 #gwp_ticketconfig_popup_tabs { background: transparent; border-radius: 0; padding: 0; margin-left: 16px; }
html.gwp_v2.gwp_v3 #gwp_ticketconfig_popupcontent { min-height: 460px; }
html.gwp_v2.gwp_v3 #gwp_addtolib .gwp_popupbuttons, html.gwp_v2.gwp_v3 #gwp_adddocuments .gwp_popupbuttons, html.gwp_v2.gwp_v3 #gwp_ticketconfig .gwp_popupbuttons { margin-top: 4px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader .gwp_popup_tabs { margin: 12px 0 0; padding: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabs .gwp_popup_tab:first-child, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popup_tabs .gwp_popup_tabselected:first-child { margin-left: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_poststatus { display: inline-flex; align-items: center; margin: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_poststatus .select_singleframe, html.gwp_v2.gwp_v3 .gwp_popup .gwp_poststatus .select_singledropdown { min-height: 42px; box-sizing: border-box; border-radius: 999px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_locationdata .gwp_save_button { margin-right: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_addressfield.select_input { display: block; border: 1px solid var(--v2-line); border-radius: 12px; background: #fff; padding: 10px 14px; box-sizing: border-box; font-family: 'Figtree', system-ui, sans-serif; color: var(--v2-ink); margin-bottom: 8px; min-height: 42px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_addressfield.select_input:empty:before { content: attr(data-text); color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_addressfield.select_input[contenteditable="true"]:focus { outline: 0; border-color: var(--gwp_tool, #4259cd); box-shadow: 0 0 0 3px var(--gwp_tool_tint, rgba(66, 89, 205, .14)); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_locationdata .gwp_save_button { display: inline-flex; margin: 6px 8px 0 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_add { width: 42px; height: 42px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); flex: 0 0 42px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_add:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); border: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_roombox, html.gwp_v2.gwp_v3 .gwp_popup .gwp_seriesbox, html.gwp_v2.gwp_v3 .gwp_popup .gwp_topicbox, html.gwp_v2.gwp_v3 .gwp_popup .gwp_categoriesbox, html.gwp_v2.gwp_v3 .gwp_popup .gwp_projectsbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_roombox > .gwp_taxonomy_input { flex: 1 1 0; min-width: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_addtaxbox { flex: 1 0 100%; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_addtaxbutton { min-height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; }

/* POPUPS, fifth pass: footer breathing room, tab text aligned with title */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons { padding: 12px 0 18px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbody > .gwp_popupcontent { min-height: 0; overflow-y: auto; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader > .gwp_popup_tabs { margin-left: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader:has(> .gwp_popup_tabs) > .gwp_popuptitle { padding-left: 16px; }
@media (max-width: 700px) { html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader.gwp_has_mobilenav:has(> .gwp_popup_tabs) > .gwp_popuptitle { padding-left: 0; } }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox > .gwp_evt_actionbar { flex: 1 1 100%; min-width: 0; }

/* SCHEDULE EDITOR POPUP: row cards, calm buttons, mobile fit */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_actions:empty { display: none; }
@media (max-width: 700px) { html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader.gwp_has_mobilenav .gwp_dbtabs_mobilenav { margin-right: 50px; } }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupcontent .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupcontent .gwp_stoggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 600 13.5px 'Figtree', system-ui, sans-serif; box-shadow: none; text-decoration: none; margin: 0; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupcontent .gwp_save_button:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupcontent .gwp_stoggle:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); filter: none; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule { list-style: none; margin: 0 0 10px; padding: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_li { list-style: none; margin: 0; padding: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_formcontainer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: start; box-sizing: border-box; width: 100%; padding: 12px; background: #fff; border: 1px solid var(--v2-line); border-radius: 16px; box-shadow: none; margin: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_formcontainer::after { display: none; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_dragicon { float: none; margin: 0; padding-top: 9px; width: 24px; min-width: 24px; justify-content: center; color: var(--v2-muted); cursor: grab; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_fieldcontainer { float: none; width: auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_fieldcontainer > .gwp_save_button { margin: 0 !important; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_fieldcontainer > .gwp_scheduler_extrafields, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_fieldcontainer > .gwp_litem { flex: 1 1 100%; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule { border: 0; background: none; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_time, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activity { margin: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activity { flex: 1 1 240px; min-width: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activityinput { display: block; width: 100%; box-sizing: border-box; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_removecontainer { float: none; margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_removecontainer .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_fieldcontainer > div > .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_itemmedia .gwp_save_button[onclick*="viewmedia"] { width: 38px; min-width: 38px; padding: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_removecontainer #gwp_remove_button:hover, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_removecontainer [onclick*="remove"]:hover { background: #fbe6ee; color: #b3264f; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--v2-line); display: grid; gap: 8px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields > * { min-width: 0; margin: 0; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_notes textarea { border: 1px solid var(--v2-line); border-radius: 12px; padding: 10px 14px; font-family: 'Figtree', system-ui, sans-serif; box-sizing: border-box; }
@media (max-width: 700px) {
  html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_formcontainer { grid-template-columns: auto minmax(0, 1fr); padding: 10px; row-gap: 8px; }
  html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_removecontainer { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--v2-line); }
  html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_dragicon { width: 20px; min-width: 20px; }
}
@media (min-width: 701px) { html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activity { flex: 1 1 200px; max-width: calc(100% - 300px); } }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activity { display: flex; align-items: center; gap: 8px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activity > .gwp_save_button { margin: 0 !important; flex: 0 0 38px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activityinput { flex: 1 1 0; min-width: 0; width: auto; }
@media (max-width: 700px) { html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_mobilenav.gwp_lib_type_dropdown { width: calc(100% - 50px); box-sizing: border-box; } }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .select_multidropdown, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .select_tagbox, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .select_singledropdown, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .select_inputframe { border-radius: 12px; min-height: 40px; box-sizing: border-box; border: 1px solid var(--v2-line); background: #fff; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_leaderinput, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_usersinput, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .select_tagframe, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .select_multiframe { width: 100%; box-sizing: border-box; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrarow { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 701px) {
  html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields > .gwp_scheduler_notes, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields > .gwp_scheduler_extrarow, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields > .gwp_scheduler_itemtags, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields > .gwp_scheduler_itemmedia { grid-column: 1 / -1; }
}
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_itemmedia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_extrafields[style*="block"] { display: grid !important; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_itemmedia { padding: 0; margin: 0; }

/* publish-details footer: full-width, flush to the popup's rounded bottom edge */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox > .gwp_evt_pubfooter { flex: 1 1 100%; min-width: 0; box-sizing: border-box; margin: 14px -20px 0; padding: 12px 24px; background: var(--v3-soft, #f4f4f0); border-top: 1px solid var(--v2-line); border-radius: 0 0 20px 20px; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons:has(.gwp_evt_pubfooter[style*="block"]) { padding-bottom: 0; }
@media (max-width: 700px) { html.gwp_v2.gwp_v3 .gwp_popup .gwp_submitbox > .gwp_evt_pubfooter { margin: 12px -10px 0; padding: 10px 16px; } }
/* Schedule tab: rows keep a tinted card (as before) with white fields; Add is the tool-colour action */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_formcontainer { background: var(--v3-soft, #f4f4f0); }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_bottombuttons > .gwp_save_button:first-child { background: var(--gwp_tool, #4259cd); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_bottombuttons > .gwp_save_button:first-child:hover { background: var(--gwp_tool_hover, #3247b8); color: #fff; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_removecontainer .gwp_save_button, html.gwp_v2.gwp_v3 .gwp_popup .gwp_schedule .gwp_scheduler_activity > .gwp_save_button { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }

/* GUTTERS: every page uses the same 32px side margin (20px on mobile) and the same head-to-content rhythm, Library included */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_topbuttonbar { padding: 10px 32px; gap: 16px; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_v2_head { padding: 28px 32px 4px; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_lib_view { padding: 24px 32px 96px; }
}
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_save_button[id*="delete"] { background: #fbe6ee; border-color: transparent; color: #b3264f; }
html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupbuttons .gwp_save_button[id*="delete"]:hover { background: #f6d2df; }

/* PAGE TITLES: the heading text starts level with the hamburger's three lines on every page */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 #gwp_frame #gwp_v2_head, html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) #gwp_v2_head { padding-left: 45px; }
    html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_mediaframe) .gwp_lib_view { padding-left: 32px; }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_frame #gwp_v2_head, html.gwp_v2.gwp_v3 #gwp_frame:has(.gwp_schedule_card, .gwp_cur_card, .gwp_groups_card, .gwp_so_card, .gwp_settingframe, .gwp_taxp_card) #gwp_v2_head.v2_generic { padding-left: 23px; }
}

/* CALENDAR EXPORT (ICS) popup: a clean stacked form that fits the phone */
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsdetails { background: var(--v3-soft, #f4f4f0); border-radius: 16px; padding: 14px; max-width: 640px; box-sizing: border-box; }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsdetails > div { display: grid; gap: 10px; }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsdetails > div + div { margin-top: 10px; }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_utaxonomy { margin: 0; min-width: 0; }
html.gwp_v2.gwp_v3 #gwp_ics #gwp_titleics { display: block; width: 100%; min-height: 42px; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
html.gwp_v2.gwp_v3 #gwp_ics #gwp_titleics:empty:before { content: attr(data-text); color: var(--v2-muted); }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsinfo { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsinfo i { flex: 0 0 auto; margin-top: 1px; }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsnumberinput, html.gwp_v2.gwp_v3 #gwp_ics .gwp_icstax, html.gwp_v2.gwp_v3 #gwp_ics .select_multiframe { width: 100%; box-sizing: border-box; }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsnumberinput { min-height: 42px; border: 1px solid var(--v2-line); border-radius: 12px; padding: 0 14px; background: #fff; font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_bottombuttons { margin-left: 0; display: block; }
html.gwp_v2.gwp_v3 #gwp_ics #topics-add-toggle { margin-top: 12px; }
@media (min-width: 701px) { html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsdetails > div:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsdetails #gwp_titleics, html.gwp_v2.gwp_v3 #gwp_ics .gwp_icsdetails .gwp_icsinfo { grid-column: 1 / -1; } }
html.gwp_v2.gwp_v3 #gwp_ics .gwp_utaxonomy:has(> .select_multiframe:empty) { display: none; }

/* TAG PILLS: topic, series, item-count AND duration pills all share one shape, height
   and baseline. .gwp_durationwrap/.gwp_durationtext added here 2026-09-30 — the
   activity item pages' own badge rule further down duplicated this shape with a
   competing (non-!important) declaration that only .gwp_durationwrap ever actually
   used, since topic/series always won the specificity fight via THIS rule instead —
   so Duration pills were visibly a different size (8px/14px padding, auto height) from
   Topic/Series pills (fixed 28px height, 12px padding) on the activity item pages. */
html.gwp_v2.gwp_v3 .gwp_taxonomies { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.gwp_v2.gwp_v3 .gwp_taxonomies > .gwp_topicwrap, html.gwp_v2.gwp_v3 .gwp_taxonomies > .gwp_serieswrap, html.gwp_v2.gwp_v3 .gwp_taxonomies > .gwp_itemcountwrap, html.gwp_v2.gwp_v3 .gwp_taxonomies > .gwp_durationwrap { display: inline-flex !important; align-items: center; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; line-height: 1; }
html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_topictext, html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_seriestext, html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_itemcounttext, html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_durationtext { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--v3-soft, #f4f4f0); color: var(--v2-ink); font: 600 12.5px/1 'Figtree', system-ui, sans-serif; white-space: nowrap; }
html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_topictext i, html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_seriestext i, html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_itemcounttext i, html.gwp_v2.gwp_v3 .gwp_taxonomies .gwp_durationtext i { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }

/* CONTENT LINES UP WITH THE TITLE: list rows keep their hairlines on the 32px page edge, but their text starts level with the title / hamburger lines */
@media (min-width: 769px) {
    html.gwp_v2.gwp_v3 .gwp_blog_card, html.gwp_v2.gwp_v3 .gwp_tk_event_card, html.gwp_v2.gwp_v3 .gwp_bc_card { padding-left: 13px !important; padding-right: 13px !important; }
    html.gwp_v2.gwp_v3 .gwp_taxp_switcher_count, html.gwp_v2.gwp_v3 .gwp_lib_recent_header { padding-left: 13px; }
}
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_blog_card, html.gwp_v2.gwp_v3 .gwp_tk_event_card, html.gwp_v2.gwp_v3 .gwp_bc_card { padding-left: 3px !important; padding-right: 3px !important; }
    html.gwp_v2.gwp_v3 .gwp_taxp_switcher_count, html.gwp_v2.gwp_v3 .gwp_lib_recent_header { padding-left: 3px; }
}
html.gwp_v2.gwp_v3 #gwp_userframe #gwp_taxp_total { padding-left: 13px !important; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_userframe #gwp_taxp_total { padding-left: 3px !important; } html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card { padding-left: 3px !important; padding-right: 3px !important; } }
@media (min-width: 769px) { html.gwp_v2.gwp_v3 .gwp_members_item, html.gwp_v2.gwp_v3 .gwp_members_list_header, html.gwp_v2.gwp_v3 .gwp_dbitem, html.gwp_v2.gwp_v3 .gwp_exp_panel { padding-left: 13px !important; padding-right: 13px !important; } }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_members_item, html.gwp_v2.gwp_v3 .gwp_members_list_header, html.gwp_v2.gwp_v3 .gwp_dbitem, html.gwp_v2.gwp_v3 .gwp_exp_panel { padding-left: 3px !important; padding-right: 3px !important; } }

/* BLOG/NEWS: card grid */
html.gwp_v2.gwp_v3 #gwp_aframe.gwp_blogs_page { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: start; }
html.gwp_v2.gwp_v3 #gwp_aframe.gwp_blogs_page > .gwp_getpages, html.gwp_v2.gwp_v3 #gwp_aframe.gwp_blogs_page > #gwp_content { grid-column: 1 / -1; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 20px 20px 16px !important; background: var(--v3-soft); border: 0; border-radius: 20px; box-shadow: none; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card:has([id^="gwp_shadow"][style*="block"]) { grid-column: 1 / -1; background: #fff; box-shadow: inset 0 0 0 2px var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_header { display: flex; flex-direction: column; gap: 10px; padding: 0 44px 0 0 !important; cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_top { display: flex; align-items: center; gap: 10px; min-height: 36px; margin-right: -44px; padding-right: 44px; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_date { color: var(--v2-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_title_row { display: flex; align-items: flex-start; gap: 8px; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card .gwp_blog_card_title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_toggle { margin-top: 4px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_excerpt { margin: 0; color: var(--v2-muted); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_excerpt:empty { display: none; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card:has([id^="gwp_shadow"][style*="block"]) .gwp_blog_card_excerpt { display: none; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_actions { top: 14px; right: 14px; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_tags:empty { display: none; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--v2-ink); font: 600 12.5px/1 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_tag i { color: var(--gwp_tool, #4259cd); font-size: 14px; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--v2-line); }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_author { color: var(--v2-muted); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_more { margin-left: auto; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: var(--v2-ink); font: 600 13.5px 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_more:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_editbar { border-top: 1px solid var(--v2-line); margin: 0; padding: 12px 0 0; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card { padding: 16px 16px 14px !important; } }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_header { align-items: stretch; justify-content: flex-start; text-align: left; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_top { margin-right: 0; padding-right: 0; justify-content: flex-start; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_title_row { width: 100%; justify-content: flex-start; padding: 0; margin: 0; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_title { flex: 0 1 auto; text-align: left; padding: 0; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_top { padding: 0; margin: 0; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_top .gwp_blog_status_badge { margin: 0; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card .gwp_blog_card_title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_author { display: flex; align-items: center; gap: 8px; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_av { width: 26px; height: 26px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); font-size: 11px; font-weight: 700; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_authorname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card .gwp_blog_card_actions .gwp_nav_icon_btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: transparent; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card .gwp_blog_card_actions .gwp_nav_icon_btn:hover { background: var(--v3-soft-2, #ebebe6); }
html.gwp_v2.gwp_v3 #gwp_aframe [id^="gwp_blogtoggledown"] { display: none !important; }

/* BLOG POST reading page: clean sans */
html.gwp_v2.gwp_v3:has(.gwp_blog_post) body { background: var(--v3-soft, #f4f4f0); }
html.gwp_v2.gwp_v3 .gwp_blog_post { max-width: 760px; margin: 24px auto 64px; background: #fff; border: 0; border-radius: 24px; padding: clamp(24px, 5vw, 56px); font-family: 'Figtree', system-ui, sans-serif; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_blog_post_header { text-align: left; margin: 0 0 14px; }
html.gwp_v2.gwp_v3 .gwp_blog_post_title { font-size: clamp(32px, 6vw, 46px); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; color: var(--v2-ink); margin: 0 0 14px; text-wrap: balance; }
html.gwp_v2.gwp_v3 .gwp_blog_post_meta { justify-content: flex-start; gap: 16px; font: 500 14px 'Figtree', system-ui, sans-serif; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_blog_post_meta i { color: var(--gwp_tool, #4259cd); margin-right: 6px; }
html.gwp_v2.gwp_v3 .gwp_blog_post_tags { justify-content: flex-start; gap: 8px; margin-bottom: 28px; }
html.gwp_v2.gwp_v3 .gwp_blog_post_tags:empty { display: none; }
html.gwp_v2.gwp_v3 .gwp_blog_post .gwp_blog_tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--v3-soft, #f4f4f0); color: var(--v2-ink); font: 600 12.5px/1 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_blog_post .gwp_blog_tag i { color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_blog_post [id^="gwp_shadow"] { display: block; max-width: 66ch; font-family: 'Figtree', system-ui, sans-serif; font-size: 18px; line-height: 1.7; color: #34343d; }
@media (max-width: 600px) { html.gwp_v2.gwp_v3 .gwp_blog_post { margin: 12px auto 40px; border-radius: 20px; } }
html.gwp_v2.gwp_v3:has(.gwp_blog_post), html.gwp_v2.gwp_v3:has(.gwp_blog_post) body, html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_frame, html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_bframe { background: var(--v3-soft, #f4f4f0) !important; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 article.gwp_blog_post { padding: 24px 20px !important; margin: 12px 12px 40px !important; max-width: none; } }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 article#gwp_content0.gwp_blog_post, html.gwp_v2.gwp_v3 article.gwp_blog_post[id^="gwp_content"] { padding: 24px 20px !important; margin: 12px 12px 40px !important; } }
html.gwp_v2.gwp_v3 .gwp_blog_post .gwp_blog_tag, html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_tag { color: var(--v2-ink) !important; background: var(--v3-soft, #f4f4f0) !important; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_tag { background: #fff !important; }

/* MOBILE POPUP TAB SWITCHER: always a full-width row under the title and the close/share buttons */
@media (max-width: 700px) {
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_titlerow { flex-wrap: wrap; align-items: center; row-gap: 10px; }
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_titlerow > .gwp_dbtabs_title { order: 1; flex: 1 1 0; min-width: 0; }
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_titlerow > .gwp_dbtabs_topright { order: 2; margin-left: auto; flex: 0 0 auto; }
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_titlerow > .gwp_dbtabs_mobilenav.gwp_lib_type_dropdown { order: 3; flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_mobilenav .gwp_lib_type_current { width: 100%; box-sizing: border-box; }
}
@media (max-width: 700px) {
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader.gwp_has_mobilenav > .gwp_dbtabs_mobilenav { width: 100% !important; max-width: 100% !important; margin: 0 0 10px !important; flex: none !important; box-sizing: border-box; }
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_popupheader.gwp_has_mobilenav > .gwp_dbtabs_titlerow { min-height: 44px; }
}
@media (max-width: 700px) {
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_titlerow { padding-right: 0 !important; }
    html.gwp_v2.gwp_v3 .gwp_popup .gwp_dbtabs_titlerow > .gwp_dbtabs_title { padding-right: 8px; }
}
html.gwp_v2.gwp_v3 .gwp_popup .select_multidropdown, html.gwp_v2.gwp_v3 .gwp_popup .select_tagbox { border-radius: 12px; min-height: 40px; box-sizing: border-box; border: 1px solid var(--v2-line); background: #fff; font-family: 'Figtree', system-ui, sans-serif; }

/* BLOG/NEWS controls: status segments with counts, sort, count */
.gwp_blog_controls { display: none; }
html.gwp_v2.gwp_v3 .gwp_blog_controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 4px 13px 16px; }
html.gwp_v2.gwp_v3 .gwp_blog_seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--v3-soft, #f4f4f0); }
html.gwp_v2.gwp_v3 .gwp_blog_seg button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--v2-muted); font: 600 14px 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_blog_seg button .n { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #ebebe6; font-variant-numeric: tabular-nums; }
html.gwp_v2.gwp_v3 .gwp_blog_seg button[aria-pressed="true"] { background: #fff; color: var(--v2-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
html.gwp_v2.gwp_v3 .gwp_blog_seg button[aria-pressed="true"] .n { background: var(--gwp_tool_tint, #f8e6ee); color: var(--gwp_tool_text, #7d1c40); }
html.gwp_v2.gwp_v3 .gwp_blog_sort { height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--v3-soft, #f4f4f0); color: var(--v2-ink); font: 500 14px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_blog_count { margin-left: auto; color: var(--v2-muted); font-size: 13.5px; }
html.gwp_v2.gwp_v3 #gwp_blogs_status_filter, html.gwp_v2.gwp_v3 .gwp_nav_filter_toggle:has(+ .gwp_nav_filters #gwp_blogs_status_filter) { display: none !important; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_edit { margin-left: auto; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--v2-ink); font: 600 13.5px 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_edit:hover { background: #fff; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_edit + .gwp_blog_card_more { margin-left: 0; }

/* BLOG POST page: dark theme, follows the device setting */
@media (prefers-color-scheme: dark) {
    html.gwp_v2.gwp_v3:has(.gwp_blog_post), html.gwp_v2.gwp_v3:has(.gwp_blog_post) body, html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_frame, html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_bframe { background: #121216 !important; color-scheme: dark; }
    html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_topbuttonbar, html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_calheader { background: #1b1b21 !important; border-color: #2b2b33 !important; }
    html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_topbuttonbar [class*="circle"], html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_menubutton, html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_lmsearch, html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_topbuttonbar .gwp_nav_icon_btn { background: #2a2a33 !important; color: #f3f3f6 !important; }
    html.gwp_v2.gwp_v3 article.gwp_blog_post { background: #1b1b21; }
    html.gwp_v2.gwp_v3 .gwp_blog_post_title { color: #f3f3f6; }
    html.gwp_v2.gwp_v3 .gwp_blog_post_meta { color: #9c9ca8; }
    html.gwp_v2.gwp_v3 .gwp_blog_post .gwp_blog_tag { background: #2a2a33 !important; color: #f3f3f6 !important; }
    html.gwp_v2.gwp_v3 .gwp_blog_post [id^="gwp_shadow"] { color: #d2d2da; }
}
html.gwp_v2.gwp_v3 html .gwp_blog_tag a, html.gwp_v2.gwp_v3 .gwp_blog_tag a, html.gwp_v2.gwp_v3 .gwp_blog_tag i { color: inherit !important; text-decoration: none; }
html.gwp_v2.gwp_v3 .gwp_blog_tag i { color: var(--gwp_tool, #a8285a) !important; }
html.gwp_v2.gwp_v3 .gwp_blog_controls { padding: 4px 0 16px; margin: 0 32px; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_blog_controls { margin: 0 20px; } }
html.gwp_v2.gwp_v3 .gwp_blog_controls { margin-top: 12px; }

/* NOTIFICATIONS panel */
html.gwp_v2.gwp_v3 .gwp_dropdown-addnotification {
    right: 16px; margin-top: 8px; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, 80vh);
    background: #fff; border: 1px solid var(--v2-line); border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 20, 36, .22);
    font-family: 'Figtree', system-ui, sans-serif; overflow-x: hidden; scrollbar-width: thin;
}
html.gwp_v2.gwp_v3 .gwp_notif_header { padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--v2-line); background: #fff; }
html.gwp_v2.gwp_v3 .gwp_notif_header h4 { font: 700 18px 'Figtree', system-ui, sans-serif; letter-spacing: -.01em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_notif_actions { gap: 6px; }
html.gwp_v2.gwp_v3 .gwp_notif_actions button { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 999px; background: var(--v3-soft, #f4f4f0); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_notif_actions button:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_notif_actions button i { font-size: 17px; }
html.gwp_v2.gwp_v3 .gwp_notif_card { gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--v2-line); border-left: 0; transition: none; }
html.gwp_v2.gwp_v3 .gwp_notif_card.gwp_notif_unread, html.gwp_v2.gwp_v3 .gwp_notif_card.gwp_notif_read { border-left: 0; padding-left: 20px; }
html.gwp_v2.gwp_v3 .gwp_notif_card.gwp_notif_unread { background: var(--gwp_tool_tint, #f0f3fc); }
html.gwp_v2.gwp_v3 .gwp_notif_card.gwp_notif_unread::after { content: ""; position: absolute; top: 18px; right: 18px; width: 8px; height: 8px; border-radius: 999px; background: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_notif_card.gwp_notif_unread:hover::after { display: none; }
html.gwp_v2.gwp_v3 .gwp_notif_card.gwp_notif_read { background: #fff; opacity: .72; }
html.gwp_v2.gwp_v3 .gwp_notif_card:hover, html.gwp_v2.gwp_v3 .gwp_dropdown-addnotification > .gwp_notif_card:hover { background: var(--v3-soft, #f4f4f0); }
html.gwp_v2.gwp_v3 .gwp_notif_icon { width: 40px; height: 40px; border-radius: 14px; }
html.gwp_v2.gwp_v3 .gwp_notif_message { font-size: 14px; line-height: 1.45; color: var(--v2-ink); padding-right: 22px; }
html.gwp_v2.gwp_v3 .gwp_notif_message b { font-weight: 700; }
html.gwp_v2.gwp_v3 .gwp_notif_meta { margin-top: 6px; gap: 8px; font-size: 12.5px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_notif_origin_badge { padding: 2px 10px; border-radius: 999px; background: var(--v3-soft, #f4f4f0); color: var(--v2-ink); font-size: 11.5px; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_notif_card:hover .gwp_notif_origin_badge { background: #fff; }
html.gwp_v2.gwp_v3 .gwp_notif_card_actions { position: absolute; top: 10px; right: 12px; flex-direction: row; gap: 4px; }
html.gwp_v2.gwp_v3 .gwp_notif_card_actions button { width: 30px; height: 30px; padding: 0; border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--v2-ink); font-size: 15px; }
html.gwp_v2.gwp_v3 .gwp_notif_card_actions button:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_notif_empty { padding: 48px 20px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_notif_empty i { opacity: .35; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_dropdown-addnotification { left: 12px; right: 12px; width: auto; max-width: none; } }
html.gwp_v2.gwp_v3 .gwp_dropdown-addnotification { top: 66px; margin-top: 0; max-height: calc(100vh - 84px); }

/* SCHEDULE CARDS: item rows now match #gwp_schedule-item's own row styling exactly —
   see the shared ".gwp_schedule_card" additions merged into that block below via :is(),
   so both contexts are defined and maintained in one place. */
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_schedulewrap { display: flex; flex-direction: column; gap: 0; }
html.gwp_v2.gwp_v3 .gwp_schedule_card .gwp_space_row { display: none; }
@media (prefers-color-scheme: dark) {
    html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_fa-filter, html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_notification-wrapper, html.gwp_v2.gwp_v3:has(.gwp_blog_post) #gwp_la-signout, html.gwp_v2.gwp_v3:has(.gwp_blog_post) .gwp_topbutton { background: #2a2a33 !important; color: #f3f3f6 !important; }
}
html.gwp_v2.gwp_v3 .gwp_blog_sort { -webkit-appearance: none; appearance: none; padding-right: 38px; background: var(--v3-soft, #f4f4f0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236b6b76' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_dbitem { position: relative; }
    html.gwp_v2.gwp_v3 .gwp_dbitem_actions { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); display: flex; gap: 6px; margin: 0; padding: 0; border: 0; }
    html.gwp_v2.gwp_v3 .gwp_dbitem_btn { width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 999px; display: grid; place-items: center; }
    html.gwp_v2.gwp_v3 .gwp_dbitem_arrow { display: none; }
    html.gwp_v2.gwp_v3 .gwp_dbitem_content { padding-right: 122px; min-width: 0; }
}
@media (max-width: 768px) {
    /* padding-left/right and #gwp_navigation's flex used to be redeclared here, silently
       overriding the tuned values set earlier in this file (the v3_global.css last-wins trap
       again, this time within the same file) — #gwp_navigation's flex:1 1 0 was letting it (and
       the date pill inside it) grow to fill leftover bar width instead of hugging its own
       content, which is why the pill had visible empty space past "September 2026". Removed;
       the earlier .gwp_calheader rules (padding 10px 8px, #gwp_navigation flex:0 1 auto) are
       the authoritative ones now. Confirmed live 2026-09-29. */
    html.gwp_v2.gwp_v3 #gwp_filtersettings, html.gwp_v2.gwp_v3 #gwp_selectsettingtype, html.gwp_v2.gwp_v3 .gwp_filtersettings { max-width: 100%; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_calheader #gwp_navigation [class*="select_tabmcontainer"] { max-width: 100% !important; width: 100% !important; box-sizing: border-box; } }

/* POPUP FOOTERS: same distance from the bottom edge everywhere */
html.gwp_v2.gwp_v3 .gwp_popup .gwp_evt_actionbar { padding-bottom: 0; }
html.gwp_v2.gwp_v3 #gwp_expande .gwp_popupbuttons, html.gwp_v2.gwp_v3 #gwp_vmember .gwp_popupbuttons, html.gwp_v2.gwp_v3 #gwp_emember .gwp_popupbuttons, html.gwp_v2.gwp_v3 #gwp_invite .gwp_popupbuttons, html.gwp_v2.gwp_v3 #gwp_mmember .gwp_popupbuttons { margin-bottom: -15px; }

/* BLOG/NEWS: marker on posts that come from a broadcast or Mailchimp */
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_source { margin-left: auto; margin-right: 44px; padding: 2px 10px; border-radius: 999px; background: #fff; color: var(--v2-muted); font: 600 11.5px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_source, html.gwp_v2.gwp_v3 #gwp_aframe .gwp_blog_card_date { white-space: nowrap; }

/* TICKET TYPE ROWS (js/dist/cposts.js gwp_tw_buildTypeList, Ticket Configuration popup):
   built entirely from inline styles, one flex row — move-up/down buttons, a flex:1 Ticket
   Name field, a fixed 92px Price field, a fixed 70px Max Qty field and a delete button, all
   side by side. On a phone the fixed-width siblings alone eat almost the whole row, so the
   flex:1 Ticket Name field (min-width:0, no protection) collapses to a few px and its label
   visually runs into Price's — confirmed live. Only !important can beat the inline styles
   here (no class to hand-edit) without touching the dense generated JS. Ticket Name gets
   its own full-width line above everything else; Price/Max Qty flex instead of staying
   fixed-width so they still fit alongside the move/delete buttons on the second line. */
@media (max-width: 600px) {
    .gwp_tw_typerow > div { flex-wrap: wrap !important; row-gap: 8px !important; }
    .gwp_tw_typerow > div > div[style*="flex:1;min-width:0"] { flex-basis: 100% !important; order: -1; }
    .gwp_tw_typerow > div > div[style*="width:92px;flex-shrink:0"] { width: auto !important; flex: 1 1 80px !important; }
    .gwp_tw_typerow > div > div[style*="width:70px;flex-shrink:0"] { width: auto !important; flex: 1 1 70px !important; }
}

/* =====================================================================================
   CALENDAR LIST VIEW: redesigned 2026-09-29 at the user's request (see the "Calendar List
   View Redesign" artifact). Was never touched by Clarity at all before this — zero rules for
   any of these selectors existed anywhere in v2_shell/v3_shell/v3_global, confirmed by grep.
   A colour dot replaces the (until now effectively invisible — .gwp_evt_accent had no width/
   height outside an unrelated @media print block) accent bar; times go through the new
   gwp_sdFormatTime() helper (calfuncs.js) instead of the old raw-24h+am/pm-suffix concatenation;
   "edit event" becomes an icon-only button via a Line Awesome pseudo-element (no DOM change —
   the existing <i>edit event</i> text is hidden, not removed, so no behaviour changed, only
   what's visible); the " | " separator between title and edit is hidden with the same
   font-size:0-then-restore trick this file's own @media print block already uses for the same
   text node. Layout/permission/onclick logic in calfuncs.js is untouched.
   ===================================================================================== */
html.gwp_v2.gwp_v3 .gwp_singleday { margin: 0 0 24px; border-radius: 0; background: transparent; }
html.gwp_v2.gwp_v3 .gwp_singledaytitle {
    background: transparent; border-left: 0; border-bottom: 1px solid #ececec;
    padding: 4px 4px 10px; text-transform: none; letter-spacing: normal;
    /* Was 13px — smaller than the 15px event titles it groups, an inverted hierarchy
       (user-flagged 2026-09-29). A section label should read as more prominent than the
       items under it, not less. */
    font: 600 17px 'Figtree', system-ui, sans-serif; color: #0f1115;
}
html.gwp_v2.gwp_v3 .gwp_sdevents { padding: 0; }
html.gwp_v2.gwp_v3 .gwp_sdehr { display: none; }
html.gwp_v2.gwp_v3 .gwp_sdevent {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 4px; margin: 0; border: 0; border-bottom: 1px solid #ececec; border-radius: 0;
    background: transparent; font-size: 0; line-height: 1.5; transition: none;
}
html.gwp_v2.gwp_v3 .gwp_sdevent:hover { background: #fafaf9; }
html.gwp_v2.gwp_v3 .gwp_sdevent .gwp_evt_accent {
    display: inline-block; width: 8px; height: 8px; border-radius: 999px;
    margin-top: 7px; flex: 0 0 8px;
}
html.gwp_v2.gwp_v3 .gwp_sdevent > i.la-calendar-day { display: none; }
html.gwp_v2.gwp_v3 .gwp_sdeventtitle {
    flex: 1 1 auto; min-width: 0; padding: 0; background: transparent;
    color: #0f1115; font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; font-weight: 600;
}
html.gwp_v2.gwp_v3 .gwp_sdeventtitle:hover { background: transparent; color: #334bc2; }
html.gwp_v2.gwp_v3 .gwp_sdeventtitle b { font-weight: 600; color: #6b7280; margin-right: 5px; }
html.gwp_v2.gwp_v3 .gwp_sdeventtitle i { font-style: normal; font-size: 12.5px; color: #6b7280; font-weight: 500; }
html.gwp_v2.gwp_v3 .gwp_sdedit {
    flex: 0 0 30px; width: 30px; height: 30px; padding: 0; margin-left: auto;
    border-radius: 999px; background: #f3f3f0; display: flex; align-items: center; justify-content: center;
    position: relative;
}
html.gwp_v2.gwp_v3 .gwp_sdedit i { display: none; }
html.gwp_v2.gwp_v3 .gwp_sdedit:before {
    content: "\f304"; font-family: "Line Awesome Free"; font-weight: 900; font-size: 13px; color: #6b7280;
}
html.gwp_v2.gwp_v3 .gwp_sdedit:hover { background: #eaedfa; }
html.gwp_v2.gwp_v3 .gwp_sdedit:hover:before { color: #2e43ae; }

/* Multi-day/reoccurring list-view rows (gwp_createlrevent in calfuncs.js) share .gwp_sdevent's
   row container (flex/padding/hairline/font-size:0 above already applies) but use their own
   title class, .gwp_leventtitles, and have no .gwp_evt_accent dot or .gwp_sdedit button — same
   typography treatment as .gwp_sdeventtitle so both row kinds read consistently. */
html.gwp_v2.gwp_v3 .gwp_leventtitles {
    flex: 1 1 auto; min-width: 0; padding: 0; background: transparent;
    color: #0f1115; font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; font-weight: 600;
}
html.gwp_v2.gwp_v3 .gwp_leventtitles b { font-weight: 600; color: #6b7280; margin-right: 5px; }
html.gwp_v2.gwp_v3 .gwp_leventtitles i { font-style: normal; font-size: 12.5px; color: #6b7280; font-weight: 500; }

/* ============================================================
   Schedule item (output/schedule_item.php) + Activity item
   (output/activity_item.php) full-page redesign — matches the
   approved "Schedule & Activity Item Redesign" design canvas.
   Row markup restructure (time+title on one line) lives in
   output/schedule_rows.php's non-compact branches only, which
   are exclusively consumed by schedule_item.php — the compact
   card-preview branches (output/schedules.php) are untouched.
   ============================================================ */
html.gwp_v2.gwp_v3 #gwp_schedule-item,
html.gwp_v2.gwp_v3 #gwp_activity-item {
    font-family: 'Figtree', 'DM Sans', system-ui, sans-serif;
    color: var(--v2-ink);
    /* schedule_item.css sets position:relative on #gwp_schedule-item (needed so the
       absolutely-positioned print button anchors to the card); activity_item.css never
       sets it on #gwp_activity-item at all. Without this, the print button on the
       standalone activity page would position relative to the page/viewport instead of
       the card — invisible on a narrow test viewport where the two nearly coincide, but
       badly wrong on any desktop screen wider than the card's own 860px max-width. */
    position: relative;
    /* schedule_item.css's own #gwp_schedule-item rule happens to set background:#fff,
       but activity_item.css's #gwp_activity-item never did — leaving it fully
       transparent there, so the grey page ground showed straight through as if the
       card itself were grey (and the off-white Description card inside it then read as
       LIGHTER than its own "card", the opposite of the schedule page). Set explicitly
       here so both pages get a real white card regardless of what their own base
       stylesheet happens to do. */
    background: #ffffff;
}
/* The "card on a grey page" look (border, shadow, radius, grey ground, the width
   constraint that makes it float centred) is a SCREEN thing — on paper there's no
   surrounding page to separate it from, so it should print as plain full-width content,
   which is what the base stylesheets' own @media print blocks already do (reset
   border/radius/shadow/padding to a flat, borderless, full-width layout). Everything
   below that creates the card must stay scoped to screen so it doesn't outrank that
   print reset — these rules have higher specificity than the base ones, so left
   unscoped they'd win in print too and the card chrome would show up on paper. */
@media screen {
    html.gwp_v2.gwp_v3 #gwp_schedule-item,
    html.gwp_v2.gwp_v3 #gwp_activity-item {
        border: 1px solid #ececec;
        box-shadow: 0 1px 3px rgba(15, 17, 21, .06);
        border-radius: 16px;
        padding: 40px 44px;
        max-width: 860px;
        margin: 24px auto;
    }
    html.gwp_v2.gwp_v3:has(#gwp_schedule-item),
    html.gwp_v2.gwp_v3:has(#gwp_schedule-item) body,
    html.gwp_v2.gwp_v3:has(#gwp_activity-item),
    html.gwp_v2.gwp_v3:has(#gwp_activity-item) body { background: #f3f3f0 !important; }
}
@media only screen and (max-width: 600px) {
    html.gwp_v2.gwp_v3 #gwp_schedule-item, html.gwp_v2.gwp_v3 #gwp_activity-item { padding: 22px 20px; margin: 12px auto; }
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_title_underline,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_item_hr,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_section_divider,
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_accent_bar { display: none; }
html.gwp_v2.gwp_v3 .gwp_title_wrap h1,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_item_header h1 {
    font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--v2-ink);
}
/* Base position (top/right) differs per page — schedule_item.css uses top:28px/right:28px,
   activity_item.css uses top:20px/right:30px — a real, visible inconsistency between the
   two pages since neither was ever overridden here. Pinned to one shared value matching
   this page's own 44px container padding (24px + roughly half the icon's own size, so
   it optically lines up with the title baseline rather than sitting flush in the corner). */
html.gwp_v2.gwp_v3 .gwp_item_print {
    border: 0; background: var(--v3-soft); border-radius: 999px;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    position: absolute; top: 32px; right: 32px;
}
@media only screen and (max-width: 600px) {
    html.gwp_v2.gwp_v3 .gwp_item_print { top: 18px; right: 16px; width: 40px; height: 40px; }
}
/* activity_item.css's own print block hides .gwp_icon_print (the glyph) but never the
   button around it — leaving an empty grey circle on the printed page. Hide the whole
   button, not just its icon. */
@media print {
    html.gwp_v2.gwp_v3 .gwp_item_print { display: none !important; }
}
html.gwp_v2.gwp_v3 .gwp_item_print:hover { background: var(--gwp_tool_tint, #eaedfa); box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_icon_print { border: 0; font-size: 18px; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_icon_print:hover { color: var(--gwp_tool_text, #2e43ae); }

/* Metadata badges (schedule) + taxonomy/duration badges (activity) — scoped to these two
   page containers; output/schedules.php's own list-card badges reuse .gwp_topicwrap/
   .gwp_serieswrap/.gwp_durationwrap with no #gwp_schedule-item ancestor and are untouched. */
/* The true reference edge on this page is the PROGRAMME row list (.gwp_schedulerow etc)
   and the title — neither has any box of its own, so their text sits exactly flush with
   the card's own padding (inset 0). Pills/badges DO have their own box with 14px left
   padding, so a flush (margin:0) box leaves their TEXT sitting 14px right of that
   reference. User confirmed 2026-09-30: text must match the programme/title's flush
   inset, not just match other boxed elements — so the row is pulled left by the pill's
   own 14px padding, putting its BOX outside the programme's flush edge (a deliberate,
   small overhang into the card's outer padding, not a bug) so the TEXT lands exactly
   on it. */
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_schedule_metabadges { gap: 10px; margin: 20px 0 10px -14px; }
/* Topic and Series are two separate sibling .gwp_staxonomies wrappers inside one
   .gwp_block (unlike the activity page's single .gwp_taxonomies wrapping every pill).
   Same -14px text-alignment pull as .gwp_schedule_metabadges above, for the same reason —
   .gwp_topicwrap/.gwp_serieswrap also carry 14px of their own left padding. */
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_block:has(> .gwp_staxonomies) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 0 -14px;
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_staxonomies { margin: 0; }
/* NOTE: on the ACTIVITY page, .gwp_topicwrap/.gwp_serieswrap/.gwp_durationwrap are
   deliberately NOT listed here — they sit inside .gwp_taxonomies there, which the
   canonical ".gwp_taxonomies >" pill rule above (with !important) owns entirely; a
   second, weaker rule for them here would either be dead weight or — as
   .gwp_durationwrap was until this was noticed — silently render differently because
   it was the one wrapper that rule never covered. On the SCHEDULE page, Topic/Series
   sit inside .gwp_staxonomies instead (a different wrapper, one pill per instance,
   no competing canonical rule), so .gwp_topicwrap/.gwp_serieswrap DO still need
   styling here — only for #gwp_schedule-item, never #gwp_activity-item. */
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_metabadge,
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_topicwrap,
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_serieswrap {
    /* Base CSS gives .gwp_topicwrap/.gwp_serieswrap their own margin-right:6px, which
       stacked on top of the flex row's gap:10px for a 16px gap instead of 10px. */
    margin: 0;
    background: #f3f3f0; border: 0; color: #6b7280;
    font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; font-weight: 600;
    border-radius: 999px; padding: 8px 14px;
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_tagwrap { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_metabadge i { color: #9ca3af; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_topictext, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_seriestext,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_topictext, html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_seriestext, html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_durationtext {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; color: #6b7280;
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_topictext b, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_seriestext b,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_topictext b, html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_seriestext b, html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_durationtext b {
    color: var(--v2-ink);
}
/* The term links inside these pills (get_the_term_list()'s own <a> tags) inherit the
   base stylesheet's .gwp_topictext > a { color: var(--accent1) } — the SITE's own
   customizer accent colour (green on this install), not Clarity's tool colour. Activity's
   own topic/series links are also covered by the broader #gwp_activity-item a rule
   further down, but stated explicitly here too so both contexts read from one place. */
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_topictext a, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_seriestext a,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_topictext a, html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_seriestext a {
    color: var(--gwp_tool_text, #2e43ae);
}

/* Description card (schedule) + all standard-space cards (activity: goal / equipment /
   description / link / attachments — all share .gwp_standard_space). margin-left pulls
   the box left by exactly its own left padding (24px) so its TEXT lands flush with the
   title/programme row text (inset 0), the same reference every other left-aligned
   element on the page uses — the box's own background then sits 24px further left than
   the programme's flush edge, which is expected: the programme has no box of its own to
   eat into that space, this card does. User confirmed 2026-09-30 this text-flush
   behaviour (not box-flush) is the correct one. */
html.gwp_v2.gwp_v3 .gwp_description_card,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_standard_space {
    background: #f9f9f7; border-left: 0; border-radius: 16px; padding: 22px 24px; margin: 24px 0 0 -24px;
}
/* Activity page's own taxonomy pills get their padding from the canonical
   ".gwp_taxonomies > ... .gwp_topictext" rule above (0 12px on the inner text span,
   wrapper itself unpadded) — pull the wrapper left by that same 12px so pill text lands
   on the same flush (inset 0) edge as .gwp_standard_space's text and the title, matching
   the schedule page's equivalent -14px pull just above (different number only because
   this page's pills pad their inner span 12px, not the wrapper div 14px like schedule's do). */
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_taxonomies { padding: 0; margin: 0 0 0 -12px; }
/* activity_item.css's own base CSS gives #gwp_header a legacy padding-left:10px
   (schedule_item.css has no such rule) — cancel it so the h1 sits flush with the
   card's own padding, unrelated to the box-shift fix above. */
html.gwp_v2.gwp_v3 #gwp_activity-item #gwp_header { padding-left: 0; }
html.gwp_v2.gwp_v3 .gwp_description_label {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .01em;
    color: #6b7280; text-transform: uppercase; margin-bottom: 6px;
}
/* The align-left icon here (from output/schedule_item.php) is the only eyebrow label on
   either page that has an icon at all — Programme/Opening/Closing/Goal/Equipment are all
   plain text — and at this size a row of 4 horizontal bars reads more like a stray
   divider line than a meaningful icon. Dropped for consistency with every other label. */
html.gwp_v2.gwp_v3 .gwp_description_label i { display: none; }
html.gwp_v2.gwp_v3 .gwp_description_content,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_standard_space {
    font-size: 15px; line-height: 1.75; color: var(--v2-ink);
}
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_standard_space > b:first-child,
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_subheader {
    display: block; font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700;
    letter-spacing: .01em; text-transform: uppercase; color: #6b7280; margin-bottom: 8px;
}
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_standard_space ul,
html.gwp_v2.gwp_v3 .gwp_eq_pills {
    list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;
}
/* Equipment pills sat on a #f3f3f0 background inside a #f9f9f7 card — two near-identical
   near-white greys, so the pills barely read as pills at all. Switched to the tool-tint
   colour already used for tag pills elsewhere (e.g. the schedule page's .gwp_tagwrap),
   which gives real contrast against the card while staying in the Clarity palette.
   .gwp_eq_pills is the same treatment for the Library Activities-tab preview's own
   Equipment list (js/dist/library_v2.js now emits individual <li> pills there too,
   instead of one comma-joined text string, to match this page — 2026-09-30). */
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_standard_space li,
html.gwp_v2.gwp_v3 .gwp_eq_pills li {
    background: var(--gwp_tool_tint, #eaedfa); border-radius: 999px; padding: 8px 14px;
    font-size: 13px; font-weight: 600; color: var(--gwp_tool_text, #2e43ae);
}
html.gwp_v2.gwp_v3 #gwp_activity-item .gwp_video_embed { border-radius: 10px; overflow: hidden; }
/* Attachments: images and documents share one tile grid, matching the Library tool's
   ACTUAL live-verified media grid (.gwp_media_grid / .gwp_mediaitem / .gwp_mediabox /
   .gwp_mediafilename — checked 2026-09-30 via a real logged-in session, not just static
   code: 130px tile, border-radius:16px, overflow:hidden, NO border, NO shadow; thumbnail
   zone .gwp_mediabox is a fixed 130x85 box (not a 4:3 aspect-ratio) on #f1f5f9; icon
   32px at #94a3b8; filename 13px, INK-coloured (not muted grey), padding 10px 4px 0,
   no border-top divider. An earlier pass here used approximated values from static-code
   research alone (grey filename, small 11px text, a border+shadow, 4:3 ratio) that
   turned out wrong once checked live — corrected to match exactly, gap included
   (user confirmed 2026-09-30: match Library fully, spacing may change to get there).
   Icon colour-coding by file type is kept as a deliberate addition beyond Library's
   plain grey icons — everything else matches. Unscoped from #gwp_activity-item (was
   originally scoped there) 2026-09-30: js/dist/library_v2.js's attachment-tile builder
   for the Activities-tab "More +" preview now emits these same class names too, so one
   set of rules serves both places — gwp_act_att_* is a name unique enough to this
   feature that leaving it unscoped carries no real collision risk. */
html.gwp_v2.gwp_v3 .gwp_act_att_grid {
    display: flex; flex-wrap: wrap; column-gap: 36px; row-gap: 44px;
}
html.gwp_v2.gwp_v3 .gwp_act_att_tile {
    display: block; width: 130px; border-radius: 16px; background: #fff; border: 0;
    box-shadow: none; text-decoration: none; overflow: hidden;
}
html.gwp_v2.gwp_v3 .gwp_act_att_tile_thumb {
    display: flex; align-items: center; justify-content: center; width: 130px; height: 85px;
    background: #f1f5f9; color: #94a3b8; font-size: 32px;
}
html.gwp_v2.gwp_v3 .gwp_act_att_tile_thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
html.gwp_v2.gwp_v3 .gwp_act_att_tile_name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    padding: 10px 4px 0; border-top: 0;
    font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; color: var(--v2-ink); line-height: 1.4;
}
html.gwp_v2.gwp_v3 #gwp_activity-item a { color: var(--gwp_tool_text, #2e43ae); }

/* Embedded "linked activity detail" eyebrow (schedule_item.php only, printed just
   above each reused #gwp_activity-item block when a schedule references an activity) */
html.gwp_v2.gwp_v3 .gwp_linked_activity_label {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: #6b7280; margin: 32px auto 12px; max-width: 860px; padding: 0 44px; box-sizing: border-box;
}
@media print {
    html.gwp_v2.gwp_v3 .gwp_linked_activity_label { display: none; }
}
@media only screen and (max-width: 600px) {
    html.gwp_v2.gwp_v3 .gwp_linked_activity_label { padding: 0 20px; margin: 24px auto 10px; }
}

/* Programme heading + row list. The row-list rules (gwp_schedulerow, gwp_header_row,
   gwp_sheader, gwp_stext, gwp_sdecision, gwp_slink, etc) are shared verbatim with the
   compact card-preview on output/schedules.php (.gwp_schedule_card) via :is(...) below —
   both contexts render identical row markup (output/schedule_rows.php unified them
   2026-09-30) so they must stay pixel-identical here too, not just at first glance.
   The Programme heading itself (below) stays #gwp_schedule-item only — the compact
   card has no such heading. */
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_programme_heading {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: #6b7280; padding-bottom: 0; margin-bottom: 8px;
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_schedulewrap.gwp_scheduleprogramme { border-top: 0; padding-top: 0; margin-top: 32px; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_schedulerow,
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_schedulerow_alt {
    background: transparent; border: 0; border-radius: 0; padding: 20px 0; margin-top: 0; border-bottom: 1px solid #ececec;
    display: block; overflow: visible;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_schedulewrap.gwp_scheduleprogramme > div:last-child { border-bottom: 0; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_header_row, html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_subheader_row { padding: 24px 0 18px; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_sheader {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--gwp_tool_text, #2e43ae); border-bottom: 0; padding: 0;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_ssheader {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: #9ca3af;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_space_row { padding: 0; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_sspace { height: 10px; }

html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_item_number {
    background: transparent; color: #9ca3af; font-family: 'Figtree', system-ui, sans-serif;
    font-size: 14px; font-weight: 700; min-width: 22px; height: auto; margin-right: 4px; border-radius: 0;
    display: inline-flex; align-self: flex-start; padding-top: 1px;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_main_col { font-size: 15px; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_item_toprow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* Time drops the colour-pill treatment: bold, dark, tabular numerals so a column of
   times lines up, with just the clock/coffee icon carrying a whisper of colour — the
   title next to it stays the loudest thing on the row, not a competing chip. */
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_time_col {
    display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex-shrink: 0;
    font-family: 'Figtree', system-ui, sans-serif; font-size: 17px; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--v2-ink); background: none; border-radius: 0; padding: 0; white-space: nowrap;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_time_col i { font-size: 15px; color: var(--gwp_tool_text, #4259cd); }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_break_badge { color: #92400e; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_break_badge i { color: #92400e; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_break_row .gwp_item_name { color: #6b7280; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_item_name {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 17px; font-weight: 600; color: var(--v2-ink); margin-bottom: 0;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_item_name b { font-weight: 600; color: inherit; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_stask_name i { color: #9ca3af; margin-right: 2px; }
/* Meta line is now one line of plain text joined by middots (built with that
   separator in output/schedule_rows.php) rather than a row of separate icon chips —
   priority/status keep a colour, as bold inline words, everything else stays plain. */
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_item_meta {
    margin-top: 8px; font-family: 'Figtree', system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: #6b7280;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_spriority, html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_sstatus {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; background: none; border-radius: 0; padding: 0;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_inline_notes {
    margin-top: 8px; background: none; border-radius: 0; padding: 0;
    font-family: 'Figtree', system-ui, sans-serif; font-size: 14px; color: #6b7280; font-style: italic;
}

/* Text / decision / link rows */
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_stext { font-family: 'Figtree', system-ui, sans-serif; font-size: 14.5px; color: #6b7280; white-space: pre-wrap; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_sdecision {
    display: flex; align-items: flex-start; gap: 8px; background: transparent; border-left: 0; padding: 0;
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; color: var(--v2-ink); font-weight: 600;
}
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_sdecision i { color: #9ca3af; margin-top: 2px; }
/* .gwp_sdecision_notes is a sibling of .gwp_sdecision, not a flex child of it (the status
   pill moved out of the title line and into this second line, combined with the notes
   text via an em dash in schedule_rows.php) — a plain block, no flex needed. */
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_sdecision_notes { font-style: normal; color: #6b7280; font-size: 14px; margin-top: 6px; font-weight: 400; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_slink { font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_slink a { color: var(--gwp_tool_text, #2e43ae); font-weight: 600; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_slink i { color: #9ca3af; }
html.gwp_v2.gwp_v3 :is(#gwp_schedule-item, .gwp_schedule_card) .gwp_slink_notes { font-style: normal; color: #6b7280; font-size: 14px; }

/* Item media grid — scoped to the full schedule-item page container only, never the
   compact .gwp_schedule_card preview (output/schedules.php), which shares these same
   class names but must keep its own, separately-scoped Clarity styling untouched. */
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_caption {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #6b7280; margin-bottom: 12px;
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_caption i { color: #9ca3af; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_item { border: 0; border-radius: 10px; overflow: hidden; background: #f3f3f0; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_item.gwp_media_image { aspect-ratio: 1; background: #eef0fb; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_image img { object-fit: cover; height: 100%; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_label { font-family: 'Figtree', system-ui, sans-serif; font-size: 11px; color: #6b7280; border-top: 0; padding: 6px 8px; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_pdf_header, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_doc_header,
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_embed_schedule_header { border-bottom: 1px solid #ececec; font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_pdf_header i, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_doc_header i,
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_embed_schedule_header i { color: #9ca3af; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_pdf_open, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_doc_open,
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_embed_schedule_link { color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_audio { background: #f9f9f7; border-radius: 10px; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_file, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_link_item {
    background: #f3f3f0; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    color: #6b7280; font-family: 'Figtree', system-ui, sans-serif; font-size: 10px; font-weight: 600;
}
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_file a, html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_link_item a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: inherit; text-decoration: none; padding: 8px; text-align: center; }
html.gwp_v2.gwp_v3 #gwp_schedule-item .gwp_media_file_icon { font-size: 18px; color: #6b7280; }

/* ============================================================
   Library — Activities tab preview cards (output/media.php,
   js/dist/library_v2.js's gwp_med_renderactivities()) — matched
   to output/activity_item.php's own styling per user request
   2026-09-30 ("they should all have same styling"). Base card
   (.gwp_activities) and title (.gwp_activitytitle) come from
   css/output_v2.css, unscoped, so they render this way regardless
   of Clarity — overridden here the same way every other shared
   class in this file is, via the html.gwp_v2.gwp_v3 prefix. The
   Topic/Series/Duration pills already match automatically: they
   go through output/activity_item.php's own ".gwp_taxonomies >"
   canonical pill rule earlier in this file (which is exactly why
   .gwp_durationwrap was added to that rule 2026-09-30 — this page
   was the other consumer of it, not just the activity pages). */
html.gwp_v2.gwp_v3 .gwp_activities {
    border-radius: 16px; border-color: #ececec;
}
/* The "underline" is a border-bottom baked directly onto the title element, coloured
   from the site's own --accent1 (green on this install) — the same class of bug fixed
   earlier for Topic/Series link colour. activity_item.php's own h1 has no underline at
   all, so this is removed entirely rather than recoloured, to genuinely match. */
html.gwp_v2.gwp_v3 .gwp_activitytitle {
    border-bottom: 0; padding-bottom: 0; margin-bottom: 8px;
    font-family: 'Figtree', system-ui, sans-serif; color: var(--v2-ink);
}
/* Expanded Goal/Description/Equipment body text ("More +") — base CSS still had it on
   "Lucida Sans Unicode"/"Lucida Grande" (pre-Clarity) rather than Figtree, and with no
   explicit size/line-height/colour at all, unlike output/activity_item.php's own
   .gwp_description_content (Figtree, 15px, 1.75 line-height, ink). Matched here so an
   activity's description reads the same whether you're looking at it on its own page or
   expanded inline in this Library list. */
html.gwp_v2.gwp_v3 .gwp_fieldcontent {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; line-height: 1.75; color: var(--v2-ink);
}
html.gwp_v2.gwp_v3 .gwp_fieldcontent p { margin: 0 0 12px; }
html.gwp_v2.gwp_v3 .gwp_fieldcontent p:last-child { margin-bottom: 0; }
/* Goal/Description/Equipment each get their own soft-grey card on activity_item.php
   (.gwp_standard_space) — here, .gwp_goalbox used an old "colour-mixed tint + left
   accent border" card style, and .gwp_descriptionbox/.gwp_equipmentbox had no card at
   all (just plain text under a label). Unified all three to the same
   .gwp_standard_space treatment: #f9f9f7 background, 16px radius, no border. */
html.gwp_v2.gwp_v3 .gwp_goalbox,
html.gwp_v2.gwp_v3 .gwp_descriptionbox,
html.gwp_v2.gwp_v3 .gwp_equipmentbox {
    border-left: 0; background: #f9f9f7; border-radius: 16px; padding: 22px 24px; margin: 12px 0 0;
    font-size: 15px; color: var(--v2-ink);
}
html.gwp_v2.gwp_v3 .gwp_goalbox .gwp_fieldtitle,
html.gwp_v2.gwp_v3 .gwp_descriptionbox .gwp_fieldtitle,
html.gwp_v2.gwp_v3 .gwp_equipmentbox .gwp_fieldtitle {
    display: block; margin-bottom: 8px;
}
html.gwp_v2.gwp_v3 .gwp_goalbox .gwp_fieldtitle b,
html.gwp_v2.gwp_v3 .gwp_descriptionbox .gwp_fieldtitle b,
html.gwp_v2.gwp_v3 .gwp_equipmentbox .gwp_fieldtitle b {
    font-family: 'Figtree', system-ui, sans-serif; font-size: 16px; font-weight: 700;
    letter-spacing: .01em; text-transform: uppercase; color: #6b7280;
}

/* ============================================================
   HOME / DASHBOARD — the login card (.gwp_auth_card, css/login.css)
   and, where reachable, the #gwp_homeframe two-column dashboard.
   The auth card is a shared component used both by the real live
   front page (shortcode-embedded, inside the site's own theme
   header/nav — confirmed live 2026-09-30) and by output/home.php's
   #gwp_homeframe dashboard (currently unreachable in production —
   gwp_platform_site is off and no page maps to it — but fixed here
   too since it's a real, if dormant, code path). Deliberately keeps
   var(--accent1) for the button/focus/checkbox rather than forcing a
   Clarity tool colour: unlike an internal admin tool, this is a
   customer-facing branding surface, and each Gatherova site's own
   accent IS the intended colour here (joshdev.uk's happens to
   already be a Clarity-compatible blue, #4259cd, but that's this
   site's choice, not a hardcoded Clarity rule). Only the neutrals,
   font and shape move onto the Clarity system. ============ */
html.gwp_v2.gwp_v3 .gwp_auth_card {
    font-family: 'Figtree', system-ui, sans-serif;
}
html.gwp_v2.gwp_v3 .gwp_auth_title { font-weight: 600; color: #0f1115; }
html.gwp_v2.gwp_v3 .gwp_auth_sub { color: #6b7280; font-weight: 500; }
html.gwp_v2.gwp_v3 .gwp_auth_field label { color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_auth_input {
    font-family: 'Figtree', system-ui, sans-serif; border-color: #ececec; border-radius: 10px;
}
html.gwp_v2.gwp_v3 .gwp_auth_remember label { color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_auth_remember input[type="checkbox"] { border-color: #ececec; }
/* The real front page is a normal Salient page-builder page, which loads the theme's own
   CSS (unlike the framework admin pages, which strip it via se_remove_all_styles()) —
   Salient's own sitewide button reset (salient-dynamic-styles.css, the
   body[data-button-style*="slightly_rounded"] bucket) sets border-radius:4px!important on
   every <button>, silently defeating a plain (non-!important) rule regardless of this
   selector's higher specificity. Confirmed live 2026-09-30: without !important here the
   button visually never changed at all. */
html.gwp_v2.gwp_v3 .gwp_auth_btn_primary { font-family: 'Figtree', system-ui, sans-serif; border-radius: 999px !important; }
html.gwp_v2.gwp_v3 .gwp_auth_forgot a { color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_auth_msg { font-family: 'Figtree', system-ui, sans-serif; }

/* The #gwp_homeframe dashboard: grey page ground + one white radius-lg
   card per column (login, events), matching the card language used
   everywhere else in Clarity, rather than two bare flex columns with
   no visual boundary. */
html.gwp_v2.gwp_v3 #gwp_frame:has(#gwp_homeframe) { background: #f3f3f0; }
html.gwp_v2.gwp_v3 #gwp_homeframe { gap: 24px; padding: 24px; box-sizing: border-box; }
html.gwp_v2.gwp_v3 #gwp_homeframe .gwp_hcolumn {
    background: #ffffff; border: 1px solid #ececec; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 24px rgba(15,17,21,.06);
    padding: 24px; box-sizing: border-box;
}
html.gwp_v2.gwp_v3 #gwp_homeframe .gwp_upcomingevents {
    font-family: 'Figtree', system-ui, sans-serif;
}

/* ============================================================
   MEETINGS (comms magenta #ab2b5e / tint #f6e8ed) — js/dist/meetings.js
   renders .gwpm_list_row items; classes are already uniquely
   namespaced (gwpm_) so no extra page-container scoping needed.
   data-tool is not currently wired up for this page (meetings.js
   never sets window.gwp_templatename), so the tool colour is
   hardcoded here rather than read from --gwp_tool_text. ============ */
html.gwp_v2.gwp_v3 .gwpm_list_row {
    border-bottom-color: #ececec; padding: 16px 22px; gap: 14px;
}
html.gwp_v2.gwp_v3 .gwpm_list_row:hover { background: #f3f3f0; }
html.gwp_v2.gwp_v3 .gwpm_list_icon {
    color: #ab2b5e; background: #f6e8ed; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
html.gwp_v2.gwp_v3 .gwpm_list_title {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; color: #0f1115;
}
html.gwp_v2.gwp_v3 .gwpm_list_meta {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 500; color: #6b7280;
}
html.gwp_v2.gwp_v3 .gwpm_list_badge {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; padding: 6px 12px; border-radius: 999px;
}
html.gwp_v2.gwp_v3 .gwpm_list_arrow { color: #9ca3af; }

/* ============================================================
   MEMBERS (people teal #11768d / tint #e5f0f2) — css/members.css +
   js/dist/members.js. Type badge COLOURS are deliberately left as
   the JS-driven gwp_contact_types_config palette (background/text
   set inline per-badge) — those are semantic category colours, not
   branding, and already a reasonable muted palette; only shape/font
   move onto the Clarity system here, which the inline style doesn't
   touch (border-radius/font-family still come from the CSS class). */
html.gwp_v2.gwp_v3 .gwp_members_item:hover { background: #f3f3f0; }
html.gwp_v2.gwp_v3 .gwp_members_name { font-family: 'Figtree', system-ui, sans-serif; color: #0f1115; }
html.gwp_v2.gwp_v3 .gwp_members_name_sub { font-family: 'Figtree', system-ui, sans-serif; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_members_contact_col { font-family: 'Figtree', system-ui, sans-serif; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_members_avatar_member { background: #11768d; }
html.gwp_v2.gwp_v3 .gwp_members_type_badge {
    font-family: 'Figtree', system-ui, sans-serif; border-radius: 999px; padding: 6px 12px; text-transform: none;
}
html.gwp_v2.gwp_v3 .gwp_members_group_tag {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; border-radius: 999px; padding: 5px 11px;
    background: #f3f3f0; color: #6b7280;
}

/* ============================================================
   EXPENSES (people teal #11768d / tint #e5f0f2) — css/expenses.css +
   js/dist/expenses.js. Method/type badge colours are JS-driven
   (per-type hex, same pattern as Members) and left untouched —
   semantic, not branding. Card shape/font and the selected-state
   accent (previously var(--gwp_tool, #6366f1), never resolved since
   data-tool isn't wired up on this page) move onto Clarity. */
html.gwp_v2.gwp_v3 .gwp_exp_card {
    border-color: #ececec; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 6px 16px rgba(15,17,21,.05);
}
html.gwp_v2.gwp_v3 .gwp_exp_card:hover { box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 22px rgba(15,17,21,.08); }
html.gwp_v2.gwp_v3 .gwp_exp_card.selected { border-color: #11768d; background: #e5f0f2; }
html.gwp_v2.gwp_v3 .gwp_exp_method_badge, html.gwp_v2.gwp_v3 .gwp_exp_type_badge, html.gwp_v2.gwp_v3 .gwp_exp_default_badge {
    font-family: 'Figtree', system-ui, sans-serif; border-radius: 999px;
}
html.gwp_v2.gwp_v3 .gwp_exp_method_badge { padding: 6px 12px; }
/* .gwp_exp_card_icon was a genuinely separate class from .gwp_exp_card (missed in the
   first pass) — its own base rule ships a fixed purple (#ede9fe/#7c3aed for .receipt,
   plus unrelated blue/green for .mileage/.sheet), completely unrelated to the page's own
   teal accent used everywhere else (nav buttons, active filter, selected-card state).
   User-reported 2026-09-30 (live screenshot): with the method badges' own genuinely
   semantic colours (blue/cyan/amber per payment method — left alone, same reasoning as
   Members) ALSO on screen, four unrelated hues (icon purple + nav teal + method blue +
   status amber) on one row reads as "all over the place". Unlike the method/status
   badges, the icon's receipt/mileage/sheet colour carries no real meaning beyond "which
   row type this is" — already conveyed by the icon glyph itself — so all three variants
   unify onto the one page accent instead of each other. */
html.gwp_v2.gwp_v3 .gwp_exp_card_icon,
html.gwp_v2.gwp_v3 .gwp_exp_card_icon.receipt,
html.gwp_v2.gwp_v3 .gwp_exp_card_icon.mileage,
html.gwp_v2.gwp_v3 .gwp_exp_card_icon.sheet {
    background: #e5f0f2; color: #11768d; border-radius: 12px;
}
html.gwp_v2.gwp_v3 .gwp_exp_unattached_badge, html.gwp_v2.gwp_v3 .gwp_exp_status {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 700; border-radius: 999px; padding: 6px 12px;
}

/* ============================================================
   TEAMS (people teal #11768d / tint #e5f0f2, same group as Members) —
   css/teams.css, rendered inside output/groups.php by js/dist/teams.js. */
html.gwp_v2.gwp_v3 .gwp_teams_card {
    border-color: #ececec; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05);
}
html.gwp_v2.gwp_v3 .gwp_teams_card:hover { border-color: #ececec; background: #f9f9f7; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 10px 24px rgba(15,17,21,.08); }
html.gwp_v2.gwp_v3 .gwp_teams_card_icon {
    width: 40px; height: 40px; border-radius: 11px; background: #e5f0f2; color: #11768d;
    display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 4px;
}
html.gwp_v2.gwp_v3 .gwp_teams_card_name { font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; color: #0f1115; }
html.gwp_v2.gwp_v3 .gwp_teams_card_desc { font-family: 'Figtree', system-ui, sans-serif; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_teams_card_meta { font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_teams_draft_badge {
    display: inline-block; background: #fef3c7; color: #92400e !important; font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 11px;
}

/* ============================================================
   RESOURCES (content blue-violet #4259cd / tint #eaedfa) —
   css/resources.css, output/resources.php, js/dist/resources.js. */
html.gwp_v2.gwp_v3 .gwp_res_card {
    border-color: #ececec; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05);
}
html.gwp_v2.gwp_v3 .gwp_res_card_icon { background: #eaedfa; color: #4259cd; border-radius: 12px; }
html.gwp_v2.gwp_v3 .gwp_res_card_title { font-family: 'Figtree', system-ui, sans-serif; color: #0f1115; font-size: 16px; }
html.gwp_v2.gwp_v3 .gwp_res_card_desc { font-family: 'Figtree', system-ui, sans-serif; color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_res_card_meta {
    display: inline-block; font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; color: #6b7280;
    background: #f3f3f0; padding: 5px 11px; border-radius: 999px; font-size: 11px; margin-top: 4px;
}
html.gwp_v2.gwp_v3 .gwp_res_file_card {
    border-color: #ececec; border-radius: 12px;
}
html.gwp_v2.gwp_v3 .gwp_res_file_card:hover { border-color: #4259cd; box-shadow: 0 2px 8px rgba(66,89,205,.15); }

/* ============================================================
   TEAM PUBLIC PAGE (people teal #11768d / tint #e5f0f2) —
   output/team_public.php. This page previously never activated
   Clarity at all — gwp_design_boot() only fires when 'popupfuncs' is
   in the array it's checked against, and this page's own gwp_output()
   call never included it. Fixed at the PHP level (a direct
   gwp_design_boot(['popupfuncs']) call, mirroring activity_item.php,
   avoiding the heavier popup-builder JS gwp_output()'s own switch-case
   would otherwise pull in) — this CSS is what actually reaches the
   page now that html.gwp_v2.gwp_v3 is present. Per-role avatar colour
   (role_colour) is a legitimate admin customisation and is NOT
   overridden here — only its default fallback (previously the
   literal #4285f4) was changed to People teal, in the PHP itself. */
html.gwp_v2.gwp_v3 .gwp_tpub_wrap { font-family: 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_tpub_title_row h1 { color: #0f1115; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_tpub_title_row h1 i { color: #11768d; }
html.gwp_v2.gwp_v3 .gwp_tpub_desc { color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_tpub_btn { background: #f3f3f0; border-color: #ececec; border-radius: 999px; color: #6b7280; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_tpub_btn:hover { background: #e5f0f2; color: #11768d; }
html.gwp_v2.gwp_v3 .gwp_tpub_view_btn { border-color: #ececec; border-radius: 999px; color: #6b7280; font-weight: 600; }
/* User-reported 2026-09-30: the base rule's grey text (#6b7280) was inherited onto the
   .active state too, against the new teal background — nearly unreadable. The original
   base CSS set color:#fff explicitly on .active; this override dropped it. Restored. */
html.gwp_v2.gwp_v3 .gwp_tpub_view_btn.active { background: #11768d; border-color: #11768d; color: #ffffff; }
html.gwp_v2.gwp_v3 .gwp_tpub_view_btn:hover:not(.active) { background: #f3f3f0; }
html.gwp_v2.gwp_v3 .gwp_tpub_table { border-radius: 12px; overflow: hidden; }
html.gwp_v2.gwp_v3 .gwp_tpub_th, html.gwp_v2.gwp_v3 .gwp_tpub_foot { background: #f9f9f7; border-color: #ececec; }
html.gwp_v2.gwp_v3 .gwp_tpub_th_name, html.gwp_v2.gwp_v3 .gwp_tpub_card_name { color: #0f1115; }
html.gwp_v2.gwp_v3 .gwp_tpub_th_role, html.gwp_v2.gwp_v3 .gwp_tpub_foot, html.gwp_v2.gwp_v3 .gwp_tpub_card_total { color: #6b7280; }
html.gwp_v2.gwp_v3 .gwp_tpub_td { color: #374151; border-color: #f3f3f0; }
html.gwp_v2.gwp_v3 .gwp_tpub_card { border-color: #ececec; border-radius: 16px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 6px 16px rgba(15,17,21,.05); }
html.gwp_v2.gwp_v3 .gwp_tpub_card_header { background: #f9f9f7; border-color: #ececec; }
html.gwp_v2.gwp_v3 .gwp_tpub_card_person { color: #374151; border-color: #f3f3f0; }

/* ============================================================
   ITEM-DETAIL PAGES (document_item, list_item, note_item, media_item,
   workspace_item) — five near-identical skeletons (header/title/meta,
   icon box, body, tag footer), each with its own differently-named
   classes (gwp_doc_*, gwp_list_*, gwp_note_*, gwp_media_*, gwp_pb_*)
   doing the same job. One shared rule set covers all five. Neutral
   ink/soft treatment rather than a single tool colour, since these
   pages surface content from several different tools (compliance,
   workspace, database lists, notes, media) with no one fixed group. */
html.gwp_v2.gwp_v3 #gwp_document-item, html.gwp_v2.gwp_v3 #gwp_list-item,
html.gwp_v2.gwp_v3 #gwp_note-item, html.gwp_v2.gwp_v3 #gwp_media-item,
html.gwp_v2.gwp_v3 #gwp_workspace-item {
    font-family: 'Figtree', system-ui, sans-serif; border-color: #ececec; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 24px rgba(15,17,21,.06); color: #374151;
}
html.gwp_v2.gwp_v3 #gwp_document-item a, html.gwp_v2.gwp_v3 #gwp_list-item a,
html.gwp_v2.gwp_v3 #gwp_note-item a, html.gwp_v2.gwp_v3 #gwp_media-item a,
html.gwp_v2.gwp_v3 #gwp_workspace-item a { color: #4259cd; }
html.gwp_v2.gwp_v3 .gwp_doc_title, html.gwp_v2.gwp_v3 .gwp_list_title, html.gwp_v2.gwp_v3 .gwp_note_title,
html.gwp_v2.gwp_v3 .gwp_media_title, html.gwp_v2.gwp_v3 .gwp_pb_title {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; color: #0f1115;
}
html.gwp_v2.gwp_v3 .gwp_doc_meta, html.gwp_v2.gwp_v3 .gwp_list_meta, html.gwp_v2.gwp_v3 .gwp_note_meta,
html.gwp_v2.gwp_v3 .gwp_pb_meta {
    font-family: 'Figtree', system-ui, sans-serif; color: #6b7280;
}
/* .gwp_doc_icon's own base rule (`border: 5px solid <colour>; border-radius: 3px`) came from
   a legacy pattern ("matches .occ_vaicon" per its own comment) with the colour set per-instance
   via inline style — replace the heavy border-box look with a proper tinted tile, keeping the
   per-instance colour (now used as the icon's own colour + a matching soft tint background,
   computed inline where the colour is set) rather than overriding it outright. */
html.gwp_v2.gwp_v3 .gwp_doc_icon {
    border: none; border-radius: 11px; background: #f3f3f0; color: inherit; width: 40px; height: 40px;
}
html.gwp_v2.gwp_v3 .gwp_doc_tag, html.gwp_v2.gwp_v3 .gwp_list_tag, html.gwp_v2.gwp_v3 .gwp_note_tag,
html.gwp_v2.gwp_v3 .gwp_media_tag, html.gwp_v2.gwp_v3 .gwp_pb_tag {
    font-family: 'Figtree', system-ui, sans-serif; font-weight: 600; background: #f3f3f0; border: none;
    border-radius: 999px; color: #6b7280; padding: 6px 12px;
}

/* ============================================================
   GROUPS — unify card fill/shadow/border with Teams (same switcher,
   same page, output/groups.php) for visual consistency. Per-group
   avatar colour (.gwp_groups_card_avatar) is deliberately left
   untouched — real admin-set data, useful for telling 17+ groups
   apart at a glance, unlike Teams' single uniform icon tile. This
   ONLY overrides .gwp_groups_card specifically — the shared base
   rule at line ~226 (background: var(--v3-soft); border: 0) still
   governs .gwp_cur_card/.gwp_taxp_card/.gwp_so_card, untouched. */
html.gwp_v2.gwp_v3 .gwp_groups_card {
    background: #ffffff; border: 1px solid #ececec;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05);
}
html.gwp_v2.gwp_v3 .gwp_groups_card:hover {
    background: #f9f9f7; border-color: #ececec;
    box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 10px 24px rgba(15,17,21,.08);
}

/* ============================================================
   GROUP SINGLE VIEW (output/group.php, the /bible-study/-style page)
   Deliberately narrow: css/group.css already has real, working, on-pattern
   functionality (16 fixed identity colours, real per-group gradient hero,
   View all links, Forms edit icons, CSS multi-column masonry) — none of
   that is touched. Only the two genuine gaps found in the audit: no
   font-family anywhere in group.css (inherits page default), and the
   card radius (12px) sits behind the rest of Clarity's 16px system. */
html.gwp_v2.gwp_v3 [id^="gwp_grouppage_"] {
    font-family: 'Figtree', system-ui, sans-serif;
}
html.gwp_v2.gwp_v3 [id^="gwp_grouppage_"] > .gwp_selement[type="row"] {
    border-radius: 16px;
}
html.gwp_v2.gwp_v3 [id^="gwp_grouppage_"] .gwp_group_slideshow {
    border-radius: 0 0 16px 16px;
}
html.gwp_v2.gwp_v3 .gwp_ts_ne_group_dd .gwp_lib_type_current::after { content: ''; flex: none; width: 12px; height: 8px; margin-left: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Standard dropdown extras: group headings, colour dots, button-style entries, search box (v2_shell.js makeSwitcher) */
html.gwp_v2.gwp_v3 .gwp_lib_type_heading { padding: 12px 14px 4px; font: 600 11px 'Figtree', system-ui, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_lib_type_search { position: sticky; top: 0; z-index: 1; display: block; width: 100%; box-sizing: border-box; height: 38px; margin: 0 0 6px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 500 14px 'Figtree', system-ui, sans-serif; outline: none; }
html.gwp_v2.gwp_v3 .gwp_lib_type_search:focus { box-shadow: 0 0 0 2px var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_lib_type_empty { padding: 12px 14px; color: var(--v2-muted); font-size: 14px; }
html.gwp_v2.gwp_v3 .gwp_v2_dot { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; vertical-align: 0; flex: none; }
html.gwp_v2.gwp_v3 .gwp_lib_type_item.gwp_lib_type_action { margin-top: 6px; border-top: 1px solid var(--v2-line); border-radius: 0 0 12px 12px; color: var(--gwp_tool_text, #2e43ae); font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_lib_type_item.gwp_lib_type_danger { color: var(--ws-bad); }
html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .gwp_lib_type_current > span { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* "..." actions menu */
html.gwp_v2.gwp_v3 .gwp_v2_menu { position: relative; flex: none; }
html.gwp_v2.gwp_v3 .gwp_v2_menu_btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--v3-soft); color: var(--v2-ink); font-size: 20px; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_v2_menu_btn:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_v2_menu_list { position: absolute; top: calc(100% + 8px); left: 0; right: auto; min-width: 220px; z-index: 30; }
@media (max-width: 680px) {
    html.gwp_v2.gwp_v3 .gwp_v2_ws_ctl .gwp_lib_type_dropdown { flex: 1 1 0; min-width: 0; }
    html.gwp_v2.gwp_v3 .gwp_v2_menu_list { left: auto; right: 0; }
}

/* ============================================================
   WORKSPACE — task panel, Team view, Linked view, project/list popups (Clarity)
   Same language as Agenda/Board/Notes: white cards, 20px radius, soft shadow, pills,
   colours only through --ws-* / --v2-* / --v3-soft tokens so a dark theme follows.
   ============================================================ */

/* ---- task side panel ---- */
html.gwp_v2.gwp_v3 .gwp_ts_panel_overlay { background: rgba(15,17,21,.45); }
html.gwp_v2.gwp_v3 .gwp_ts_panel { width: 500px; background: var(--ws-card); color: var(--v2-ink); font-family: 'Figtree', system-ui, sans-serif; border-radius: 24px 0 0 24px; box-shadow: -12px 0 48px rgba(15,17,21,.22); }
html.gwp_v2.gwp_v3 .gwp_ts_panel_header { padding: 24px 28px 18px; gap: 14px; background: var(--ws-card); border-bottom: 1px solid var(--ws-divider); border-radius: 24px 0 0 0; align-items: center; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_check { font-size: 26px; padding: 0; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_panel_check:hover { color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_ts_panel_title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--v2-ink); padding: 4px 8px; margin: -4px -8px; border-radius: 12px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_title:focus { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_ts_panel_header .gwp_ts_icon_btn { width: 40px; height: 40px; background: var(--v3-soft); color: var(--v2-ink); font-size: 18px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_body { padding: 8px 28px 32px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_section { padding: 18px 0; border-bottom: 1px solid var(--ws-divider); }
html.gwp_v2.gwp_v3 .gwp_ts_panel_row { gap: 16px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_label { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--v2-muted); margin-bottom: 10px; gap: 8px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_label i { font-size: 16px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_input, html.gwp_v2.gwp_v3 .gwp_ts_panel_select, html.gwp_v2.gwp_v3 .gwp_ts_panel_textarea { min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background-color: var(--v3-soft); color: var(--v2-ink); font: 500 15px 'Figtree', system-ui, sans-serif; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_textarea { padding: 14px 18px; border-radius: 18px; line-height: 1.5; min-height: 110px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_input:focus, html.gwp_v2.gwp_v3 .gwp_ts_panel_select:focus, html.gwp_v2.gwp_v3 .gwp_ts_panel_textarea:focus { outline: 2px solid var(--gwp_tool, #4259cd); outline-offset: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_panel .gwp_ts_panel_dd { position: relative; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_dd .gwp_lib_type_dropdown { display: block; width: 100%; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_dd .gwp_lib_type_current { width: 100% !important; min-width: 0; height: 46px; padding: 0 18px; background: var(--v3-soft); color: var(--v2-ink); box-sizing: border-box; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_dd .gwp_lib_type_current > span { flex: 1 1 auto !important; min-width: 0 !important; text-align: left; padding: 0; overflow: hidden; text-overflow: ellipsis; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_dd .gwp_lib_type_arrow { display: none; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_dd .gwp_lib_type_current::after { content: ''; flex: none; width: 12px; height: 8px; margin-left: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html.gwp_v2.gwp_v3 .gwp_ts_panel_dd .gwp_lib_type_list { width: 100%; max-height: min(320px, 45vh); background: var(--ws-card); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_contact_dropdown { background: var(--ws-card); border: 0; border-radius: 18px; padding: 8px; box-shadow: 0 18px 40px rgba(15,17,21,.18); }
html.gwp_v2.gwp_v3 .gwp_ts_dd_item { padding: 10px 12px; border-radius: 12px; font-size: 14.5px; color: var(--v2-ink); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_dd_item:hover { background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_ts_dd_avatar, html.gwp_v2.gwp_v3 .gwp_ts_dd_avatar_init { width: 30px; height: 30px; }
html.gwp_v2.gwp_v3 .gwp_ts_item_link_row, html.gwp_v2.gwp_v3 .gwp_ts_linked_item_row { padding: 10px 14px; border: 0; border-radius: 14px; background: var(--v3-soft); font-size: 14.5px; }
html.gwp_v2.gwp_v3 .gwp_ts_item_link_title { color: var(--gwp_tool_text, #2e43ae); font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_ts_comment { padding: 14px 0; border-bottom: 1px solid var(--ws-divider); }
html.gwp_v2.gwp_v3 .gwp_ts_comment_author { font-size: 13.5px; font-weight: 700; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_comment_time { font-size: 12.5px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_comment_body { font-size: 15px; line-height: 1.5; margin-top: 4px; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_comment_add { gap: 10px; margin-top: 14px; }
html.gwp_v2.gwp_v3 .gwp_ts_panel .gwp_ts_btn_danger, html.gwp_v2.gwp_v3 .gwp_ts_panel .gwp_ts_btn_delete { background: var(--ws-bad-bg); color: var(--ws-bad); border: 0; }
@media (max-width: 680px) {
    html.gwp_v2.gwp_v3 .gwp_ts_panel { width: 100vw; border-radius: 0; }
    html.gwp_v2.gwp_v3 .gwp_ts_panel_header { border-radius: 0; padding: 18px 20px 14px; }
    html.gwp_v2.gwp_v3 .gwp_ts_panel_body { padding: 4px 20px 28px; }
}

/* ---- Team view ---- */
html.gwp_v2.gwp_v3 .gwp_ts_team { max-width: 900px; gap: 28px; }
html.gwp_v2.gwp_v3 .gwp_ts_team_member { background: var(--ws-card); border: 1px solid var(--ws-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05); }
html.gwp_v2.gwp_v3 .gwp_ts_team_member_header { padding: 22px 28px 14px; gap: 16px; background: transparent; border-bottom: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_team_avatar, html.gwp_v2.gwp_v3 .gwp_ts_team_avatar_init { width: 46px; height: 46px; font-size: 18px; background-color: var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 .gwp_ts_team_member_name { font-size: 18px; letter-spacing: -.01em; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_team_member_stats { font-size: 13.5px; color: var(--v2-muted); margin-top: 3px; }
html.gwp_v2.gwp_v3 .gwp_ts_team_progress_wrap { height: 6px; margin: 10px 0 0; border-radius: 999px; background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_ts_team_progress_bar { border-radius: 999px; background: var(--gwp_tool, #4259cd); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_team_item { gap: 14px; padding: 15px 28px; border-bottom: 1px solid var(--ws-divider); transition: none; }
html.gwp_v2.gwp_v3 .gwp_ts_team_item:hover { background: var(--ws-hover); }
html.gwp_v2.gwp_v3 .gwp_ts_team_item_text { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_team_item .gwp_ts_card_check, html.gwp_v2.gwp_v3 .gwp_ts_team_item > i { font-size: 22px; }

/* ---- Linked view ---- */
html.gwp_v2.gwp_v3 .gwp_ts_linked_view { gap: 20px; }
html.gwp_v2.gwp_v3 .gwp_ts_linked_section { background: var(--ws-card); border: 1px solid var(--ws-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.05); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_sec_header { padding: 20px 24px 6px; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; text-transform: none; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_items_row { padding: 12px 24px 22px; gap: 12px; }
html.gwp_v2.gwp_v3 .gwp_ts_linked_item_card { padding: 10px 14px; gap: 12px; border: 0; border-radius: 16px; background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_item_card:hover { background: var(--gwp_tool_tint, #eaedfa); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_card_thumb, html.gwp_v2.gwp_v3 .gwp_ts_linked_card_icon { width: 40px; height: 40px; border-radius: 12px; background-color: var(--ws-card); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_card_title { font-size: 14.5px; font-weight: 600; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_empty { color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_linked_empty i { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 14px; border-radius: 50%; background: var(--v3-soft); font-size: 38px; opacity: 1; }
html.gwp_v2.gwp_v3 .gwp_ts_linked_empty p { font-size: 16px; font-weight: 600; color: var(--v2-ink); }
@media (max-width: 680px) { html.gwp_v2.gwp_v3 .gwp_ts_linked_view { grid-template-columns: 1fr; } }

/* ---- project / list / column popups ---- */
html.gwp_v2.gwp_v3 .gwp_ts_modal_overlay { background: rgba(15,17,21,.45); }
html.gwp_v2.gwp_v3 .gwp_ts_modal { background: var(--ws-card); color: var(--v2-ink); font-family: 'Figtree', system-ui, sans-serif; border-radius: 24px; padding: 30px; width: 420px; box-shadow: 0 24px 80px rgba(15,17,21,.30); }
html.gwp_v2.gwp_v3 .gwp_ts_modal_wide { width: 500px; }
html.gwp_v2.gwp_v3 .gwp_ts_modal_proj { width: 540px; }
html.gwp_v2.gwp_v3 .gwp_ts_modal_header { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 22px; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_modal .gwp_ts_panel_label { margin-top: 18px; }
html.gwp_v2.gwp_v3 .gwp_ts_modal .gwp_ts_panel_label:first-of-type { margin-top: 0; }
html.gwp_v2.gwp_v3 .gwp_ts_modal_hint { font-size: 13.5px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_ts_modal_actions { gap: 10px; margin-top: 28px; }
html.gwp_v2.gwp_v3 .gwp_ts_modal_tabs { margin: 0 -30px 22px; padding: 0 30px; gap: 6px; border-bottom: 1px solid var(--ws-divider); }
html.gwp_v2.gwp_v3 .gwp_ts_modal_tabs > * { border-radius: 999px 999px 0 0; font-family: inherit; font-size: 14.5px; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_ts_col_row { gap: 10px; padding: 8px 12px; border: 0; border-radius: 14px; background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_ts_col_row_input { font: 500 15px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_ts_col_row.gwp_ts_col_dragover { background: var(--gwp_tool_tint, #eaedfa); }
@media (max-width: 680px) { html.gwp_v2.gwp_v3 .gwp_ts_modal { padding: 24px 20px; } html.gwp_v2.gwp_v3 .gwp_ts_modal_tabs { margin: 0 -20px 18px; padding: 0 20px; } }

/* note editor sits on the note's own pastel, so its placeholders use a fixed mid-grey with real contrast in every theme */
html.gwp_v2.gwp_v3 .gwp_ts_ne_title_input::placeholder { color: #7b8294; font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_ts_ne_editor_wrap .gwp_quill_wrap .ql-editor.ql-blank::before { color: #7b8294; }

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN 3 (CLARITY): SETTINGS PAGE
   Card edges stay on the shared 32px edge and the text inside sits at 45px (level with the page title), so fields pull
   left by their own padding to put their TEXT on that same edge. Fields are soft fills, never bordered boxes.
   ═══════════════════════════════════════════════════════════════════════════ */
/* --set-accent follows --gwp_tool like every other page's accent does — Settings is now registered in
   gwp_tool_templates (js/dist/popupfuncs.js) against a proper [data-tool="utility"] entry (css/output.css,
   next to the other six groups and "home"), the same mechanism every other page's accent already uses, so
   data-tool set on <body>/#gwp_frame reaches the persistent top bar naturally (it's an ANCESTOR of the top
   bar, unlike a page-scoped class). A first pass hand-rolled a :has()-scoped variable override here instead
   of registering the page properly — removed once the real fix was in place; #b45309 is kept only as the
   fallback for the (should-never-happen) case where data-tool isn't set. */
html.gwp_v2.gwp_v3 #gwp_sframe { --set-pad: 12px; --set-accent: var(--gwp_tool, #b45309); --set-soft: #f3f3f0; --set-line: #ececec; --set-ink: #0f1115; --set-muted: #6b7280; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_sframe { --set-pad: 17px; } }

/* cards — more breathing room between them (20px -> 32px) and inside them (30px -> 36px bottom) than the
   original Clarity pass used, part of the same "airy" request as the lighter accent above: Settings has
   20+ stacked cards, and tight 20px gaps plus a more saturated accent were a big part of why it read as
   overwhelming rather than organised. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe { background: #fff; border: 1px solid var(--set-line); border-radius: 20px; box-shadow: 0 1px 2px rgba(15,17,21,.04); padding: 32px var(--set-pad) 40px; margin-bottom: 40px; transition: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe:hover { box-shadow: 0 1px 2px rgba(15,17,21,.04); }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe { border-radius: 16px; } }

/* card heading: tinted icon chip + title, hairline underneath */
/* "larger, more space" per user feedback 2026-10-02: title/icon chip sized up (17px->19px, 34px->40px chip)
   and the hairline pushed down (18px->22px) to match. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe > h3 { display: flex; align-items: center; gap: 14px; font-size: 19px; line-height: 24px; font-weight: 600; color: var(--set-ink); margin: 0 0 8px; padding: 0 0 22px; border-bottom: 1px solid var(--set-line); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe > h3 > i:first-child { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0 !important; opacity: 1 !important; border-radius: 12px; font-size: 20px; color: var(--set-accent) !important; background: color-mix(in srgb, var(--set-accent) 12%, transparent); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe > h3 > button, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe > h3 > .gwp_nav_btn { margin-left: auto; }

/* field labels: small, bold, uppercase */
/* "more space in between things" per user feedback 2026-10-02: gap above each field label (22px -> 30px)
   so stacked fields within a card breathe as much as the cards do between each other. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_sfieldtitle, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_sfieldtitlealt, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkeyblock > b, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_mlisttitle { display: block; margin: 30px 0 10px; font-size: 12px; line-height: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--set-muted); min-width: 0; white-space: normal; }
/* .gwp_sfieldtitlealt previously had a second, later rule forcing it back to display:inline-block, undoing
   the block stacking above just for this one label class. Since settings.css's base .gwp_sfieldtitlealt
   has no fixed width (it's the old inline label:value layout, width varies with the label text), every
   Page Mapping row's pill started at a different x depending on its own label's length ("HOME PAGE:" vs
   "ACCOUNT PAGE:" vs "LIBRARY PAGE:" etc) instead of lining up in a column — confirmed live 2026-10-01 at
   1366px width, visibly ragged down the whole Page Mapping panel. Letting it stay display:block like every
   other field label (.gwp_sfieldtitle, .gwp_gkeyblock > b) fixes it: label on its own line, pill(s) below
   it, consistent with how Company Info/Compliance/etc already render. */

/* key / token / text fields (contenteditable): soft fill, no border.
   .gwp_gkey used a negative-margin "bleed" (margin-left: -var(--set-pad), width: 100%+var(--set-pad)) meant
   to extend the box out to the card's own edge and then re-indent the TEXT back into place with matching
   padding — but that only re-aligns the text; the visible soft-fill BACKGROUND still bleeds all the way to
   the card's actual border, landing 1px from it (measured live 2026-10-02: card border at x=32, box at
   x=33), while every plain input/select/textarea in the same card stays properly inset. Looks exactly like a
   layout bug (a solid colour block flush against the border) rather than a deliberate pill. Removed the
   bleed entirely — box now sits at 100% width within the card's own padding like every other field, same
   as the fix for .select_singledropdown immediately below (identical mechanism, same bug). */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkeyblock { display: block; margin: 0 0 4px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkey { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; max-width: 700px; min-height: 48px; margin: 0; padding: 11px var(--set-pad); border: 0 !important; border-radius: 14px; background: var(--set-soft) !important; color: var(--set-ink); font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 13px; line-height: 20px; word-break: break-all; outline: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkey:focus { background: #fff !important; box-shadow: inset 0 0 0 2px var(--set-accent); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkey.gwp_secret_set::after { content: 'Saved \00B7  click to replace'; flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-family: inherit; font-family: 'Figtree', 'DM Sans', system-ui, sans-serif; font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .03em; color: var(--set-accent); background: color-mix(in srgb, var(--set-accent) 12%, transparent); word-break: normal; white-space: nowrap; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkey.gwp_secret_set:focus::after { content: 'Type to replace'; }

/* plain inputs and selects inside cards.
   .gwp_inputframe (textareas like Company Info's Address/Receipt Footer, plus a few <select>s that already
   worked via the bare `select` tag selector below) has ZERO CSS definition anywhere in the plugin — grepped
   every css/ and select/css/ file, nothing — so any <textarea class="gwp_inputframe"> renders with pure
   browser-default ~2px padding, sitting flush against its own left edge while every sibling input/select in
   the same card gets this rule's 17px inset. Confirmed live 2026-10-02 on Company Info; user flagged it as
   affecting "a number of elements", so added `textarea` and `.gwp_inputframe` generally rather than patching
   one field. Textarea needs its own height handling (rows-based, not the fixed 44px single-line inputs use)
   and resize re-enabled since textareas here are meant to be resizable (rows="3"/"2" with resize:vertical
   inline), which a flat height:44px would have fought against. */
/* "larger" per user feedback 2026-10-02: field height 44px -> 48px, text 14px -> 15px. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="text"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="email"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="number"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="date"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="url"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="password"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe select, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe .gwp_inputframe { box-sizing: border-box; height: 48px; padding: 0 var(--set-pad); border: 0; border-radius: 14px; background-color: var(--set-soft); color: var(--set-ink); font-family: inherit; font-size: 15px; box-shadow: none; outline: none; margin-bottom: 0; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe textarea.gwp_inputframe { height: auto; min-height: 48px; padding: 12px var(--set-pad); line-height: 1.5; resize: vertical; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="text"]:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="email"]:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="number"]:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="date"]:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="url"]:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe input[type="password"]:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe select:focus, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe .gwp_inputframe:focus { background-color: #fff; box-shadow: inset 0 0 0 2px var(--set-accent); }

/* page mapping: pill fields */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill { height: 40px; border: 0; border-radius: 999px; background: var(--set-soft); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--set-accent); border-color: transparent; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill_icon { background: transparent; border-right: 0; padding: 0 4px 0 14px; color: var(--set-muted); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill_value { color: var(--set-ink); font-size: 14px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill_value.gwp_urlhover { color: var(--set-accent); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_headrow { border-bottom-color: var(--set-line); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill input.gwp_pm_pill_input, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill input.gwp_menuname_input { height: 100%; padding: 0 12px; border-radius: 0; background: transparent !important; box-shadow: none !important; }

/* toggles */
html.gwp_v2.gwp_v3 #gwp_sframe .switch-input:checked ~ .switch-paddle { background: var(--set-accent); }

/* buttons */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe .gwp_nav_btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--set-soft); color: var(--set-ink); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 18px; box-shadow: none; cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe .gwp_nav_btn:hover { background: #e8e8e3; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe .gwp_nav_btn.gwp_nav_btn_primary { background: var(--set-accent); color: #fff; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe .gwp_nav_btn.gwp_nav_btn_primary:hover { background: color-mix(in srgb, var(--set-accent) 88%, #000); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_ssave, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_sbutton, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_sbuttonsmall { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--set-accent) 12%, transparent); color: var(--set-accent); font-size: 14px; font-weight: 600; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_ssave:hover, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_sbutton:hover, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_sbuttonsmall:hover { background: var(--set-accent); color: #fff; }

/* setup guides */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_vonage_guide { margin: 14px 0 6px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_guide_header { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--set-soft); color: var(--set-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_guide_header b { font-weight: 600; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_guide_icon, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_guide_caret { color: var(--set-accent); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_step_num { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--set-accent) 12%, transparent); color: var(--set-accent); font-size: 12px; font-weight: 700; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_step p { margin: 2px 0 0; color: var(--set-muted); font-size: 14px; line-height: 20px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_stripe_step code, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_vonage_guide code { background: var(--set-soft) !important; border: 0 !important; border-radius: 8px; padding: 2px 8px; font-size: 12.5px; }

/* connected accounts and list rows */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_conn_card, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_yt_item_row, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_oapiitem, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_iapiitem, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_ecal, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_rinvite { background: var(--set-soft); border: 0; border-radius: 16px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_conn_card_icon { background: #fff; border-radius: 12px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_conn_card_title, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_yt_item_label { color: var(--set-ink); }

/* settings: toggles as pills (the Yes/No text stays for screen readers; the knob position and colour show the state).
   Scoped to both .switch (Bookings etc) AND .gwp_itemswitch (Contact fields' "group invites only" toggle, js/dist/settings.js)
   — same switch-input/switch-paddle markup, different wrapper class, so a .switch-only selector left this one with the
   raw Yes/No text visible and no knob shaping; confirmed live 2026-10-01. */
html.gwp_v2.gwp_v3 #gwp_sframe .switch .switch-paddle, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_itemswitch .switch-paddle { width: 52px; height: 30px; border-radius: 999px; background: #c9c9c3; font-size: 0; transition: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .switch .switch-paddle::after, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_itemswitch .switch-paddle::after { width: 24px; height: 24px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,17,21,.25); transition: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .switch .switch-input:checked ~ .switch-paddle, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_itemswitch .switch-input:checked ~ .switch-paddle { background: var(--set-accent); }
html.gwp_v2.gwp_v3 #gwp_sframe .switch .switch-input:checked ~ .switch-paddle::after, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_itemswitch .switch-input:checked ~ .switch-paddle::after { left: 25px; }
html.gwp_v2.gwp_v3 #gwp_sframe .switch .switch-input:focus-visible ~ .switch-paddle, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_itemswitch .switch-input:focus-visible ~ .switch-paddle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--set-accent); }

/* settings: the custom dropdown widget (Mode, Currency, ...) looks like the other fields.
   Same negative-margin bleed bug as .gwp_gkey above — confirmed live 2026-10-02, the soft-fill box sat at
   x=33 against the card's own border at x=32, i.e. touching it by design even though it looked fine next to
   its own (correctly inset) label. Removed the bleed; width:100% with normal padding matches every other
   field. */
html.gwp_v2.gwp_v3 #gwp_sframe .select_singleframe .select_singledropdown { box-sizing: border-box; display: flex; align-items: center; min-height: 48px; margin: 0; width: 100%; padding: 0 40px 0 var(--set-pad); border: 0; border-radius: 14px; background: var(--set-soft); color: var(--set-ink); font-size: 14px; transition: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .select_singleframe .select_singledropdown:hover { background: #ebebe6; border: 0; }
html.gwp_v2.gwp_v3 #gwp_sframe .select_singleframe.gwp_gversion { width: 100%; max-width: 320px; }

/* settings: stacked fields need air, not a hairline under every one */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkeyblock { border-bottom: 0; padding-bottom: 0; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill_value { line-height: 1; padding-bottom: 1px; }

/* settings: links and small icon buttons follow the page accent; a proper tap target on phones */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_seditsmall, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_seditsmall i, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_urlhover, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_settingframe a:not(.gwp_nav_btn) { color: var(--set-accent); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_seditsmall { width: 36px; height: 36px; border-radius: 50%; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_seditsmall:hover { background: color-mix(in srgb, var(--set-accent) 12%, transparent); }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 #gwp_sframe .gwp_seditsmall { width: 44px; height: 44px; } }

/* settings: connected-account rows sit on the same text edge as everything else; section headers match the field labels */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gapi, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_dapi { margin: 10px 0 0; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_conn_section_header span, html.gwp_v2.gwp_v3 #gwp_sframe .gwp_yt_section_header span { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .06em; color: var(--set-muted); }

/* ==========================================================================
   DESIGN 3 (CLARITY): PARENT PORTAL + ACCOUNT
   Both pages' component classes (.gwp_pp_*, .gwp_acct_*) live in
   css/parentportal.css and are built entirely on the --swp-* custom
   properties redefined below, so retinting those tokens here reshapes
   every existing card/button/badge without a rule-by-rule rewrite.
   Account's tab bar/buttons/cards reuse the .gwp_pp_* classes directly
   (see parentportal.css's own "reuses pp_ tabs, buttons, cards" comment),
   so most rules below apply to both pages just by sharing those selectors.
   Scoped under .gwp_pp_page / .gwp_acct_page — do not touch the SETTINGS
   blocks above (#gwp_sframe), a different concurrent session owns those.
   ========================================================================== */

html.gwp_v2.gwp_v3 .gwp_pp_page, html.gwp_v2.gwp_v3 .gwp_acct_page {
  --swp-accent1: var(--gwp_tool, #4259cd);
  --swp-accent2: var(--gwp_tool, #4259cd);
  --swp-text: #0f1115;
  --swp-text-secondary: #6b7280;
  --swp-text-muted: #6b7280;
  --swp-border: #ececec;
  --swp-bg-light: #f3f3f0;
  --swp-bg-white: #ffffff;
  --swp-radius: 14px;
  --swp-radius-lg: 20px;
  --swp-shadow-sm: 0 1px 2px rgba(15,17,21,.04);
  --swp-shadow-md: 0 10px 24px rgba(15,17,21,.08);
  --swp-info: #11768d;
  --swp-success: #0f875d;
  font-family: 'Figtree', 'DM Sans', system-ui, sans-serif;
}
/* Account dropped its 960px document-style cap 2026-10-03: with 7 real tabs (Details, Family, Rotas,
   Notifications, Upcoming Events, Integrations, Holiday) the tab row never fit in 958px of usable width at
   ANY viewport size, confirmed live, so it always wrapped and stranded the last tab alone on its own line —
   not a narrow-window issue, the page was just too narrow for its own content. Fixed by joining the EXISTING
   full-width rule Parent Portal already uses (line ~461, ".gwp_kiosk_admin_wrap, .gwp_pp_page") rather than
   inventing a new one — a first attempt here added a competing ".gwp_pp_page { max-width:960px }" rule later
   in the file that would have silently re-capped Parent Portal via source order (same trap as the documented
   v3_global_css_loads_last_wins_equal_specificity_ties pattern, just within one file instead of three).
   The Details tab's field grid becomes 2 columns at desktop widths below so the extra width gets used
   rather than just stretching blank space. */
/* Parent Portal keeps the Family tool-group green (already wired via gwp_tool_templates); Account has no
   tool-group entry so it falls back to the same neutral blue Settings uses, for visual consistency between
   the two closely-related utility pages. */
html.gwp_v2.gwp_v3 .gwp_pp_page { --swp-accent1: var(--gwp_tool, #0f875d); --swp-accent2: var(--gwp_tool, #0f875d); }
/* Account + Settings are both dense, detail-heavy pages (many stacked cards/field rows). Colour history,
   2026-10-02: (1) desaturated slate-blue #4a6c8f — user feedback: "dull and blank"; (2) a clearer, more
   saturated blue #2563eb — user feedback: too close to the existing [data-tool="content"] blue (#4259cd,
   hue 230° vs #2563eb's 221° — only 9° apart in hue, same family), reading as "a mix of blues" rather than
   a deliberate choice, and not complementary to the tool-colour wheel already in use (content=blue 230°,
   work=purple 262°, comms=rose 336°, people=teal 191°, live=orange 13°, family=green 159° — see
   [data-tool] rules in css/output.css). The one real gap in that wheel is 13°-159° (the long stretch between
   live's orange and family's green); #b45309 (hue ~32°, a warm amber/bronze — Tailwind's amber-700, chosen
   over a brighter gold because contrast on white degrades fast above ~hue 40 without going muddy) sits in
   that gap, is clearly its own colour family rather than a blue variant, and still clears WCAG AA (5.02:1 on
   white, 4.52:1 on soft-fill). Parent Portal's green is deliberately untouched (user said they like it).
   (3) Registered properly as [data-tool="utility"] (css/output.css) + gwp_tool_templates entries
   (js/dist/popupfuncs.js) instead of hardcoding the hex here — same reasoning as the matching comment by
   #gwp_sframe above. var(--gwp_tool, #b45309) now just follows the canonical mechanism every other page's
   accent uses, with #b45309 as the fallback. */
html.gwp_v2.gwp_v3 .gwp_acct_page { --swp-accent1: var(--gwp_tool, #b45309); --swp-accent2: var(--gwp_tool, #b45309); }

/* Gutter: match the sitewide 32/20px rule every other Clarity page uses */
@media (min-width: 769px) { html.gwp_v2.gwp_v3 .gwp_pp_page, html.gwp_v2.gwp_v3 .gwp_acct_page { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_pp_page, html.gwp_v2.gwp_v3 .gwp_acct_page { padding-left: 20px; padding-right: 20px; } }

/* Page title: Clarity's page-title scale, with a tinted icon chip instead of a bare coloured glyph */
html.gwp_v2.gwp_v3 .gwp_pp_header h2, html.gwp_v2.gwp_v3 .gwp_acct_header h2 { font-size: 40px; line-height: 44px; font-weight: 600; gap: 14px; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_pp_header h2, html.gwp_v2.gwp_v3 .gwp_acct_header h2 { font-size: 30px; line-height: 36px; } }
html.gwp_v2.gwp_v3 .gwp_pp_header h2 i, html.gwp_v2.gwp_v3 .gwp_acct_header h2 i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in srgb, var(--swp-accent1) 12%, transparent);
  color: var(--swp-accent1); font-size: 22px;
}
html.gwp_v2.gwp_v3 .gwp_pp_welcome, html.gwp_v2.gwp_v3 .gwp_acct_welcome { font-size: 15px; }

/* Buttons + tabs: Clarity's default pill shape for anything with a label */
html.gwp_v2.gwp_v3 .gwp_pp_btn { border-radius: 999px; font-weight: 600; font-size: 14px; padding: 10px 20px; min-height: 44px; }
html.gwp_v2.gwp_v3 .gwp_pp_btn_outline { background: var(--swp-bg-light); border: none; color: var(--swp-text); }
html.gwp_v2.gwp_v3 .gwp_pp_btn_outline:hover { background: #e9e9e5; color: var(--swp-text); }
html.gwp_v2.gwp_v3 .gwp_pp_badge, html.gwp_v2.gwp_v3 .gwp_pp_tab_badge, html.gwp_v2.gwp_v3 .gwp_pp_you_tag,
html.gwp_v2.gwp_v3 .gwp_acct_badge { border-radius: 999px; }

html.gwp_v2.gwp_v3 .gwp_pp_tabs { border-bottom: none; gap: 8px; flex-wrap: wrap; background: transparent; }
html.gwp_v2.gwp_v3 .gwp_pp_tab { border-radius: 999px; border-bottom: none; margin-bottom: 0; background: var(--swp-bg-light); padding: 10px 18px; min-height: 44px; box-sizing: border-box; }
html.gwp_v2.gwp_v3 .gwp_pp_tab:hover { background: #e9e9e5; }
html.gwp_v2.gwp_v3 .gwp_pp_tab_active, html.gwp_v2.gwp_v3 .gwp_pp_tab_active:hover { background: var(--swp-accent1); color: #fff; border-bottom: none; }
html.gwp_v2.gwp_v3 .gwp_pp_tab_active .gwp_pp_tab_badge { background: #fff; color: var(--swp-accent1); }

/* Cards: soft hairline + tile radius, shadow only appears on hover (Clarity avoids resting shadows) */
html.gwp_v2.gwp_v3 .gwp_pp_child_card, html.gwp_v2.gwp_v3 .gwp_pp_family_card, html.gwp_v2.gwp_v3 .gwp_pp_form_card,
html.gwp_v2.gwp_v3 .gwp_acct_family_card, html.gwp_v2.gwp_v3 .gwp_acct_event_card {
  border: 1px solid var(--swp-border); border-radius: 16px; box-shadow: none; background: #fff;
}
html.gwp_v2.gwp_v3 .gwp_pp_child_card:hover, html.gwp_v2.gwp_v3 .gwp_pp_family_card:hover,
html.gwp_v2.gwp_v3 .gwp_pp_form_card:hover, html.gwp_v2.gwp_v3 .gwp_acct_event_card:hover {
  border-color: var(--swp-accent1); box-shadow: var(--swp-shadow-sm);
}
html.gwp_v2.gwp_v3 .gwp_pp_child_card_selected { background: color-mix(in srgb, var(--swp-accent1) 6%, white); border-color: var(--swp-accent1); box-shadow: none; }

/* Detail panel: Clarity's larger single-surface card radius */
html.gwp_v2.gwp_v3 .gwp_pp_detail { border: 1px solid var(--swp-border); border-radius: 20px; box-shadow: none; }
html.gwp_v2.gwp_v3 .gwp_pp_detail_header { background: var(--swp-bg-light); border-radius: 20px 20px 0 0; }

/* Avatars: flat solid fill, not a gradient — matches Clarity's aesthetic elsewhere (README: "no dark mode... no gradients") */
html.gwp_v2.gwp_v3 .gwp_pp_child_avatar, html.gwp_v2.gwp_v3 .gwp_pp_detail_avatar,
html.gwp_v2.gwp_v3 .gwp_pp_family_role_parent .gwp_pp_family_avatar,
html.gwp_v2.gwp_v3 .gwp_acct_family_card_parent .gwp_acct_family_avatar,
html.gwp_v2.gwp_v3 .gwp_acct_family_card_self .gwp_acct_family_avatar { background: var(--swp-accent1); }
html.gwp_v2.gwp_v3 .gwp_pp_family_role_child .gwp_pp_family_avatar,
html.gwp_v2.gwp_v3 .gwp_acct_family_card_child .gwp_acct_family_avatar { background: var(--swp-info); }

/* Section titles + field rows: label-eyebrow treatment, hairlines not heavy borders */
html.gwp_v2.gwp_v3 .gwp_pp_fields_section_title, html.gwp_v2.gwp_v3 .gwp_acct_section_title {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; border-bottom-color: var(--swp-border);
}
html.gwp_v2.gwp_v3 .gwp_pp_field_row { border-bottom-color: var(--swp-border); }
/* Account only (not Parent Portal, which the user already likes as-is): same field-row/section markup, but
   8px row padding + a hairline after every single row reads as cramped once you're looking at 10+ rows in
   a row — more vertical room, same "airy" request as the card spacing/accent changes above. */
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_field_row { padding: 16px 0; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_fields_section { margin-bottom: 36px; }
/* Details tab only (#gwp_acct_form_details, gwp_acct_build_details() in account.js): now the page is full
   width (see the width rule by .gwp_kiosk_admin_wrap above), a single stacked column of label-then-input
   rows would just stretch edge to edge with nothing using the extra space. 2 columns on desktop instead;
   textareas (Address/Medical Info/Notes), the section title and the Change Password toggle row span both
   columns since they're not a normal short field. Other tabs (Notifications' grid, Integrations' lists,
   Holiday's widget) keep their own layouts — this only targets Details' simple label+input rows. */
@media (min-width: 900px) {
  html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_details .gwp_pp_fields_section { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_details .gwp_pp_fields_section_title,
  html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_details .gwp_pp_edit_row:has(.gwp_pp_edit_textarea),
  html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_details .gwp_pp_edit_row_inline { grid-column: 1 / -1; }
}
/* Account redesign, user feedback 2026-10-02: "font size is too small" + general dislike of the page as a
   whole. Sized every piece of text up a notch (labels/values 13-14px -> 15-16px, section titles 13px -> 14px
   with lighter letter-spacing so the bigger size doesn't look shouty, header 22px -> 28px, tabs 13px -> 15px
   with taller pill padding), on top of the spacing + colour work above. Account-scoped only, matching the
   field-row spacing override right above — Parent Portal keeps its original sizing. */
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_header h2 { font-size: 28px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_header h2 i { font-size: 28px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_welcome { font-size: 15px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_fields_section_title { font-size: 14px; letter-spacing: .03em; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_field_label { font-size: 15px; width: 160px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_field_value, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_empty_value { font-size: 16px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_tab { font-size: 15px; padding: 14px 22px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_tab i { font-size: 17px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_edit_label { font-size: 15px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_edit_input { font-size: 16px !important; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_btn { font-size: 15px; }
/* The header "Save" button and any other .gwp_pp_btn_primary on Account used `background: var(--gwp_tool,
   #4259cd)` directly (css/v3_global.css ~line 467) — a totally different variable chain than --swp-accent1,
   so it stayed the raw global default blue no matter what --swp-accent1 was set to above. This is the exact
   "mix of colours" the user flagged: the Save button was never actually following the page's own accent.
   Scoped fix rather than touching the shared rule, since Parent Portal/Kiosk correctly want their own
   --gwp_tool colour here. */
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_btn_primary { background: var(--swp-accent1); }
/* Same leak, hover state: .gwp_pp_btn:hover uses --gwp_tool_tint/--gwp_tool_text (also bypassing
   --swp-accent1), so every button on Account would flash back to the generic blue tint on hover even with
   the amber fix above in place. */
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_pp_btn:hover { background: color-mix(in srgb, var(--swp-accent1) 12%, transparent); color: var(--swp-accent1); }
/* .gwp_sabutton (small inline "+ Add" buttons, e.g. mailing lists) uses the GLOBAL --accent1 (set site-wide
   by cssroot.php from the old user-configurable "Gatherova accent colour" picker) rather than this page's
   own --swp-accent1 — a third, unrelated colour variable this page's redesign never touched. The Holiday
   tab's stat numbers/headers (css/holiday.css, rendered by js/dist/account.js) are a separate, independently
   themed embedded widget rather than part of this shared "swp" design system, so left as-is rather than
   forced onto the page accent. */
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_sabutton { color: var(--swp-accent1); border-color: var(--swp-accent1); }
/* Bug, confirmed live 2026-10-03: this hover rule never set `color`, so on hover the real winner for that
   property was css/output.css's own `.gwp_sabutton:hover { color:#fff }` — tied in specificity with the
   PLAIN (non-hover) rule just above, and v3_global.css loads after output.css, so the later plain rule's
   amber color won even while hovering (equal-specificity ties resolve by source order, not by which rule
   is state-specific). Result: amber icon on an amber background, invisible. Same family as the documented
   v3_global_css_loads_last_wins_equal_specificity_ties trap, just racing against a different file this time.
   Fixed by setting color explicitly here, where it can't lose the tie. */
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_sabutton:hover { background-color: var(--swp-accent1); border-color: var(--swp-accent1); color: #fff; }
/* Holiday tab (css/holiday.css, #gwp_acct_tab_holiday — a separate embedded widget, see the earlier note by
   .gwp_sabutton): the three stat-tile colours (used/pending/remaining) are left alone — they're status
   indicators, not brand colour, same "identity colour != tool colour" principle as error/success elsewhere.
   But "REQUESTS" was hardcoded to #2a9d8f, the OLD pre-Clarity default accent teal, not a status colour —
   just never updated, confirmed live 2026-10-02 standing out next to the now-amber "ACCOUNT DETAILS" /
   "CONTACT DETAILS" etc headings on every other tab. The year-select also got left on a plain grey box.
   holiday.css scopes both with the ID #gwp_acct_tab_holiday, which beats any number of classes on
   specificity — a class-only override here loses regardless of load order, so the ID has to be matched. */
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_tab_holiday .gwp_hol_req_hdr_title { color: var(--swp-accent1); }
/* Year-select pill styling moved to css/account.css (2026-10-03) as part of the accent-token consolidation —
   the border-colour-only version here left it looking like a plain native <select> (hard corners, native
   arrow, white fill) next to the page's soft-pill inputs everywhere else. */
/* Notifications tab: the System/Email grid (gwp_acct_build_notifications() in account.js) renders bare native
   checkboxes with no wrapper class, same gap pattern as .gwp_db_archived_chip/.gwp_gkeyblock elsewhere —
   unstyled they default to the browser's blue, clashing with the page's amber accent. */
html.gwp_v2.gwp_v3 .gwp_acct_notif_grid input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--swp-accent1); cursor: pointer; }

/* Edit inputs: soft fill instead of a bordered box, focus ring in the page accent */
html.gwp_v2.gwp_v3 .gwp_pp_edit_input {
  border: none; background: var(--swp-bg-light); border-radius: 12px; min-height: 44px; box-sizing: border-box;
}
html.gwp_v2.gwp_v3 .gwp_pp_edit_input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--swp-accent1) 20%, transparent); }

/* Empty states: muted icon on soft ground, no heavy border colour */
html.gwp_v2.gwp_v3 .gwp_pp_empty i, html.gwp_v2.gwp_v3 .gwp_pp_empty_inline i { color: var(--swp-border); }

@media (max-width: 768px) {
  html.gwp_v2.gwp_v3 .gwp_pp_children_grid, html.gwp_v2.gwp_v3 .gwp_pp_family_grid,
  html.gwp_v2.gwp_v3 .gwp_acct_family_grid { grid-template-columns: 1fr; }
  html.gwp_v2.gwp_v3 .gwp_pp_field_row { flex-direction: column; align-items: flex-start; gap: 2px; }
  html.gwp_v2.gwp_v3 .gwp_pp_field_label { width: auto; }
}

/* Tickets tab: js/dist/parentportal.js's gwp_pp_render_tickets() was hand-built with inline styles and
   hardcoded hex colours (not the .gwp_pp_* classes the rest of this tool uses) — edited the JS to emit
   these classes/data-attrs instead, styled here so it finally picks up the page accent + tokens. */
html.gwp_v2.gwp_v3 .gwp_pp_ticket_card { background: #fff; border: 1px solid var(--swp-border); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_title { margin: 0; font-size: 16px; font-weight: 700; color: var(--swp-text); }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_date { font-size: 12px; color: var(--swp-text-muted); display: block; margin-top: 2px; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_badge[data-status="paid"] { background: #059669; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_badge[data-status="refunded"] { background: #dc2626; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_badge[data-status="unknown"] { background: var(--swp-text-muted); }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_table { width: 100%; border-collapse: collapse; font-size: 13px; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_table thead tr { border-bottom: 2px solid var(--swp-border); }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_table th { text-align: left; padding: 8px 6px; color: var(--swp-text-muted); font-weight: 600; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_table td { padding: 8px 6px; border-bottom: 1px solid var(--swp-bg-light); }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_table tbody tr:nth-child(even) { background: var(--swp-bg-light); }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_code { font-family: monospace; font-size: 12px; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_status_refunded { color: #dc2626; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_status_checked { color: #059669; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_status_valid { color: var(--swp-text-muted); }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_actions .gwp_pp_btn { text-decoration: none; font-size: 13px; }
@media (max-width: 768px) {
  html.gwp_v2.gwp_v3 .gwp_pp_ticket_table { font-size: 12px; }
  html.gwp_v2.gwp_v3 .gwp_pp_ticket_table th, html.gwp_v2.gwp_v3 .gwp_pp_ticket_table td { padding: 6px 4px; }
}

/* Round 2 fixes from live review, 2026-10-01 */

/* Page vs card contrast: NOT via a page-level background fill — a pre-existing rule (line ~461,
   predates this redesign) bundles .gwp_pp_page together with .gwp_kiosk_admin_wrap to force
   max-width:none/width:100%/margin:0, so a page-level background paints full-bleed across the
   whole viewport instead of staying in a centered column. Rather than touch that bundled rule
   without knowing why Kiosk Admin needs it, stick to Clarity's own stated approach instead:
   "cards are separated by hairlines and shadow, not fill" — strengthen the card's own shadow.
   .gwp_acct_panel removed from this rule 2026-10-03 — it's no longer a card at all, see css/account.css. */
html.gwp_v2.gwp_v3 .gwp_pp_detail { box-shadow: 0 1px 2px rgba(15,17,21,.04), 0 8px 20px rgba(15,17,21,.07); }

/* Gap between the detail header / panel top edge and the tab row below it — these were flush (0px gap),
   reading as touching/overlapping rather than two distinct sections. */
html.gwp_v2.gwp_v3 .gwp_pp_tabs { margin-top: 16px; }
html.gwp_v2.gwp_v3 .gwp_acct_panel > .gwp_pp_tabs:first-child { margin-top: 20px; }

/* Account header: drop the bottom border/padding per feedback — the pill tabs below already provide
   enough visual separation on their own now that they have a top margin. */
html.gwp_v2.gwp_v3 .gwp_acct_header { border-bottom: none; padding-bottom: 0; margin-bottom: 20px; }

/* Breathing room at the very top of the page, above the header — addresses the Save button (and other
   header-row buttons) sitting right at the top edge with no headroom. */
html.gwp_v2.gwp_v3 .gwp_pp_page, html.gwp_v2.gwp_v3 .gwp_acct_page { padding-top: 32px; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_pp_page, html.gwp_v2.gwp_v3 .gwp_acct_page { padding-top: 20px; } }

/* Left-alignment (standing rule, see feedback_clarity_left_alignment memory): boxed cards' own padding
   was pushing their TEXT right of the page's 32px content edge/title inset. Pull each card left by
   exactly its own left padding so text lands back on the shared inset; the card's background is then
   allowed to overhang further left than unboxed rows, same as the title — that's correct, not a bug.
   .gwp_pp_form_card/.gwp_pp_ticket_card/.gwp_acct_event_card stack in a flex column (one per row, no
   neighbour competing for the same row) so a negative margin on the CARD itself is safe there. */
html.gwp_v2.gwp_v3 .gwp_pp_form_card, html.gwp_v2.gwp_v3 .gwp_acct_event_card { margin-left: -16px; margin-right: -16px; }
html.gwp_v2.gwp_v3 .gwp_pp_ticket_card { margin-left: -20px; margin-right: -20px; }
/* .gwp_pp_child_card/.gwp_pp_family_card/.gwp_acct_family_card live in a CSS grid (auto-fill columns) —
   a negative margin on the grid ITEM eats into `gap` and makes side-by-side cards visually overlap/collide
   (confirmed live, 2026-10-01). Fixed by moving the pull onto the GRID CONTAINER instead: shifting the
   whole row as one unit lands the first card's text on the same inset without touching the gap between
   cards at all, since `gap` is computed from the grid's own content box, independent of its own margin. */
html.gwp_v2.gwp_v3 .gwp_pp_children_grid, html.gwp_v2.gwp_v3 .gwp_pp_family_grid,
html.gwp_v2.gwp_v3 .gwp_acct_family_grid { margin-left: -16px; margin-right: -16px; }

/* Same three grids: base CSS uses minmax(260px, 1fr), so each card stretches to fill ALL leftover row
   space — 2 cards in a 760px-wide row render at ~374px each, but in a 540px-wide row (e.g. a vertical
   scrollbar appears because a different sub-tab's content, like Forms, is tall enough to need one, while
   Details isn't) they render at ~264px each. gwp_pp_render() in js/dist/parentportal.js wipes and rebuilds
   the ENTIRE page, children grid included, on every single sub-tab click, so this card-width swing is what
   the user saw as "tabs change size when flicking through sub tabs" — confirmed live 2026-10-02. Capping
   the upper bound stops cards from stretching to fill the extra space; a scrollbar appearing/disappearing
   then just changes how much empty gutter there is, not the card size itself. */
html.gwp_v2.gwp_v3 .gwp_pp_children_grid, html.gwp_v2.gwp_v3 .gwp_pp_family_grid,
html.gwp_v2.gwp_v3 .gwp_acct_family_grid { grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); }

/* Tab row padding: .gwp_pp_tabs (shared by both pages) has zero side padding of its own in the original
   CSS, while every sibling around it (.gwp_pp_detail_header 24px, .gwp_pp_detail_body 24px,
   .gwp_acct_tab_body 24px) does — so the tab row sits flush against the card's raw edge instead of
   matching the content inset above/below it, reading as "too far left" / "hitting the parent margin"
   (confirmed on both Parent Portal and Account, 2026-10-01). */
html.gwp_v2.gwp_v3 .gwp_pp_tabs { padding-left: 24px; padding-right: 24px; flex-wrap: wrap; }
@media (max-width: 768px) { html.gwp_v2.gwp_v3 .gwp_pp_tabs { padding-left: 16px; padding-right: 16px; } }

/* .gwp_pp_btn is used on both <button> and <a> elements (e.g. "View Rota" linking out to /rota?id=...)
   but never resets text-decoration at the base rule — browser-default underline shows through on every
   anchor-tag button, not just the Tickets-tab ones already fixed. Reset it generally instead. */
html.gwp_v2.gwp_v3 .gwp_pp_btn, html.gwp_v2.gwp_v3 .gwp_pp_btn:hover, html.gwp_v2.gwp_v3 .gwp_pp_btn:visited { text-decoration: none; }

/* Integrations tab (Account) uses .gwp_nav_btn/.gwp_nav_btn_primary — a completely different, older
   button class from settings.css/output.css, not .gwp_pp_btn, so none of the Clarity treatment above
   ever reached it. Its "primary" variant keys off --accent1, a different (and on this page, unset)
   variable from the --swp-accent1 this redesign actually uses, so it was rendering low-contrast. Also
   the per-instance inline style="font-size:...;padding:..." at various call-sites (Setup/Quick Add vs.
   the icon-only calendar-row buttons) left button sizes inconsistent on the same tab — forcing padding
   with !important here is a deliberate, narrow override of those inline styles, not a general habit.
   Scoped to these two pages only; .gwp_nav_btn is used elsewhere in the plugin and isn't this session's
   to restyle globally. */
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_nav_btn, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_nav_btn {
  border: none; background: var(--swp-bg-light); color: var(--swp-text);
  border-radius: 999px; padding: 7px 14px !important; font-weight: 600; box-shadow: none;
}
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_nav_btn:hover, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_nav_btn:hover {
  background: #e9e9e5; color: var(--swp-text); box-shadow: none;
}
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_nav_btn_primary, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_nav_btn_primary {
  background: var(--swp-accent1); border-color: var(--swp-accent1); color: #fff; box-shadow: none;
}
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_nav_btn_primary:hover, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_nav_btn_primary:hover {
  filter: brightness(0.92); color: #fff;
}

/* .gwp_conn_section_header's own flex layout (display:flex, justify-content:space-between) is defined in
   css/settings.css. That stylesheet wasn't loading on Account/Parent Portal at all until the 2026-10-03
   rebuild's template-whitelist fix (see templates/account_template.php) — before that, this element silently
   fell back to plain display:block, and `gap` had no effect on a block container, so the label and both
   buttons (string-concatenated HTML, no whitespace between them) rendered with a genuine 0px gap.
   Now that settings.css DOES load, its own `justify-content:space-between` also applies — on Account's
   full-width page that pushes Setup/Quick Add all the way to the far right edge of the row, away from the
   label, which read as "spread out"/odd (confirmed live 2026-10-03). `justify-content:flex-start` below
   overrides that so the label and buttons stay clustered together with just the 10px gap between them. */
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_conn_section_header, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_conn_section_header {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px;
}
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_conn_section_header span, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_conn_section_header span {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--swp-text-muted);
}
html.gwp_v2.gwp_v3 .gwp_pp_page [class*="gwp_cal"].gwp_inlineblock, html.gwp_v2.gwp_v3 .gwp_acct_page [class*="gwp_cal"].gwp_inlineblock { margin-right: 4px; }
/* Calendar-row action buttons (trash/edit/refresh/test, in .gwp_ecal) are hardcoded in popupfuncs.js as
   .gwp_nav_btn.gwp_nav_btn_primary — the same class as a real CTA like "Save"/"Setup" — so 4 of them in a
   row render as 4 solid accent-coloured pills next to a plain-text calendar name, reported as "massive".
   They're small inline icon actions, not primary actions: restyled to the same lightweight 32px ghost
   icon-button scale used elsewhere on this page (.gwp_sabutton, .gwp_ts_icon_btn_inline). Scoped to .gwp_ecal
   specifically so it doesn't touch .gwp_nav_btn_primary buttons used correctly elsewhere (Setup, Save). */
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_ecal .gwp_nav_btn, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_ecal .gwp_nav_btn,
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_ecal .gwp_nav_btn_primary, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_ecal .gwp_nav_btn_primary {
  width: 32px; height: 32px; min-height: 0; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--swp-bg-light); color: var(--swp-text-secondary);
  font-size: 14px; box-shadow: none;
}
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_ecal .gwp_nav_btn:hover, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_ecal .gwp_nav_btn:hover,
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_ecal .gwp_nav_btn_primary:hover, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_ecal .gwp_nav_btn_primary:hover {
  background: var(--gwp_tool_tint, #f7ede6); color: var(--swp-accent1); filter: none;
}
html.gwp_v2.gwp_v3 .gwp_pp_page .gwp_ecal .gwp_calname h4, html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_ecal .gwp_calname h4 { font-size: 15px; font-weight: 600; }
/* Integrations tab spacing, user feedback 2026-10-03: each section (Google Drive/Dropbox/Import External
   Calendars/Spotify/AI Assistants) is a single short row, so the standard 36px .gwp_pp_fields_section gap
   read as cramped even though it's the same value Details' much taller sections use comfortably — short
   content needs more whitespace around it, not less, to read as separated. Bumped further for this tab only.
   .gwp_conn_section_header (Google Drive/Dropbox) also had no divider line while every other section here
   uses .gwp_pp_fields_section_title's border-bottom — gave it the same treatment for visual consistency. */
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_integrations .gwp_pp_fields_section { margin-bottom: 44px; }
html.gwp_v2.gwp_v3 .gwp_acct_page .gwp_conn_section_header { padding-bottom: 10px; margin-bottom: 14px !important; border-bottom: 1px solid var(--swp-border); }
/* Icon-to-label gap on every Integrations section header (Drive/Dropbox's span-wrapped icon, Spotify/AI
   Assistants' bare icon in .gwp_pp_fields_section_title) is a 6px inline margin-right, set once in account.js
   — reads as near-touching against the bold uppercase label next to it. Opened up for this tab only. */
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_integrations .gwp_conn_section_header span i,
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_form_integrations .gwp_pp_fields_section_title > i { margin-right: 10px !important; }
/* AI Assistants block (#gwp_acct_ai, account.js gwp_acct_load_ai()) is built with inline styles, so these
   need !important to win — the org-active banner, description and usage line sat with only 8-12px between
   them and no line-height, reading as one dense paragraph rather than separate pieces of information. */
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_ai > div:first-child { padding-bottom: 16px !important; }
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_ai > div:first-child > div { line-height: 1.5; }
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_ai > p { margin-bottom: 16px !important; line-height: 1.5; }
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_ai_list > div { line-height: 1.5; }
html.gwp_v2.gwp_v3 .gwp_acct_page #gwp_acct_ai > div:last-child:not(#gwp_acct_ai_list) { margin-top: 16px !important; padding-top: 14px !important; }

/* Settings > Page Mapping pills (#gwp_sframe .gwp_pm_pill): text/icon vertical misalignment and
   unbounded pill width — reported directly, not routed through the other session. Root causes, from
   the actual CSS (couldn't get a live screenshot — this admin page wasn't rendering in my test session
   for an unrelated reason — so this is applied from direct code reading, worth a visual double-check):
   1. .gwp_pm_pill_value already has an earlier rule in this file adding `line-height:1;padding-bottom:1px`
      (for a different, unrelated stacked-field spacing fix) — that 1px only applies to the text side, not
      the icon side, which has no matching adjustment, so icon and text sit 1px off from each other.
   2. Neither .gwp_pm_pill nor .gwp_pm_pill_value caps width or truncates — a long URL slug stretches the
      pill to fit its full text with no limit, so pills end up wildly inconsistent widths next to each other. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill .gwp_pm_pill_value { padding-bottom: 0; line-height: normal; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill { max-width: 220px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill_value { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
/* FOUND THE REAL CAUSE of the vertical misalignment (live-measured, 2026-10-01): most of these pill
   VALUES also carry a second, generic class `gwp_urlhover` (output.css, used widely elsewhere for
   unrelated clickable-URL text) — `.gwp_urlhover { padding:6px 10px; display:inline-block; }` ties in
   specificity with `.gwp_pm_pill_value { padding:0 10px; display:flex; }` (both one-class selectors) and
   wins because output.css loads after settings.css, injecting a 6px top padding + breaking the flex
   centering that nothing above this actually fixed. Target the compound class directly (two classes on
   one element = naturally higher specificity than either base rule alone, no !important needed). */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_pm_pill_value.gwp_urlhover { padding: 0 10px; display: flex; align-items: center; height: 100%; }

/* Settings > Services tab (Relay Services / WebSocket Servers panels, #gwp_relay_panel): never had any
   Clarity rule at all — confirmed zero matches in this file before this block. Base CSS (output.css) is
   the original bordered-box/grey-header design, and its radio buttons default to var(--accent1,#F83600)
   — the LIVE tool group's orange — with no Settings-specific override, so they rendered in the wrong
   colour for this page regardless of Clarity. Uses the same --set-* tokens gatherova-56 established for
   the rest of Settings, for consistency with their work rather than inventing a second token set. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_section { border: 1px solid var(--set-line); border-radius: 16px; overflow: hidden; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_header { background: var(--set-soft); border-bottom: 1px solid var(--set-line); color: var(--set-ink); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_header i { opacity: 1; color: var(--set-muted); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_option label { color: var(--set-ink); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_option input[type="radio"] { border-color: var(--set-line); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_option input[type="radio"]:checked { border-color: var(--set-accent); background: radial-gradient(circle, var(--set-accent) 45%, transparent 46%); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_option input[type="radio"]:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--set-accent) 30%, transparent); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_ws_card { background: var(--set-soft); border: none; border-radius: 12px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_ws_card_title i { opacity: 1; color: var(--set-muted); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_status { color: var(--set-muted); }
/* Test Connection button: same .gwp_nav_btn fix as Account/Parent Portal's Integrations tab, scoped here
   with --set-accent instead of --swp-accent1 so it matches Settings' own accent, not a separate token. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_panel .gwp_nav_btn { border: none; background: var(--set-soft); color: var(--set-ink); border-radius: 999px; font-weight: 600; box-shadow: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_panel .gwp_nav_btn:hover { background: #e9e9e5; box-shadow: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_panel .gwp_nav_btn_primary { background: var(--set-accent); border-color: var(--set-accent); color: #fff; box-shadow: none; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_relay_panel .gwp_nav_btn_primary:hover { filter: brightness(0.92); color: #fff; }

/* Compliance "Default Notifications" rule row (#gwp_cgd_panel, same file): generic .gwp_settingframe
   input/button rules already catch the search/email/days fields and Add Rule/Save/trash buttons, but the
   row itself still used its pre-Clarity #f8f9fa/#e9ecef card-on-card look, and the "Notify Person
   Responsible" checkbox was unstyled native blue instead of the page accent. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_cgd_row { background: var(--set-soft); border: none; border-radius: 12px; }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_cgd_days_wrap { color: var(--set-ink); }
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_cgd_respcb { accent-color: var(--set-accent); width: 15px; height: 15px; }

/* Mailchimp integration panel (#gwp_mailchimp, e.g. "Delete lists/campaigns no longer in Mailchimp",
   "Update user names from Mailchimp", per-list subscribe toggles): its bare <input type="checkbox">
   elements carry no class at all, so no earlier checkbox rule could reach them — same unstyled-native-
   checkbox gap as Compliance/Mailchimp, confirmed live 2026-10-01. Scoped to .gwp_gkeyblock/.ms_setting,
   the two wrappers this integration actually uses, rather than every checkbox in Settings. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_gkeyblock input[type="checkbox"], html.gwp_v2.gwp_v3 #gwp_sframe .ms_setting input[type="checkbox"], html.gwp_v2.gwp_v3 #gwp_sframe .gwp_mlistinput input[type="checkbox"] { accent-color: var(--set-accent); width: 15px; height: 15px; }

/* .gwp_removecontainer field-row misalignment (Holiday years, External calendars, Group invite generator —
   any .gwp_hyear/.gwp_ecal/.gwp_rinvite/.gwp_rpermission row mixing a Remove button with other inline
   fields): css/output.css has its own un-scoped `.gwp_removecontainer { float:right; margin-top:12px; }`
   (line ~4209, written for the old float-based layout) which LOADS AFTER settings.css's
   `display:inline-flex; align-items:center; margin-left:8px;` version — equal specificity, later file
   wins (same mechanism as the documented v3_global/v3_shell tie-break pattern in CLAUDE.md), so every
   Remove button in a settings row sat ~6-12px lower than its sibling fields instead of centered with them.
   Confirmed live 2026-10-01 via direct getBoundingClientRect measurement of Holiday Year rows. Reset here
   rather than editing output.css, since that file's float-right behaviour may still be relied on elsewhere
   outside Settings. */
html.gwp_v2.gwp_v3 #gwp_sframe .gwp_removecontainer { float: none; margin-top: 0; }

/* "Where to redirect after registration?" page picker (#gwp_rredirect, Contact fields tab): select.js's
   select_dropdown() deliberately sizes the dropdown panel to match its own trigger field's width
   (field.offsetWidth - 6, select/js/select.js ~line 2507) — correct for compact selects, but #gwp_rredirect
   has no set width so it shrinks to fit only its "Select a page" placeholder (~124px), and that narrow
   width then gets inherited by the dropdown holding 40+ real page titles ("13179 Data Deletion
   Instructions", "12179 Postx gutenberg to wp-bakery" etc), forcing every long title to wrap across 2-3
   lines — confirmed live 2026-10-01, pasted markup showed the dropdown rendering at an oddly narrow,
   cramped width with a mismatched search box. Fixing the trigger's own width (rather than select.js, which
   every other select_singleframe instance across the app also depends on) widens both the field and the
   dropdown it derives its size from, consistently. */
html.gwp_v2.gwp_v3 #gwp_sframe #gwp_rredirect { min-width: 320px; }

/* ATTENDANCE / ROTAS / LEGACY DATABASE list: the three pages share one list engine (js/dist/database.js). The Show archived chip
   stands in for the Type switcher on the two locked pages; rows carry a small stats line; the empty state has a create button. */
html.gwp_v2.gwp_v3 .gwp_db_archived_chip { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; padding: 0 16px; margin: 0 0 0 4px; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 500 14px/1 'Figtree', system-ui, sans-serif; cursor: pointer; white-space: nowrap; user-select: none; }
html.gwp_v2.gwp_v3 .gwp_db_archived_chip i { font-size: 18px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 .gwp_db_archived_chip input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--gwp_tool, #4259cd); cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_db_archived_chip:hover { background: var(--gwp_tool_tint, #eaedfa); }
html.gwp_v2.gwp_v3 .gwp_db_archived_chip:has(input:checked) { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_db_archived_chip:has(input:checked) i { color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_dbitem_meta { display: flex; flex-wrap: wrap; align-items: center; }
html.gwp_v2.gwp_v3 .gwp_dbitem_stat { font-size: 12px; color: var(--v2-muted); text-transform: none; }
html.gwp_v2.gwp_v3 .gwp_dbitem_meta .gwp_dbitem_stat::before { content: "\00b7"; margin: 0 7px; opacity: .7; }
html.gwp_v2.gwp_v3 .gwp_emptystate_icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 18px; border-radius: 50%; background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); font-size: 38px; }
html.gwp_v2.gwp_v3 .gwp_emptystate_title { color: var(--v2-ink); font-size: 20px; font-weight: 700; }
html.gwp_v2.gwp_v3 .gwp_emptystate_text { max-width: 380px; margin: 0 auto; color: var(--v2-muted); font-size: 14.5px; line-height: 1.5; }
html.gwp_v2.gwp_v3 .gwp_dbempty_btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-top: 22px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--gwp_tool, #4259cd); color: #fff; font: 600 14px/1 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_dbempty_btn:hover { background: var(--gwp_tool_hover, #334bc2); }
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 .gwp_db_archived_chip { width: 44px; padding: 0; justify-content: center; }
    html.gwp_v2.gwp_v3 .gwp_db_archived_chip span, html.gwp_v2.gwp_v3 .gwp_db_archived_chip input[type="checkbox"] { display: none; }
}


/* REGISTER + ROTA EDITOR TABS (Attendance / Rotas pages, Legacy Database): the old purple/green gradient buttons, the stacked-vs-inline
   form lines on Register Settings / Rota Info, native selects and the bare Delete block, brought in line with the rest of Clarity. */
html.gwp_v2.gwp_v3 .gwp_rota_autofill_btn, html.gwp_v2.gwp_v3 .gwp_rota_autofill_toolbar_btn, html.gwp_v2.gwp_v3 .gwp_rota_run_autofill_btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--gwp_tool, #4259cd); color: #fff; font: 600 14px/1 'Figtree', system-ui, sans-serif; box-shadow: none; transform: none; transition: none; cursor: pointer; }
html.gwp_v2.gwp_v3 .gwp_rota_autofill_btn:hover, html.gwp_v2.gwp_v3 .gwp_rota_autofill_toolbar_btn:hover, html.gwp_v2.gwp_v3 .gwp_rota_run_autofill_btn:hover { background: var(--gwp_tool_hover, #334bc2); box-shadow: none; transform: none; }
html.gwp_v2.gwp_v3 .gwp_rota_run_autofill_btn { background: var(--v3-soft); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_rota_run_autofill_btn:hover { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); }
html.gwp_v2.gwp_v3 .gwp_rota_autofill_toolbar_btn.gwp_rota_autofill_setup { background: var(--v3-soft); color: var(--v2-ink); }
html.gwp_v2.gwp_v3 .gwp_rota_autofill_rule { border: 0; border-radius: 14px; background: var(--v3-soft); }
html.gwp_v2.gwp_v3 .gwp_rota_autofill_rule_mode { background: var(--gwp_tool_tint, #eaedfa); color: var(--gwp_tool_text, #2e43ae); font-weight: 600; }

html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfields, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfields { max-width: 760px; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfieldline, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfieldline { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 0 22px; border: 0; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfieldtitle, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfieldtitle { width: auto; font: 600 14px/1.3 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfield, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfield { width: 100%; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings textarea, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info textarea { box-sizing: border-box; width: 100%; min-height: 104px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--v3-soft); font: 400 14.5px/1.5 'Figtree', system-ui, sans-serif; color: var(--v2-ink); }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings textarea:focus, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .select_multiframe { min-width: 320px; max-width: 100%; }
html.gwp_v2.gwp_v3 #gwp_reg_poststatus, html.gwp_v2.gwp_v3 #gwp_rota_poststatus { appearance: none; -webkit-appearance: none; box-sizing: border-box; height: 44px; width: 220px !important; padding: 0 40px 0 16px; border: 0; border-radius: 999px; background-color: var(--v3-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; font: 500 14.5px 'Figtree', system-ui, sans-serif; color: var(--v2-ink); cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_reg_poststatus:focus, html.gwp_v2.gwp_v3 #gwp_rota_poststatus:focus { outline: 0; box-shadow: 0 0 0 2px var(--gwp_tool, #4259cd); }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_field_hint, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_settings .gwp_field_hint { margin: 8px 0 0; font-size: 12.5px; color: var(--v2-muted); }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings [data-fieldid="gwp_reg_delete_section"], html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_settings .gwp_delete_section { margin-top: 12px; padding: 18px 20px; border: 1px solid #fecaca; border-radius: 16px; background: #fff7f7; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings [data-fieldid="gwp_reg_delete_section"] .gwp_formfieldtitle { color: #b91c1c; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings [data-fieldid="gwp_reg_delete_section"] .gwp_delete_section { margin: 0; padding: 0; border: 0; background: transparent; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_delete_btn, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_settings .gwp_delete_btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border: 1px solid #fca5a5; border-radius: 999px; background: #fff; color: #dc2626; font: 600 14px/1 'Figtree', system-ui, sans-serif; cursor: pointer; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_delete_btn:hover, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_settings .gwp_delete_btn:hover { background: #fee2e2; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_delete_warning, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_settings .gwp_delete_warning { margin: 10px 0 0; font-size: 12.5px; font-style: normal; color: #7f1d1d; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfields, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfields { margin-left: 15px; margin-top: 8px; }
@media (max-width: 768px) {
    html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfields, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfields { margin-left: 0; max-width: none; }
    html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .select_multiframe { min-width: 0; width: 100%; }
}
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings .gwp_formfieldline, html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_info .gwp_formfieldline { margin-bottom: 22px; padding-bottom: 0 !important; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings [data-fieldid="gwp_reg_delete_section"] { padding: 18px 20px !important; }
html.gwp_v2.gwp_v3 #gwp_tabcontent_addregister_settings [data-fieldid="gwp_reg_delete_section"], html.gwp_v2.gwp_v3 #gwp_tabcontent_addrota_settings .gwp_delete_section { box-sizing: border-box; }

/* PUBLIC ROTA PAGE (/rota/?id=): the toolbar's buttons were the old grey/orange-outline set; pills like the rest of Clarity, wrapping two-up on phones. */
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_dropdown_btn, html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_view_toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--v3-soft); color: var(--v2-ink); font: 600 14px/1 'Figtree', system-ui, sans-serif; cursor: pointer; transition: none; }
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_dropdown_btn:hover, html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_view_toggle:hover { background: color-mix(in srgb, var(--accent1, #2a9d90) 14%, #fff); }
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_dropdown_btn.active { background: color-mix(in srgb, var(--accent1, #2a9d90) 16%, #fff); color: color-mix(in srgb, var(--accent1, #2a9d90) 70%, #000); box-shadow: none; }
@media (max-width: 560px) {
    html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_dropdown_btn, html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_view_toggle { padding: 0 14px; }
}
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_toolbar { justify-content: flex-start; }
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_view_toggle, html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_dropdown_btn { width: auto !important; flex: 0 0 auto; }
html.gwp_v2.gwp_v3 #gwp_rotaframe .gwp_rota_toolbar { flex-direction: row !important; flex-wrap: wrap !important; align-items: center; }