/*
   New look (Nov 2026): the shared foundation, with the motion of the former Sleek UI pilot merged in (8 Nov 2026)
   Loaded by core.libs.php only for clubs listed in the system setting System:NewLookOrgs (comma list of club
   names, or ALL), and on the system admin style guide page newlookdemo.php. Remove the club from the setting to
   turn it off.

   It restyles the shared building blocks only: text, headings, buttons, form fields, Portal and list rows,
   tables and pop-ups. It does not move anything: layout, widths and the navigation bar are left as they are.

   Colours come from the club's own scheme (--primaryColor, --lightColor, --lighterColor, --bodyBGColor,
   --bodyTextColor, --buttonTextColor, --altTextColor, set in core.libs.php). The softer shades below are mixed from
   those, so a club with a dark page background still gets readable results.
   Sizes are in em, so the member's larger-text setting (cmFontSizeIdx, set on the page body) still works.
   Inline styles in page code win over this file; those spots change page by page in a later phase.

   Part A, motion (was css/sleekui.css, which is no longer loaded):
  M1. Page-to-page transitions when a top tab is tapped (Chrome/Edge 126+, Safari 18.2+;
      other browsers just load the page as before)
  M2. Top tab polish: smooth hover, small lift, sliding marker under the current tab
  M3. In-page tabs (Bootstrap pills/tabs): soft fade and rise when switching
  M4. Buttons: colour change fades in on hover (no movement), press on tap, focus ring for keyboard users
  M5. Cards and tiles: soft shadows, hover lift, staggered fade-in when a page opens
  M6. Pop-ups: Bootstrap dialogs and SweetAlert2 scale in gently, background blurs
  M7. Tables (DataTables): row hover tint, header row stays in view, rounder search and page buttons
  M8. Form touches: club colour on checkboxes/radios and on the focus glow of text boxes
  M9. "Saved" toast: slides in, rounded, shadow, shrinking line in the club colour
  M10. Busy buttons: a button pulses with a spinner and can't be tapped again while its request runs
      (sleekBusy is added by common.js)
  M11. Loading bar: thin bar in the club colour at the top while a request the user started is running
      (sleekLoadBar is added by common.js)
  M12. Calendars (FullCalendar 3): rounded events with a hover lift, today tinted, rows fade in on week/month change
  M13. Number badges (circledNumber): pop in; common.js also counts them up while the page first loads
  M14. Initials circles: roster cards, and chat posts by members with no photo (added by common.js)
  M15. Placeholder rows: grey pulsing rows in empty Portal lists while the page first loads
      (common.js adds sleekLoaded after 4 seconds; the CSS also stops by itself if the script doesn't run)
  Chat dates read "5 minutes ago" for the last week (common.js only, no styles)
  M16. Header hamburger menu: opens from its corner and deals its rows out top to bottom
  M. Reduced motion: everything in part A is turned off for people who ask their device for reduced motion
   Smooth scrolling was left out on purpose: many pages scroll from script (chat threads jump to
   the bottom), and a page-wide smooth scroll would make those crawl.

   Part B, look:
   1. Design values
   2. Text and headings
   3. Buttons
   4. Form fields
   5. Portal and list rows
   6. Tables
   7. Pop-ups and dialogs
   8. Page background and cards: a light tint behind the page, tables as white cards
   9. Top tabs: a white bar with plain text tabs, the current tab underlined in the club colour
  10. Stronger buttons: a little taller, a soft shadow on the main button
  11. Bookmark bar: a slim white card under the tab bar, matching it
  12. Header menu: the club name and hamburger menu keep the old line spacing; a shorter hamburger button
  13. Tabs on one row: labels never wrap; icons only when the bar is too narrow for every label
  14. Phone bottom bar: a light bar with the current page's icon on a club-colour pill
  15. Option menus (Club Menu, Other options and the rest): bottom sheets of icon tiles on phones and touch screens
  16. Yes/no confirmations: bottom action sheets on phones and touch screens
  17. Bootstrap dialogs: slide up from the bottom on phones and touch screens
  18. Info pop-overs (the i and ? bubbles): bottom sheets on phones and touch screens
  19. Drop-down lists: plain drop-downs and SlimSelect pickers share the text-field look
  20. Date and time boxes: the text-field look for those without form-control
  21. Keyboard focus: one club-colour ring for keyboard users, none on a click
  22. Checkboxes and their labels: the words tick the box too; bigger boxes on touch screens
  23. Empty lists: a quiet box with an icon for "No ... found" and empty tables
  24. Printing: no motion, shadows or tint on paper
  25. On/off switches: soft track, round sliding knob, club colour when on, keyboard ring
  26. Tables as cards on phones: each DataTables row a card of heading: value lines, with a Sort by list
  27. Pull down to refresh: a refresh button comes down from the top on pages that set $pullRefresh
  28. Club Home buttons: Club store, Donate and the other link buttons as solid main buttons
*/

/* ========== Part A: motion (was css/sleekui.css) ========== */

/* ---------- M1. Page-to-page transitions ---------- */

@view-transition
{
    navigation: auto;
}

/* the header, nav bar and mobile footer stay still while the page body changes.
   the names are set only while a page change is animating (html:active-view-transition): a named element becomes its own
   layer, which kept the hamburger menu and nav bar drop-downs behind calendar rows (FullCalendar z-index 1-5) */
html:active-view-transition #divHdrBlock
{
    view-transition-name: icrew-header;
}

html:active-view-transition #navbar
{
    view-transition-name: icrew-navbar;
}

html:active-view-transition #footer
{
    view-transition-name: icrew-footer;
}

/* the current tab is captured on its own, so its highlight slides from the old tab to the new one */
html:active-view-transition .icrewnavbar button[aria-current="page"]
{
    view-transition-name: icrew-activetab;
}

@keyframes sleekPageOut
{
    to { opacity: 0; }
}

@keyframes sleekPageIn
{
    from { opacity: 0; transform: translateY(10px); }
}

::view-transition-old(root)
{
    animation: 140ms ease-in both sleekPageOut;
}

::view-transition-new(root)
{
    animation: 260ms cubic-bezier(.2, .8, .2, 1) 60ms both sleekPageIn;
}

::view-transition-group(icrew-activetab)
{
    animation-duration: 320ms;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

::view-transition-group(icrew-navbar),
::view-transition-old(icrew-navbar),
::view-transition-new(icrew-navbar)
{
    animation-duration: 200ms;
}

/* ---------- M2. Top tab polish ---------- */

.mastheadbtn,
.mastheadbtnicon,
.mastheadbtnbkmk,
.mastheadbtnsm
{
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.mastheadbtn:hover,
.mastheadbtnicon:hover,
.mastheadbtnbkmk:hover,
.mastheadbtnsm:hover
{
    transform: translateY(-2px);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, .12);
}

.mastheadbtn:active,
.mastheadbtnicon:active,
.mastheadbtnbkmk:active,
.mastheadbtnsm:active
{
    transform: translateY(0) scale(.96);
    box-shadow: none;
}

/* marker bar under the current tab */
.icrewnavbar button[aria-current="page"]
{
    box-shadow: inset 0 -3px 0 var(--primaryColor);
}

.icrewnavbar button[aria-current="page"]:hover
{
    transform: none;
    box-shadow: inset 0 -3px 0 var(--primaryColor);
}

/* ---------- M3. In-page tabs ---------- */

/* runs each time a pane is shown; no fill mode, so no transform is left on the pane afterwards
   (a leftover transform would move fixed-position dialogs inside the pane) */
@keyframes sleekPaneIn
{
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.tab-content > .tab-pane.active
{
    animation: sleekPaneIn 240ms cubic-bezier(.2, .8, .2, 1);
}

.nav-pills > li > a,
.nav-tabs > li > a
{
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ---------- M4. Buttons ---------- */

:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn)
{
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

/* hover keeps the button still (main.css shrinks it); main.css's colour change fades in through the transition above */
:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn):hover
{
    transform: none;
}

:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn):active
{
    transform: translateY(0) scale(.96);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn):disabled
{
    transform: none;
    box-shadow: none;
}

/* ring for keyboard users only; a mouse click or tap does not show it */
:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn):focus-visible
{
    outline: 3px solid color-mix(in srgb, var(--primaryColor) 45%, transparent);
    outline-offset: 2px;
}

/* ---------- M5. Cards and tiles ---------- */

/* soft resting shadow */
:is(.rosterCard, .crewAlertTile, .formTile, .ohPanel, .portalTypeRowClickable)
{
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* dashboard tiles: soft shadow in place of the hard club-colour edge */
:is(.dbTile, .tmdTile, .sxsTile)
{
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

:is(.dbTile, .tmdTile, .sxsTile, .portalTypeRowClickable)
{
    transition: transform .2s ease, box-shadow .2s ease;
}

:is(.dbTile, .tmdTile, .sxsTile):hover
{
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
}

.portalTypeRowClickable:hover
{
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

:is(.dbTile, .tmdTile, .sxsTile, .portalTypeRowClickable):active
{
    transform: scale(.97);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* fade and rise when a page opens (or a list is redrawn), one after another for the first few.
   "backwards" only holds the start frame during the delay, so no transform is left afterwards */
@keyframes sleekRise
{
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard)
{
    animation: sleekRise 360ms cubic-bezier(.2, .8, .2, 1) backwards;
}

:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard):nth-child(2) { animation-delay: 40ms; }
:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard):nth-child(3) { animation-delay: 80ms; }
:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard):nth-child(4) { animation-delay: 120ms; }
:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard):nth-child(5) { animation-delay: 160ms; }
:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard):nth-child(6) { animation-delay: 200ms; }
:is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard):nth-child(n+7) { animation-delay: 240ms; }

/* ---------- M6. Pop-ups ---------- */

/* Bootstrap dialogs: gentle scale-up in place of the drop from above */
.modal.fade .modal-dialog
{
    transform: translateY(-8px) scale(.97);
    opacity: 0;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.modal.in .modal-dialog
{
    transform: none;
    opacity: 1;
}

.modal-backdrop.in
{
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* SweetAlert2: same entrance as the dialogs (toasts get their own slide in section 9) */
@keyframes sleekPopIn
{
    from { opacity: 0; transform: translateY(8px) scale(.96); }
    to { opacity: 1; transform: none; }
}

.swal2-popup.swal2-show
{
    animation: sleekPopIn 220ms cubic-bezier(.2, .8, .2, 1);
}

body:not(.swal2-toast-shown) .swal2-container.swal2-backdrop-show
{
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ---------- M7. Tables (DataTables) ---------- */

table.dataTable tbody tr > *
{
    transition: box-shadow .15s ease;
}

/* light tint in the club colour, drawn over whatever colour the row already has */
table.dataTable tbody tr:hover > *
{
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--primaryColor) 8%, transparent);
}

/* header row stays in view while the page scrolls down a long table. :where() keeps this weak,
   so any page style that colours its own header still wins */
:where(table.dataTable) thead th
{
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bodyBGColor);
}

.dataTables_wrapper .dataTables_filter input
{
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 4px 12px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dataTables_wrapper .dataTables_filter input:focus
{
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaryColor) 20%, transparent);
}

.dataTables_wrapper .dataTables_paginate .paginate_button
{
    border-radius: 16px;
    transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):active
{
    background-color: var(--lightColor);
    transform: scale(.94);
}

/* ---------- M8. Form touches ---------- */

input[type="checkbox"],
input[type="radio"]
{
    accent-color: var(--primaryColor);
}

.form-control
{
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus
{
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaryColor) 20%, transparent);
}

/* ---------- M9. "Saved" toast ---------- */

@keyframes sleekToastIn
{
    from { opacity: 0; transform: translateX(24px) scale(.96); }
    to { opacity: 1; transform: none; }
}

@keyframes sleekToastInRtl
{
    from { opacity: 0; transform: translateX(-24px) scale(.96); }
    to { opacity: 1; transform: none; }
}

.swal2-container .swal2-popup.swal2-toast
{
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.swal2-container .swal2-popup.swal2-toast.swal2-show
{
    animation: sleekToastIn 280ms cubic-bezier(.2, .8, .2, 1);
}

.swal2-container.rtl .swal2-popup.swal2-toast.swal2-show
{
    animation-name: sleekToastInRtl;
}

.swal2-container .swal2-popup.swal2-toast .swal2-timer-progress-bar
{
    background: var(--primaryColor);
}

/* ---------- M10. Busy buttons ---------- */

@keyframes sleekBusyPulse
{
    50% { opacity: .6; }
}

@keyframes sleekSpin
{
    to { transform: rotate(360deg); }
}

.sleekBusy
{
    pointer-events: none;
    cursor: progress;
    animation: sleekBusyPulse 1s ease-in-out infinite;
}

/* spinner after the label (buttons only; an input button can't hold one, so it just pulses) */
button.sleekBusy::after
{
    content: "";
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-left: .5em;
    margin-right: .5em;
    vertical-align: -.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sleekSpin .7s linear infinite;
}

/* ---------- M11. Loading bar ---------- */

#sleekLoadBar
{
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    z-index: 20000;
    background: var(--primaryColor);
    box-shadow: 0 0 8px var(--primaryColor);
    opacity: 0;
    pointer-events: none;
}

/* creeps towards 85% while waiting, then runs to the end and fades when the work is done */
#sleekLoadBar.sleekLoading
{
    opacity: 1;
    width: 85%;
    transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity .2s ease;
}

#sleekLoadBar.sleekDone
{
    opacity: 0;
    width: 100%;
    transition: width .25s ease, opacity .3s ease .2s;
}

/* ---------- M12. Calendars ---------- */

@keyframes sleekFade
{
    from { opacity: 0; }
    to { opacity: 1; }
}

.fc-event
{
    border-radius: 6px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.fc-event:hover
{
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}

.fc-unthemed td.fc-today
{
    background-color: color-mix(in srgb, var(--primaryColor) 10%, transparent);
}

/* month rows and the week grid are redrawn on each week/month change */
.fc-view-container .fc-row,
.fc-view-container .fc-time-grid .fc-content-skeleton
{
    animation: sleekFade 220ms ease-out;
}

.fc-button
{
    transition: background-color .2s ease, box-shadow .2s ease;
}

.fc-button.fc-corner-left
{
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.fc-button.fc-corner-right
{
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* ---------- M13. Number badges ---------- */

@keyframes sleekPop
{
    from { opacity: 0; transform: scale(.6); }
    70% { transform: scale(1.08); }
    to { opacity: 1; transform: none; }
}

:is(.circledNumber, .circledNumber2, .circledNumber3, .circledNumberHilight)
{
    animation: sleekPop 320ms cubic-bezier(.2, .8, .2, 1) backwards;
}

/* ---------- M14. Initials circles ---------- */

.sleekInitials
{
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: .03em;
    vertical-align: middle;
    user-select: none;
}

/* the roster card button, turned into the initials circle by common.js (its colour is set there) */
.rosterCardBtn.sleekInitialsBtn
{
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
    font-style: normal;
    letter-spacing: .03em;
}

/* main.css turns button text to the club colour on hover and italic on focus; keep the initials white and upright */
.rosterCardBtn.sleekInitialsBtn:hover,
.rosterCardBtn.sleekInitialsBtn:focus
{
    color: #ffffff;
    font-style: normal;
}

/* ---------- M15. Placeholder rows ---------- */

@keyframes sleekShimmer
{
    50% { opacity: .45; }
}

/* the 0s animation at 5s takes the rows away even if common.js never adds sleekLoaded */
@keyframes sleekPlaceholderEnd
{
    to { background-image: none; min-height: 0; }
}

html:not(.sleekLoaded) :is(#assetlist, #damageslist, #doclist, #trackinglist, #eventslist, #feepayments, #feelist, #filelist, #formslist, #incidentslist, #launchlist, #locationlist, #mailinglistslist, #clubroster, #oarslist, #profileslist, #reslist, #segmentlist, #sessionlist, #shelllist):empty
{
    min-height: 150px;
    border-radius: 6px;
    background-image: repeating-linear-gradient(to bottom, var(--lighterColor) 0 38px, transparent 38px 48px);
    animation: sleekShimmer 1.2s ease-in-out 4, sleekPlaceholderEnd 0s 5s forwards;
}

/* ---------- M16. Header hamburger menu ---------- */

/* the hamburger menu in the top right (showHamburgerMenuButton, Bootstrap adds .open) grows from its corner and its rows
   fade and slide in one after another; closing stays instant. "backwards" leaves no transform once a row is in */
/* the panel unfolds from the hamburger corner: its edge sweeps down and out to the left */
@keyframes sleekMenuOpen { from { clip-path: inset(0 0 100% 100% round 8px); opacity: .5; } to { clip-path: inset(0 0 0 0 round 8px); opacity: 1; } }
@keyframes sleekMenuRow { from { opacity: 0; transform: translateX(10px); } }

#divHdgHamburger.open > .dropdown-menu
{
    transform-origin: top right;
    animation: sleekMenuOpen 320ms cubic-bezier(.2, .8, .2, 1);
}

#divHdgHamburger.open > .dropdown-menu > li
{
    animation: sleekMenuRow 260ms cubic-bezier(.2, .8, .2, 1) 60ms backwards;
}

#divHdgHamburger.open > .dropdown-menu > li:nth-child(2) { animation-delay: 110ms; }
#divHdgHamburger.open > .dropdown-menu > li:nth-child(3) { animation-delay: 160ms; }
#divHdgHamburger.open > .dropdown-menu > li:nth-child(4) { animation-delay: 210ms; }
#divHdgHamburger.open > .dropdown-menu > li:nth-child(5) { animation-delay: 260ms; }
#divHdgHamburger.open > .dropdown-menu > li:nth-child(6) { animation-delay: 310ms; }
#divHdgHamburger.open > .dropdown-menu > li:nth-child(7) { animation-delay: 360ms; }
#divHdgHamburger.open > .dropdown-menu > li:nth-child(n+8) { animation-delay: 410ms; }

@media (prefers-reduced-motion: reduce)
{
    #divHdgHamburger.open > .dropdown-menu,
    #divHdgHamburger.open > .dropdown-menu > li
    {
        animation: none;
    }
}

/* ---------- M. Reduced motion (part A) ---------- */

@media (prefers-reduced-motion: reduce)
{
    @view-transition
    {
        navigation: none;
    }

    .mastheadbtn,
    .mastheadbtnicon,
    .mastheadbtnbkmk,
    .mastheadbtnsm,
    .nav-pills > li > a,
    .nav-tabs > li > a,
    :is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn),
    :is(.dbTile, .tmdTile, .sxsTile, .portalTypeRowClickable),
    table.dataTable tbody tr > *
    {
        transition: none;
    }

    :is(.mastheadbtn, .mastheadbtnicon, .mastheadbtnbkmk, .mastheadbtnsm):is(:hover, :active),
    :is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .ohBtn):is(:hover, :active),
    :is(.dbTile, .tmdTile, .sxsTile, .portalTypeRowClickable):is(:hover, :active),
    .dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):active
    {
        transform: none;
    }

    .tab-content > .tab-pane.active,
    :is(.dbTile, .tmdTile, .sxsTile, .crewAlertTile, .formTile, .ohPanel, .portalTypeRow, .portalTypeRowClickable, .portalTypeRowBar, .rosterCard),
    .swal2-popup.swal2-show
    {
        animation: none;
    }

    .modal.fade .modal-dialog
    {
        transform: none;
        transition: opacity .2s ease;
    }

    .swal2-container .swal2-popup.swal2-toast.swal2-show,
    .swal2-container.rtl .swal2-popup.swal2-toast.swal2-show
    {
        animation: none;
    }

    .sleekBusy
    {
        animation: none;
        opacity: .6;
    }

    button.sleekBusy::after
    {
        animation: none;
        border-right-color: currentColor;
        border-style: dotted;
    }

    #sleekLoadBar.sleekLoading,
    #sleekLoadBar.sleekDone
    {
        transition: opacity .2s ease;
    }

    .fc-event,
    .fc-button
    {
        transition: none;
    }

    .fc-event:hover
    {
        transform: none;
    }

    .fc-view-container .fc-row,
    .fc-view-container .fc-time-grid .fc-content-skeleton,
    :is(.circledNumber, .circledNumber2, .circledNumber3, .circledNumberHilight)
    {
        animation: none;
    }

    html:not(.sleekLoaded) :is(#assetlist, #damageslist, #doclist, #trackinglist, #eventslist, #feepayments, #feelist, #filelist, #formslist, #incidentslist, #launchlist, #locationlist, #mailinglistslist, #clubroster, #oarslist, #profileslist, #reslist, #segmentlist, #sessionlist, #shelllist):empty
    {
        animation: sleekPlaceholderEnd 0s 5s forwards;
    }
}

/* ========== Part B: look ========== */

/* ---------- 1. Design values ---------- */

:root
{
    --nlFont: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --nlSurface: var(--bodyBGColor);
    --nlBorder: color-mix(in srgb, var(--bodyTextColor) 14%, transparent);
    --nlBorderStrong: color-mix(in srgb, var(--bodyTextColor) 26%, transparent);
    --nlMuted: color-mix(in srgb, var(--bodyTextColor) 68%, var(--bodyBGColor));
    --nlAccentSoft: color-mix(in srgb, var(--primaryColor) 10%, var(--bodyBGColor));
    --nlAccentHover: color-mix(in srgb, var(--primaryColor) 85%, #000000);
    --nlRadius: 8px;
    --nlRadiusCard: 12px;
    --nlShadow: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 4px rgba(0, 0, 0, .06);
    --nlShadowRaised: 0 4px 12px rgba(0, 0, 0, .10), 0 12px 32px rgba(0, 0, 0, .10);
    --nlDanger: #c62828;
    --nlPage: color-mix(in srgb, var(--bodyBGColor) 94%, var(--bodyTextColor) 6%);
    --nlDangerHover: #a51f1f;
}

/* ---------- 2. Text and headings ---------- */

body
{
    font-family: var(--nlFont);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* buttons, fields and pop-ups use the page font rather than the browser default */
button,
input,
select,
textarea,
.swal2-popup
{
    font-family: inherit;
}

h1, h2, h3, h4, h5
{
    font-family: var(--nlFont);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}

h2
{
    font-size: 1.75em;
    font-weight: 700;
    letter-spacing: -.02em;
}

h3
{
    font-size: 1.35em;
    margin-top: 1em;
    margin-bottom: .5em;
}

/* a page title (in the h2div block under the nav bar) keeps no extra space above it */
.h2div > :is(h2, h3)
{
    margin-top: 0;
}

h4
{
    font-size: 1.15em;
}

h5
{
    font-size: 1em;
    color: var(--nlMuted);
}

label
{
    font-weight: 600;
}

hr
{
    border-top-color: var(--nlBorder);
}

/* ---------- 3. Buttons ---------- */

/* one shape for every button: the same corner as the form fields, no bold or italic switching on hover and focus
   (that made the label change width) */
:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .menubtn)
{
    border-radius: var(--nlRadius);
    font-weight: 600;
    font-style: normal;
    letter-spacing: .01em;
}

:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .menubtn):is(:hover, :focus)
{
    font-weight: 600;
    font-style: normal;
}

/* main button: the club colour; on hover it swaps to a light button with club-colour text and outline, as in the
   current look (a darker shade alone was too faint to notice) */
.functionbtn,
.menubtn
{
    border: 1px solid transparent;
}

.functionbtn:hover,
.functionbtn:focus-visible,
.menubtn:hover
{
    background-color: var(--buttonTextColor);
    color: var(--primaryColor);
    border-color: var(--primaryColor);
}

/* secondary buttons (bright, cancel): outlined, quieter than the main button */
.functionbtnbright,
.functionbtncancel
{
    background-color: var(--nlSurface);
    color: var(--primaryColor);
    border: 1px solid var(--nlBorderStrong);
}

.functionbtnbright:hover,
.functionbtncancel:hover
{
    background-color: var(--nlAccentSoft);
    color: var(--primaryColor);
    border-color: var(--primaryColor);
}

/* danger and warning */
.functionbtnred
{
    background-color: var(--nlDanger);
    color: #ffffff;
    border: 1px solid transparent;
}

.functionbtnred:hover
{
    background-color: var(--nlDangerHover);
    color: #ffffff;
    border-color: transparent;
}

.functionbtnyellow
{
    background-color: #fdd835;
    color: #3e2c00;
    border: 1px solid transparent;
}

.functionbtnyellow:hover
{
    background-color: #f9c400;
    color: #3e2c00;
}

:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel, .menubtn):disabled
{
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- 4. Form fields ---------- */

/* height grows with the text, so the larger-text setting doesn't clip it */
.form-control
{
    height: auto;
    min-height: 38px;
    padding: 7px 12px;
    line-height: 1.5;
    color: var(--bodyTextColor);
    background-color: var(--nlSurface);
    border: 1px solid var(--nlBorderStrong);
    border-radius: var(--nlRadius);
    box-shadow: none;
}

.form-control:hover
{
    border-color: color-mix(in srgb, var(--bodyTextColor) 40%, transparent);
}

.form-control:focus
{
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaryColor) 20%, transparent);
    outline: none;
}

.form-control::placeholder
{
    color: var(--nlMuted);
    opacity: 1;
}

input,
select
{
    color: var(--bodyTextColor);
}

input[type="checkbox"],
input[type="radio"]
{
    accent-color: var(--primaryColor);
}

/* ---------- 5. Portal and list rows ---------- */

/* rows become cards on the page background with a club-colour edge, in place of solid tinted blocks.
   --altTextColor and --lighterColor are pointed at card colours inside a row: some clubs set them for light text on a
   dark row colour, and page code uses them in inline styles, which would be unreadable on the card */
:is(.portalTypeRow, .portalTypeRowStatic, .portalTypeRowClickable, .portalTypeRowClickableSelected, .portalTypeRowModified)
{
    --altTextColor: var(--bodyTextColor);
    --lighterColor: var(--nlAccentSoft);
    background-color: var(--nlSurface);
    color: var(--bodyTextColor);
    border: 1px solid var(--nlBorder);
    border-inline-start: 4px solid var(--primaryColor);
    border-radius: var(--nlRadius);
    box-shadow: var(--nlShadow);
}

:is(.portalTypeRow, .portalTypeRowStatic, .portalTypeRowClickable, .portalTypeRowClickableSelected, .portalTypeRowModified) a
{
    color: var(--bodyTextColor);
}

.portalTypeRowClickable:hover
{
    border-color: var(--nlBorderStrong);
    border-inline-start-color: var(--primaryColor);
    background-color: var(--nlAccentSoft);
}

.portalTypeRowClickableSelected
{
    background-color: var(--nlAccentSoft);
    border: 2px solid var(--primaryColor);
}

/* section header bars keep the club colour fill (their contents are set for it), with the new shape and weight */
:is(.portalTypeRowBar, .profileSection)
{
    border-radius: var(--nlRadius);
    font-weight: 600;
}

:is(.portalTypeRowBarBodyColorBG, .portalTypeRowBarLightColorBG)
{
    border-radius: var(--nlRadius);
    font-weight: 600;
}

.portalTypeRowBarBodyColorBG
{
    border: 1px solid var(--nlBorder);
}

/* ---------- 6. Tables ---------- */

/* DataTables: quieter header, thin row lines, a light hover in the club colour */
table.dataTable thead th,
table.dataTable thead td
{
    font-weight: 600;
    font-size: .92em;
    color: var(--nlMuted);
    border-bottom: 1px solid var(--nlBorderStrong);
}

table.dataTable tfoot th,
table.dataTable tfoot td
{
    border-top: 1px solid var(--nlBorderStrong);
}

table.dataTable.display tbody td,
table.dataTable.row-border tbody td,
table.dataTable.display tbody th,
table.dataTable.row-border tbody th
{
    border-top: 1px solid var(--nlBorder);
}

table.dataTable.cell-border tbody th,
table.dataTable.cell-border tbody td
{
    border-color: var(--nlBorder);
}

table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover
{
    background-color: var(--nlAccentSoft);
    color: var(--bodyTextColor);
}

table.dataTable.no-footer
{
    border-bottom: 1px solid var(--nlBorderStrong);
}

/* Bootstrap tables used outside DataTables */
.table > thead > tr > th
{
    font-weight: 600;
    color: var(--nlMuted);
    border-bottom: 1px solid var(--nlBorderStrong);
}

.table > tbody > tr > td,
.table > tbody > tr > th
{
    border-top: 1px solid var(--nlBorder);
}

/* ---------- 7. Pop-ups and dialogs ---------- */

.modal-content
{
    border: none;
    border-radius: var(--nlRadiusCard);
    box-shadow: var(--nlShadowRaised);
}

.modal-header
{
    border-bottom-color: var(--nlBorder);
}

.modal-footer
{
    border-top-color: var(--nlBorder);
}

.swal2-popup
{
    border-radius: var(--nlRadiusCard);
}

.swal2-styled
{
    border-radius: var(--nlRadius);
    font-weight: 600;
}

.alert
{
    border-radius: var(--nlRadius);
}

/* ---------- 8. Page background and cards ---------- */

body
{
    background-color: var(--nlPage);
}

/* icon buttons and show/hide toggles are painted with the page colour in main.css; on the tinted page they would show as
   white boxes, so they let the page show through instead */
.functionbtnTrans,
.functionbtnTrans2,
.showhidetoggle
{
    background-color: transparent;
}

/* each DataTable sits on a white card */
.dataTables_wrapper
{
    background-color: var(--nlSurface);
    border: 1px solid var(--nlBorder);
    border-radius: var(--nlRadiusCard);
    box-shadow: var(--nlShadow);
    padding: 12px;
}

.rosterCard
{
    border-color: var(--nlBorder);
    box-shadow: var(--nlShadow);
}

/* ---------- 9. Top tabs ---------- */

/* the navigation bar becomes a white bar of plain text tabs; the current tab (aria-current, set in navbar.php) is
   underlined in the club colour. navbar.php colours every tab with inline styles, and main.css uses !important on their
   hover, so these rules need !important too; they apply to tabs inside the navigation bar only */
#navbar.icrewnavbar
{
    background-color: var(--nlSurface);
    border: 1px solid var(--nlBorder);
    border-radius: var(--nlRadiusCard);
    box-shadow: var(--nlShadow);
    padding: 4px 6px 0;
}

/* on a phone the bar has no tabs, only the Club Menu button (navbar.php), so it shows no bar around the button */
#navbar.icrewnavbar:not(:has(.mastheadbtn, .mastheadbtnicon, .mastheadbtnbkmk))
{
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.icrewnavbar :is(.mastheadbtn, .mastheadbtnicon, .mastheadbtnsm, .mastheadbtnbkmk)
{
    background-color: transparent !important;
    color: var(--nlMuted) !important;
    border-color: transparent !important;
    border-radius: var(--nlRadius) var(--nlRadius) 0 0;
    font-size: 13px;
    font-weight: 500 !important;
    height: 40px;
    box-shadow: none;
}

.icrewnavbar :is(.mastheadbtn, .mastheadbtnicon, .mastheadbtnsm, .mastheadbtnbkmk):hover
{
    background-color: var(--nlAccentSoft) !important;
    color: var(--bodyTextColor) !important;
    border-color: transparent !important;
    box-shadow: none;
    transform: none;
}

.icrewnavbar button[aria-current="page"],
.icrewnavbar button[aria-current="page"]:hover
{
    color: var(--primaryColor) !important;
    font-weight: 600 !important;
    box-shadow: inset 0 -3px 0 var(--primaryColor);
}

/* ---------- 10. Stronger buttons ---------- */

:is(.functionbtn, .functionbtnred, .functionbtnyellow, .functionbtnbright, .functionbtncancel)
{
    height: 40px;
}

.functionbtn
{
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 8px color-mix(in srgb, var(--primaryColor) 30%, transparent);
}

.functionbtn:disabled
{
    box-shadow: none;
}

/* the soft shadow goes on hover, so the swapped light button sits flat */
.functionbtn:hover
{
    box-shadow: none;
}

/* ---------- 11. Bookmark bar ---------- */

/* the member's bookmarks and dashboards under the tab bar (showBookmarks in navbar.php): a slim card matching the tab bar,
   in place of the solid light-colour strip. each bookmark is an icon link (aria-label "open bookmark" or "open dashboard")
   followed by a text link */
.bookmarkbar
{
    background-color: var(--nlSurface);
    color: var(--bodyTextColor);
    border: 1px solid var(--nlBorder);
    border-radius: var(--nlRadiusCard);
    box-shadow: var(--nlShadow);
    margin-top: -6px;
    margin-bottom: 14px;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.6;
}

.bookmarkbar a
{
    color: var(--bodyTextColor);
    font-weight: 500;
    text-decoration: none;
}

.bookmarkbar a:hover,
.bookmarkbar a:focus
{
    color: var(--primaryColor);
    text-decoration: underline;
}

.bookmarkbar a[aria-label] i
{
    color: var(--primaryColor);
    font-size: 15px !important;
    vertical-align: -1px;
}

/* ---------- 12. Header menu ---------- */

/* the club name and hamburger menu in the top right of the header (divHdgNameMenu, showHamburgerMenuButton) keep the
   old line spacing and no button border: the taller body line spacing and the 1px button border pushed the 32px menu
   icon about 5px lower, leaving extra space above it */
#divHdgNameMenu
{
    line-height: 1.42857;
}

/* the button is 36px (util4.php sets 43px inline) with the icon centred, which trims the space above the bars */
#divHdgHamburger .menubtn
{
    border-width: 0;
    margin-left: 8px;
    height: 36px !important;
    line-height: 1;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
}

/* ---------- 13. Tabs on one row ---------- */

/* text tabs fill the bar on one row from their own widths (each button fills its span from navbar.php); a label never
   wraps. bookmark and expand/collapse (#nbbtnColExp) keep their width; collapsed icon tabs are 56px each */
#navbar.icrewnavbar
{
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}

/* the bar measures its own width for the icons-only switch below. only a bar with text tabs (not the phone bar, which
   holds the Club Menu): a size container also anchors position:fixed elements inside it, which would trap the bottom sheet */
#navbar.icrewnavbar:has(> span > .mastheadbtn)
{
    container-type: inline-size;
}

#navbar.icrewnavbar > span:has(> .mastheadbtn)
{
    flex: 1 1 auto;
    min-width: 0;
}

#navbar.icrewnavbar > span:has(> .mastheadbtnicon:not(#nbbtnColExp))
{
    flex: 0 0 56px;
}

#navbar.icrewnavbar > span > :is(.mastheadbtn, .mastheadbtnicon:not(#nbbtnColExp))
{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
}

/* too narrow for every label: tabs show their icon only (the tooltip keeps the name). the switch width is about 95px a tab
   plus 90px for the bookmark and collapse buttons; nth-of-type(n) means the bar has at least n tab spans */
@container (max-width: 565px) { #navbar.icrewnavbar:has(> span:nth-of-type(7)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 660px) { #navbar.icrewnavbar:has(> span:nth-of-type(8)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 755px) { #navbar.icrewnavbar:has(> span:nth-of-type(9)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 850px) { #navbar.icrewnavbar:has(> span:nth-of-type(10)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 945px) { #navbar.icrewnavbar:has(> span:nth-of-type(11)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 1040px) { #navbar.icrewnavbar:has(> span:nth-of-type(12)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 1135px) { #navbar.icrewnavbar:has(> span:nth-of-type(13)) .mastheadbtn { font-size: 0 !important; } }
@container (max-width: 1230px) { #navbar.icrewnavbar:has(> span:nth-of-type(14)) .mastheadbtn { font-size: 0 !important; } }

/* ---------- 14. Phone bottom bar ---------- */

/* the signed-in phone footer (footer.php, the version holding #mfootertag): a light, slightly see-through bar in place of
   the solid club-colour strip, clear of the iPhone home bar. footer.php colours, sizes and pads it inline (45px on the
   left, 55px on Your Home), hence !important; the left padding is cut to 12px so the icons sit further left */
#footer:has(#mfootertag)
{
    background-color: color-mix(in srgb, var(--nlSurface) 92%, transparent) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    color: var(--nlMuted);
    border-top: 1px solid var(--nlBorder);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
    height: calc(66px + env(safe-area-inset-bottom)) !important;
    padding-top: 6px;
    padding-left: 12px !important;
    padding-bottom: env(safe-area-inset-bottom);
}

/* the Test site's footer is purple: it keeps a purple top edge so Test is still easy to tell apart */
#footer[style*="purple"]:has(#mfootertag)
{
    border-top: 4px solid purple;
}

#footer:has(#mfootertag) table
{
    width: 100%;
    table-layout: fixed;
}

#footer:has(#mfootertag) :is(.footercell, .footercellhilite)
{
    width: auto;
    padding-top: 2px;
    font-size: 11px;
    font-weight: 500;
    color: var(--nlMuted);
    background: none;
}

#footer:has(#mfootertag) .footercellhilite
{
    color: var(--primaryColor);
    font-weight: 700;
}

#footer:has(#mfootertag) .footercellicon:hover
{
    background: none;
}

#footer:has(#mfootertag) .footercelldiv
{
    width: 56px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--nlMuted);
    transition: background-color .2s ease, color .2s ease;
}

#footer:has(#mfootertag) .footercelldiv:active
{
    background-color: var(--nlAccentSoft);
}

#footer:has(#mfootertag) .footercelldiv > span
{
    font-size: 22px !important;
}

/* the current page: its label cell has footercellhilite, so the icon in the same column gets the club-colour pill */
#footer:has(#mfootertag) table:has(td.footercellhilite:nth-child(1)) tr:first-child > td:nth-child(1) .footercelldiv,
#footer:has(#mfootertag) table:has(td.footercellhilite:nth-child(2)) tr:first-child > td:nth-child(2) .footercelldiv,
#footer:has(#mfootertag) table:has(td.footercellhilite:nth-child(3)) tr:first-child > td:nth-child(3) .footercelldiv,
#footer:has(#mfootertag) table:has(td.footercellhilite:nth-child(4)) tr:first-child > td:nth-child(4) .footercelldiv,
#footer:has(#mfootertag) table:has(td.footercellhilite:nth-child(5)) tr:first-child > td:nth-child(5) .footercelldiv
{
    background-color: color-mix(in srgb, var(--primaryColor) 16%, var(--nlSurface));
    color: var(--primaryColor);
}

/* the Save shortcut (pages that set $footerSaveBtn): a solid club-colour button, its label in the club colour, so it stands
   apart from the page links beside it */
#footer:has(#mfootertag) td.ftrSave .footercelldiv
{
    color: var(--buttonTextColor);
    background-color: var(--primaryColor);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primaryColor) 35%, transparent);
}

#footer:has(#mfootertag) td.ftrSave .footercelldiv:active
{
    background-color: var(--nlAccentHover);
}

#footer:has(#mfootertag) td.ftrSaveLabel
{
    color: var(--primaryColor);
    font-weight: 700;
}

/* ---------- 15. Option menus as bottom sheets (phones and touch screens) ---------- */

/* every button menu built by showDropdownButtonsButton (Club Menu, "Other options...", "Your Menu", "Session options..."
   and the rest; its list is #ulDDButtons) opens on a phone or touch screen as a bottom sheet of icon tiles, three across.
   Bootstrap's tap-outside layer (.dropdown-backdrop, added on touch screens) dims the page and closes the sheet when
   tapped. with a mouse the menus stay as normal drop-downs. showDropdownButtonsButton styles the list and buttons inline,
   hence !important */
@keyframes nlSheetUp
{
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes nlFadeIn
{
    from { opacity: 0; }
}

@media (max-width: 767px), (pointer: coarse)
{
    .dropdown:has(> #ulDDButtons) > .dropdown-backdrop
    {
        background-color: rgba(0, 0, 0, .35);
        animation: nlFadeIn .2s ease;
        touch-action: none;
    }

    .dropdown.open > #ulDDButtons
    {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        max-height: 75vh;
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0 !important;
        padding: 8px 12px calc(16px + env(safe-area-inset-bottom)) !important;
        background-color: var(--nlSurface) !important;
        color: var(--bodyTextColor) !important;
        border: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
        animation: nlSheetUp .28s cubic-bezier(.2, .8, .2, 1);
    }

    /* grab handle and the menu's name (data-title, set by showDropdownButtonsButton) across the top of the sheet */
    .dropdown.open > #ulDDButtons::before
    {
        content: attr(data-title);
        grid-column: 1 / -1;
        padding: 16px 0 4px;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        color: var(--bodyTextColor);
        background: linear-gradient(var(--nlBorderStrong), var(--nlBorderStrong)) top center / 40px 5px no-repeat;
    }

    #ulDDButtons > li > :is(.functionbtn, .functionbtnyellow)
    {
        width: 100% !important;
        height: auto !important;
        min-height: 82px;
        margin: 0 !important;
        padding: 10px 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        white-space: normal;
        text-align: center;
        font-size: 12px;
        line-height: 1.25;
        background-color: var(--nlSurface);
        color: var(--bodyTextColor);
        border: 1px solid var(--nlBorder);
        border-radius: 14px;
        box-shadow: none;
    }

    #ulDDButtons > li > .functionbtnyellow
    {
        background-color: #fff6c2;
    }

    /* every tile in a row is the same height (the grid stretches each li; the button fills it), with the icons lined up
       across the top, and the label centred under its icon without the two spaces regularButton puts before it */
    .dropdown.open > #ulDDButtons > li:not(.nlSheetCancel)
    {
        display: flex;
    }

    #ulDDButtons > li > :is(.functionbtn, .functionbtnyellow) > .ddBtnGap
    {
        display: none;
    }

    #ulDDButtons > li > :is(.functionbtn, .functionbtnyellow):is(:hover, :active, :focus-visible)
    {
        background-color: var(--nlAccentSoft);
        color: var(--bodyTextColor);
        border-color: var(--primaryColor);
    }

    #ulDDButtons > li > :is(.functionbtn, .functionbtnyellow) > span:first-child
    {
        font-size: 26px !important;
        color: var(--primaryColor);
    }

    /* no down arrow on the menu button here, since the menu comes up from the bottom */
    .dropdown:has(> #ulDDButtons) > .dropdown-toggle .caret
    {
        display: none;
    }

    /* the button that opened the sheet shows as pressed, above the dimmed page (Bootstrap puts the backdrop, z-index 990,
       right after the button) */
    .dropdown.open:has(> #ulDDButtons) > .dropdown-toggle
    {
        position: relative;
        z-index: 991;
        background-color: var(--buttonTextColor);
        color: var(--primaryColor);
        border-color: var(--primaryColor);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaryColor) 30%, transparent);
    }

    /* Cancel across the bottom of the sheet; showDropdownButtonsButton hides it inline for the normal drop-down */
    .dropdown.open > #ulDDButtons > li.nlSheetCancel
    {
        display: block !important;
        grid-column: 1 / -1;
        margin-top: 20px;
    }

    .nlSheetCancelBtn
    {
        width: 100%;
        height: 48px;
        font-size: 15px;
        font-weight: 600;
        color: var(--primaryColor);
        background-color: var(--nlSurface);
        border: 1px solid var(--nlBorderStrong);
        border-radius: 14px;
    }

    .nlSheetCancelBtn:active
    {
        background-color: var(--nlAccentSoft);
    }
}

@media (prefers-reduced-motion: reduce)
{
    .dropdown.open > #ulDDButtons,
    .dropdown:has(> #ulDDButtons) > .dropdown-backdrop
    {
        animation: none;
    }
}

/* ---------- 16. Confirmations as bottom sheets (phones and touch screens) ---------- */

/* a SweetAlert2 pop-up that shows a Cancel button (a yes/no confirmation) slides up from the bottom like an iPhone action
   sheet, with its buttons full width and stacked within thumb reach. plain messages and toasts are left as they are, and
   the buttons keep the colours the page gives them. SweetAlert 11 lays out its container as a grid */
@media (max-width: 767px), (pointer: coarse)
{
    .swal2-container:has(> .swal2-popup:not(.swal2-toast) > .swal2-actions > .swal2-cancel:not([style*="display: none"]))
    {
        padding: 0;
    }

    .swal2-container > .swal2-popup:not(.swal2-toast):has(> .swal2-actions > .swal2-cancel:not([style*="display: none"]))
    {
        grid-column: 1 / -1;
        grid-row: 3;
        align-self: end;
        width: 100%;
        margin: 0;
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .swal2-container > .swal2-popup.swal2-show:not(.swal2-toast):has(> .swal2-actions > .swal2-cancel:not([style*="display: none"]))
    {
        animation: nlSheetUp .28s cubic-bezier(.2, .8, .2, 1);
    }

    .swal2-popup:not(.swal2-toast):has(> .swal2-actions > .swal2-cancel:not([style*="display: none"])) > .swal2-actions
    {
        flex-direction: column;
        width: 100%;
        gap: 8px;
        padding: 0 4px;
    }

    .swal2-popup:not(.swal2-toast):has(> .swal2-actions > .swal2-cancel:not([style*="display: none"])) > .swal2-actions > .swal2-styled
    {
        width: 100%;
        min-height: 48px;
        margin: 0;
        font-size: 16px;
        border-radius: 12px;
    }

    /* Cancel is the quiet choice: outlined */
    .swal2-popup:not(.swal2-toast) > .swal2-actions > .swal2-cancel.swal2-styled
    {
        background-color: var(--nlSurface) !important;
        color: var(--primaryColor) !important;
        border: 1px solid var(--nlBorderStrong);
    }
}

/* ---------- 17. Dialogs as bottom sheets (phones and touch screens) ---------- */

/* Bootstrap dialogs (file upload, help, the alert.php messages) slide up from the bottom in place of dropping into the
   middle. main.css places .modal-dialog 50px from the top at full height; here it sits at the bottom at its own height */
@media (max-width: 767px), (pointer: coarse)
{
    .modal-dialog
    {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        max-height: 90vh;
        margin: 0;
    }

    .modal-content
    {
        width: 100%;
        margin: 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }

    .modal.fade .modal-dialog
    {
        opacity: 1;
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    }

    .modal.in .modal-dialog
    {
        transform: none;
    }

    /* grab handle, as on the menu and pop-over sheets: the dialog can be dragged down to close it (common.js) */
    .modal-content::before
    {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        margin: 8px auto 0;
        border-radius: 3px;
        background-color: var(--nlBorderStrong);
    }
}

/* ---------- 18. Info pop-overs as bottom sheets (phones and touch screens) ---------- */

/* the info and help bubbles (getInfoPopover, "View boathouse hours", boat information on the reservation page) open as a
   sheet at the bottom of the screen in readable sizes, with the page dimmed behind; a tap outside closes it (common.js).
   Bootstrap places a pop-over with inline top and left, hence !important */
@media (max-width: 767px), (pointer: coarse)
{
    .popover
    {
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0;
        bottom: 0;
        z-index: 1060;
        width: 100%;
        max-width: none;
        margin: 0 !important;
        padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
        border: none;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, .25), 0 0 0 100vmax rgba(0, 0, 0, .35);
        animation: nlSheetUp .28s cubic-bezier(.2, .8, .2, 1);
    }

    .popover > .arrow
    {
        display: none;
    }

    /* a bigger tap area round each info icon, without moving anything */
    [data-toggle="popover"]
    {
        display: inline-block;
        padding: 6px;
        margin: -6px;
    }

    /* grab handle */
    .popover::before
    {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        margin: 2px auto 8px;
        border-radius: 3px;
        background-color: var(--nlBorderStrong);
    }

    .popover-title
    {
        padding: 6px 12px 8px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        background: none;
        border-bottom: 1px solid var(--nlBorder);
    }

    .popover-content
    {
        max-height: 60vh;
        overflow-y: auto;
        padding: 10px 12px;
        font-size: 15px;
        line-height: 1.5;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .swal2-container > .swal2-popup.swal2-show,
    .popover
    {
        animation: none;
    }

    .modal.fade .modal-dialog
    {
        transition: none;
    }
}

/* ---------- 19. Drop-down lists ---------- */

/* plain drop-downs and SlimSelect pickers share one look, matching the text fields in section 4: same height, border,
   corners, arrow and focus ring. lists that show several rows (multiple, or size above 1) keep the browser look.
   SlimSelect reads its colours from these --ss- values (its stylesheet loads before this one) */
:root
{
    --ss-primary-color: var(--primaryColor);
    --ss-focus-color: var(--primaryColor);
    --ss-bg-color: var(--nlSurface);
    --ss-font-color: var(--bodyTextColor);
    --ss-font-placeholder-color: var(--nlMuted);
    --ss-border-color: var(--nlBorderStrong);
    --ss-border-radius: var(--nlRadius);
    --ss-main-height: 38px;
}

select:not([multiple]):not([size]:not([size="1"]))
{
    -webkit-appearance: none;
    appearance: none;
    min-height: 38px;
    padding: 6px 30px 6px 10px;
    font-size: inherit;
    color: var(--bodyTextColor);
    background-color: var(--nlSurface);
    /* the arrow is a thin chevron like SlimSelect's, drawn with two gradients so it takes the club's text colour */
    background-image: linear-gradient(45deg, transparent calc(50% - .75px), var(--nlMuted) calc(50% - .75px), var(--nlMuted) calc(50% + .75px), transparent calc(50% + .75px)),
                      linear-gradient(135deg, transparent calc(50% - .75px), var(--nlMuted) calc(50% - .75px), var(--nlMuted) calc(50% + .75px), transparent calc(50% + .75px));
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    border: 1px solid var(--nlBorderStrong);
    border-radius: var(--nlRadius);
}

.ss-main
{
    min-height: 38px;
    padding: 3px 6px;
}

.ss-main .ss-arrow path
{
    stroke: var(--nlMuted);
}

select:not([multiple]):not([size]:not([size="1"])):hover,
.ss-main:hover
{
    border-color: color-mix(in srgb, var(--bodyTextColor) 40%, transparent);
}

select:not([multiple]):not([size]:not([size="1"])):focus,
.ss-main:focus,
.ss-main.ss-open-above,
.ss-main.ss-open-below
{
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaryColor) 20%, transparent);
    outline: none;
}

select:not([multiple]):not([size]:not([size="1"])):disabled,
.ss-main.ss-disabled
{
    background-color: var(--nlPage);
    color: var(--nlMuted);
    cursor: not-allowed;
}

/* main.css sets SlimSelect to 16px everywhere so iPhones don't zoom in; on PCs both kinds of list use the page text
   size, and on phones and touch screens both use 16px */
@media (min-width: 768px) and (pointer: fine)
{
    .ss-main,
    .ss-content,
    .ss-search input
    {
        font-size: inherit !important;
    }
}

@media (max-width: 767px), (pointer: coarse)
{
    select:not([multiple]):not([size]:not([size="1"]))
    {
        font-size: 16px;
    }
}

/* ---------- 20. Date and time boxes ---------- */

/* date and time boxes without the form-control class (most report and filter pages) get the text-field look of
   section 4; the page's own width stays */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):not(.form-control)
{
    min-height: 38px;
    padding: 6px 8px;
    line-height: 1.5;
    vertical-align: middle;
    color: var(--bodyTextColor);
    background-color: var(--nlSurface);
    border: 1px solid var(--nlBorderStrong);
    border-radius: var(--nlRadius);
    transition: border-color .2s ease, box-shadow .2s ease;
}

input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):not(.form-control):hover
{
    border-color: color-mix(in srgb, var(--bodyTextColor) 40%, transparent);
}

input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):not(.form-control):focus
{
    border-color: var(--primaryColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primaryColor) 20%, transparent);
    outline: none;
}

input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):not(.form-control):disabled
{
    background-color: var(--nlPage);
    color: var(--nlMuted);
    cursor: not-allowed;
}

/* the calendar and clock icons: quieter until pointed at, and show they can be clicked */
input::-webkit-calendar-picker-indicator
{
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s ease;
}

input::-webkit-calendar-picker-indicator:hover
{
    opacity: 1;
}

/* 16px on phones and touch screens, as for the drop-downs in section 19, so iPhones don't zoom in */
@media (max-width: 767px), (pointer: coarse)
{
    input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):not(.form-control)
    {
        font-size: 16px;
    }
}

/* ---------- 21. Keyboard focus ---------- */

/* one ring, in the club colour, on whatever has keyboard focus: links, buttons, tabs, checkboxes. it shows for keyboard
   users only; a mouse click or tap shows nothing (Bootstrap's ring on click is turned off). text boxes and drop-downs
   keep their own glow (sections 4, 19 and 20) */
:is(a, button, [role="button"], [tabindex]:not([tabindex="-1"]):not(.ss-main), input[type="checkbox"], input[type="radio"], summary):focus-visible
{
    outline: 3px solid color-mix(in srgb, var(--primaryColor) 45%, transparent);
    outline-offset: 2px;
}

:is(a, button, .btn, [role="button"], input[type="checkbox"], input[type="radio"]):focus:not(:focus-visible)
{
    outline: none;
}

/* ---------- 22. Checkboxes and their labels ---------- */

/* the words beside a checkbox tick it too. pages that write a checkbox followed by plain text ("Sunday") with no label
   get one from common.js (linkCheckboxText, class nlCbxText); it keeps the text's own weight and place */
input[type="checkbox"],
input[type="radio"],
label:has(> input:is([type="checkbox"], [type="radio"])),
input:is([type="checkbox"], [type="radio"]) + label,
input[type="checkbox"] + span > label,
.nlCbxText
{
    cursor: pointer;
}

.nlCbxText
{
    display: inline;
    max-width: none;
    margin: 0;
    font-weight: inherit;
}

input:is([type="checkbox"], [type="radio"]):disabled,
label:has(> input:is([type="checkbox"], [type="radio"]):disabled)
{
    cursor: not-allowed;
}

/* phones and touch screens: bigger boxes, and the words take a taller tap area (drawn around them, so nothing moves) */
@media (max-width: 767px), (pointer: coarse)
{
    input[type="checkbox"]:is(.medCheckbox, .bigCheckbox)
    {
        width: 22px;
        height: 22px;
        vertical-align: middle;
    }

    :is(label:has(> input[type="checkbox"].medCheckbox), input[type="checkbox"].medCheckbox + label, input[type="checkbox"].medCheckbox + span > label, .nlCbxText)
    {
        position: relative;
    }

    :is(label:has(> input[type="checkbox"].medCheckbox), input[type="checkbox"].medCheckbox + label, input[type="checkbox"].medCheckbox + span > label, .nlCbxText)::after
    {
        content: "";
        position: absolute;
        inset: -8px -4px;
    }
}

/* ---------- 23. Empty lists ---------- */

/* "No documents found" and the like, in the Portal lists (class nlEmptyList) and empty DataTables: a quiet box with an
   icon, so an empty list reads as empty rather than as a page that didn't load */
.nlEmptyList,
table.dataTable td.dataTables_empty
{
    color: var(--nlMuted);
    text-align: center;
    font-style: normal;
}

.nlEmptyList
{
    margin: 8px 0;
    padding: 28px 16px;
    background-color: var(--nlSurface);
    border: 1px dashed var(--nlBorderStrong);
    border-radius: var(--nlRadiusCard);
}

table.dataTable td.dataTables_empty
{
    padding: 28px 16px;
}

.nlEmptyList::before,
table.dataTable td.dataTables_empty::before
{
    content: "\f01c";
    display: block;
    margin-bottom: 6px;
    font-family: FontAwesome;
    font-size: 28px;
    line-height: 1;
    opacity: .55;
}

/* ---------- 24. Printing ---------- */

/* printed pages drop the screen-only parts of the new look: no motion, shadows, tinted page, loading bar or toasts,
   and table headers print in place */
@media print
{
    *,
    *::before,
    *::after
    {
        animation: none !important;
        transition: none !important;
    }

    body
    {
        background-color: #ffffff !important;
    }

    .dataTables_wrapper
    {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    :is(.rosterCard, .portalTypeRow, .portalTypeRowStatic, .portalTypeRowClickable, .portalTypeRowClickableSelected, .portalTypeRowModified, .functionbtn, .menubtn)
    {
        box-shadow: none !important;
    }

    :where(table.dataTable) thead th
    {
        position: static;
    }

    #sleekLoadBar,
    .swal2-container:has(.swal2-toast)
    {
        display: none !important;
    }

    *:focus-visible
    {
        outline: none !important;
    }
}

/* ---------- 25. On/off switches ---------- */

/* the switches drawn by getTitaToggle and stackedLabelToggle (util2.php; titatoggle.css, slider b). same size and place,
   so nothing moves: a soft grey track with no inner shadow, a round knob with a light shadow that slides rather than
   squishes, the club colour when on, and the keyboard ring of section 21 (the real checkbox is invisible, so the ring
   goes on the track). track and knob are both centred on the label's height: with larger text the line is taller than
   the track, and titatoggle.css puts the knob at the top but the track on the text line, so they parted */
.checkbox-slider--b input + span:before
{
    top: 50%;
    margin-top: -10px;
    background: color-mix(in srgb, var(--bodyTextColor) 22%, var(--nlSurface));
    border: 1px solid transparent;
    box-shadow: none;
    transition: background-color .2s ease;
}

.checkbox-slider--b input + span:hover:before
{
    background: color-mix(in srgb, var(--bodyTextColor) 32%, var(--nlSurface));
}

.checkbox-slider--b input:checked + span:before
{
    background: var(--primaryColor);
    border-color: transparent;
}

.checkbox-slider--b input:checked + span:hover:before
{
    background: var(--nlAccentHover);
}

.checkbox-slider--b input + span:after,
.checkbox-slider--b input:checked + span:after,
.checkbox-slider--b input:disabled + span:after
{
    top: 50%;
    margin-top: -8px;
    left: 2px;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    animation: none;
    transition: margin-left .18s cubic-bezier(.2, .8, .2, 1);
}

.checkbox-slider--b input:checked + span:after
{
    margin-left: 20px;
}

/* the other sizes (the attendance switches use md): the knob is the track height less 4px */
.checkbox-slider--b.checkbox-slider-sm input + span:before
{
    margin-top: -5px;
}

.checkbox-slider--b.checkbox-slider-md input + span:before
{
    margin-top: -15px;
}

.checkbox-slider--b.checkbox-slider-lg input + span:before
{
    margin-top: -20px;
}

.checkbox-slider--b.checkbox-slider-sm input + span:after
{
    margin-top: -4px;
    left: 1px;
    width: 8px;
    height: 8px;
}

.checkbox-slider--b.checkbox-slider-sm input:checked + span:after
{
    margin-left: 10px;
}

.checkbox-slider--b.checkbox-slider-md input + span:after
{
    margin-top: -13px;
    width: 26px;
    height: 26px;
}

.checkbox-slider--b.checkbox-slider-md input:checked + span:after
{
    margin-left: 30px;
}

.checkbox-slider--b.checkbox-slider-lg input + span:after
{
    margin-top: -18px;
    width: 36px;
    height: 36px;
}

.checkbox-slider--b.checkbox-slider-lg input:checked + span:after
{
    margin-left: 40px;
}

.checkbox-slider--b input:focus-visible + span:before
{
    outline: 3px solid color-mix(in srgb, var(--primaryColor) 45%, transparent);
    outline-offset: 2px;
}

.checkbox-slider--b input:disabled + span
{
    color: var(--nlMuted);
    cursor: not-allowed;
}

.checkbox-slider--b input:disabled + span:before,
.checkbox-slider--b input:disabled + span:after
{
    opacity: .5;
}

@media (prefers-reduced-motion: reduce)
{
    .checkbox-slider--b input + span:before,
    .checkbox-slider--b input + span:after
    {
        transition: none;
    }
}

/* ---------- 26. Tables as cards on phones ---------- */

/* below 768px wide, once the member taps "Show as cards" (tables are the default), a DataTables table shows each
   row as a card of "Heading: value" lines, the first labelled cell as the card's title; no sideways scrolling and no small scroll box. common.js labels the cells (data-label) and adds
   the "Sort by" list (nlCardSort) that stands in for the hidden headings. rows stay table rows, so a tap still opens
   them. a table with the class nlNoCards keeps the table look */
.nlCardSort,
.nlCardToggle
{
    display: none;
}

@media (max-width: 767px)
{
    /* "Show as table" / "Show as cards" above each list on phones (the choice is kept on the device) */
    .dataTables_wrapper .nlCardToggle
    {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 8px;
        padding: 6px 14px;
        color: var(--buttonTextColor);
        background-color: var(--primaryColor);
        border: 1px solid transparent;
        border-radius: var(--nlRadius);
        font-size: .9em;
        font-weight: 600;
    }

    /* the same hover as the main buttons (section 3) */
    .dataTables_wrapper .nlCardToggle:hover
    {
        color: var(--primaryColor);
        background-color: var(--buttonTextColor);
        border-color: var(--primaryColor);
    }

    .dataTables_wrapper.nlCardsOk
    {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    /* its own line under Search (pages float the Search box left) */
    .nlCardsOk .nlCardSort
    {
        clear: both;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0;
    }

    .nlCardSort label
    {
        margin: 0;
        white-space: nowrap;
    }

    .nlCardSort select
    {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* the heading row goes (the cards label each value); a footer row (the grand total on Distance Reports) stays,
       as a card of its own under the list. with scrollX the footer shown is in its own table (scrollFoot), and the
       one inside the body table is only a sizing copy */
    .nlCardsOk .dataTables_scrollHead,
    .nlCardsOk table.dataTable > thead,
    .nlCardsOk .dataTables_scrollBody table.dataTable > tfoot
    {
        display: none !important;
    }

    .nlCardsOk .dataTables_scrollFoot,
    .nlCardsOk .dataTables_scrollFootInner
    {
        width: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .nlCardsOk table.dataTable > tfoot
    {
        display: block;
    }

    .nlCardsOk .dataTables_scrollFoot table.dataTable
    {
        width: 100% !important;
    }

    .nlCardsOk table.dataTable > tfoot > tr
    {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 12px;
        margin: 0 0 10px;
        padding: 10px 12px;
        background-color: var(--nlSurface);
        border: 1px solid var(--nlBorderStrong);
        border-radius: var(--nlRadius);
        font-weight: 600;
    }

    .nlCardsOk table.dataTable > tfoot > tr > :is(th, td)
    {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .nlCardsOk table.dataTable > tfoot > tr > :is(th, td):empty
    {
        display: none;
    }

    .nlCardsOk .dataTables_scroll,
    .nlCardsOk .dataTables_scrollBody
    {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
    }

    .nlCardsOk table.dataTable,
    .nlCardsOk table.dataTable > tbody,
    .nlCardsOk table.dataTable > tbody > tr,
    .nlCardsOk table.dataTable > tbody > tr > td
    {
        display: block;
        width: auto !important;
        min-width: 0 !important;
    }

    .nlCardsOk table.dataTable
    {
        border: 0;
        margin: 0 !important;
    }

    /* height: main.css gives every table row 35px */
    .nlCardsOk table.dataTable > tbody > tr
    {
        height: auto;
        margin: 0 0 10px;
        padding: 10px 12px;
        background-color: var(--nlSurface) !important;
        border: 1px solid var(--nlBorder);
        border-inline-start: 4px solid var(--primaryColor);
        border-radius: var(--nlRadius);
        box-shadow: var(--nlShadow);
    }

    /* one line per cell: the heading floats on the left and the value flows on the right as ordinary text, so a cell
       with several names, links and line breaks wraps normally (flex made each piece its own narrow column) */
    .nlCardsOk table.dataTable > tbody > tr > td
    {
        display: flow-root;
        padding: 3px 0 !important;
        text-align: end;
        white-space: normal !important;
        overflow-wrap: anywhere;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* the table's stripes and sort shading go; a colour the page set on a cell (a team's colour behind white text)
       stays, as a rounded band */
    .nlCardsOk table.dataTable > tbody > tr > td:not([style*="background"])
    {
        background: none !important;
    }

    .nlCardsOk table.dataTable > tbody > tr > td[style*="background"]
    {
        margin: 2px 0;
        padding: 3px 8px !important;
        border-radius: 6px;
    }

    .nlCardsOk table.dataTable > tbody > tr > td:not(.dataTables_empty)::before
    {
        content: attr(data-label);
        float: left;
        max-width: 55%;
        margin-right: 12px;
        color: var(--nlMuted);
        font-weight: 600;
        text-align: start;
        overflow-wrap: normal;
    }

    .nlCardsOk table.dataTable > tbody > tr > td[style*="background"]::before
    {
        color: inherit;
        opacity: .85;
    }

    /* beside a round button the heading sits level with the button's middle */
    .nlCardsOk table.dataTable > tbody > tr > td:has([class*="roundbtn"])::before
    {
        line-height: 38px;
    }

    /* a long value (more than about two lines, such as a list of coaches) starts under its heading and is cut to two
       lines with "Show all"; a tap on the cell (not on a link in it) opens or closes it. common.js adds nlCardLong
       and nlCardOpen */
    .nlCardsOk table.dataTable > tbody > tr > td.nlCardLong
    {
        position: relative;
        max-height: 4.5em;
        overflow: hidden;
        text-align: start;
        cursor: pointer;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardLong::before
    {
        float: none;
        display: block;
        max-width: none;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardLong::after
    {
        content: "Show all";
        position: absolute;
        right: 0;
        bottom: 3px;
        padding-left: 24px;
        background: linear-gradient(to right, transparent, var(--nlSurface) 20px);
        color: var(--primaryColor);
        font-weight: 600;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardLong.nlCardOpen
    {
        max-height: none;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardLong.nlCardOpen::after
    {
        content: "Show less";
        position: static;
        display: block;
        text-align: end;
        background: none;
    }

    /* text boxes and lists in a cell (Club List) fit the card; one wider than the space beside the heading moves to the
       next line */
    .nlCardsOk table.dataTable > tbody > tr > td :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea)
    {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* buttons keep their icon or label centred (the value side is right-aligned) */
    .nlCardsOk table.dataTable > tbody > tr > td :is(button, .btn, [class*="functionbtn"])
    {
        text-align: center;
    }

    /* round buttons (roundButton in util.php) place their icon with left and top padding made for a left-aligned
       cell; in a card the icon is centred in the circle instead, hover included */
    .nlCardsOk table.dataTable > tbody > tr > td [class*="roundbtn"],
    .nlCardsOk table.dataTable > tbody > tr > td [class*="roundbtn"]:hover
    {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin-top: 0;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    /* a round button with a count beside its icon (the roster, sessions, documents and fees buttons on Teams) does not
       fit a circle: it becomes a pill, icon then number */
    .nlCardsOk table.dataTable > tbody > tr > td [class*="roundbtn"]:has(b),
    .nlCardsOk table.dataTable > tbody > tr > td [class*="roundbtn"]:has(b):hover
    {
        width: auto;
        min-width: 38px;
        height: 38px;
        padding: 0 12px !important;
        gap: 2px;
        border-radius: 19px;
    }

    /* the first cell with a heading is the card's title (nlCardTitle); cells with no heading (checkboxes, icons) and
       the "no data" line (which keeps its section 23 icon) use the whole width; empty cells are left out */
    .nlCardsOk table.dataTable > tbody > tr > td.nlCardTitle,
    .nlCardsOk table.dataTable > tbody > tr > td[data-label=""],
    .nlCardsOk table.dataTable > tbody > tr > td.dataTables_empty
    {
        text-align: start;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardTitle:not(.dataTables_empty)::before,
    .nlCardsOk table.dataTable > tbody > tr > td[data-label=""]:not(.dataTables_empty)::before
    {
        display: none;
    }

    /* the title goes to the top of the card, above any icon-only cells that come before it */
    .nlCardsOk table.dataTable > tbody > tr
    {
        display: flex;
        flex-direction: column;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardTitle
    {
        order: -1;
        padding-bottom: 6px !important;
        font-weight: 600;
        font-size: 1.05em;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.nlCardBlank
    {
        display: none;
    }

    .nlCardsOk table.dataTable > tbody > tr > td.dataTables_empty
    {
        display: block;
    }

    .nlCardsOk table.dataTable > tbody > tr:has(> td.dataTables_empty)
    {
        border-inline-start-width: 1px;
        box-shadow: none;
    }
}
/* ---------- 27. Pull down to refresh (touch screens) ---------- */

/* pages that set $pullRefresh (footer.php writes it, common.js follows the pull): a round button with a refresh arrow
   comes down from the top as the page is pulled, turns the club colour once far enough, and spins while the page
   refreshes. the browser's own pull-to-reload is turned off on these pages so only one runs */
html.nlPullOn
{
    overscroll-behavior-y: contain;
}

.nlPull
{
    position: fixed;
    top: env(safe-area-inset-top);
    left: 50%;
    z-index: 20001;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--nlMuted);
    background-color: var(--nlSurface);
    border: 1px solid var(--nlBorder);
    border-radius: 50%;
    box-shadow: var(--nlShadowRaised);
    opacity: 0;
    transform: translate(-50%, -50px);
    transition: transform .25s ease, opacity .25s ease;
    pointer-events: none;
}

.nlPull.nlPullReady,
.nlPull.nlPullBusy
{
    color: var(--primaryColor);
}

.nlPull.nlPullBusy > span
{
    animation: sleekSpin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce)
{
    .nlPull
    {
        transition: none;
    }

    .nlPull.nlPullBusy > span
    {
        animation: none;
    }
}

/* ---------- 28. Club Home buttons ---------- */

/* Club store, Donate, WhatsApp and the other link buttons on Club Home (orghome.php, class ohBtn) were club-colour text on
   the page colour, which with a light club colour looked like a turned-off button. they become solid main buttons; the
   red emergency-contacts button (ohSOS) keeps its own look. orghome.php's styles load after this file, so the rules
   name the button group too */
.ohBtns .ohBtn:not(.ohSOS)
{
    color: var(--buttonTextColor);
    background-color: var(--primaryColor);
    border-color: var(--primaryColor);
    font-weight: 600;
}

.ohBtns .ohBtn:not(.ohSOS):is(:hover, :focus)
{
    color: var(--primaryColor);
    background-color: var(--buttonTextColor);
    border-color: var(--primaryColor);
}