/*! dds - danceit design system
 *  Built from css/parts/ by build.py. Do not edit this file; edit the part and rebuild.
 *  Pages that load this (api.php, …) add no CSS of their own: change dds, then reuse it
 *  (CONVENTIONS.md §12). A variation is a dds modifier class or option, not a page override.
 */


/* ===== 00-tokens.css ===================================================== */

/* ==========================================================================
   dds · 00-tokens — every value danceit uses, as custom properties
   --------------------------------------------------------------------------
   Owner: foundation. Every value is danceit's own: danceit.css line numbers
   are cited (`danceit.css:NNNN`), or `render` where the value was measured
   from a real snapshot in ref/snapshots/ (the render wins over the CSS).

   THE LIST (grouped; guess the name from the group + danceit's word)

   Blue (the only interface colour)
     --dds-primary                #007bff   buttons, links, active chips
     --dds-primary-rgb            0, 123, 255   for rgba(var(--dds-primary-rgb), .4)
     --dds-primary-hover          #006fe6   .btn-primary:hover/:focus, alert-primary fill
     --dds-primary-dark           #005abb   .btn-primary:active, gradient end
     --dds-primary-darker         #003773   .btn-primary:hover border
     --dds-primary-tint           #007bff66 the blue glow under chips / active links
     --dds-link                   #007bff   --dds-link-hover  #0056b3
     --dds-hero-gradient          linear-gradient(60deg, #007bff, #005abb)
     --dds-sidebar-bg             #005ec3   (+ -text, -icon, -hover-bg, -separator)
   Status (report status only, always next to a word)
     --dds-success  --dds-info  --dds-warning  --dds-danger  --dds-rose
     each with -rgb, -hover, -dark (hover border), -gradient, -alert (alert fill)
     --dds-secondary #f5f7fa (+ -text, -border, -hover, -hover-border)  a cool step under white
     --dds-alert-default-bg #fff  --dds-alert-default-text #555  --dds-alert-inverse #292929
   Text and greys
     --dds-text            #3c4858  body text          --dds-heading   #3c4858  card titles
     --dds-text-card       #333     text inside cards  --dds-text-dark #212529  Bootstrap reboot text
     --dds-muted           #999     .card-category     --dds-text-muted #6c757d .text-muted
     --dds-description     #ccc     .description       --dds-unimportant #bbb   .unimportant
     --dds-text-unimportant #aaa    .text-unimportant  --dds-navbar-text #555   navbar, dropdown
     --dds-label           #aaa     floating labels    --dds-input-text #495057 form values
     --dds-text-caption    #5a636d  small caps captions over a value (card pairs), one step past muted
     --dds-white #fff  --dds-black #000  --dds-text-on-primary #fff
   Surfaces and lines
     --dds-body-bg #eee  --dds-card-bg #fff  --dds-surface #fff
     --dds-card-shade-1 #f5f7fa  --dds-card-shade-2 #eff4fb  --dds-card-shade-3 #e8f0fb
         a surface on a white card: each step is a touch bluer, never greyer
     --dds-scrollbar-thumb / -hover / -active   the 6px thumb, translucent black on every surface
     --dds-border #ddd (table lines, MD borders)  --dds-table-line #ddd
     --dds-border-light #eee (BS .card border)    --dds-border-bs #dee2e6
     --dds-footer-border #e7e7e7  --dds-hr rgba(0,0,0,.1)
     --dds-input-line #d2d2d2  --dds-input-line-focus #007bff
     --dds-code #e91e63  --dds-kbd-bg #212529  --dds-mark-bg #fcf8e3
   Shadows
     --dds-shadow-card            0 1px 4px    the plain card
     --dds-shadow-card-inset      0 1px 2px    a shaded card on a card
     --dds-shadow-raised          MD z-depth-1 (.card-plain raised, .btn default, pills)
     --dds-shadow-primary / -primary-hover     the blue button at rest / on hover
     --dds-shadow-{success,info,warning,danger,rose,secondary}(-hover)
     --dds-shadow-chip            hero header, icon chip, active sidebar link, active pill
     --dds-shadow-chip-{success,info,warning,danger,rose}
     --dds-shadow-navbar          white navbar   --dds-shadow-navbar-primary  blue navbar
     --dds-shadow-dropdown        0 2px 5px .26
     --dds-shadow-tooltip         tooltip-inner / popover-ish lift
     --dds-shadow-popover / --dds-shadow-modal-card   the deep 16px/24px lift
     --dds-shadow-modal           .modal-dialog .modal-content
     --dds-shadow-big             the sidebar (16px 38px -12px)
     --dds-shadow-image           .img-raised    --dds-shadow-small  0 2px 4px
     --dds-shadow-inset-kbd       kbd
     --dds-shadow-focus           Bootstrap .btn:focus ring (danceit colour)
     --dds-focus-ring / --dds-focus-ring-offset   divergence 7, :focus-visible only
   Radii
     --dds-radius 6px (= --dds-radius-card)  --dds-radius-sm 3px (chips, alerts, navbar)
     --dds-radius-btn .2rem  --dds-radius-round 30px  --dds-radius-bs .25rem
     --dds-radius-dropdown .25rem  --dds-radius-item .125rem  --dds-radius-swal .3125em
     --dds-radius-circle 50%  --dds-radius-startnumber 7px
   Type
     --dds-font "dds Roboto", Helvetica, Arial, sans-serif
     --dds-font-icons "dds Material Icons"   --dds-font-mono  SFMono-Regular, …
     --dds-font-code "dds Roboto Mono" (self-hosted, 400-500 variable) then --dds-font-mono
     --dds-font-size-base 1rem   --dds-font-size-card .875rem  --dds-font-size-small 80%
     --dds-font-size-h1 … -h6    --dds-font-size-card-title    --dds-font-size-lead
     --dds-font-size-brand 1.125rem  --dds-font-size-btn .75rem (-btn-sm, -btn-lg)
     --dds-font-size-sidebar 14px    --dds-font-size-sidebar-link 13px
     --dds-font-size-dropdown .8125rem   --dds-font-size-th 1.063rem  --dds-font-size-label 11px
     --dds-font-size-xs .6875rem     --dds-font-size-pill 12px    --dds-font-size-alert-b 12px
     --dds-font-size-code 87.5%      --dds-icon-size 24px
     --dds-font-weight-light 300 (= -base)  -normal 400  -medium 500  -bold 700
     --dds-line-height-base 1.5em (24px, and it inherits as 24px — see 01-reset)
     --dds-line-height-h1 1.15em  -h2 1.5em  -h3/-h4/-h5 1.4em (= -heading)  -h6 1.5em
     --dds-line-height-btn 1.428571  -btn-sm 1.5  -btn-lg 1.333333  -brand 30px
     --dds-line-height-sidebar 30px  -alert 20px  -tight 1.2 (MD headings reset)
   Spacing
     --dds-space-0 … --dds-space-5   0 / .25rem / .5rem / 1rem / 1.5rem / 3rem
     --dds-gutter 15px (half gutter)  --dds-grid-gutter 30px
     --dds-navbar-height 70px  --dds-content-padding-y 30px  --dds-content-padding-x 15px
     --dds-sidebar-width 260px  --dds-sidebar-mini-width 80px
     --dds-card-margin 30px  --dds-card-padding-y .9375rem  --dds-card-padding-x 20px
     --dds-card-header-inset 15px  --dds-card-header-lift -20px  --dds-chip-padding 15px
   Z-index (lowest first)
     --dds-z-raised 2  --dds-z-sidebar 2  --dds-z-sidebar-inner 4
     --dds-z-dropdown 1000  --dds-z-sticky 1020  --dds-z-navbar 1029  --dds-z-fixed 1030
     --dds-z-fixed-plugin 1031  --dds-z-drawer 1032  --dds-z-modal-backdrop 1040
     --dds-z-modal 1050  --dds-z-popover 1060  --dds-z-swal 1060  --dds-z-select-menu 1060
     --dds-z-tooltip 1070  --dds-z-notify 1071  --dds-z-route-bar 1080
     --dds-z-datetimepicker 1111  --dds-z-display 10000  --dds-z-display-top 10001
   Motion (every transition ≤ 320ms; arriving decelerates, leaving accelerates/fades;
   under prefers-reduced-motion 05-motion sets the four durations to 1ms, and the
   --dds-transition-* shorthands follow because they are built from them)
     --dds-duration-fast 150ms  -base 200ms  -slow 300ms  -max 320ms
     --dds-ease-standard  cubic-bezier(.4,0,.2,1)   --dds-ease-accelerate cubic-bezier(.4,0,1,1)
     --dds-ease-decelerate cubic-bezier(0,0,.2,1)   --dds-ease-drawer cubic-bezier(.685,.0473,.346,1)
     --dds-ease-in ease-in  --dds-ease-out ease-out  --dds-ease-in-out ease-in-out
     --dds-transition-btn        the .btn box-shadow + background-color pair
     --dds-transition-fade       opacity 150ms linear (.fade)
     --dds-transition-form       .15s ease-in-out colour/border/shadow (form-control)
     --dds-sweep-height 2px  --dds-sweep-width 40%  --dds-sweep-color  --dds-sweep-duration 1.1s
     --dds-sweep-ease  --dds-sweep-travel 250% (= 100% / --dds-sweep-width; change both together)
   Loader lines (05-motion: .dds-route-bar, .dds-loader-line; one keyframe, three heights)
     --dds-loader-xs 2px   busy buttons, inline in small boxes (= --dds-sweep-height)
     --dds-loader-sm 3px   the page-top route bar; the top edge of a card, console, list
     --dds-loader-lg 4px   big surfaces: display screens, a first full-page load
     --dds-loader-track    the faint blue lane under a container line (the route bar has none)
     --dds-loader-on-dark / --dds-loader-track-on-dark   the same line over a dark surface
   On now (13-feedback .dds-ongoing: a step bolder text a band of the primary sweeps through)
     --dds-ongoing-weight 500  300/400 text   --dds-ongoing-weight-strong 700  text at 500 or more
     --dds-ongoing-color #007bff  the band   --dds-ongoing-band 66px  half the band's width
     --dds-ongoing-color-on-primary #8cc4ff  the band on text already in the primary (set by the part)
     --dds-ongoing-duration 3.4s   one way: a 3.2s pass left to right, then a 0.2s rest
     --dds-ongoing-ease cubic-bezier(.4,.25,.6,.75)  the pass: a soft start and stop, never a long crawl off the text
     --dds-ongoing  the whole animation, on the box; none under reduced motion (05)
   Breakpoints (documentation only — custom properties do not work in @media)
     --dds-bp-sm 576px  --dds-bp-table-stack 640px  --dds-bp-md 768px
     --dds-bp-lg 992px  --dds-bp-xl 1200px
     NB: danceit's compiled Bootstrap has no 992 tier. Every "lg" class
     (.col-lg-*, .d-lg-*, .float-lg-*, .text-lg-*) switches at 768px, like md
     (danceit.css:1169, 6004, 6653, 8154), and dds copies that (03-grid,
     06-utilities). 992 is the layout shell's switch (drawer / rail), and
     danceit's own .container-fluid { padding: 0 30px } (danceit.css:26521).
     Below 768 (max-width: 767px) html and body are overflow-x: hidden (26039).
   ========================================================================== */

:root {
  /* ---- Blue ------------------------------------------------------------ */
  --dds-primary: #007bff;                    /* danceit.css:8315 .btn.btn-primary */
  --dds-primary-rgb: 0, 123, 255;
  --dds-primary-hover: #006fe6;              /* danceit.css:8323 .btn-primary:hover/:focus; 13601 .alert-primary */
  --dds-primary-dark: #005abb;               /* danceit.css:8331 .btn-primary:active; 14653 gradient end */
  --dds-primary-darker: #003773;             /* danceit.css:8323 .btn-primary:hover border-color */
  --dds-primary-tint: #007bff66;             /* danceit.css:14701 chip glow */
  --dds-link: #007bff;                       /* danceit.css:15823 a */
  --dds-link-hover: #0056b3;                 /* danceit.css:15826 a:hover */
  --dds-hero-gradient: linear-gradient(60deg, #007bff, #005abb); /* danceit.css:14653 .card-header-primary */
  --dds-sidebar-bg: #005ec3;                 /* danceit.css:16953 .sidebar[data-background-color=primary]; render rgb(0,94,195) */
  --dds-sidebar-text: #fff;                  /* danceit.css:16957 .sidebar[data-background-color=primary] .nav-link */
  --dds-sidebar-icon: hsla(0, 0%, 100%, .8); /* danceit.css:16961 */
  --dds-sidebar-hover-bg: hsla(0, 0%, 100%, .1);  /* danceit.css:16991 li:hover:not(.active)>a */
  --dds-sidebar-separator: hsla(0, 0%, 100%, .3); /* danceit.css:16985 .logo:after / .user:after */

  /* ---- Status ---------------------------------------------------------- */
  --dds-success: #4caf50;                    /* danceit.css:8552 .btn.btn-success */
  --dds-success-rgb: 76, 175, 80;
  --dds-success-hover: #47a44b;              /* danceit.css:8560 */
  --dds-success-dark: #39843c;               /* danceit.css:8560 hover border */
  --dds-success-gradient: linear-gradient(60deg, #66bb6a, #43a047); /* danceit.css:14671 */
  --dds-success-alert: #55b559;              /* danceit.css:13611 .alert.alert-success */

  --dds-info: #00bcd4;                       /* danceit.css:8473 .btn.btn-info */
  --dds-info-rgb: 0, 188, 212;
  --dds-info-hover: #00aec5;                 /* danceit.css:8481 */
  --dds-info-dark: #008697;                  /* danceit.css:8481 hover border */
  --dds-info-gradient: linear-gradient(60deg, #26c6da, #00acc1);    /* danceit.css:14662 */
  --dds-info-alert: #00cae3;                 /* danceit.css:13621 .alert.alert-info */

  --dds-warning: #ff9800;                    /* danceit.css:8631 .btn.btn-warning */
  --dds-warning-rgb: 255, 152, 0;
  --dds-warning-hover: #f08f00;              /* danceit.css:8639 */
  --dds-warning-dark: #c27400;               /* danceit.css:8639 hover border */
  --dds-warning-gradient: linear-gradient(60deg, #ffa726, #fb8c00); /* danceit.css:14680 */
  --dds-warning-alert: #ff9e0f;              /* danceit.css:13631 .alert.alert-warning */

  --dds-danger: #f44336;                     /* danceit.css:8710 .btn.btn-danger */
  --dds-danger-rgb: 244, 67, 54;
  --dds-danger-hover: #f33527;               /* danceit.css:8718 */
  --dds-danger-dark: #e11b0c;                /* danceit.css:8718 hover border */
  --dds-danger-gradient: linear-gradient(60deg, #ef5350, #e53935);  /* danceit.css:14689 */
  --dds-danger-alert: #f55145;               /* danceit.css:13641 .alert.alert-danger */

  --dds-rose: #e91e63;                       /* danceit.css:8789 .btn.btn-rose */
  --dds-rose-rgb: 233, 30, 99;
  --dds-rose-hover: #ea2c6d;                 /* danceit.css:8797 */
  --dds-rose-dark: #b8124a;                  /* danceit.css:8797 hover border */
  --dds-rose-gradient: linear-gradient(60deg, #ec407a, #d81b60);    /* danceit.css:14698 */
  --dds-rose-alert: #ea2c6d;                 /* danceit.css:13651 .alert.alert-rose */

  --dds-secondary: #f5f7fa;                  /* design §5: danceit.css:8394 #fafafa, a step darker and cool */
  --dds-secondary-rgb: 245, 247, 250;
  --dds-secondary-text: #333;                /* danceit.css:8394 */
  --dds-secondary-border: #ccc;              /* danceit.css:8394 */
  --dds-secondary-hover: #edf1f6;            /* design §5: danceit.css:8402 #f2f2f2, the same cool step */
  --dds-secondary-hover-border: #adadad;     /* danceit.css:8402 */

  --dds-alert-default-bg: #fff;              /* danceit.css:13580 .alert (default) */
  --dds-alert-default-text: #555;            /* danceit.css:13581 */
  --dds-alert-inverse: #292929;              /* danceit.css:13591 .alert.alert-inverse */

  /* ---- Text and greys -------------------------------------------------- */
  --dds-text: #3c4858;                       /* danceit.css:13284 body; render rgb(60,72,88) */
  --dds-heading: #3c4858;                    /* danceit.css:12852 .card-title */
  --dds-text-card: #333;                     /* danceit.css:14501 .card; render rgb(51,51,51) */
  --dds-text-dark: #212529;                  /* danceit.css:56 Bootstrap body; pre */
  --dds-muted: #999;                         /* danceit.css:14507 .card .card-category:not([class*=text-]) */
  --dds-text-muted: #6c757d;                 /* danceit.css:8267 .text-muted, .bmd-help */
  --dds-text-caption: #5a636d;               /* dds: a 10px caps caption over a value; #6c757d reads too faint at that size */
  --dds-description: #ccc;                   /* danceit.css:12879 .description, .card-description */
  --dds-unimportant: #bbb;                   /* danceit.css:26868 .unimportant; render rgb(187,187,187) */
  --dds-text-unimportant: #aaa;              /* danceit.css:26599 .text-unimportant */
  --dds-gray: #ccc;                          /* danceit.css:26844 .gray */
  --dds-gray-dark: #999;                     /* danceit.css:28066 span.gray */
  --dds-navbar-text: #555;                   /* danceit.css:12258 .navbar; render */
  --dds-label: #aaa;                         /* render: .bmd-label-floating rgb(170,170,170) */
  --dds-input-text: #495057;                 /* render: .form-control rgb(73,80,87) */
  --dds-white: #fff;
  --dds-black: #000;
  --dds-text-on-primary: #fff;               /* danceit.css:8315 */

  /* ---- Surfaces and lines ---------------------------------------------- */
  --dds-body-bg: #eee;                       /* danceit.css:13284 body; render rgb(238,238,238) */
  --dds-card-bg: #fff;                       /* danceit.css:14502 .card */
  --dds-surface: #fff;
  /* design §5: a surface that sits on a white card. Each step adds blue, not grey, so a
     nested card reads as a different layer and the page never goes dull. */
  --dds-card-shade-1: var(--dds-secondary);  /* #f5f7fa */
  --dds-card-shade-2: #eff4fb;
  --dds-card-shade-3: #e8f0fb;
  --dds-card-shade-line: rgba(0, 94, 195, .08);   /* a hairline that belongs to the shades */
  /* design §5: the quiet scrollbar, everywhere. Translucent black, so it takes the colour
     of what it sits on: a light grey on white, a deeper blue on the blue rail and sidebar. */
  --dds-scrollbar-thumb: rgba(0, 0, 0, .16);
  --dds-scrollbar-thumb-hover: rgba(0, 0, 0, .28);
  --dds-scrollbar-thumb-active: rgba(0, 0, 0, .4);
  --dds-border: #ddd;                        /* render: .table thead th border-bottom rgb(221,221,221) */
  --dds-table-line: #ddd;                    /* render (same) */
  --dds-border-light: #eee;                  /* danceit.css:4113 Bootstrap .card border colour */
  --dds-border-bs: #dee2e6;                  /* danceit.css:505 Bootstrap $border-color (.img-thumbnail, tables) */
  --dds-footer-border: #e7e7e7;              /* render: .footer border-top */
  --dds-hr: rgba(0, 0, 0, .1);               /* danceit.css:443 hr */
  --dds-input-line: #d2d2d2;                 /* render: .form-control underline rgb(210,210,210) */
  --dds-input-line-focus: #007bff;           /* render: .form-control focus underline */
  --dds-code: #e91e63;                       /* danceit.css:533 code */
  --dds-kbd-bg: #212529;                     /* danceit.css:545 kbd */
  --dds-mark-bg: #fcf8e3;                    /* danceit.css:457 mark */

  /* ---- Shadows --------------------------------------------------------- */
  --dds-shadow-card: 0 1px 4px 0 rgba(0, 0, 0, .14);                          /* danceit.css:14828 .card */
  --dds-shadow-card-inset: 0 1px 2px rgba(0, 40, 100, .08);   /* design §5: a shaded card on a card */
  --dds-shadow-raised: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); /* danceit.css:10064, 14504 */
  --dds-shadow-primary: 0 2px 2px 0 rgba(0, 123, 255, .14), 0 3px 1px -2px rgba(0, 123, 255, .2), 0 1px 5px 0 rgba(0, 123, 255, .12);        /* danceit.css:8319 */
  --dds-shadow-primary-hover: 0 14px 26px -12px rgba(0, 123, 255, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 123, 255, .2); /* danceit.css:8379 */
  --dds-shadow-secondary: 0 2px 2px 0 rgba(250, 250, 250, .14), 0 3px 1px -2px rgba(250, 250, 250, .2), 0 1px 5px 0 rgba(250, 250, 250, .12);  /* danceit.css:8398 */
  --dds-shadow-secondary-hover: 0 14px 26px -12px rgba(250, 250, 250, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(250, 250, 250, .2); /* danceit.css:8458 */
  --dds-shadow-success: 0 2px 2px 0 rgba(76, 175, 80, .14), 0 3px 1px -2px rgba(76, 175, 80, .2), 0 1px 5px 0 rgba(76, 175, 80, .12);        /* danceit.css:8556 */
  --dds-shadow-success-hover: 0 14px 26px -12px rgba(76, 175, 80, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(76, 175, 80, .2);
  --dds-shadow-info: 0 2px 2px 0 rgba(0, 188, 212, .14), 0 3px 1px -2px rgba(0, 188, 212, .2), 0 1px 5px 0 rgba(0, 188, 212, .12);           /* danceit.css:8477 */
  --dds-shadow-info-hover: 0 14px 26px -12px rgba(0, 188, 212, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 188, 212, .2);
  --dds-shadow-warning: 0 2px 2px 0 rgba(255, 152, 0, .14), 0 3px 1px -2px rgba(255, 152, 0, .2), 0 1px 5px 0 rgba(255, 152, 0, .12);        /* danceit.css:8635 */
  --dds-shadow-warning-hover: 0 14px 26px -12px rgba(255, 152, 0, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(255, 152, 0, .2);
  --dds-shadow-danger: 0 2px 2px 0 rgba(244, 67, 54, .14), 0 3px 1px -2px rgba(244, 67, 54, .2), 0 1px 5px 0 rgba(244, 67, 54, .12);         /* danceit.css:8714 */
  --dds-shadow-danger-hover: 0 14px 26px -12px rgba(244, 67, 54, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(244, 67, 54, .2);
  --dds-shadow-rose: 0 2px 2px 0 rgba(233, 30, 99, .14), 0 3px 1px -2px rgba(233, 30, 99, .2), 0 1px 5px 0 rgba(233, 30, 99, .12);           /* danceit.css:8793 */
  --dds-shadow-rose-hover: 0 14px 26px -12px rgba(233, 30, 99, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(233, 30, 99, .2);
  --dds-shadow-chip: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px #007bff66;          /* danceit.css:14701 hero/icon chip; 16996 sidebar active; 12725 pill active */
  --dds-shadow-chip-success: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(76, 175, 80, .4);  /* danceit.css:14734 */
  --dds-shadow-chip-info: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(0, 188, 212, .4);     /* danceit.css:14728 */
  --dds-shadow-chip-warning: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(255, 152, 0, .4);  /* danceit.css:14722 */
  --dds-shadow-chip-danger: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(244, 67, 54, .4);   /* danceit.css:14710 */
  --dds-shadow-chip-rose: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px rgba(233, 30, 99, .4);     /* danceit.css:14716 */
  --dds-shadow-navbar: 0 4px 18px 0 rgba(0, 0, 0, .12), 0 7px 10px -5px rgba(0, 0, 0, .15); /* danceit.css:12258 .navbar (panels use .navbar-transparent: none, 12515) */
  --dds-shadow-navbar-primary: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 12px -5px rgba(0, 123, 255, .46); /* danceit.css:12399 .navbar.bg-primary */
  --dds-shadow-dropdown: 0 2px 5px 0 rgba(0, 0, 0, .26); /* danceit.css:13875 .dropdown-menu */
  --dds-shadow-tooltip: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2); /* danceit.css:13078 .tooltip-inner, .popover (base) */
  --dds-shadow-popover: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2); /* danceit.css:13087 .popover; 18392 */
  --dds-shadow-modal-card: var(--dds-shadow-popover);
  --dds-shadow-modal: 0 27px 24px 0 rgba(0, 0, 0, .2), 0 40px 77px 0 rgba(0, 0, 0, .22); /* danceit.css:13125 .modal-dialog .modal-content */
  --dds-shadow-big: 0 16px 38px -12px rgba(0, 0, 0, .56), 0 4px 25px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2); /* danceit.css:16599 .sidebar; 13468 */
  --dds-shadow-image: 0 5px 15px -8px rgba(0, 0, 0, .24), 0 8px 10px -5px rgba(0, 0, 0, .2);      /* danceit.css:12251 .img-raised */
  --dds-shadow-small: 0 2px 4px 0 rgba(0, 0, 0, .14);                                               /* danceit.css:28237 .podium .place */
  --dds-shadow-inset-kbd: inset 0 -.1rem 0 rgba(0, 0, 0, .25);                                      /* danceit.css:547 kbd */
  --dds-shadow-focus: 0 0 0 .2rem rgba(33, 150, 243, .25);                                         /* danceit.css:2207 .btn:focus */
  --dds-focus-ring: 2px solid #007bff;       /* divergence 7: :focus-visible only */
  --dds-focus-ring-offset: 2px;

  /* ---- Radii ----------------------------------------------------------- */
  --dds-radius: 6px;                         /* danceit.css:14500 .card */
  --dds-radius-card: 6px;                    /* danceit.css:14500 .card; 13125 modal content */
  --dds-radius-sm: 3px;                      /* danceit.css:14990 card-header chip; 13566 .alert; 12260 .navbar */
  --dds-radius-btn: 3px;                     /* dds: one radius for every button with words (a .btn, a quiet
                                                one, a set, a nav pill, a page link, a back link); danceit.css
                                                8300 .btn rendered 3.2px, its .btn-round and pills 30px.
                                                Only an icon alone is a circle (--dds-radius-circle) */
  --dds-radius-round: 30px;                  /* danceit.css:9912 .btn-round; no button uses it (--dds-radius-btn) but every page number (15 §6) */
  --dds-radius-bs: .25rem;                   /* danceit.css:506 Bootstrap $border-radius */
  --dds-radius-dropdown: .25rem;             /* danceit.css:2982 .dropdown-menu; render 4px */
  --dds-radius-item: .125rem;                /* danceit.css:13950 .dropdown-item (2px) */
  --dds-radius-swal: .3125em;                /* danceit.css:20702 .swal2-popup */
  --dds-radius-circle: 50%;
  --dds-radius-startnumber: 7px;             /* danceit.css startnumber badge */

  /* ---- Type ------------------------------------------------------------ */
  --dds-font: "dds Roboto", Helvetica, Arial, sans-serif;  /* danceit.css:12795 Roboto, Helvetica, Arial, sans-serif */
  --dds-font-icons: "dds Material Icons";                  /* google_fonts.css:4 @font-face 'Material Icons', 431 .material-icons */
  --dds-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* danceit.css:524 */
  /* Code on pages danceit never had (the API reference): a self-hosted mono so paths, ids and
     JSON look the same on every platform. danceit's own `code` keeps --dds-font-mono. */
  --dds-font-code: "dds Roboto Mono", var(--dds-font-mono);
  --dds-font-size-base: 1rem;                /* danceit.css:56 body 16px */
  --dds-font-size-card: .875rem;             /* danceit.css:16 .card 14px */
  --dds-font-size-small: 80%;                /* danceit.css:450 small */
  --dds-font-size-h1: 3.3125rem;             /* danceit.css:12808 */
  --dds-font-size-h2: 2.25rem;               /* danceit.css:12814 */
  --dds-font-size-h3: 1.5625rem;             /* danceit.css:12819 (+ padding 20px 0, margin 0) */
  --dds-font-size-h4: 1.125rem;              /* danceit.css:12833 */
  --dds-font-size-h5: 1.0625rem;             /* danceit.css:12839 (+ margin-bottom 15px) */
  --dds-font-size-h6: .75rem;                /* danceit.css:12846 (uppercase, 500) */
  --dds-font-size-card-title: 1.125rem;      /* .card-title is an h4: render 18px/25.2px */
  --dds-font-size-lead: 1.25rem;             /* danceit.css:410 .lead */
  --dds-font-size-brand: 1.125rem;           /* danceit.css:12381 .navbar .navbar-brand 18px */
  --dds-font-size-btn: .75rem;               /* danceit.css:8291 .btn */
  --dds-font-size-btn-sm: .6875rem;          /* danceit.css:9907 .btn-sm */
  --dds-font-size-btn-lg: .875rem;           /* danceit.css:9898 .btn-lg */
  --dds-font-size-sidebar: 14px;             /* danceit.css:16736 .sidebar .nav p */
  --dds-font-size-sidebar-link: 13px;        /* danceit.css:16763 .sidebar .nav li>a */
  --dds-font-size-dropdown: .8125rem;        /* danceit.css:13950 .dropdown-item 13px */
  --dds-font-size-th: 1.063rem;              /* danceit.css:14308 .table thead tr th; render 17.008px */
  --dds-font-size-label: 11px;               /* render: .bmd-label-floating (floated) */
  --dds-font-size-xs: .6875rem;              /* danceit.css:26599 .text-unimportant */
  --dds-font-size-pill: 12px;                /* danceit.css:12705 .nav-pills .nav-link */
  --dds-font-size-alert-b: 12px;             /* danceit.css:13572 .alert b */
  --dds-font-size-code: 87.5%;               /* danceit.css:532 code */
  --dds-icon-size: 24px;                     /* google_fonts.css:430 .material-icons */
  --dds-font-weight-light: 300;              /* danceit.css:13284 body */
  --dds-font-weight-base: 300;
  --dds-font-weight-normal: 400;
  --dds-font-weight-medium: 500;
  --dds-font-weight-bold: 700;
  --dds-line-height-base: 1.5em;             /* danceit.css:12804 body, h1–h6; computes to 24px and inherits as 24px */
  --dds-line-height-h1: 1.15em;              /* danceit.css:12808 */
  --dds-line-height-h2: 1.5em;               /* danceit.css:12804 (inherited from the group rule) */
  --dds-line-height-h3: 1.4em;               /* danceit.css:12828 */
  --dds-line-height-h4: 1.4em;               /* danceit.css:12828 */
  --dds-line-height-h5: 1.4em;               /* danceit.css:12839 */
  --dds-line-height-h6: 1.5em;               /* danceit.css:12804 (inherited from the group rule) */
  --dds-line-height-heading: 1.4em;
  --dds-line-height-tight: 1.2;              /* danceit.css:376 Bootstrap h1–h6 reset (always overridden by MD) */
  --dds-line-height-btn: 1.428571;           /* danceit.css:8293 .btn */
  --dds-line-height-btn-sm: 1.5;             /* danceit.css:9908 .btn.btn-sm */
  --dds-line-height-btn-lg: 1.333333;        /* danceit.css:9899 .btn.btn-lg */
  --dds-line-height-brand: 30px;             /* danceit.css:12381 .navbar-brand */
  --dds-line-height-sidebar: 30px;           /* danceit.css:16736 .sidebar .nav p */
  --dds-line-height-alert: 20px;             /* danceit.css:13569 .alert */

  /* ---- Spacing --------------------------------------------------------- */
  --dds-space-0: 0;                          /* danceit.css:6788–8095 Bootstrap spacers (.m-0 … .mx-xl-auto) */
  --dds-space-1: .25rem;
  --dds-space-2: .5rem;
  --dds-space-3: 1rem;
  --dds-space-4: 1.5rem;
  --dds-space-5: 3rem;
  --dds-gutter: 15px;                        /* danceit.css:574 .container, 632 .col padding */
  --dds-grid-gutter: 30px;
  --dds-navbar-height: 70px;                 /* render: .navbar-absolute + .content margin-top 70px */
  --dds-content-padding-y: 30px;             /* danceit.css:17055 .main-panel>.content padding 30px 15px */
  --dds-content-padding-x: 15px;             /* danceit.css:17055 */
  --dds-sidebar-width: 260px;                /* danceit.css:16605 .sidebar */
  --dds-sidebar-mini-width: 80px;            /* danceit.css:17106 .sidebar-mini .sidebar */
  --dds-card-margin: 30px;                   /* danceit.css:14499 .card margin 30px 0; render */
  --dds-card-padding-y: .9375rem;            /* danceit.css:14840 .card .card-body */
  --dds-card-padding-x: 20px;                /* danceit.css:14840 .card .card-body; render 15px 20px */
  --dds-card-header-inset: 15px;             /* danceit.css:14976 .card .card-header margin 0 15px; render */
  --dds-card-header-lift: -20px;             /* danceit.css:14991 [class*=card-header-]:not(-icon):not(-text) margin-top */
  --dds-chip-padding: 15px;                  /* danceit.css:14992; render .card-header padding 15px */

  /* ---- Z-index --------------------------------------------------------- */
  --dds-z-raised: 2;                         /* danceit.css:3324 .input-group-append .btn, 4388 .page-link:focus, 4718 .list-group-item.active: over its neighbours */
  --dds-z-sidebar: 2;                        /* danceit.css:16604 .sidebar (desktop) */
  --dds-z-sidebar-inner: 4;                  /* danceit.css:16626 .sidebar-wrapper, 16794 .logo */
  --dds-z-dropdown: 1000;                    /* danceit.css:2969 .dropdown-menu */
  --dds-z-sticky: 1020;                      /* danceit.css:6716 .sticky-top */
  --dds-z-navbar: 1029;                      /* danceit.css:12373 .navbar-absolute */
  --dds-z-fixed: 1030;                       /* danceit.css:6705 .fixed-top */
  --dds-z-fixed-plugin: 1031;
  --dds-z-drawer: 1032;                      /* danceit.css:26213 sidebar as the <992 drawer; .navbar-collapse */
  --dds-z-modal-backdrop: 1040;              /* danceit.css:5087 */
  --dds-z-modal: 1050;                       /* danceit.css:5035 */
  --dds-z-popover: 1060;                     /* danceit.css:5295 */
  --dds-z-swal: 1060;                        /* danceit.css:20572 .swal2-container */
  --dds-z-select-menu: 1060;                 /* bootstrap-select open menu */
  --dds-z-tooltip: 1070;                     /* danceit.css:5173 */
  --dds-z-notify: 1071;                      /* bootstrap-notify sits above everything but the route bar */
  --dds-z-route-bar: 1080;                   /* dds: the 3px route bar is always on top of the interface */
  --dds-z-datetimepicker: 1111;              /* danceit.css:22585 .bootstrap-datetimepicker-widget.dropdown-menu.top */
  --dds-z-display: 10000;                    /* danceit.css display screen wrappers */
  --dds-z-display-top: 10001;

  /* ---- Motion ---------------------------------------------------------- */
  --dds-duration-fast: 150ms;                /* danceit.css:2913 .fade; 13342 .sidebar a .15s; 1718 .form-control */
  --dds-duration-base: 200ms;                /* danceit.css:8301 .btn .2s; dropdown opacity .2s */
  --dds-duration-slow: 300ms;                /* danceit.css:13883 dropdown transform .3s; 5053 modal .3s; pills .3s */
  --dds-duration-max: 320ms;                 /* cap: danceit's .35s collapse / .33s drawer / .35s sidebar-mini are clamped to this */
  --dds-ease-standard: cubic-bezier(.4, 0, .2, 1);   /* danceit.css:8301, 13883 */
  --dds-ease-accelerate: cubic-bezier(.4, 0, 1, 1);  /* danceit.css:8301 .btn box-shadow */
  --dds-ease-decelerate: cubic-bezier(0, 0, .2, 1);
  --dds-ease-drawer: cubic-bezier(.685, .0473, .346, 1); /* danceit.css:26173 */
  --dds-ease-in: ease-in;
  --dds-ease-out: ease-out;
  --dds-ease-in-out: ease-in-out;
  --dds-transition-btn: box-shadow var(--dds-duration-base) var(--dds-ease-accelerate), background-color var(--dds-duration-base) var(--dds-ease-standard); /* danceit.css:8301 (.2s) */
  --dds-transition-fade: opacity var(--dds-duration-fast) linear;    /* danceit.css:2913 (.15s) */
  --dds-transition-form: color var(--dds-duration-fast) ease-in-out, background-color var(--dds-duration-fast) ease-in-out, border-color var(--dds-duration-fast) ease-in-out, box-shadow var(--dds-duration-fast) ease-in-out; /* danceit.css:2196 (.15s) */
  --dds-sweep-height: 2px;                   /* divergence 3 + route bar */
  --dds-sweep-width: 40%;
  --dds-sweep-travel: 250%;                  /* dds-sweep's end: 100% of the track in segment widths (100% / --dds-sweep-width) */
  --dds-sweep-color: #007bff;
  --dds-sweep-duration: 1.1s;                /* one pass of the indeterminate line (a loop, not a transition) */
  --dds-sweep-ease: cubic-bezier(.4, 0, .2, 1);
  --dds-loader-xs: 2px;                      /* dds: loader lines (the user's favourite "working" signal) */
  --dds-loader-sm: 3px;
  --dds-loader-lg: 4px;
  --dds-loader-track: rgba(0, 123, 255, .12);
  --dds-loader-on-dark: rgba(255, 255, 255, .78);      /* the route bar over a blue band (a phone's rail): white, a little see-through */
  --dds-loader-track-on-dark: rgba(255, 255, 255, .2);
  --dds-ongoing-color: var(--dds-primary);   /* on now: the band that sweeps through the text (13 .dds-ongoing) */
  --dds-ongoing-color-on-primary: #8cc4ff;  /* the band on text that is itself blue (a start number, a date chip): lighter, so it still shows */
  --dds-ongoing-weight: var(--dds-font-weight-medium);        /* on now: a step bolder than 300/400 text, a little less than bold */
  --dds-ongoing-weight-strong: var(--dds-font-weight-bold);   /* on now: text that is 500 already (a start number, a name) */
  --dds-ongoing-band: 66px;                  /* half its width: wide and soft enough to read as light, short enough to read as moving */
  --dds-ongoing-duration: 3.4s;              /* one way: a 3.2s pass left to right, a 0.2s rest, then over again from the left; the text is never unlit for more than about 1s (a 60px chip), 0.6s on a 300px card */
  --dds-ongoing-ease: cubic-bezier(.4, .25, .6, .75);   /* a gentle ease-in-out: a stronger one (.65,0,.35,1) crawled through its slow ends off the text, about 2s unlit per pass */
  --dds-ongoing: dds-ongoing-sweep var(--dds-ongoing-duration) var(--dds-ongoing-ease) infinite;   /* the animation; none under reduced motion (05) */

  /* ---- Breakpoints (documentation only) -------------------------------- */
  --dds-bp-sm: 576px;
  --dds-bp-table-stack: 640px;
  --dds-bp-md: 768px;
  --dds-bp-lg: 992px;
  --dds-bp-xl: 1200px;
}


/* ===== 01-reset.css ====================================================== */

/* ==========================================================================
   dds · 01-reset — fonts, the .dds-scope root, Bootstrap reboot + MD base
   --------------------------------------------------------------------------
   Owner: foundation.

   Fonts are declared under dds' own family names ("dds Roboto",
   "dds Material Icons"), never under danceit's ("Roboto", "Material Icons"),
   so linking dds.css next to danceit.css cannot change a danceit glyph.
   The faces mirror google_fonts.css exactly — same src order (local() first),
   same unicode ranges, same files (fonts/ holds byte-identical copies of
   the ones danceit actually ships). Subsets danceit declares but does not
   ship (Roboto 300/500 cyrillic, greek, vietnamese; 700 latin-ext; all 400
   woff2) are local()-only here, so they fall back exactly the way danceit's
   404s do.

   Everything below the faces is danceit's element CSS — Bootstrap 4 reboot
   (danceit.css:20–357) with Material Dashboard's base on top
   (danceit.css:13284–13310, 15822) — scoped to the opt-in root and wrapped in
   :where() so it has zero specificity and always loses to a component.
   ========================================================================== */

/* ---- dds Roboto ---------------------------------------------------------
   google_fonts.css:10–289. Ranges: latin, latin-ext, and "rest" (the union of
   cyrillic-ext, cyrillic, greek-ext, greek, vietnamese). */

/* 300 — body text */
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), local("Roboto-Light"), url(../fonts/roboto-300-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), local("Roboto-Light"), url(../fonts/roboto-300-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Roboto Light"), local("Roboto-Light");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+1F00-1FFF, U+0370-03FF, U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* 400 — buttons, labels, dropdown items. danceit ships no 400 file: its
   local("Roboto") wins, which is the same file as roboto-400.ttf. */
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Roboto"), local("Roboto-Regular"), url(../fonts/roboto-400.ttf) format("truetype");
}

/* 500 — h6, pills, dt, alert labels */
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), local("Roboto-Medium"), url(../fonts/roboto-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), local("Roboto-Medium"), url(../fonts/roboto-500-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Roboto Medium"), local("Roboto-Medium");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+1F00-1FFF, U+0370-03FF, U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}

/* 700 — .card-login titles, .bold, the sidebar photo initial */
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold"), url(../fonts/roboto-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "dds Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Roboto Bold"), local("Roboto-Bold");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+1F00-1FFF, U+0370-03FF, U+0102-0103, U+0110-0111, U+1EA0-1EF9;
}

/* ---- dds Roboto Mono ----------------------------------------------------
   Not a danceit font: danceit has no page that shows code at length. Used only through
   --dds-font-code (the API reference). One variable file covers 400-500. Apache 2.0. */
@font-face {
  font-family: "dds Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/roboto-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "dds Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/roboto-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- dds Material Icons ------------------------------------------------
   google_fonts.css:1–8: the v48 ligature font, byte-identical. */
@font-face {
  font-family: "dds Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/material-icons.woff2?v=2) format("woff2");
}

/* ---- The root ----------------------------------------------------------
   Put class="dds-scope" on <body>. It is danceit's body: danceit.css:56
   (Bootstrap) + 12796 (MD font stack, 300, 1.5em) + 13284 (#eee, #3c4858, 300)
   + 12785 (antialiasing on everything). line-height is 1.5em on purpose: it
   computes to 24px here and every descendant inherits 24px, not 1.5 —
   text inside a 14px card still sits on a 24px line, as in danceit. */
:where(.dds-scope) {
  margin: 0;
  font-family: var(--dds-font);
  font-size: var(--dds-font-size-base);
  font-weight: var(--dds-font-weight-base);
  line-height: var(--dds-line-height-base);
  color: var(--dds-text);
  text-align: left;
  background-color: var(--dds-body-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Material Dashboard's phone rules for the page itself (danceit.css:26032): below
   768 nothing scrolls sideways, so a phone never zooms out to fit a wide table,
   and the body is the containing block. A side effect danceit has too: the body
   becomes a scroll container, so position: sticky does not stick on phones. */
@media (max-width: 767px) {
  :root:has(> body.dds-scope),
  body.dds-scope { overflow-x: hidden; }                              /* danceit.css:26041 */
  body.dds-scope { position: relative; }                              /* danceit.css:26151 */
}

/* danceit.css:22 — border-box everywhere, colours kept when printing */
:where(.dds-scope),
:where(.dds-scope) *,
:where(.dds-scope) ::before,
:where(.dds-scope) ::after {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* design §5: one scrollbar everywhere — the page, cards, tables, code, modals. The
   sidebar's quiet bar: 6px, no track, a translucent thumb that firms up under the pointer
   and while dragged. The thumb is translucent black, so one set suits every surface: grey
   on white, a darker blue on the blue. The colours are tokens, should a surface need others. The standard properties are only for browsers without the WebKit
   pseudo-elements: in Chrome they would switch the pseudo-elements off. */
:root:has(> body.dds-scope)::-webkit-scrollbar,
.dds-scope::-webkit-scrollbar,
:where(.dds-scope) ::-webkit-scrollbar { width: 6px; height: 6px; }
:root:has(> body.dds-scope)::-webkit-scrollbar-track,
.dds-scope::-webkit-scrollbar-track,
:where(.dds-scope) ::-webkit-scrollbar-track { background: transparent; }
:root:has(> body.dds-scope)::-webkit-scrollbar-thumb,
.dds-scope::-webkit-scrollbar-thumb,
:where(.dds-scope) ::-webkit-scrollbar-thumb { background: var(--dds-scrollbar-thumb); border-radius: 3px; }
:root:has(> body.dds-scope)::-webkit-scrollbar-thumb:hover,
.dds-scope::-webkit-scrollbar-thumb:hover,
:where(.dds-scope) ::-webkit-scrollbar-thumb:hover { background: var(--dds-scrollbar-thumb-hover); }
:root:has(> body.dds-scope)::-webkit-scrollbar-thumb:active,
.dds-scope::-webkit-scrollbar-thumb:active,
:where(.dds-scope) ::-webkit-scrollbar-thumb:active { background: var(--dds-scrollbar-thumb-active); }
:root:has(> body.dds-scope)::-webkit-scrollbar-corner,
.dds-scope::-webkit-scrollbar-corner,
:where(.dds-scope) ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  :root:has(> body.dds-scope),
  :where(.dds-scope),
  :where(.dds-scope) * { scrollbar-width: thin; scrollbar-color: var(--dds-scrollbar-thumb-hover) transparent; }
}

/* ---- Bootstrap 4 reboot (danceit.css:34–357), scoped -------------------- */
:where(.dds-scope) :where(article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section) { display: block; }

:where(.dds-scope) :where(hr) {                      /* danceit.css:71, 443 */
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid var(--dds-hr);
}

/* Bootstrap gives p a 1rem bottom margin (danceit.css:87); danceit takes it away
   again (26824), so paragraphs stack with no gap: space comes from the component */
:where(.dds-scope) :where(p) { margin: 0; }                         /* danceit.css:26824 */

/* dds: also an abbr whose title dds's tooltip took over (16-overlays: title → data-dds-title) */
:where(.dds-scope) :where(abbr[title], abbr[data-original-title], abbr[data-dds-title]) {  /* danceit.css:92 */
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}
/* an abbr with dds's tooltip (a judge's initials in a table head) shows its name on
   hover and focus: the tooltip is the cue, so no dots and no help cursor */
:where(.dds-scope) :where(abbr[data-dds-toggle="tooltip"]) {
  text-decoration: none;
  cursor: inherit;
}
:where(.dds-scope) :where(address) { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
:where(.dds-scope) :where(ol, ul, dl) { margin-top: 0; margin-bottom: 1rem; }
:where(.dds-scope) :where(ol ol, ul ul, ol ul, ul ol) { margin-bottom: 0; }
:where(.dds-scope) :where(dt) { font-weight: var(--dds-font-weight-medium); }
:where(.dds-scope) :where(dd) { margin-bottom: .5rem; margin-left: 0; }
:where(.dds-scope) :where(blockquote) { margin: 0 0 1rem; }
:where(.dds-scope) :where(dfn) { font-style: italic; }
/* bolder: under danceit's 300 body this is 400, not 700 (render) */
:where(.dds-scope) :where(b, strong) { font-weight: bolder; }

:where(.dds-scope) :where(figure) { margin: 0 0 1rem; }
:where(.dds-scope) :where(img) { vertical-align: middle; border-style: none; }
:where(.dds-scope) :where(svg:not(:root)) { overflow: hidden; }
:where(.dds-scope) :where(table) { border-collapse: collapse; }
:where(.dds-scope) :where(caption) {
  padding-top: .75rem;
  padding-bottom: .75rem;
  color: var(--dds-text-muted);
  text-align: left;
  caption-side: bottom;
}
:where(.dds-scope) :where(th) { text-align: inherit; }

/* labels: danceit.css:233 (Bootstrap) + 13307 (MD: 14px, 1.42857, #aaa, 400) */
:where(.dds-scope) :where(label) {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: 14px;
  line-height: 1.42857;
  color: var(--dds-label);
  font-weight: var(--dds-font-weight-normal);
}

:where(.dds-scope) :where(button) { border-radius: 0; }
:where(.dds-scope) :where(button, input, optgroup, select, textarea) {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
:where(.dds-scope) :where(button, input) { overflow: visible; }
:where(.dds-scope) :where(button, select) { text-transform: none; }
:where(.dds-scope) :where(button, [type=button], [type=reset], [type=submit]) { -webkit-appearance: button; appearance: button; }
:where(.dds-scope) :where(button:not(:disabled), [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled)) { cursor: pointer; }
:where(.dds-scope) :where(button, [type=button], [type=reset], [type=submit])::-moz-focus-inner { padding: 0; border-style: none; }
:where(.dds-scope) :where(input[type=checkbox], input[type=radio]) { box-sizing: border-box; padding: 0; }
:where(.dds-scope) :where(textarea) { overflow: auto; resize: vertical; }
:where(.dds-scope) :where(fieldset) { min-width: 0; padding: 0; margin: 0; border: 0; }
:where(.dds-scope) :where(legend) {                  /* danceit.css:308 + 13290 */
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
  border-bottom: 0;
}
:where(.dds-scope) :where(progress) { vertical-align: baseline; }
:where(.dds-scope) :where([type=number])::-webkit-inner-spin-button,
:where(.dds-scope) :where([type=number])::-webkit-outer-spin-button { height: auto; }
/* danceit hides the number arrows everywhere (danceit.css:26576) */
:where(.dds-scope) :where(input)::-webkit-outer-spin-button,
:where(.dds-scope) :where(input)::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(.dds-scope) :where(input[type=number]) { -moz-appearance: textfield; appearance: textfield; }
:where(.dds-scope) :where([type=search]) { outline-offset: -2px; -webkit-appearance: none; appearance: none; }
:where(.dds-scope) :where([type=search])::-webkit-search-decoration { -webkit-appearance: none; }
:where(.dds-scope) ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
:where(.dds-scope) :where(output) { display: inline-block; }
:where(.dds-scope) :where(summary) { display: list-item; cursor: pointer; }
:where(.dds-scope) :where(template) { display: none; }
/* [hidden] must beat components (Bootstrap uses !important): see 06-utilities */

/* ---- Links (danceit.css:167 + 15822) ------------------------------------ */
:where(.dds-scope) :where(a) {
  color: var(--dds-link);
  text-decoration: none;
  background-color: transparent;
}
:where(.dds-scope) :where(a:hover, a:focus) {
  color: var(--dds-link-hover);
  text-decoration: none;
}
:where(.dds-scope) :where(a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus) {
  color: inherit;
  text-decoration: none;
}
:where(.dds-scope) :where(a) :where(.dds-material-icons) { vertical-align: middle; }  /* danceit.css:15837 */

/* ---- Focus (danceit.css:13303 removes every outline; divergence 7) -------
   The pointer look is danceit's: no outline. The keyboard gets a ring,
   :focus-visible only. Text fields are left alone — they already show focus
   with the blue underline, and Chrome treats every focused field as
   :focus-visible, which would put a ring around a clicked input. Nor does a
   box that takes focus only from script ([tabindex="-1"] on a non-control: a
   swapped page's main, a dialog's panel, a heading jumped to): Chrome rings
   it as soon as a key is pressed after a click into it (2026-10-07, the
   public pages). A control parked at -1 by a roving tabindex (a tab, a day,
   an option) still gets its ring when the arrows bring focus to it. */
:where(.dds-scope) :where(:focus) { outline: 0; }
:where(.dds-scope) :where(:focus-visible:not(input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=file], [type=color]), textarea, select, [contenteditable], [tabindex="-1"]:not(a[href], button, summary, [role=tab], [role=option], [role=radio], [role=menuitem], [role=gridcell], [role=button]))) {
  outline: var(--dds-focus-ring);
  outline-offset: var(--dds-focus-ring-offset);
}


/* ===== 02-type.css ======================================================= */

/* ==========================================================================
   dds · 02-type — headings, text, code, lists, images, icons
   --------------------------------------------------------------------------
   Owner: foundation. Element rules are :where(.dds-scope)-scoped (zero
   specificity); class rules mirror danceit's class with the dds- prefix.

   Headings are Bootstrap's (danceit.css:361) with Material Dashboard's scale
   on top (danceit.css:12791–12849) and danceit's own `h4 { margin: 0 }`
   (danceit.css:26961):
     h1 53px/1.15em   h2 36px/1.5em   h3 25px/1.4em, padding 20px 0, margin 0
     h4 18px/1.4em, margin 0   h5 17px/1.4em, mb 15px   h6 12px/1.5em 500 uppercase
   All 300 weight, colour inherited. .dds-h1 … .dds-h6 give the same look to
   any element.

   Text colour: .dds-text-primary / -success / -danger … are Bootstrap
   utilities with !important, so they live in 06-utilities. The danceit
   helpers without !important (.primary, .gray, .danceit-blue …) are here.
   ========================================================================== */

/* ---- Headings ----------------------------------------------------------- */
:where(.dds-scope) :where(h1, h2, h3, h4, h5, h6),
.dds-h1, .dds-h2, .dds-h3, .dds-h4, .dds-h5, .dds-h6 {
  margin-top: 0;                                  /* danceit.css:83 reboot */
  margin-bottom: .5rem;                           /* danceit.css:361 */
  font-family: var(--dds-font);                   /* danceit.css:12796 */
  font-weight: var(--dds-font-weight-light);      /* danceit.css:12803 */
  line-height: var(--dds-line-height-base);       /* danceit.css:12804 1.5em */
  color: inherit;                                 /* danceit.css:361 */
}
/* Material Dashboard's 300 / 1.5em (12791) lists .h1–.h4 only: the .h5 and
   .h6 classes keep Bootstrap's 400 and 1.2 (danceit.css:361), the elements do not */
.dds-h5, .dds-h6 {
  font-family: inherit;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.2;
}
:where(.dds-scope) :where(h1), .dds-h1 {
  font-size: var(--dds-font-size-h1);             /* danceit.css:12808 */
  line-height: var(--dds-line-height-h1);
}
:where(.dds-scope) :where(h2), .dds-h2 {
  font-size: var(--dds-font-size-h2);             /* danceit.css:12814 */
}
:where(.dds-scope) :where(h3), .dds-h3 {
  font-size: var(--dds-font-size-h3);             /* danceit.css:12819 */
  line-height: var(--dds-line-height-h3);         /* danceit.css:12828 */
  padding: 20px 0;
  margin: 0;
}
:where(.dds-scope) :where(h4), .dds-h4 {
  font-size: var(--dds-font-size-h4);             /* danceit.css:12833 */
  line-height: var(--dds-line-height-h4);         /* danceit.css:12828 */
  font-weight: var(--dds-font-weight-light);
}
:where(.dds-scope) :where(h4) {
  margin: 0;                                      /* danceit.css:26961 (the element only; .h4 keeps .5rem) */
}
:where(.dds-scope) :where(h5), .dds-h5 {
  font-size: var(--dds-font-size-h5);             /* danceit.css:12839 */
  line-height: var(--dds-line-height-h5);
  margin-bottom: 15px;
}
:where(.dds-scope) :where(h6), .dds-h6 {
  font-size: var(--dds-font-size-h6);             /* danceit.css:12846 */
  text-transform: uppercase;
  font-weight: var(--dds-font-weight-medium);
}

/* Bootstrap display headings and lead (danceit.css:410–441) */
.dds-lead { font-size: var(--dds-font-size-lead); font-weight: var(--dds-font-weight-light); }
.dds-display-1 { font-size: 7rem; font-weight: 300; line-height: 1.2; }
.dds-display-2 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }
.dds-display-3 { font-size: 2.8125rem; font-weight: 300; line-height: 1.2; }
.dds-display-4 { font-size: 2.125rem; font-weight: 300; line-height: 1.2; }

/* .title — page and section titles (danceit.css:12864, 15935, 12874, 27261) */
.dds-title {
  margin-top: 30px;
  margin-bottom: 25px;
  min-height: 32px;
  color: var(--dds-heading);
  text-decoration: none;
}
.dds-title :where(a) { color: var(--dds-heading); text-decoration: none; }
h2.dds-title { margin-bottom: 2.142rem; }
h3.dds-title { text-align: center; margin-top: 0; }
/* .title-description — the centred line under a panel title (danceit.css:27266) */
.dds-title-description {
  text-align: center;
  margin: -2em auto 2em auto;
}
/* .description (danceit.css:12879) */
.dds-description { color: var(--dds-description); }

/* ---- Inline text ---------------------------------------------------------- */
:where(.dds-scope) :where(small), .dds-small {
  font-size: var(--dds-font-size-small);          /* danceit.css:450 */
  font-weight: var(--dds-font-weight-normal);
}
:where(.dds-scope) :where(mark), .dds-mark {
  padding: .2em;                                  /* danceit.css:456 */
  background-color: var(--dds-mark-bg);
}
:where(.dds-scope) :where(sub, sup) {
  position: relative;                             /* danceit.css:151–165 */
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
:where(.dds-scope) :where(sub) { bottom: -.25em; }
:where(.dds-scope) :where(sup) { top: -.5em; }
.dds-initialism { font-size: 90%; text-transform: uppercase; }   /* danceit.css:476 */

/* ---- Code ---------------------------------------------------------------- */
:where(.dds-scope) :where(code, kbd, pre, samp) {
  font-family: var(--dds-font-mono);              /* danceit.css:524 */
}
:where(.dds-scope) :where(code) {
  font-size: var(--dds-font-size-code);           /* danceit.css:531 */
  color: var(--dds-code);
  word-break: break-word;
}
:where(.dds-scope) :where(a > code) { color: inherit; }
:where(.dds-scope) :where(kbd) {
  padding: .2rem .4rem;                           /* danceit.css:541 */
  font-size: var(--dds-font-size-code);
  color: var(--dds-white);
  background-color: var(--dds-kbd-bg);
  border-radius: .2rem;
  box-shadow: var(--dds-shadow-inset-kbd);
}
:where(.dds-scope) :where(kbd kbd) { padding: 0; font-size: 100%; font-weight: 500; box-shadow: none; }
:where(.dds-scope) :where(pre) {
  display: block;                                 /* danceit.css:557 */
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: var(--dds-font-size-code);
  color: var(--dds-text-dark);
}
:where(.dds-scope) :where(pre code) { font-size: inherit; color: inherit; word-break: normal; }
.dds-pre-scrollable { max-height: 340px; overflow-y: scroll; }

/* ---- Lists and quotes (danceit.css:462–495) ------------------------------- */
.dds-list-unstyled,
.dds-list-inline { padding-left: 0; list-style: none; }
.dds-list-inline-item { display: inline-block; }
.dds-list-inline-item:not(:last-child) { margin-right: .5rem; }
.dds-blockquote { margin-bottom: 1rem; font-size: 1.25rem; }
.dds-blockquote-footer { display: block; font-size: 80%; color: var(--dds-text-muted); }
.dds-blockquote-footer::before { content: "\2014\00A0"; }

/* ---- Images (danceit.css:496, 12246–12254) -------------------------------- */
.dds-img-fluid,
.dds-img-thumbnail { max-width: 100%; height: auto; }
.dds-img-thumbnail {
  padding: .25rem;
  background-color: #fafafa;                      /* danceit.css:502 (Bootstrap body bg as MD compiles it) */
  border: 1px solid var(--dds-border-bs);
  border-radius: 16px;                            /* danceit.css:12246 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
}
.dds-img-raised { box-shadow: var(--dds-shadow-image); }   /* danceit.css:12251 */
.dds-figure { display: inline-block; }
.dds-figure-img { margin-bottom: .5rem; line-height: 1; }
.dds-figure-caption { font-size: 90%; color: var(--dds-text-muted); }

/* ---- Material icons ------------------------------------------------------
   google_fonts.css:430 .material-icons, font swapped for "dds Material Icons"
   (the same v48 file). danceit.css:27210 makes <i> icons unselectable. */
.dds-material-icons {
  font-family: var(--dds-font-icons);
  font-weight: normal;
  font-style: normal;
  font-size: var(--dds-icon-size);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}
i.dds-material-icons { -webkit-user-select: none; user-select: none; }
sup .dds-material-icons { font-size: 1.5em; }                        /* danceit.css:26777 */
i.dds-table-icon { position: relative; top: .1em; opacity: .7; }     /* danceit.css:28206 the fee / invoice marks */

/* ---- danceit's text helpers (no !important in danceit either) ------------- */
i.dds-material-icons.dds-primary, span.dds-primary { color: var(--dds-primary); }  /* danceit.css:28054 */
i.dds-material-icons.dds-success, span.dds-success { color: var(--dds-success); }  /* danceit.css:28058 */
i.dds-material-icons.dds-danger, span.dds-danger { color: var(--dds-danger); }     /* danceit.css:28062 */
.dds-gray { color: var(--dds-gray); }                                               /* danceit.css:26844 */
i.dds-material-icons.dds-gray, span.dds-gray { color: var(--dds-gray-dark); }      /* danceit.css:28066 */
.dds-danceit-blue { color: var(--dds-primary); }                                    /* danceit.css:28224 */
.dds-icon-danger, .dds-icon-danger * { color: var(--dds-danger); }                  /* danceit.css:28165 */
.dds-text-unimportant {                                                             /* danceit.css:26599 */
  font-size: var(--dds-font-size-xs);
  line-height: 1.5;
  color: var(--dds-text-unimportant);
}
.dds-strong {                                                                        /* danceit.css:27682 */
  text-transform: uppercase;
  font-weight: var(--dds-font-weight-medium);
  font-size: .95em;
}
.dds-bold, .dds-bolder { font-weight: bold; }                                       /* danceit.css:28220, 28153 */
span.dds-pipe { margin: 0 .5em; opacity: .6; }                                      /* danceit.css:27411 */
span.dds-small-pipe { margin: 0 .2em; opacity: .6; }                                /* danceit.css:27416 */
span.dds-shift-up { position: relative; top: -.3em; }                               /* danceit.css:28070 */
.dds-text-as-icon i { font-family: "Open Sans"; }                                   /* danceit.css:26945 */

/* ---- Smart separators (dds's own; docs/00-foundations #parts) -------------------
   .dds-parts > .dds-part: the pieces of one name (a category's style | size |
   age | league, a school's name | city | country). Each part after the first
   draws its pipe in the gap before it, absolutely placed, so the pipe takes no
   width and never ends a line; 00-core marks a part that starts a line
   (data-dds-line-start) and its pipe goes. A part longer than the line wraps
   inside itself. .dds-parts-inline sits in running text; .dds-parts-stack-narrow
   puts one part per line below 640px, without pipes. Never join parts into one
   string with " | ": the pipe is the layout's, not the content's. */
.dds-parts {
  --dds-parts-gap: 1em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--dds-parts-gap);
  row-gap: 0;
  min-width: 0;
}
.dds-parts.dds-parts-inline { display: inline-flex; max-width: 100%; vertical-align: baseline; }
.dds-parts.dds-parts-tight { --dds-parts-gap: .5em; }
/* a part never shrinks below its words: it moves to the next line whole, and
   breaks inside only when it is wider than the line by itself */
.dds-parts > .dds-part { position: relative; flex: 0 0 auto; min-width: 0; max-width: 100%; overflow-wrap: break-word; }
.dds-parts > .dds-part + .dds-part::before {
  content: "|";
  position: absolute;
  left: calc(var(--dds-parts-gap) / -2);
  transform: translateX(-50%);
  font-weight: var(--dds-font-weight-normal);
  opacity: .45;
  pointer-events: none;
}
.dds-parts > .dds-part[data-dds-line-start]::before { content: none; }
@media (max-width: 639.98px) {
  .dds-parts.dds-parts-stack-narrow { flex-direction: column; align-items: flex-start; }
  .dds-parts.dds-parts-stack-narrow > .dds-part::before { content: none; }
}

/* ---- Dates (dds's own; docs/00-foundations #dates) ------------------------------
   A date never wraps, never scrolls and is never clipped while a shorter form
   would fit. <time class="dds-date"> holds the same date (or range) in its
   forms, longest first, one child each:
     <time class="dds-date" datetime="2026-09-21/2027-09-29">
       <span>21 September 2026 – 29 September 2027</span>
       <span>21 Sep 2026 – 29 Sep 2027</span>
       <span>21.09.26 – 29.09.27</span>
     </time>
   00-core shows the longest that fits its box on one line (data-dds-date-form
   = its index) and re-picks when the box's width changes. One child is a date
   that only needs to hold together. Each form is nowrap, so the spaces
   around a range's dash never break it. */
.dds-date {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  font-variant-numeric: tabular-nums;
}
.dds-date > * { display: none; }
.dds-date:not([data-dds-date-form]) > :first-child,
.dds-date[data-dds-date-form="0"] > :nth-child(1),
.dds-date[data-dds-date-form="1"] > :nth-child(2),
.dds-date[data-dds-date-form="2"] > :nth-child(3),
.dds-date[data-dds-date-form="3"] > :nth-child(4) { display: inline; }

/* a.subtle (danceit.css:28665); a.normal-hover and a.underline carry !important: 06-utilities */
a.dds-subtle {
  color: var(--dds-unimportant);
  text-decoration: underline;
  transition: color var(--dds-duration-fast) var(--dds-ease-in-out);
}
a.dds-subtle:hover { color: var(--dds-text-card); }


/* ===== 03-grid.css ======================================================= */

/* ==========================================================================
   dds · 03-grid — the Bootstrap 4 grid, exactly as danceit compiled it
   --------------------------------------------------------------------------
   Owner: foundation. danceit.css:570–1450, prefixed.

   READ THIS: danceit's compiled Bootstrap has **no 992px tier**. Every
   "lg" query in danceit.css is `(min-width: 768px)` (danceit.css:1169 for
   .col-lg-*, 6004 for .d-lg-*, 6653 .float-lg-*, 8154 .text-lg-*), and the
   container's third step is also at 768 (danceit.css:594). So in danceit
   `.col-lg-4` is a third of the row from 768px up, and in `.col-md-6
   .col-lg-4` the lg class wins from 768px because it comes later. dds does
   the same, so a prefixed danceit screen lays out identically:
       tier   danceit / dds query      columns start at
       sm     (min-width: 576px)       576
       md     (min-width: 768px)       768
       lg     (min-width: 768px)       768   <- not 992
       xl     (min-width: 1200px)      1200
   The layout shell's 992 / 1200 switches (drawer, rail, full sidebar) are
   separate media queries in 04-layout and are not affected. One real 992
   query does live here: danceit's own `.container-fluid { padding: 0 30px }`
   (danceit.css:26521), so a fluid container is 15px a side below 992, 30 above.

   Flex alignment helpers (.dds-justify-content-*, .dds-align-items-*, …)
   are Bootstrap utilities with !important: see 06-utilities.
   ========================================================================== */

/* ---- Containers (danceit.css:574–612) ----------------------------------- */
.dds-container,
.dds-container-fluid {
  width: 100%;
  padding-right: var(--dds-gutter);
  padding-left: var(--dds-gutter);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) { .dds-container { max-width: 540px; } }   /* danceit.css:582 */
@media (min-width: 768px) { .dds-container { max-width: 720px; } }   /* danceit.css:588 */
@media (min-width: 768px) { .dds-container { max-width: 960px; } }   /* danceit.css:594 (the "992" step, compiled at 768) */
@media (min-width: 1200px) { .dds-container { max-width: 1140px; } } /* danceit.css:600 */
/* danceit's own desktop rule, a real 992 query (not a compiled "lg" tier): a fluid
   container gets 30px sides, so its rows' columns start 30px in, not 15 */
@media (min-width: 992px) {
  .dds-container-fluid { padding: 0 var(--dds-grid-gutter); }       /* danceit.css:26523 padding: 0 30px */
}

/* ---- Rows (danceit.css:614–630) ---------------------------------------- */
.dds-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--dds-gutter) * -1);
  margin-left: calc(var(--dds-gutter) * -1);
}
.dds-no-gutters { margin-right: 0; margin-left: 0; }
.dds-no-gutters > .dds-col,
.dds-no-gutters > [class*="dds-col-"] { padding-right: 0; padding-left: 0; }

/* ---- Columns (danceit.css:632–707) -------------------------------------- */
.dds-col, .dds-col-1, .dds-col-2, .dds-col-3, .dds-col-4, .dds-col-5,
.dds-col-6, .dds-col-7, .dds-col-8, .dds-col-9, .dds-col-10, .dds-col-11,
.dds-col-12, .dds-col-auto, .dds-col-sm, .dds-col-sm-1, .dds-col-sm-2,
.dds-col-sm-3, .dds-col-sm-4, .dds-col-sm-5, .dds-col-sm-6, .dds-col-sm-7,
.dds-col-sm-8, .dds-col-sm-9, .dds-col-sm-10, .dds-col-sm-11, .dds-col-sm-12,
.dds-col-sm-auto, .dds-col-md, .dds-col-md-1, .dds-col-md-2, .dds-col-md-3,
.dds-col-md-4, .dds-col-md-5, .dds-col-md-6, .dds-col-md-7, .dds-col-md-8,
.dds-col-md-9, .dds-col-md-10, .dds-col-md-11, .dds-col-md-12,
.dds-col-md-auto, .dds-col-lg, .dds-col-lg-1, .dds-col-lg-2, .dds-col-lg-3,
.dds-col-lg-4, .dds-col-lg-5, .dds-col-lg-6, .dds-col-lg-7, .dds-col-lg-8,
.dds-col-lg-9, .dds-col-lg-10, .dds-col-lg-11, .dds-col-lg-12,
.dds-col-lg-auto, .dds-col-xl, .dds-col-xl-1, .dds-col-xl-2, .dds-col-xl-3,
.dds-col-xl-4, .dds-col-xl-5, .dds-col-xl-6, .dds-col-xl-7, .dds-col-xl-8,
.dds-col-xl-9, .dds-col-xl-10, .dds-col-xl-11, .dds-col-xl-12,
.dds-col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: var(--dds-gutter);
  padding-left: var(--dds-gutter);
}

.dds-col { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.dds-col-auto { flex: 0 0 auto; width: auto; max-width: none; }
.dds-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.dds-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.dds-col-3 { flex: 0 0 25%; max-width: 25%; }
.dds-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.dds-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.dds-col-6 { flex: 0 0 50%; max-width: 50%; }
.dds-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.dds-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.dds-col-9 { flex: 0 0 75%; max-width: 75%; }
.dds-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.dds-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.dds-col-12 { flex: 0 0 100%; max-width: 100%; }
.dds-order-first { order: -1; }
.dds-order-last { order: 13; }
.dds-order-0 { order: 0; }
.dds-order-1 { order: 1; }
.dds-order-2 { order: 2; }
.dds-order-3 { order: 3; }
.dds-order-4 { order: 4; }
.dds-order-5 { order: 5; }
.dds-order-6 { order: 6; }
.dds-order-7 { order: 7; }
.dds-order-8 { order: 8; }
.dds-order-9 { order: 9; }
.dds-order-10 { order: 10; }
.dds-order-11 { order: 11; }
.dds-order-12 { order: 12; }
.dds-offset-1 { margin-left: 8.333333%; }
.dds-offset-2 { margin-left: 16.666667%; }
.dds-offset-3 { margin-left: 25%; }
.dds-offset-4 { margin-left: 33.333333%; }
.dds-offset-5 { margin-left: 41.666667%; }
.dds-offset-6 { margin-left: 50%; }
.dds-offset-7 { margin-left: 58.333333%; }
.dds-offset-8 { margin-left: 66.666667%; }
.dds-offset-9 { margin-left: 75%; }
.dds-offset-10 { margin-left: 83.333333%; }
.dds-offset-11 { margin-left: 91.666667%; }

/* sm: danceit.css:885 */
@media (min-width: 576px) {
  .dds-col-sm { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .dds-col-sm-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .dds-col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .dds-col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dds-col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .dds-col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dds-col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dds-col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .dds-col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dds-col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dds-col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .dds-col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dds-col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dds-col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .dds-order-sm-first { order: -1; }
  .dds-order-sm-last { order: 13; }
  .dds-order-sm-0 { order: 0; }
  .dds-order-sm-1 { order: 1; }
  .dds-order-sm-2 { order: 2; }
  .dds-order-sm-3 { order: 3; }
  .dds-order-sm-4 { order: 4; }
  .dds-order-sm-5 { order: 5; }
  .dds-order-sm-6 { order: 6; }
  .dds-order-sm-7 { order: 7; }
  .dds-order-sm-8 { order: 8; }
  .dds-order-sm-9 { order: 9; }
  .dds-order-sm-10 { order: 10; }
  .dds-order-sm-11 { order: 11; }
  .dds-order-sm-12 { order: 12; }
  .dds-offset-sm-0 { margin-left: 0; }
  .dds-offset-sm-1 { margin-left: 8.333333%; }
  .dds-offset-sm-2 { margin-left: 16.666667%; }
  .dds-offset-sm-3 { margin-left: 25%; }
  .dds-offset-sm-4 { margin-left: 33.333333%; }
  .dds-offset-sm-5 { margin-left: 41.666667%; }
  .dds-offset-sm-6 { margin-left: 50%; }
  .dds-offset-sm-7 { margin-left: 58.333333%; }
  .dds-offset-sm-8 { margin-left: 66.666667%; }
  .dds-offset-sm-9 { margin-left: 75%; }
  .dds-offset-sm-10 { margin-left: 83.333333%; }
  .dds-offset-sm-11 { margin-left: 91.666667%; }
}

/* md: danceit.css:1027 */
@media (min-width: 768px) {
  .dds-col-md { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .dds-col-md-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .dds-col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .dds-col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dds-col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .dds-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dds-col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dds-col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .dds-col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dds-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dds-col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .dds-col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dds-col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dds-col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .dds-order-md-first { order: -1; }
  .dds-order-md-last { order: 13; }
  .dds-order-md-0 { order: 0; }
  .dds-order-md-1 { order: 1; }
  .dds-order-md-2 { order: 2; }
  .dds-order-md-3 { order: 3; }
  .dds-order-md-4 { order: 4; }
  .dds-order-md-5 { order: 5; }
  .dds-order-md-6 { order: 6; }
  .dds-order-md-7 { order: 7; }
  .dds-order-md-8 { order: 8; }
  .dds-order-md-9 { order: 9; }
  .dds-order-md-10 { order: 10; }
  .dds-order-md-11 { order: 11; }
  .dds-order-md-12 { order: 12; }
  .dds-offset-md-0 { margin-left: 0; }
  .dds-offset-md-1 { margin-left: 8.333333%; }
  .dds-offset-md-2 { margin-left: 16.666667%; }
  .dds-offset-md-3 { margin-left: 25%; }
  .dds-offset-md-4 { margin-left: 33.333333%; }
  .dds-offset-md-5 { margin-left: 41.666667%; }
  .dds-offset-md-6 { margin-left: 50%; }
  .dds-offset-md-7 { margin-left: 58.333333%; }
  .dds-offset-md-8 { margin-left: 66.666667%; }
  .dds-offset-md-9 { margin-left: 75%; }
  .dds-offset-md-10 { margin-left: 83.333333%; }
  .dds-offset-md-11 { margin-left: 91.666667%; }
}

/* lg: danceit.css:1169 (Bootstrap's 992, compiled at 768 by danceit) */
@media (min-width: 768px) {
  .dds-col-lg { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .dds-col-lg-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .dds-col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .dds-col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dds-col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .dds-col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dds-col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dds-col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .dds-col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dds-col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dds-col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .dds-col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dds-col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dds-col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .dds-order-lg-first { order: -1; }
  .dds-order-lg-last { order: 13; }
  .dds-order-lg-0 { order: 0; }
  .dds-order-lg-1 { order: 1; }
  .dds-order-lg-2 { order: 2; }
  .dds-order-lg-3 { order: 3; }
  .dds-order-lg-4 { order: 4; }
  .dds-order-lg-5 { order: 5; }
  .dds-order-lg-6 { order: 6; }
  .dds-order-lg-7 { order: 7; }
  .dds-order-lg-8 { order: 8; }
  .dds-order-lg-9 { order: 9; }
  .dds-order-lg-10 { order: 10; }
  .dds-order-lg-11 { order: 11; }
  .dds-order-lg-12 { order: 12; }
  .dds-offset-lg-0 { margin-left: 0; }
  .dds-offset-lg-1 { margin-left: 8.333333%; }
  .dds-offset-lg-2 { margin-left: 16.666667%; }
  .dds-offset-lg-3 { margin-left: 25%; }
  .dds-offset-lg-4 { margin-left: 33.333333%; }
  .dds-offset-lg-5 { margin-left: 41.666667%; }
  .dds-offset-lg-6 { margin-left: 50%; }
  .dds-offset-lg-7 { margin-left: 58.333333%; }
  .dds-offset-lg-8 { margin-left: 66.666667%; }
  .dds-offset-lg-9 { margin-left: 75%; }
  .dds-offset-lg-10 { margin-left: 83.333333%; }
  .dds-offset-lg-11 { margin-left: 91.666667%; }
}

/* xl: danceit.css:1311 */
@media (min-width: 1200px) {
  .dds-col-xl { flex-basis: 0; flex-grow: 1; max-width: 100%; }
  .dds-col-xl-auto { flex: 0 0 auto; width: auto; max-width: none; }
  .dds-col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .dds-col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .dds-col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .dds-col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .dds-col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .dds-col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .dds-col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .dds-col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .dds-col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .dds-col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .dds-col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .dds-col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  .dds-order-xl-first { order: -1; }
  .dds-order-xl-last { order: 13; }
  .dds-order-xl-0 { order: 0; }
  .dds-order-xl-1 { order: 1; }
  .dds-order-xl-2 { order: 2; }
  .dds-order-xl-3 { order: 3; }
  .dds-order-xl-4 { order: 4; }
  .dds-order-xl-5 { order: 5; }
  .dds-order-xl-6 { order: 6; }
  .dds-order-xl-7 { order: 7; }
  .dds-order-xl-8 { order: 8; }
  .dds-order-xl-9 { order: 9; }
  .dds-order-xl-10 { order: 10; }
  .dds-order-xl-11 { order: 11; }
  .dds-order-xl-12 { order: 12; }
  .dds-offset-xl-0 { margin-left: 0; }
  .dds-offset-xl-1 { margin-left: 8.333333%; }
  .dds-offset-xl-2 { margin-left: 16.666667%; }
  .dds-offset-xl-3 { margin-left: 25%; }
  .dds-offset-xl-4 { margin-left: 33.333333%; }
  .dds-offset-xl-5 { margin-left: 41.666667%; }
  .dds-offset-xl-6 { margin-left: 50%; }
  .dds-offset-xl-7 { margin-left: 58.333333%; }
  .dds-offset-xl-8 { margin-left: 66.666667%; }
  .dds-offset-xl-9 { margin-left: 75%; }
  .dds-offset-xl-10 { margin-left: 83.333333%; }
  .dds-offset-xl-11 { margin-left: 91.666667%; }
}


/* ===== 04-layout.css ===================================================== */

/* ==========================================================================
   dds · 04-layout — the app shell: sidebar, main panel, navbar, content,
   footer, the off-canvas drawer and the labelled rail
   --------------------------------------------------------------------------
   Owner: layout. Ported from danceit's panel shell (PKassets/php/dashboard_top.php,
   dashboard.php, footer.php; Material Dashboard 2.1.1 in danceit.css). Values
   are danceit's; `render` means measured from ref/snapshots (the render wins).

   Markup (danceit class → dds class, same DOM shape)
     div.dds-wrapper                                   .wrapper
       aside.dds-sidebar#dds-sidebar                   .sidebar[data-color=primary]
         div.dds-logo > a.dds-simple-text.dds-logo-mini[tabindex=-1][aria-hidden=true] > img[alt=""]
                      + a.dds-simple-text.dds-logo-normal > img[alt="danceit.pl"]
             (both link home; the PK mark is decoration, so the row is one tab stop)
         div.dds-sidebar-wrapper
           div.dds-user > div.dds-photo | i.dds-material-icons
                        + div.dds-user-info > a.dds-username > span.dds-user-text
           ul.dds-nav.dds-nav-mobile-menu  (the navbar icons, drawer only;
                                            danceit clones them with JS)
           ul.dds-nav > li.dds-nav-item(.dds-active) > a.dds-nav-link
                      > i.dds-material-icons + p
       div.dds-main-panel                              .main-panel
         nav.dds-navbar.dds-navbar-transparent.dds-navbar-absolute
             (or .dds-navbar-sticky)
           div.dds-container-fluid
             div.dds-navbar-wrapper > h1.dds-navbar-brand   (the page's one h1;
                                            danceit: a.navbar-brand without href)
             button.dds-navbar-toggler > span.dds-sr-only + 3 × span.dds-icon-bar
             div.dds-navbar-collapse > ul.dds-navbar-nav > li.dds-nav-item
                                     > a.dds-nav-link > i.dds-material-icons + p
         main.dds-content > div.dds-container-fluid   (the main landmark)
         div.dds-partners-mobile
         footer.dds-footer (.dds-footer-login)
         div.dds-close-layer

   Widths (divergence 4)
     >= 1200     the full sidebar, var(--dds-sidebar-width) (260px) — as danceit
     992–1199    the labelled rail, 80px: icon over a small label, no hover
                 expansion (danceit: the icon-only body.sidebar-mini rail)
                 .dds-wrapper.dds-no-rail skips it: the drawer up to 1199
     < 992       the off-canvas drawer from the right, dark, pushing the page
                 (danceit: the same drawer, but only below 768)

   Custom properties
     --dds-sidebar-width  on :root (00-tokens, 260px) or on one .dds-wrapper;
                          the sidebar, the main panel's width and offset and
                          the drawer's travel all follow it.
   ========================================================================== */

/* ---- Wrapper and main panel ---------------------------------------------- */
.dds-wrapper {
  position: relative;
  min-height: 100vh;
}
.dds-wrapper::after { display: table; clear: both; content: ""; }

.dds-main-panel {                                         /* danceit.css:17046 */
  position: relative;
  float: right;
  width: calc(100% - var(--dds-sidebar-width));
  min-height: 100vh;
}

/* ---- Sidebar --------------------------------------------------------------- */
.dds-sidebar {                                            /* danceit.css:16599, 16953 */
  --dds-surface: dark;                                    /* the route bar turns white over it (05) */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: var(--dds-z-sidebar);
  width: var(--dds-sidebar-width);
  color: var(--dds-sidebar-text);
  background-color: var(--dds-sidebar-bg);
  box-shadow: var(--dds-shadow-big);
  user-select: none;                                      /* danceit.css:27210 */
}
.dds-sidebar-wrapper {                                    /* danceit.css:16621 */
  position: relative;
  z-index: var(--dds-z-sidebar-inner);
  width: 100%;
  height: calc(100% - 75px);                              /* = calc(100vh - 75px) on a page */
  padding-bottom: 30px;
  overflow: auto;
  overscroll-behavior: contain;
}
/* The quiet scrollbar (01-reset) is the same translucent black on the blue: a darker blue.
   It firms up while the pointer is over the sidebar. */
.dds-sidebar:hover { --dds-scrollbar-thumb: var(--dds-scrollbar-thumb-hover); }

/* The logo row: PK mark + the danceit.pl wordmark, 70px, a divider under it.
   Scoped to the sidebar as danceit's `.sidebar .logo` is: img.dds-logo in the footer's
   sponsor strip is a different thing and must not get this row's height or padding. */
.dds-sidebar .dds-logo {                                  /* danceit.css:16789 */
  position: relative;
  z-index: var(--dds-z-sidebar-inner);
  height: var(--dds-navbar-height);
  padding: 15px 0;
}
.dds-sidebar .dds-logo::after,
.dds-user::after {                                        /* danceit.css:16812, 16863, 16987 */
  position: absolute;
  right: 15px;
  bottom: 0;
  width: calc(100% - 30px);
  height: 1px;
  content: "";
  background-color: var(--dds-sidebar-separator);
}
.dds-simple-text {                                        /* danceit.css:16830, 16976 */
  display: block;
  padding: 5px 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 30px;
  color: var(--dds-sidebar-text);
  text-transform: uppercase;
  white-space: nowrap;
}
.dds-simple-text:hover { color: var(--dds-sidebar-text); text-decoration: none; }
.dds-simple-text img { display: inline; vertical-align: middle; }
.dds-logo-mini {                                          /* danceit.css:16797 */
  float: left;
  width: 30px;
  margin: 0 15px 0 23px;
  text-align: center;
}
.dds-logo-mini img { width: 30px; height: auto; }         /* render: 30 × 29.8 */
.dds-logo-normal img { width: 100px; height: 24px; }      /* render: natural size */

/* The user block: an initials circle (or a role icon) and the name */
.dds-user {                                               /* danceit.css:16857 */
  position: relative;
  padding-bottom: 20px;
  margin: 20px auto 0;
}
.dds-user > .dds-photo,
.dds-user > .dds-material-icons {                         /* danceit.css:16873, 27840 */
  position: relative;
  z-index: 5;
  float: left;
  width: 34px;
  height: 34px;
  margin: 0 11px 0 23px;
  overflow: hidden;
  color: var(--dds-primary);
  text-align: center;
  background-color: var(--dds-white);
  border-radius: var(--dds-radius-circle);
}
.dds-user > .dds-photo {
  padding: 5.5px 0;
  font-size: 16px;
  font-weight: var(--dds-font-weight-bold);
  line-height: 24px;
  white-space: nowrap;
  box-shadow: var(--dds-shadow-big);
}
.dds-user > .dds-material-icons {                         /* no shadow; padding-top .2em (27840) */
  padding: 4.8px 0 5.5px;
  font-size: 24px;
  font-weight: var(--dds-font-weight-bold);
  line-height: 24px;
}
.dds-user-info { height: 34px; }                          /* danceit.css:26686 */
.dds-user-info > a,
.dds-user-info > .dds-username {                          /* danceit.css:16897, 16903 */
  display: block;
  padding: .5rem 15px;
  font-size: 14px;
  line-height: 18px;
  color: var(--dds-sidebar-text);
  white-space: nowrap;
}
.dds-user-info > a:hover { color: var(--dds-sidebar-text); text-decoration: none; }
.dds-user-text {                                          /* danceit.css:16909, 26690 */
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Sidebar navigation ------------------------------------------------------
   Only the sidebar look: generic .dds-nav / .dds-nav-link belong to 15-navigation.
   Labels are lowercase in the markup and capitalised here, as in danceit. */
.dds-sidebar .dds-nav {                                   /* danceit.css:16680 */
  display: block;
  padding: 0;
  margin: 15px 0 0;
  list-style: none;
}
.dds-sidebar .dds-nav-item { position: relative; display: block; }
.dds-sidebar .dds-nav .dds-nav-link {                     /* danceit.css:16756, 16697, 13340 */
  position: relative;
  display: block;
  padding: 8px 10px;
  margin: 10px 15px 0;
  font-size: var(--dds-font-size-sidebar-link);
  line-height: 24px;
  color: var(--dds-sidebar-text);
  text-transform: capitalize;
  white-space: nowrap;
  border-radius: var(--dds-radius-sm);
  transition:                                             /* danceit: all .15s ease-in */
    background-color var(--dds-duration-fast) var(--dds-ease-in),
    color var(--dds-duration-fast) var(--dds-ease-in);
}
.dds-sidebar .dds-nav > .dds-nav-item:first-child > .dds-nav-link { margin-top: 0; }
.dds-sidebar .dds-nav .dds-nav-link:hover,
.dds-sidebar .dds-nav .dds-nav-link:focus { color: var(--dds-sidebar-text); text-decoration: none; }
.dds-sidebar .dds-nav .dds-nav-link > .dds-material-icons { /* danceit.css:16746, 16961 */
  float: left;
  width: 30px;
  margin-right: 15px;
  font-size: var(--dds-icon-size);
  line-height: 30px;
  color: var(--dds-sidebar-icon);
  text-align: center;
}
.dds-sidebar .dds-nav .dds-nav-link > p {                 /* danceit.css:16736: 14px, not the 13px of the a */
  position: relative;
  display: block;
  margin: 0;
  font-size: var(--dds-font-size-sidebar);
  line-height: var(--dds-line-height-sidebar);
  white-space: nowrap;
}
/* hover (not active): danceit.css:16993 */
.dds-sidebar .dds-nav-item:not(.dds-active) > .dds-nav-link:hover { background-color: var(--dds-sidebar-hover-bg); }
/* the active screen: the flat blue tile with the tinted shadow (danceit.css:16998);
   its icon stays .8 white (16961 beats 16715) */
.dds-sidebar .dds-nav-item.dds-active > .dds-nav-link {
  background-color: var(--dds-primary);
  box-shadow: var(--dds-shadow-chip);
}
/* divergence 7: a white ring reads on the blue (the global ring is #007bff) */
.dds-sidebar .dds-nav-link:focus-visible,
.dds-sidebar .dds-simple-text:focus-visible,
.dds-sidebar .dds-username:focus-visible {
  outline: 2px solid var(--dds-white);
  outline-offset: 2px;
}

/* Collapsible groups: a.dds-nav-link[data-dds-toggle=collapse] > p > b.dds-caret,
   then div.dds-collapse > ul.dds-nav (dds.collapse animates the height) */
.dds-sidebar .dds-caret {                                 /* danceit.css:16609, 16685 */
  position: absolute;
  top: 0;
  right: 6px;
  display: inline-block;
  width: 0;
  height: 0;
  margin: 13px 0 0 2px;
  vertical-align: middle;
  border-top: 4px dashed;                                 /* render: the solid\9 hack is ignored */
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: transform var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-sidebar [aria-expanded="true"] .dds-caret { transform: rotate(180deg); } /* danceit.css:13993 */
.dds-sidebar .dds-collapse .dds-nav-item,
.dds-sidebar .dds-collapsing .dds-nav-item { margin-left: 1em; } /* danceit.css:27688 */
/* a group whose child is the active screen: danceit.css:16993 */
.dds-sidebar .dds-nav-item.dds-active > [data-dds-toggle="collapse"] {
  background-color: var(--dds-sidebar-hover-bg);
  box-shadow: none;
}

/* The navbar icons repeated at the top of the drawer (danceit clones them into
   ul.nav-mobile-menu at <= 991 and shows them below 768: 26097, 26126, 26511) */
.dds-sidebar .dds-nav.dds-nav-mobile-menu { display: none; margin: 22px 0 1px; }
.dds-sidebar .dds-nav-mobile-menu .dds-nav-item.dds-active > .dds-nav-link {
  background-color: var(--dds-sidebar-hover-bg);
  box-shadow: none;
}

/* ---- Navbar ------------------------------------------------------------------
   Panels use the transparent absolute navbar (danceit.css:12258, 12369, 12515):
   70px over the #eee canvas, #555 text, no shadow. z-index 0 (27879). */
.dds-navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--dds-navbar-height);
  padding: 10px 0;
  color: var(--dds-navbar-text);
  background-color: transparent;
}
.dds-navbar-absolute { position: absolute; top: 0; left: 0; z-index: 0; }
.dds-navbar > .dds-container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.dds-navbar-wrapper { display: inline-flex; align-items: center; min-width: 0; }
.dds-navbar-brand {                                       /* danceit.css:12381; render: margin 0 16px */
  position: relative;
  display: block;
  height: 50px;
  padding: 10px 0;
  margin: 0 16px;
  overflow: hidden;
  font-family: inherit;                                   /* h1.dds-navbar-brand: the page's h1, same look */
  font-size: var(--dds-font-size-brand);
  font-weight: var(--dds-font-weight-light);
  line-height: var(--dds-line-height-brand);
  color: inherit;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
  border-radius: var(--dds-radius-sm);
}
a.dds-navbar-brand:hover { color: inherit; text-decoration: none; }
.dds-navbar-collapse {                                    /* danceit.css:3918 (expanded) */
  display: flex;
  flex-basis: auto;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-end;
}
.dds-navbar-nav {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  list-style: none;
}
.dds-navbar-nav .dds-nav-link {                           /* danceit.css:12562 */
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-left: 5px;
  font-size: 12px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 20px;
  color: inherit;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--dds-radius-sm);
}
.dds-navbar-nav .dds-nav-link:hover { color: inherit; text-decoration: none; }
.dds-navbar-nav .dds-nav-link > .dds-material-icons {     /* danceit.css:12566–12568 */
  position: relative;
  top: 0;
  max-width: 24px;
  margin: -3px 3px 0 0;
  font-size: 1.25rem;
  line-height: 20px;
  vertical-align: middle;
}
.dds-navbar-nav .dds-nav-link > p { display: none; }      /* danceit.css:26511: labels only in the drawer */

/* Sticky variant (the API view): in flow at the top of the main panel, on the
   #eee canvas; a hairline fades in once the page has scrolled (04-layout.js
   sets .dds-scrolled). The hairline is a pseudo element, so only its opacity moves. */
.dds-navbar.dds-navbar-sticky {
  position: sticky;
  top: 0;
  z-index: var(--dds-z-sticky);
  background-color: var(--dds-body-bg);
}
.dds-navbar-sticky::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  content: "";
  background-color: rgba(0, 0, 0, .08);                   /* = box-shadow 0 1px 0 rgba(0,0,0,.08) */
  opacity: 0;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-navbar-sticky.dds-scrolled::after { opacity: 1; }
.dds-main-panel > .dds-navbar-sticky ~ .dds-content { margin-top: 0; }
/* below 768 foundation makes the body a scroll container (overflow-x: hidden),
   which stops position: sticky; clip keeps the no-sideways-scroll without it */
body.dds-scope:has(.dds-navbar-sticky) { overflow-x: clip; }

/* The hamburger (danceit.css:3771, 12356–12365): 48 × 24, three 22 × 2 bars */
.dds-navbar-toggler {
  display: none;
  padding: 4px 12px;
  margin-left: auto;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--dds-radius-btn);                 /* danceit .25rem: dds's one button radius */
}
.dds-navbar-toggler .dds-icon-bar {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--dds-navbar-text);
  border-radius: 1px;
  transition:
    transform var(--dds-duration-base) var(--dds-ease-standard),
    opacity var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-navbar-toggler .dds-icon-bar + .dds-icon-bar { margin-top: 4px; }
/* .dds-toggled: the X (danceit.css:26310–26398; its .5s overshooting keyframes
   become one 200ms turn) */
.dds-navbar-toggler.dds-toggled .dds-icon-bar:nth-of-type(2) { transform: translateY(6px) rotate(135deg); }
.dds-navbar-toggler.dds-toggled .dds-icon-bar:nth-of-type(3) { opacity: 0; }
.dds-navbar-toggler.dds-toggled .dds-icon-bar:nth-of-type(4) { transform: translateY(-6px) rotate(-135deg); }
/* Touch (divergence 5): danceit's drawn 48 × 24 stays, the hit area grows to 48 × 48
   with an invisible layer 12px above and below (inset counts from the padding box,
   inside the 1px border); the 70px navbar has room for it */
@media (pointer: coarse) {
  .dds-navbar-toggler { position: relative; }
  .dds-navbar-toggler::before { content: ""; position: absolute; inset: -13px -1px; }
}

/* ---- Content ---------------------------------------------------------------- */
.dds-main-panel > .dds-content {                          /* danceit.css:17053 */
  min-height: calc(100vh - 158px);
  padding: 30px 15px;
  margin-top: var(--dds-navbar-height);
}
@media (max-width: 991.98px) {
  .dds-main-panel > .dds-content { padding: 15px 0; }     /* danceit.css:26527 */
  .dds-navbar > .dds-container-fluid { padding: 0 15px; }
}

/* ---- Footer ------------------------------------------------------------------
   footer.php: a three-cell table — language drop-up + node/version label,
   partner logos, the danceit.pl logo. danceit.css:13774, 17059, 28339–28395 */
.dds-footer {
  display: flex;
  padding: .9375rem 0;
  text-align: center;
  user-select: none;                                      /* danceit.css:27210 */
  container: dds-footer / inline-size;   /* the 378px stack below follows the footer, so it also works in a narrow frame */
}
.dds-footer ul { padding: 0; margin: 0; list-style: none; }   /* danceit.css:13780 */
.dds-footer ul li { position: relative; display: inline-block; }
.dds-footer ul li > a {                                   /* danceit.css:13790 */
  position: relative;
  display: block;
  padding: .9375rem;
  font-size: 12px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 24px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: var(--dds-radius-sm);
}
.dds-footer ul li > a > .dds-material-icons { vertical-align: middle; }  /* danceit.css:15837 a .material-icons */
.dds-main-panel > .dds-footer { border-top: 1px solid var(--dds-footer-border); }  /* danceit.css:17059 — panels only */
/* the drop-up caret (Bootstrap .dropup .dropdown-toggle:after, danceit.css:2991) */
.dds-footer .dds-dropup > .dds-dropdown-toggle::after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: 0;
  border-right: .3em solid transparent;
  border-bottom: .3em solid;
  border-left: .3em solid transparent;
}
/* the language menu itself is 15-navigation's .dds-dropdown-menu; closed it never shows */
.dds-footer .dds-dropup > .dds-dropdown-menu:not(.dds-show) { display: none; }
.dds-interface-footer { width: 100%; border-collapse: collapse; }  /* danceit.css:28339 */
.dds-interface-footer td { padding: 1px; vertical-align: middle; }
.dds-interface-footer td.dds-language-select {            /* danceit.css:28343 */
  width: 100px;
  text-align: left;
  white-space: nowrap;
}
.dds-interface-footer td.dds-danceit-logo { width: 260px; white-space: nowrap; }  /* danceit.css:28348 */
.dds-footer .dds-version { margin-top: 1rem; }            /* danceit.css:28353 */
.dds-footer .dds-version a { color: inherit; font-weight: inherit; text-decoration: none; }
/* Touch (divergence 5): the node/version link draws 19px tall; on touch its box is
   an inline-flex 48px tall (text centred, negative block margins give the 29px back,
   so the line box, the footer height and every pixel stay as they were - measured
   identical), and an invisible layer centred on it keeps the hit area at least
   48 wide for a short label; it stays clear of the language toggle beside it
   (measured: no overlap), so it covers no other control */
@media (pointer: coarse) {
  /* not inline padding, nor vertical-align: middle / justify-content: measured, those
     re-rasterise the text lighter (max channel delta 178); this form is pixel-identical */
  .dds-footer .dds-version a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-block: -14.5px;
  }
  .dds-footer .dds-version a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 48px);
    height: 48px;
    transform: translate(-50%, -50%);
  }
}
.dds-footer .dds-copyright {                              /* danceit.css:13848 */
  float: right;
  padding: .9375rem .9375rem .9375rem 0;
}
.dds-footer .dds-copyright img { display: inline; vertical-align: middle; }
.dds-footer .dds-copyright img:first-child { width: 100px; height: 24px; margin-right: .25rem; }
.dds-footer .dds-copyright img:last-child { width: 24px; height: auto; margin-left: .25rem; }
/* sponsor logos (danceit.css:28357) */
.dds-sponsors-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-height: 3.2em;
  overflow: hidden;
}
.dds-sponsors-wrapper img { height: 3.2em; }
/* the footer's strip, as danceit scopes it (danceit.css:28357-28373): full width, the
   logos 0 .2em apart, a single logo centred */
.dds-interface-footer .dds-sponsors-wrapper,
.dds-partners-mobile .dds-sponsors-wrapper { width: 100%; }
.dds-interface-footer .dds-sponsors-wrapper img.dds-logo,
.dds-partners-mobile .dds-sponsors-wrapper img.dds-logo { height: 3.2em; margin: 0 .2em; }
.dds-interface-footer .dds-sponsors-wrapper .dds-logo-wrapper,
.dds-partners-mobile .dds-sponsors-wrapper .dds-logo-wrapper { margin: 0 auto; }
.dds-partners-mobile { display: none; }
@media (max-width: 767.98px) {
  .dds-footer .dds-copyright { padding: .9375rem 0; }     /* danceit.css:13870 */
}
@media (max-width: 768px) {                               /* danceit.css:28379 */
  .dds-interface-footer td.dds-partners { display: none; }
  .dds-partners-mobile { display: block; }
}
/* danceit: @media (max-width: 378px), danceit.css:28389. Below 992px the footer is
   as wide as the window, so on a page this is the same test. */
@container dds-footer (max-width: 378px) {
  .dds-interface-footer td.dds-language-select,
  .dds-interface-footer td.dds-danceit-logo { display: block; }
  .dds-interface-footer td.dds-danceit-logo { margin-left: auto; }
}

/* The login-page footer (login.php, danceit.css:18180): white text and the
   white logos (danceitPKpl.svg + PK.svg) on the blue login background */
.dds-footer.dds-footer-login { color: var(--dds-white); border-top: 0; }
.dds-footer-login .dds-copyright,
.dds-footer-login a { color: var(--dds-white); }
.dds-footer-login > .dds-container { display: flex; justify-content: flex-end; }

/* ---- The off-canvas drawer ---------------------------------------------------
   danceit's phone drawer (danceit.css:26032–26509, max-width 767): from the right,
   #282828, the main panel pushed left by the sidebar width, a dim layer over the
   pushed page that closes it on tap. dds uses it below 992 (and below 1200 on a
   .dds-no-rail wrapper). Timings: 300ms decelerate in, 200ms accelerate out
   (danceit: .33s cubic-bezier(.685,.0473,.346,1), layer .37s ease-in).
   The same block twice: once per media range. */
.dds-close-layer {                                        /* danceit.css:26274 */
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: none;
  cursor: pointer;
  background-color: rgba(0, 0, 0, .35);
  opacity: 0;
  transition-property: opacity, display;
  transition-duration: var(--dds-duration-base);
  transition-timing-function: var(--dds-ease-accelerate);
  transition-behavior: allow-discrete;
}
@media (max-width: 991.98px) {
  .dds-wrapper { overflow-x: clip; }
  .dds-wrapper > .dds-sidebar {                                /* danceit.css:26205, 26119 */
    right: 0;
    left: auto;
    z-index: var(--dds-z-drawer);
    visibility: hidden;
    box-shadow: none;
    transform: translate3d(var(--dds-sidebar-width), 0, 0);
    transition:
      transform var(--dds-duration-base) var(--dds-ease-accelerate),
      box-shadow var(--dds-duration-base) var(--dds-ease-accelerate),
      visibility 0s linear var(--dds-duration-base);
  }
  .dds-wrapper > .dds-sidebar::before {                        /* danceit.css:26231: the drawer is dark */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    content: "";
    background-color: #282828;
  }
  .dds-wrapper > .dds-sidebar > .dds-sidebar-wrapper { padding-bottom: 60px; }   /* danceit.css:26123 */
  .dds-wrapper > .dds-sidebar .dds-nav.dds-nav-mobile-menu { display: block; }
  .dds-wrapper > .dds-main-panel {                             /* danceit.css:26143 */
    width: 100%;
    transition: transform var(--dds-duration-base) var(--dds-ease-accelerate);
  }
  .dds-wrapper > .dds-main-panel > .dds-navbar .dds-navbar-toggler { display: block; }
  .dds-wrapper > .dds-main-panel > .dds-navbar .dds-navbar-collapse { display: none; }
  .dds-wrapper.dds-nav-open > .dds-sidebar {                   /* danceit.css:26161–26165 */
    visibility: visible;
    box-shadow: var(--dds-shadow-big);
    transform: none;
    transition:
      transform var(--dds-duration-slow) var(--dds-ease-decelerate),
      box-shadow var(--dds-duration-slow) var(--dds-ease-decelerate),
      visibility 0s;
  }
  .dds-wrapper.dds-nav-open > .dds-main-panel {                /* danceit.css:26153: the page is pushed */
    transform: translate3d(calc(var(--dds-sidebar-width) * -1), 0, 0);
    transition: transform var(--dds-duration-slow) var(--dds-ease-decelerate);
  }
  .dds-wrapper.dds-nav-open > .dds-main-panel > .dds-close-layer { display: block; opacity: 1; transition-duration: var(--dds-duration-slow); transition-timing-function: var(--dds-ease-decelerate); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dds-wrapper.dds-no-rail { overflow-x: clip; }
  .dds-wrapper.dds-no-rail > .dds-sidebar {                                /* danceit.css:26205, 26119 */
    right: 0;
    left: auto;
    z-index: var(--dds-z-drawer);
    visibility: hidden;
    box-shadow: none;
    transform: translate3d(var(--dds-sidebar-width), 0, 0);
    transition:
      transform var(--dds-duration-base) var(--dds-ease-accelerate),
      box-shadow var(--dds-duration-base) var(--dds-ease-accelerate),
      visibility 0s linear var(--dds-duration-base);
  }
  .dds-wrapper.dds-no-rail > .dds-sidebar::before {                        /* danceit.css:26231: the drawer is dark */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    content: "";
    background-color: #282828;
  }
  .dds-wrapper.dds-no-rail > .dds-sidebar > .dds-sidebar-wrapper { padding-bottom: 60px; }   /* danceit.css:26123 */
  .dds-wrapper.dds-no-rail > .dds-sidebar .dds-nav.dds-nav-mobile-menu { display: block; }
  .dds-wrapper.dds-no-rail > .dds-main-panel {                             /* danceit.css:26143 */
    width: 100%;
    transition: transform var(--dds-duration-base) var(--dds-ease-accelerate);
  }
  .dds-wrapper.dds-no-rail > .dds-main-panel > .dds-navbar .dds-navbar-toggler { display: block; }
  .dds-wrapper.dds-no-rail > .dds-main-panel > .dds-navbar .dds-navbar-collapse { display: none; }
  .dds-wrapper.dds-no-rail.dds-nav-open > .dds-sidebar {                   /* danceit.css:26161–26165 */
    visibility: visible;
    box-shadow: var(--dds-shadow-big);
    transform: none;
    transition:
      transform var(--dds-duration-slow) var(--dds-ease-decelerate),
      box-shadow var(--dds-duration-slow) var(--dds-ease-decelerate),
      visibility 0s;
  }
  .dds-wrapper.dds-no-rail.dds-nav-open > .dds-main-panel {                /* danceit.css:26153: the page is pushed */
    transform: translate3d(calc(var(--dds-sidebar-width) * -1), 0, 0);
    transition: transform var(--dds-duration-slow) var(--dds-ease-decelerate);
  }
  .dds-wrapper.dds-no-rail.dds-nav-open > .dds-main-panel > .dds-close-layer { display: block; opacity: 1; transition-duration: var(--dds-duration-slow); transition-timing-function: var(--dds-ease-decelerate); }
}

/* the layer fades in from 0 as it appears; placed after the open rules so it
   outranks them (same or higher specificity, later in the file) */
@starting-style {
  .dds-wrapper.dds-nav-open > .dds-main-panel > .dds-close-layer,
  .dds-wrapper.dds-no-rail.dds-nav-open > .dds-main-panel > .dds-close-layer { opacity: 0; }
}

/* ---- The labelled rail (divergence 4), 992–1199 --------------------------------
   danceit's body.sidebar-mini rail (danceit.css:17099–17143) keeps its geometry —
   80px, logo-mini and the photo at x 23, the main panel at calc(100% - 80px) —
   but every item shows its label under the icon instead of only on :hover. */
/* The route bar (05) spans the content only, not the sidebar beside it. The sidebar's
   width is read on body, where the bar lives: a --dds-sidebar-width set on one wrapper
   does not reach it. The docs' framed layout demos are not the page's sidebar (their
   own bar is absolute and full width, below). */
@media (min-width: 1200px) {
  body:has(.dds-wrapper:not(.dds-layout-demo *) > .dds-sidebar) { --dds-route-bar-inset: var(--dds-sidebar-width); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  body:has(.dds-wrapper:not(.dds-no-rail, .dds-layout-demo *) > .dds-sidebar) { --dds-route-bar-inset: var(--dds-sidebar-mini-width); }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .dds-wrapper:not(.dds-no-rail) {
    --dds-rail-width: var(--dds-sidebar-mini-width);
  }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar { width: var(--dds-rail-width); }
  .dds-wrapper:not(.dds-no-rail) > .dds-main-panel { width: calc(100% - var(--dds-rail-width)); }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-user-info { display: none; }
  /* The wordmark is not shown, but its link stays the rail's one home stop: it is laid
     transparently over the PK mark (which is tabindex=-1 aria-hidden), so a keyboard or
     screen-reader user still reaches the home link and a pointer still hits it. */
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-logo-normal {
    position: absolute;
    inset: 15px 0 auto;
    height: 40px;
    padding: 0;
  }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-logo-normal > img { opacity: 0; }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-user { height: 54px; }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav .dds-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 2px 7px;
    margin: 10px 4px 0;                                   /* a 72px tile: a 68px line for the label */
    white-space: normal;
  }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav > .dds-nav-item:first-child > .dds-nav-link { margin-top: 0; }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav .dds-nav-link > .dds-material-icons {
    float: none;
    width: auto;
    margin: 0;
    line-height: 28px;
  }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav .dds-nav-link > p {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;                                      /* the longest one-word labels (authentication, 65px) fit on one line */
    font-weight: var(--dds-font-weight-normal);
    line-height: 13px;
    text-align: center;
    overflow-wrap: break-word;                            /* whole words; only a word longer than 68px breaks */
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  /* a group: the caret sits under the label, centred */
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav .dds-nav-link > p > .dds-caret {
    position: static;
    display: block;
    margin: 3px auto 0;
  }
  /* a group keeps a third line for the caret (outranks the clamp-2 rule above) */
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav .dds-nav-link[data-dds-toggle="collapse"] > p,
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-nav .dds-nav-link[aria-controls] > p { -webkit-line-clamp: 3; }
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-collapse .dds-nav-item,
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-collapsing .dds-nav-item { margin-left: 0; }
  /* no indent in 80px: a group's children sit on a faint dark tile instead (declared) */
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-collapse .dds-nav-item:not(.dds-active) > .dds-nav-link,
  .dds-wrapper:not(.dds-no-rail) > .dds-sidebar .dds-collapsing .dds-nav-item:not(.dds-active) > .dds-nav-link { background-color: rgba(0, 0, 0, .08); }
}

/* ---- Docs frame: a whole shell inside a box ---------------------------------
   div.dds-layout-demo > div.dds-layout-demo-scroll > div.dds-wrapper. The frame
   is the containing block of the fixed sidebar (transform) and the scroller is
   the sticky navbar's scroll container. The breakpoints still follow the window. */
.dds-layout-demo {
  position: relative;
  height: 520px;
  overflow: hidden;
  background-color: var(--dds-body-bg);
  transform: translateZ(0);
}
.dds-layout-demo-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; }
.dds-layout-demo .dds-wrapper,
.dds-layout-demo .dds-main-panel { min-height: 100%; }
.dds-layout-demo .dds-main-panel > .dds-content { min-height: 360px; }
.dds-layout-demo .dds-route-bar { position: absolute; left: 0; z-index: var(--dds-z-route-bar); }   /* over the frame's sidebar (2) and drawer (1032), as on a page */
/* the login footer's backdrop in the docs: login.php's gradient under the 50%
   black .header-filter (danceit.css:13487); on a page it is 26-public's .dds-page-header */
.dds-layout-demo-login {
  position: relative;
  background: linear-gradient(60deg, var(--dds-primary), #3c7cc0);   /* login.php inline */
}
.dds-layout-demo-login::before {
  position: absolute;
  inset: 0;
  content: "";
  background-color: rgba(0, 0, 0, .5);
}
.dds-layout-demo-login > .dds-footer { position: relative; z-index: 1; }

/* The drawer demo in the docs: div.dds-layout-demo.dds-layout-demo-drawer holds a
   .dds-no-rail wrapper, so it is the drawer at every window width — below 1200 by
   the rules above, from 1200 by this copy of them (docs frame only). */
@media (min-width: 1200px) {
  .dds-layout-demo-drawer .dds-wrapper { overflow-x: clip; }
  .dds-layout-demo-drawer .dds-wrapper > .dds-sidebar {                                /* danceit.css:26205, 26119 */
    right: 0;
    left: auto;
    z-index: var(--dds-z-drawer);
    visibility: hidden;
    box-shadow: none;
    transform: translate3d(var(--dds-sidebar-width), 0, 0);
    transition:
      transform var(--dds-duration-base) var(--dds-ease-accelerate),
      box-shadow var(--dds-duration-base) var(--dds-ease-accelerate),
      visibility 0s linear var(--dds-duration-base);
  }
  .dds-layout-demo-drawer .dds-wrapper > .dds-sidebar::before {                        /* danceit.css:26231: the drawer is dark */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    content: "";
    background-color: #282828;
  }
  .dds-layout-demo-drawer .dds-wrapper > .dds-sidebar > .dds-sidebar-wrapper { padding-bottom: 60px; }   /* danceit.css:26123 */
  .dds-layout-demo-drawer .dds-wrapper > .dds-sidebar .dds-nav.dds-nav-mobile-menu { display: block; }
  .dds-layout-demo-drawer .dds-wrapper > .dds-main-panel {                             /* danceit.css:26143 */
    width: 100%;
    transition: transform var(--dds-duration-base) var(--dds-ease-accelerate);
  }
  .dds-layout-demo-drawer .dds-wrapper > .dds-main-panel > .dds-navbar .dds-navbar-toggler { display: block; }
  .dds-layout-demo-drawer .dds-wrapper > .dds-main-panel > .dds-navbar .dds-navbar-collapse { display: none; }
  .dds-layout-demo-drawer .dds-wrapper.dds-nav-open > .dds-sidebar {                   /* danceit.css:26161–26165 */
    visibility: visible;
    box-shadow: var(--dds-shadow-big);
    transform: none;
    transition:
      transform var(--dds-duration-slow) var(--dds-ease-decelerate),
      box-shadow var(--dds-duration-slow) var(--dds-ease-decelerate),
      visibility 0s;
  }
  .dds-layout-demo-drawer .dds-wrapper.dds-nav-open > .dds-main-panel {                /* danceit.css:26153: the page is pushed */
    transform: translate3d(calc(var(--dds-sidebar-width) * -1), 0, 0);
    transition: transform var(--dds-duration-slow) var(--dds-ease-decelerate);
  }
  .dds-layout-demo-drawer .dds-wrapper.dds-nav-open > .dds-main-panel > .dds-close-layer { display: block; opacity: 1; transition-duration: var(--dds-duration-slow); transition-timing-function: var(--dds-ease-decelerate); }
  @starting-style {
    .dds-layout-demo-drawer .dds-wrapper.dds-nav-open > .dds-main-panel > .dds-close-layer { opacity: 0; }
  }
}

/* ---- Reduced motion: 05-motion sets the durations to 1ms; the drawer's
   visibility delay follows them. Nothing else to do. */


/* ===== 05-motion.css ===================================================== */

/* ==========================================================================
   dds · 05-motion — the sweep line, the route bar, Bootstrap's
   transitions (.fade, .collapse), the Material ripple, reduced motion
   --------------------------------------------------------------------------
   Owner: foundation.

   dds-sweep-x (divergence 3). One pass for every "working…" signal: the
   route bar at the top of the page, the loader lines and the busy button's
   bottom edge (10-buttons, .dds-btn.dds-busy::after). It moves only the
   transform (section 11: the compositor, never left/right): give an
   absolutely positioned element, inside a clipping (`overflow: hidden`) box,
   `left: 0; width: var(--dds-sweep-width)` and
       animation: dds-sweep-x var(--dds-sweep-duration) var(--dds-sweep-ease) infinite;
   The 40% segment enters at the left edge and leaves at the right, then
   starts again. (The older left/right `@keyframes dds-sweep` is gone: every
   line, the busy button's included, runs on dds-sweep-x.)
   The loop (1.1s a pass) is an indicator, not a transition; the 320ms cap is
   for transitions. Reduced motion: no loop, the segment stands still at
   --dds-sweep-width (40%) from the left edge, on its faint track — still
   visibly "working", never a finished full-width rule.

   Loader lines. dds says "working" with one thing only: a thin #007bff line
   running left to right. Same keyframe everywhere, three heights:
     .dds-route-bar                 3px, fixed to the top of the viewport (a page, a panel)
     .dds-loader-line               3px lane with a faint blue track, in the flow
       + .dds-loader-line-xs / -lg  2px / 4px
       + .dds-loader-line-top       pinned to the top edge of its positioned box
       + .dds-loader-line-bottom    pinned to the bottom edge
     .dds-btn.dds-busy::after       2px along a button's bottom edge (10-buttons)
   All of them are display: none until .dds-active, and fade in (150ms) and
   out (200ms). dds.loading(el, on) (00-core.js) pins a line to el's top edge,
   sets aria-busy and .dds-loading on el. Nothing else in dds spins or pulses.

   On now is not here: it is a state, 13-feedback .dds-ongoing (the text
   shimmer). Its token, --dds-ongoing, drops to none under reduced motion below.

   Timing tokens are the cap-respecting danceit values (00-tokens). Under
   prefers-reduced-motion the duration tokens drop to 1ms, so every component
   that uses them stops moving without its own media query (a 1ms transition
   still fires transitionend, which JS may wait for).
   ========================================================================== */

/* ---- dds-sweep-x --------------------------------------------------------- */
/* dds-sweep-x: the pass on the compositor. The element is
   --dds-sweep-width wide at left: 0 and only its transform moves: from just
   off the left edge (-100% of itself) to just past the right edge
   (--dds-sweep-travel = 100% of the track in segment widths). */
@keyframes dds-sweep-x {
  from { transform: translateX(-100%); }
  to   { transform: translateX(var(--dds-sweep-travel)); }
}

/* ---- The route bar --------------------------------------------------------
   A 3px line along the top of the viewport, on nothing (no track: only the moving line shows), while a page or a panel is on its
   way. `dds.routeBar(true|false)` (00-core.js) creates it on demand; or put
   <div class="dds-route-bar" role="progressbar" aria-label="Loading"></div>
   in the page and toggle .dds-active. Closed, it is display: none.
   It is the standard page loader on every dds page (04-layout.js): a link or a form
   that leaves the page, a reload, back/forward or a script setting location all
   start it, and it keeps running on the next page until that page's load event —
   exactly while a browser's tab icon spins, which a kiosk tablet does not show.
   --dds-route-bar-inset (on body) starts it at the edge of a side rail, so it spans
   the content only: 04-layout sets it for the panel sidebar, 27 for the public rail.
   Over a dark surface (a phone's blue rail band, which declares --dds-surface: dark)
   the line is white and a little see-through (.dds-route-bar--on-dark, set by
   dds.routeBar from what lies under the line's middle).
   It never stops mid-sweep: dds.routeBar(false) lets the running pass reach the
   right edge, then fades the lane out. A page that leaves while the line runs
   hands its phase to the next page (sessionStorage), so the line carries on
   across the navigation instead of starting again from the left. */
.dds-route-bar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--dds-route-bar-inset, 0);                     /* a page's side rail is not content: the line starts where the rail ends (04, 27) */
  z-index: var(--dds-z-route-bar);
  display: none;
  height: var(--dds-loader-sm);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity, display;
  transition-duration: var(--dds-duration-base);
  transition-timing-function: var(--dds-ease-accelerate);
  transition-behavior: allow-discrete;
}
.dds-route-bar.dds-active {
  display: block;
  opacity: 1;
}
@starting-style {
  .dds-route-bar.dds-active { opacity: 0; }
}
.dds-route-bar.dds-route-bar--on-dark {
  --dds-sweep-color: var(--dds-loader-on-dark);
}
.dds-route-bar.dds-active,
.dds-loader-line.dds-active {
  transition-duration: var(--dds-duration-fast);         /* arriving: quick; leaving: 200ms */
  transition-timing-function: var(--dds-ease-decelerate);
}
.dds-route-bar::before,
.dds-loader-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--dds-sweep-width);
  background-color: var(--dds-sweep-color);
  border-radius: var(--dds-loader-lg);                   /* soft ends on the moving segment */
  animation: dds-sweep-x var(--dds-sweep-duration) var(--dds-sweep-ease) infinite;
  will-change: transform;
}

/* ---- Loader lines ----------------------------------------------------------
   <div class="dds-loader-line dds-active" role="progressbar" aria-label="Loading"></div>
   In the flow it takes its own 3px; -top / -bottom pin it over the edge of the
   nearest positioned ancestor instead (a card, a console response), so the
   content does not move when it appears. Prefer dds.loading(el, true). */
.dds-loader-line {
  position: relative;
  display: none;
  height: var(--dds-loader-sm);
  overflow: hidden;
  pointer-events: none;
  background-color: var(--dds-loader-track);
  opacity: 0;
  transition-property: opacity, display;
  transition-duration: var(--dds-duration-base);
  transition-timing-function: var(--dds-ease-accelerate);
  transition-behavior: allow-discrete;
}
.dds-loader-line.dds-active {
  display: block;
  opacity: 1;
}
@starting-style {
  .dds-loader-line.dds-active { opacity: 0; }
}
.dds-loader-line-xs { height: var(--dds-loader-xs); }
.dds-loader-line-lg { height: var(--dds-loader-lg); }
.dds-loader-line-top,
.dds-loader-line-bottom {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;                                            /* over the host's content, under its overlays */
  border-radius: inherit;
}
.dds-loader-line-top {
  top: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.dds-loader-line-bottom {
  bottom: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
/* dds.loading() gives a static host a position so a pinned line has an edge to sit on */
.dds-loading-host { position: relative; }
/* The state hook dds.loading() sets on the host while it waits (with aria-busy).
   The line says "working"; the host only swaps the pointer to the busy arrow, so
   its content stays readable and never looks empty. Controls inside keep theirs. */
.dds-loading { cursor: progress; }

/* ---- Bootstrap transitions (danceit.css:2911–2942) -------------------------
   .fade / .show for tabs, modals, tooltips; .collapse / .show for the sidebar
   groups and accordions (00-core.js toggles them: [data-dds-toggle=collapse]).
   Bootstrap animates the height with .collapsing for .35s; dds keeps the
   class and clamps it to the 320ms cap. */
.dds-fade {
  opacity: 0;
  transition: opacity var(--dds-duration-fast) linear;   /* danceit.css:2911 */
}
.dds-fade.dds-show { opacity: 1; }                       /* danceit.css:2916 */
.dds-collapse { display: none; }                         /* danceit.css:2920 */
.dds-collapse.dds-show { display: block; }               /* danceit.css:2924 */
tr.dds-collapse.dds-show { display: table-row; }         /* danceit.css:2928 */
tbody.dds-collapse.dds-show { display: table-row-group; } /* danceit.css:2932 */
.dds-collapsing {                                        /* danceit.css:2936 (.35s ease) */
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height var(--dds-duration-max) var(--dds-ease-decelerate);  /* opening: arrives */
}
/* closing (00-core.js adds .dds-collapsing-out while the height falls):
   leaving is faster and accelerates away (section 11) */
.dds-collapsing.dds-collapsing-out {
  transition-duration: var(--dds-duration-base);
  transition-timing-function: var(--dds-ease-accelerate);
}

/* ---- Ripple (danceit.css:14222–14260) --------------------------------------
   Material's ink: the pointer lands, a disc of the element's text colour at
   10% spreads from that point and fades when the pointer lifts. 00-core.js
   adds it to .dds-btn, .dds-card-image, .dds-navbar a, .dds-dropdown-menu a,
   .dds-nav-tabs a, .dds-pagination links and anything with .dds-ripple
   (opt out: .dds-ripple-none) — the hosts bootstrap-material-design picks.
   The host must be positioned (.dds-btn is). danceit spreads it over .5s
   after a .1s delay; dds spreads it in 300ms with no delay (the cap). */
.dds-ripple { position: relative; }                      /* danceit.css:14222 */
.dds-ripple-container {                                  /* danceit.css:14226 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  /* WebKit lets a transformed child (the growing ink) out of a rounded overflow clip;
     an opaque mask makes it clip to the radius (other engines: no change) */
  -webkit-mask-image: linear-gradient(#000 0 0);
}
.dds-ripple-container .dds-ripple-decorator {           /* danceit.css:14238 */
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  pointer-events: none;
  background-color: rgba(0, 0, 0, .05);
  border-radius: 100%;
  opacity: 0;
  transform: scale(1);
  transform-origin: 50%;
}
.dds-ripple-container .dds-ripple-decorator.dds-ripple-on {  /* danceit.css:14252 */
  opacity: .1;
  transition: opacity var(--dds-duration-fast) ease-in, transform var(--dds-duration-slow) var(--dds-ease-standard);
}
/* danceit's !important (14257) is replaced by source order at equal specificity */
.dds-ripple-container .dds-ripple-decorator.dds-ripple-out {
  opacity: 0;
  transition: opacity .1s linear;
}

/* ---- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dds-duration-fast: 1ms;
    --dds-duration-base: 1ms;
    --dds-duration-slow: 1ms;
    --dds-duration-max: 1ms;
    --dds-ongoing: none;                                  /* on now: the bolder text, the band stays off */
  }
  .dds-route-bar::before,
  .dds-route-bar,
  .dds-loader-line,
  .dds-fade,
  .dds-collapsing { transition: none; }
  .dds-route-bar::before,
  .dds-loader-line::before {                             /* divergence 8: stands still at 40% */
    animation: none;
    will-change: auto;
  }
  .dds-ripple-container { display: none; }
}


/* ===== 06-utilities.css ================================================== */

/* ==========================================================================
   dds · 06-utilities — Bootstrap 4 utilities and danceit's own helpers
   --------------------------------------------------------------------------
   Owner: foundation. The only part allowed to use !important (Bootstrap's
   utilities carry it, and so do some of danceit's helpers).

   1. Bootstrap 4 utilities, generated from danceit.css:5671–8286 (the file
      danceit actually serves) by prefixing every class: .mt-3 -> .dds-mt-3,
      .d-md-none -> .dds-d-md-none, .text-right -> .dds-text-right. Values and
      media queries are danceit's, including its compiled "lg" tier at 768px
      (see 03-grid). Bootstrap 4.0 vintage: there are no .shadow-*, no
      negative margins (.m-n1), no .text-wrap / .text-break — danceit's markup
      uses .text-wrap, but danceit.css never defines it, so it does nothing
      there and dds does not define it either.
   2. Material Dashboard's overrides (danceit.css:12254, 12884–12910): the
      text colours danceit really shows and .rounded at 6px.
   3. danceit's own helpers (danceit.css:26561–29010), prefixed.
   Generated by wiki/phase-2/lab/foundation/genutil.py; edit the helpers by hand.
   ========================================================================== */

/* [hidden] must beat every component, as in Bootstrap (danceit.css:357) */
:where(.dds-scope) [hidden] { display: none !important; }

/* ---- 1. Bootstrap 4 utilities (danceit.css:5671–8286) ------------------- */
.dds-align-baseline { /* danceit.css:5671 */
  vertical-align: baseline !important;
}
.dds-align-top { /* danceit.css:5675 */
  vertical-align: top !important;
}
.dds-align-middle { /* danceit.css:5679 */
  vertical-align: middle !important;
}
.dds-align-bottom { /* danceit.css:5683 */
  vertical-align: bottom !important;
}
.dds-align-text-bottom { /* danceit.css:5687 */
  vertical-align: text-bottom !important;
}
.dds-align-text-top { /* danceit.css:5691 */
  vertical-align: text-top !important;
}
.dds-bg-primary { /* danceit.css:5695 */
  background-color: #2196f3 !important;
}
a.dds-bg-primary:focus,
a.dds-bg-primary:hover,
button.dds-bg-primary:focus,
button.dds-bg-primary:hover { /* danceit.css:5699 */
  background-color: #0c7cd5 !important;
}
.dds-bg-secondary { /* danceit.css:5706 */
  background-color: #6c757d !important;
}
a.dds-bg-secondary:focus,
a.dds-bg-secondary:hover,
button.dds-bg-secondary:focus,
button.dds-bg-secondary:hover { /* danceit.css:5710 */
  background-color: #545b62 !important;
}
.dds-bg-success { /* danceit.css:5717 */
  background-color: #4caf50 !important;
}
a.dds-bg-success:focus,
a.dds-bg-success:hover,
button.dds-bg-success:focus,
button.dds-bg-success:hover { /* danceit.css:5721 */
  background-color: #3d8b40 !important;
}
.dds-bg-info { /* danceit.css:5728 */
  background-color: #00bcd4 !important;
}
a.dds-bg-info:focus,
a.dds-bg-info:hover,
button.dds-bg-info:focus,
button.dds-bg-info:hover { /* danceit.css:5732 */
  background-color: #008fa1 !important;
}
.dds-bg-warning { /* danceit.css:5739 */
  background-color: #ffeb3b !important;
}
a.dds-bg-warning:focus,
a.dds-bg-warning:hover,
button.dds-bg-warning:focus,
button.dds-bg-warning:hover { /* danceit.css:5743 */
  background-color: #ffe608 !important;
}
.dds-bg-danger { /* danceit.css:5750 */
  background-color: #f44336 !important;
}
a.dds-bg-danger:focus,
a.dds-bg-danger:hover,
button.dds-bg-danger:focus,
button.dds-bg-danger:hover { /* danceit.css:5754 */
  background-color: #ea1c0d !important;
}
.dds-bg-light { /* danceit.css:5761 */
  background-color: #f8f9fa !important;
}
a.dds-bg-light:focus,
a.dds-bg-light:hover,
button.dds-bg-light:focus,
button.dds-bg-light:hover { /* danceit.css:5765 */
  background-color: #dae0e5 !important;
}
.dds-bg-dark { /* danceit.css:5772 */
  background-color: #343a40 !important;
}
a.dds-bg-dark:focus,
a.dds-bg-dark:hover,
button.dds-bg-dark:focus,
button.dds-bg-dark:hover { /* danceit.css:5776 */
  background-color: #1d2124 !important;
}
.dds-bg-white { /* danceit.css:5783 */
  background-color: #fff !important;
}
.dds-bg-transparent { /* danceit.css:5787 */
  background-color: transparent !important;
}
.dds-border { /* danceit.css:5791 */
  border: 1px solid #dee2e6 !important;
}
.dds-border-top { /* danceit.css:5795 */
  border-top: 1px solid #dee2e6 !important;
}
.dds-border-right { /* danceit.css:5799 */
  border-right: 1px solid #dee2e6 !important;
}
.dds-border-bottom { /* danceit.css:5803 */
  border-bottom: 1px solid #dee2e6 !important;
}
.dds-border-left { /* danceit.css:5807 */
  border-left: 1px solid #dee2e6 !important;
}
.dds-border-0 { /* danceit.css:5811 */
  border: 0 !important;
}
.dds-border-top-0 { /* danceit.css:5815 */
  border-top: 0 !important;
}
.dds-border-right-0 { /* danceit.css:5819 */
  border-right: 0 !important;
}
.dds-border-bottom-0 { /* danceit.css:5823 */
  border-bottom: 0 !important;
}
.dds-border-left-0 { /* danceit.css:5827 */
  border-left: 0 !important;
}
.dds-border-primary { /* danceit.css:5831 */
  border-color: #2196f3 !important;
}
.dds-border-secondary { /* danceit.css:5835 */
  border-color: #6c757d !important;
}
.dds-border-success { /* danceit.css:5839 */
  border-color: #4caf50 !important;
}
.dds-border-info { /* danceit.css:5843 */
  border-color: #00bcd4 !important;
}
.dds-border-warning { /* danceit.css:5847 */
  border-color: #ffeb3b !important;
}
.dds-border-danger { /* danceit.css:5851 */
  border-color: #f44336 !important;
}
.dds-border-light { /* danceit.css:5855 */
  border-color: #f8f9fa !important;
}
.dds-border-dark { /* danceit.css:5859 */
  border-color: #343a40 !important;
}
.dds-border-white { /* danceit.css:5863 */
  border-color: #fff !important;
}
.dds-rounded { /* danceit.css:5867 */
  border-radius: .25rem !important;
}
.dds-rounded-top { /* danceit.css:5871 */
  border-top-left-radius: .25rem !important;
}
.dds-rounded-right,
.dds-rounded-top { /* danceit.css:5875 */
  border-top-right-radius: .25rem !important;
}
.dds-rounded-bottom,
.dds-rounded-right { /* danceit.css:5880 */
  border-bottom-right-radius: .25rem !important;
}
.dds-rounded-bottom,
.dds-rounded-left { /* danceit.css:5885 */
  border-bottom-left-radius: .25rem !important;
}
.dds-rounded-left { /* danceit.css:5890 */
  border-top-left-radius: .25rem !important;
}
.dds-rounded-circle { /* danceit.css:5894 */
  border-radius: 50% !important;
}
.dds-rounded-0 { /* danceit.css:5898 */
  border-radius: 0 !important;
}
.dds-clearfix:after { /* danceit.css:5902 */
  display: block;
  clear: both;
  content: "";
}
.dds-d-none { /* danceit.css:5908 */
  display: none !important;
}
.dds-d-inline { /* danceit.css:5912 */
  display: inline !important;
}
.dds-d-inline-block { /* danceit.css:5916 */
  display: inline-block !important;
}
.dds-d-block { /* danceit.css:5920 */
  display: block !important;
}
.dds-d-table { /* danceit.css:5924 */
  display: table !important;
}
.dds-d-table-row { /* danceit.css:5928 */
  display: table-row !important;
}
.dds-d-table-cell { /* danceit.css:5932 */
  display: table-cell !important;
}
.dds-d-flex { /* danceit.css:5936 */
  display: flex !important;
}
.dds-d-inline-flex { /* danceit.css:5940 */
  display: inline-flex !important;
}
@media (min-width: 576px) {
  .dds-d-sm-none { /* danceit.css:5945 */
    display: none !important;
  }
  .dds-d-sm-inline { /* danceit.css:5948 */
    display: inline !important;
  }
  .dds-d-sm-inline-block { /* danceit.css:5951 */
    display: inline-block !important;
  }
  .dds-d-sm-block { /* danceit.css:5954 */
    display: block !important;
  }
  .dds-d-sm-table { /* danceit.css:5957 */
    display: table !important;
  }
  .dds-d-sm-table-row { /* danceit.css:5960 */
    display: table-row !important;
  }
  .dds-d-sm-table-cell { /* danceit.css:5963 */
    display: table-cell !important;
  }
  .dds-d-sm-flex { /* danceit.css:5966 */
    display: flex !important;
  }
  .dds-d-sm-inline-flex { /* danceit.css:5969 */
    display: inline-flex !important;
  }
}
@media (min-width: 768px) {
  .dds-d-md-none { /* danceit.css:5975 */
    display: none !important;
  }
  .dds-d-md-inline { /* danceit.css:5978 */
    display: inline !important;
  }
  .dds-d-md-inline-block { /* danceit.css:5981 */
    display: inline-block !important;
  }
  .dds-d-md-block { /* danceit.css:5984 */
    display: block !important;
  }
  .dds-d-md-table { /* danceit.css:5987 */
    display: table !important;
  }
  .dds-d-md-table-row { /* danceit.css:5990 */
    display: table-row !important;
  }
  .dds-d-md-table-cell { /* danceit.css:5993 */
    display: table-cell !important;
  }
  .dds-d-md-flex { /* danceit.css:5996 */
    display: flex !important;
  }
  .dds-d-md-inline-flex { /* danceit.css:5999 */
    display: inline-flex !important;
  }
  .dds-d-lg-none { /* danceit.css:6005 */
    display: none !important;
  }
  .dds-d-lg-inline { /* danceit.css:6008 */
    display: inline !important;
  }
  .dds-d-lg-inline-block { /* danceit.css:6011 */
    display: inline-block !important;
  }
  .dds-d-lg-block { /* danceit.css:6014 */
    display: block !important;
  }
  .dds-d-lg-table { /* danceit.css:6017 */
    display: table !important;
  }
  .dds-d-lg-table-row { /* danceit.css:6020 */
    display: table-row !important;
  }
  .dds-d-lg-table-cell { /* danceit.css:6023 */
    display: table-cell !important;
  }
  .dds-d-lg-flex { /* danceit.css:6026 */
    display: flex !important;
  }
  .dds-d-lg-inline-flex { /* danceit.css:6029 */
    display: inline-flex !important;
  }
}
@media (min-width: 1200px) {
  .dds-d-xl-none { /* danceit.css:6035 */
    display: none !important;
  }
  .dds-d-xl-inline { /* danceit.css:6038 */
    display: inline !important;
  }
  .dds-d-xl-inline-block { /* danceit.css:6041 */
    display: inline-block !important;
  }
  .dds-d-xl-block { /* danceit.css:6044 */
    display: block !important;
  }
  .dds-d-xl-table { /* danceit.css:6047 */
    display: table !important;
  }
  .dds-d-xl-table-row { /* danceit.css:6050 */
    display: table-row !important;
  }
  .dds-d-xl-table-cell { /* danceit.css:6053 */
    display: table-cell !important;
  }
  .dds-d-xl-flex { /* danceit.css:6056 */
    display: flex !important;
  }
  .dds-d-xl-inline-flex { /* danceit.css:6059 */
    display: inline-flex !important;
  }
}
@media print {
  .dds-d-print-none { /* danceit.css:6065 */
    display: none !important;
  }
  .dds-d-print-inline { /* danceit.css:6068 */
    display: inline !important;
  }
  .dds-d-print-inline-block { /* danceit.css:6071 */
    display: inline-block !important;
  }
  .dds-d-print-block { /* danceit.css:6074 */
    display: block !important;
  }
  .dds-d-print-table { /* danceit.css:6077 */
    display: table !important;
  }
  .dds-d-print-table-row { /* danceit.css:6080 */
    display: table-row !important;
  }
  .dds-d-print-table-cell { /* danceit.css:6083 */
    display: table-cell !important;
  }
  .dds-d-print-flex { /* danceit.css:6086 */
    display: flex !important;
  }
  .dds-d-print-inline-flex { /* danceit.css:6089 */
    display: inline-flex !important;
  }
}
.dds-embed-responsive { /* danceit.css:6097 */
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.dds-embed-responsive:before { /* danceit.css:6105 */
  display: block;
  content: "";
}
.dds-embed-responsive .dds-embed-responsive-item,
.dds-embed-responsive embed,
.dds-embed-responsive iframe,
.dds-embed-responsive object,
.dds-embed-responsive video { /* danceit.css:6110 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.dds-embed-responsive-21by9:before { /* danceit.css:6124 */
  padding-top: 42.857143%;
}
.dds-embed-responsive-16by9:before { /* danceit.css:6128 */
  padding-top: 56.25%;
}
.dds-embed-responsive-4by3:before { /* danceit.css:6132 */
  padding-top: 75%;
}
.dds-embed-responsive-1by1:before { /* danceit.css:6136 */
  padding-top: 100%;
}
.dds-flex-row { /* danceit.css:6140 */
  flex-direction: row !important;
}
.dds-flex-column { /* danceit.css:6144 */
  flex-direction: column !important;
}
.dds-flex-row-reverse { /* danceit.css:6148 */
  flex-direction: row-reverse !important;
}
.dds-flex-column-reverse { /* danceit.css:6152 */
  flex-direction: column-reverse !important;
}
.dds-flex-wrap { /* danceit.css:6156 */
  flex-wrap: wrap !important;
}
.dds-flex-nowrap { /* danceit.css:6160 */
  flex-wrap: nowrap !important;
}
.dds-flex-wrap-reverse { /* danceit.css:6164 */
  flex-wrap: wrap-reverse !important;
}
.dds-justify-content-start { /* danceit.css:6168 */
  justify-content: flex-start !important;
}
.dds-justify-content-end { /* danceit.css:6172 */
  justify-content: flex-end !important;
}
.dds-justify-content-center { /* danceit.css:6176 */
  justify-content: center !important;
}
.dds-justify-content-between { /* danceit.css:6180 */
  justify-content: space-between !important;
}
.dds-justify-content-around { /* danceit.css:6184 */
  justify-content: space-around !important;
}
.dds-align-items-start { /* danceit.css:6188 */
  align-items: flex-start !important;
}
.dds-align-items-end { /* danceit.css:6192 */
  align-items: flex-end !important;
}
.dds-align-items-center { /* danceit.css:6196 */
  align-items: center !important;
}
.dds-align-items-baseline { /* danceit.css:6200 */
  align-items: baseline !important;
}
.dds-align-items-stretch { /* danceit.css:6204 */
  align-items: stretch !important;
}
.dds-align-content-start { /* danceit.css:6208 */
  align-content: flex-start !important;
}
.dds-align-content-end { /* danceit.css:6212 */
  align-content: flex-end !important;
}
.dds-align-content-center { /* danceit.css:6216 */
  align-content: center !important;
}
.dds-align-content-between { /* danceit.css:6220 */
  align-content: space-between !important;
}
.dds-align-content-around { /* danceit.css:6224 */
  align-content: space-around !important;
}
.dds-align-content-stretch { /* danceit.css:6228 */
  align-content: stretch !important;
}
.dds-align-self-auto { /* danceit.css:6232 */
  align-self: auto !important;
}
.dds-align-self-start { /* danceit.css:6236 */
  align-self: flex-start !important;
}
.dds-align-self-end { /* danceit.css:6240 */
  align-self: flex-end !important;
}
.dds-align-self-center { /* danceit.css:6244 */
  align-self: center !important;
}
.dds-align-self-baseline { /* danceit.css:6248 */
  align-self: baseline !important;
}
.dds-align-self-stretch { /* danceit.css:6252 */
  align-self: stretch !important;
}
@media (min-width: 576px) {
  .dds-flex-sm-row { /* danceit.css:6257 */
    flex-direction: row !important;
  }
  .dds-flex-sm-column { /* danceit.css:6260 */
    flex-direction: column !important;
  }
  .dds-flex-sm-row-reverse { /* danceit.css:6263 */
    flex-direction: row-reverse !important;
  }
  .dds-flex-sm-column-reverse { /* danceit.css:6266 */
    flex-direction: column-reverse !important;
  }
  .dds-flex-sm-wrap { /* danceit.css:6269 */
    flex-wrap: wrap !important;
  }
  .dds-flex-sm-nowrap { /* danceit.css:6272 */
    flex-wrap: nowrap !important;
  }
  .dds-flex-sm-wrap-reverse { /* danceit.css:6275 */
    flex-wrap: wrap-reverse !important;
  }
  .dds-justify-content-sm-start { /* danceit.css:6278 */
    justify-content: flex-start !important;
  }
  .dds-justify-content-sm-end { /* danceit.css:6281 */
    justify-content: flex-end !important;
  }
  .dds-justify-content-sm-center { /* danceit.css:6284 */
    justify-content: center !important;
  }
  .dds-justify-content-sm-between { /* danceit.css:6287 */
    justify-content: space-between !important;
  }
  .dds-justify-content-sm-around { /* danceit.css:6290 */
    justify-content: space-around !important;
  }
  .dds-align-items-sm-start { /* danceit.css:6293 */
    align-items: flex-start !important;
  }
  .dds-align-items-sm-end { /* danceit.css:6296 */
    align-items: flex-end !important;
  }
  .dds-align-items-sm-center { /* danceit.css:6299 */
    align-items: center !important;
  }
  .dds-align-items-sm-baseline { /* danceit.css:6302 */
    align-items: baseline !important;
  }
  .dds-align-items-sm-stretch { /* danceit.css:6305 */
    align-items: stretch !important;
  }
  .dds-align-content-sm-start { /* danceit.css:6308 */
    align-content: flex-start !important;
  }
  .dds-align-content-sm-end { /* danceit.css:6311 */
    align-content: flex-end !important;
  }
  .dds-align-content-sm-center { /* danceit.css:6314 */
    align-content: center !important;
  }
  .dds-align-content-sm-between { /* danceit.css:6317 */
    align-content: space-between !important;
  }
  .dds-align-content-sm-around { /* danceit.css:6320 */
    align-content: space-around !important;
  }
  .dds-align-content-sm-stretch { /* danceit.css:6323 */
    align-content: stretch !important;
  }
  .dds-align-self-sm-auto { /* danceit.css:6326 */
    align-self: auto !important;
  }
  .dds-align-self-sm-start { /* danceit.css:6329 */
    align-self: flex-start !important;
  }
  .dds-align-self-sm-end { /* danceit.css:6332 */
    align-self: flex-end !important;
  }
  .dds-align-self-sm-center { /* danceit.css:6335 */
    align-self: center !important;
  }
  .dds-align-self-sm-baseline { /* danceit.css:6338 */
    align-self: baseline !important;
  }
  .dds-align-self-sm-stretch { /* danceit.css:6341 */
    align-self: stretch !important;
  }
}
@media (min-width: 768px) {
  .dds-flex-md-row { /* danceit.css:6347 */
    flex-direction: row !important;
  }
  .dds-flex-md-column { /* danceit.css:6350 */
    flex-direction: column !important;
  }
  .dds-flex-md-row-reverse { /* danceit.css:6353 */
    flex-direction: row-reverse !important;
  }
  .dds-flex-md-column-reverse { /* danceit.css:6356 */
    flex-direction: column-reverse !important;
  }
  .dds-flex-md-wrap { /* danceit.css:6359 */
    flex-wrap: wrap !important;
  }
  .dds-flex-md-nowrap { /* danceit.css:6362 */
    flex-wrap: nowrap !important;
  }
  .dds-flex-md-wrap-reverse { /* danceit.css:6365 */
    flex-wrap: wrap-reverse !important;
  }
  .dds-justify-content-md-start { /* danceit.css:6368 */
    justify-content: flex-start !important;
  }
  .dds-justify-content-md-end { /* danceit.css:6371 */
    justify-content: flex-end !important;
  }
  .dds-justify-content-md-center { /* danceit.css:6374 */
    justify-content: center !important;
  }
  .dds-justify-content-md-between { /* danceit.css:6377 */
    justify-content: space-between !important;
  }
  .dds-justify-content-md-around { /* danceit.css:6380 */
    justify-content: space-around !important;
  }
  .dds-align-items-md-start { /* danceit.css:6383 */
    align-items: flex-start !important;
  }
  .dds-align-items-md-end { /* danceit.css:6386 */
    align-items: flex-end !important;
  }
  .dds-align-items-md-center { /* danceit.css:6389 */
    align-items: center !important;
  }
  .dds-align-items-md-baseline { /* danceit.css:6392 */
    align-items: baseline !important;
  }
  .dds-align-items-md-stretch { /* danceit.css:6395 */
    align-items: stretch !important;
  }
  .dds-align-content-md-start { /* danceit.css:6398 */
    align-content: flex-start !important;
  }
  .dds-align-content-md-end { /* danceit.css:6401 */
    align-content: flex-end !important;
  }
  .dds-align-content-md-center { /* danceit.css:6404 */
    align-content: center !important;
  }
  .dds-align-content-md-between { /* danceit.css:6407 */
    align-content: space-between !important;
  }
  .dds-align-content-md-around { /* danceit.css:6410 */
    align-content: space-around !important;
  }
  .dds-align-content-md-stretch { /* danceit.css:6413 */
    align-content: stretch !important;
  }
  .dds-align-self-md-auto { /* danceit.css:6416 */
    align-self: auto !important;
  }
  .dds-align-self-md-start { /* danceit.css:6419 */
    align-self: flex-start !important;
  }
  .dds-align-self-md-end { /* danceit.css:6422 */
    align-self: flex-end !important;
  }
  .dds-align-self-md-center { /* danceit.css:6425 */
    align-self: center !important;
  }
  .dds-align-self-md-baseline { /* danceit.css:6428 */
    align-self: baseline !important;
  }
  .dds-align-self-md-stretch { /* danceit.css:6431 */
    align-self: stretch !important;
  }
  .dds-flex-lg-row { /* danceit.css:6437 */
    flex-direction: row !important;
  }
  .dds-flex-lg-column { /* danceit.css:6440 */
    flex-direction: column !important;
  }
  .dds-flex-lg-row-reverse { /* danceit.css:6443 */
    flex-direction: row-reverse !important;
  }
  .dds-flex-lg-column-reverse { /* danceit.css:6446 */
    flex-direction: column-reverse !important;
  }
  .dds-flex-lg-wrap { /* danceit.css:6449 */
    flex-wrap: wrap !important;
  }
  .dds-flex-lg-nowrap { /* danceit.css:6452 */
    flex-wrap: nowrap !important;
  }
  .dds-flex-lg-wrap-reverse { /* danceit.css:6455 */
    flex-wrap: wrap-reverse !important;
  }
  .dds-justify-content-lg-start { /* danceit.css:6458 */
    justify-content: flex-start !important;
  }
  .dds-justify-content-lg-end { /* danceit.css:6461 */
    justify-content: flex-end !important;
  }
  .dds-justify-content-lg-center { /* danceit.css:6464 */
    justify-content: center !important;
  }
  .dds-justify-content-lg-between { /* danceit.css:6467 */
    justify-content: space-between !important;
  }
  .dds-justify-content-lg-around { /* danceit.css:6470 */
    justify-content: space-around !important;
  }
  .dds-align-items-lg-start { /* danceit.css:6473 */
    align-items: flex-start !important;
  }
  .dds-align-items-lg-end { /* danceit.css:6476 */
    align-items: flex-end !important;
  }
  .dds-align-items-lg-center { /* danceit.css:6479 */
    align-items: center !important;
  }
  .dds-align-items-lg-baseline { /* danceit.css:6482 */
    align-items: baseline !important;
  }
  .dds-align-items-lg-stretch { /* danceit.css:6485 */
    align-items: stretch !important;
  }
  .dds-align-content-lg-start { /* danceit.css:6488 */
    align-content: flex-start !important;
  }
  .dds-align-content-lg-end { /* danceit.css:6491 */
    align-content: flex-end !important;
  }
  .dds-align-content-lg-center { /* danceit.css:6494 */
    align-content: center !important;
  }
  .dds-align-content-lg-between { /* danceit.css:6497 */
    align-content: space-between !important;
  }
  .dds-align-content-lg-around { /* danceit.css:6500 */
    align-content: space-around !important;
  }
  .dds-align-content-lg-stretch { /* danceit.css:6503 */
    align-content: stretch !important;
  }
  .dds-align-self-lg-auto { /* danceit.css:6506 */
    align-self: auto !important;
  }
  .dds-align-self-lg-start { /* danceit.css:6509 */
    align-self: flex-start !important;
  }
  .dds-align-self-lg-end { /* danceit.css:6512 */
    align-self: flex-end !important;
  }
  .dds-align-self-lg-center { /* danceit.css:6515 */
    align-self: center !important;
  }
  .dds-align-self-lg-baseline { /* danceit.css:6518 */
    align-self: baseline !important;
  }
  .dds-align-self-lg-stretch { /* danceit.css:6521 */
    align-self: stretch !important;
  }
}
@media (min-width: 1200px) {
  .dds-flex-xl-row { /* danceit.css:6527 */
    flex-direction: row !important;
  }
  .dds-flex-xl-column { /* danceit.css:6530 */
    flex-direction: column !important;
  }
  .dds-flex-xl-row-reverse { /* danceit.css:6533 */
    flex-direction: row-reverse !important;
  }
  .dds-flex-xl-column-reverse { /* danceit.css:6536 */
    flex-direction: column-reverse !important;
  }
  .dds-flex-xl-wrap { /* danceit.css:6539 */
    flex-wrap: wrap !important;
  }
  .dds-flex-xl-nowrap { /* danceit.css:6542 */
    flex-wrap: nowrap !important;
  }
  .dds-flex-xl-wrap-reverse { /* danceit.css:6545 */
    flex-wrap: wrap-reverse !important;
  }
  .dds-justify-content-xl-start { /* danceit.css:6548 */
    justify-content: flex-start !important;
  }
  .dds-justify-content-xl-end { /* danceit.css:6551 */
    justify-content: flex-end !important;
  }
  .dds-justify-content-xl-center { /* danceit.css:6554 */
    justify-content: center !important;
  }
  .dds-justify-content-xl-between { /* danceit.css:6557 */
    justify-content: space-between !important;
  }
  .dds-justify-content-xl-around { /* danceit.css:6560 */
    justify-content: space-around !important;
  }
  .dds-align-items-xl-start { /* danceit.css:6563 */
    align-items: flex-start !important;
  }
  .dds-align-items-xl-end { /* danceit.css:6566 */
    align-items: flex-end !important;
  }
  .dds-align-items-xl-center { /* danceit.css:6569 */
    align-items: center !important;
  }
  .dds-align-items-xl-baseline { /* danceit.css:6572 */
    align-items: baseline !important;
  }
  .dds-align-items-xl-stretch { /* danceit.css:6575 */
    align-items: stretch !important;
  }
  .dds-align-content-xl-start { /* danceit.css:6578 */
    align-content: flex-start !important;
  }
  .dds-align-content-xl-end { /* danceit.css:6581 */
    align-content: flex-end !important;
  }
  .dds-align-content-xl-center { /* danceit.css:6584 */
    align-content: center !important;
  }
  .dds-align-content-xl-between { /* danceit.css:6587 */
    align-content: space-between !important;
  }
  .dds-align-content-xl-around { /* danceit.css:6590 */
    align-content: space-around !important;
  }
  .dds-align-content-xl-stretch { /* danceit.css:6593 */
    align-content: stretch !important;
  }
  .dds-align-self-xl-auto { /* danceit.css:6596 */
    align-self: auto !important;
  }
  .dds-align-self-xl-start { /* danceit.css:6599 */
    align-self: flex-start !important;
  }
  .dds-align-self-xl-end { /* danceit.css:6602 */
    align-self: flex-end !important;
  }
  .dds-align-self-xl-center { /* danceit.css:6605 */
    align-self: center !important;
  }
  .dds-align-self-xl-baseline { /* danceit.css:6608 */
    align-self: baseline !important;
  }
  .dds-align-self-xl-stretch { /* danceit.css:6611 */
    align-self: stretch !important;
  }
}
.dds-float-left { /* danceit.css:6616 */
  float: left !important;
}
.dds-float-right { /* danceit.css:6620 */
  float: right !important;
}
.dds-float-none { /* danceit.css:6624 */
  float: none !important;
}
@media (min-width: 576px) {
  .dds-float-sm-left { /* danceit.css:6629 */
    float: left !important;
  }
  .dds-float-sm-right { /* danceit.css:6632 */
    float: right !important;
  }
  .dds-float-sm-none { /* danceit.css:6635 */
    float: none !important;
  }
}
@media (min-width: 768px) {
  .dds-float-md-left { /* danceit.css:6641 */
    float: left !important;
  }
  .dds-float-md-right { /* danceit.css:6644 */
    float: right !important;
  }
  .dds-float-md-none { /* danceit.css:6647 */
    float: none !important;
  }
  .dds-float-lg-left { /* danceit.css:6653 */
    float: left !important;
  }
  .dds-float-lg-right { /* danceit.css:6656 */
    float: right !important;
  }
  .dds-float-lg-none { /* danceit.css:6659 */
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .dds-float-xl-left { /* danceit.css:6665 */
    float: left !important;
  }
  .dds-float-xl-right { /* danceit.css:6668 */
    float: right !important;
  }
  .dds-float-xl-none { /* danceit.css:6671 */
    float: none !important;
  }
}
.dds-position-static { /* danceit.css:6676 */
  position: static !important;
}
.dds-position-relative { /* danceit.css:6680 */
  position: relative !important;
}
.dds-position-absolute { /* danceit.css:6684 */
  position: absolute !important;
}
.dds-position-fixed { /* danceit.css:6688 */
  position: fixed !important;
}
.dds-position-sticky { /* danceit.css:6692 */
  position: sticky !important;
}
.dds-fixed-top { /* danceit.css:6696 */
  top: 0;
}
.dds-fixed-bottom,
.dds-fixed-top { /* danceit.css:6700 */
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}
.dds-fixed-bottom { /* danceit.css:6708 */
  bottom: 0;
}
@supports (position:sticky) {
  .dds-sticky-top { /* danceit.css:6713 */
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}
.dds-sr-only { /* danceit.css:6732 + 22530 */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
  clip-path: inset(50%);
}
.dds-sr-only-focusable:active,
.dds-sr-only-focusable:focus { /* danceit.css:6737 */
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  clip-path: none;
}
.dds-w-25 { /* danceit.css:6748 */
  width: 25% !important;
}
.dds-w-50 { /* danceit.css:6752 */
  width: 50% !important;
}
.dds-w-75 { /* danceit.css:6756 */
  width: 75% !important;
}
.dds-w-100 { /* danceit.css:6760 */
  width: 100% !important;
}
.dds-h-25 { /* danceit.css:6764 */
  height: 25% !important;
}
.dds-h-50 { /* danceit.css:6768 */
  height: 50% !important;
}
.dds-h-75 { /* danceit.css:6772 */
  height: 75% !important;
}
.dds-h-100 { /* danceit.css:6776 */
  height: 100% !important;
}
.dds-mw-100 { /* danceit.css:6780 */
  max-width: 100% !important;
}
.dds-mh-100 { /* danceit.css:6784 */
  max-height: 100% !important;
}
.dds-m-0 { /* danceit.css:6788 */
  margin: 0 !important;
}
.dds-mt-0,
.dds-my-0 { /* danceit.css:6792 */
  margin-top: 0 !important;
}
.dds-mr-0,
.dds-mx-0 { /* danceit.css:6797 */
  margin-right: 0 !important;
}
.dds-mb-0,
.dds-my-0 { /* danceit.css:6802 */
  margin-bottom: 0 !important;
}
.dds-ml-0,
.dds-mx-0 { /* danceit.css:6807 */
  margin-left: 0 !important;
}
.dds-m-1 { /* danceit.css:6812 */
  margin: .25rem !important;
}
.dds-mt-1,
.dds-my-1 { /* danceit.css:6816 */
  margin-top: .25rem !important;
}
.dds-mr-1,
.dds-mx-1 { /* danceit.css:6821 */
  margin-right: .25rem !important;
}
.dds-mb-1,
.dds-my-1 { /* danceit.css:6826 */
  margin-bottom: .25rem !important;
}
.dds-ml-1,
.dds-mx-1 { /* danceit.css:6831 */
  margin-left: .25rem !important;
}
.dds-m-2 { /* danceit.css:6836 */
  margin: .5rem !important;
}
.dds-mt-2,
.dds-my-2 { /* danceit.css:6840 */
  margin-top: .5rem !important;
}
.dds-mr-2,
.dds-mx-2 { /* danceit.css:6845 */
  margin-right: .5rem !important;
}
.dds-mb-2,
.dds-my-2 { /* danceit.css:6850 */
  margin-bottom: .5rem !important;
}
.dds-ml-2,
.dds-mx-2 { /* danceit.css:6855 */
  margin-left: .5rem !important;
}
.dds-m-3 { /* danceit.css:6860 */
  margin: 1rem !important;
}
.dds-mt-3,
.dds-my-3 { /* danceit.css:6864 */
  margin-top: 1rem !important;
}
.dds-mr-3,
.dds-mx-3 { /* danceit.css:6869 */
  margin-right: 1rem !important;
}
.dds-mb-3,
.dds-my-3 { /* danceit.css:6874 */
  margin-bottom: 1rem !important;
}
.dds-ml-3,
.dds-mx-3 { /* danceit.css:6879 */
  margin-left: 1rem !important;
}
.dds-m-4 { /* danceit.css:6884 */
  margin: 1.5rem !important;
}
.dds-mt-4,
.dds-my-4 { /* danceit.css:6888 */
  margin-top: 1.5rem !important;
}
.dds-mr-4,
.dds-mx-4 { /* danceit.css:6893 */
  margin-right: 1.5rem !important;
}
.dds-mb-4,
.dds-my-4 { /* danceit.css:6898 */
  margin-bottom: 1.5rem !important;
}
.dds-ml-4,
.dds-mx-4 { /* danceit.css:6903 */
  margin-left: 1.5rem !important;
}
.dds-m-5 { /* danceit.css:6908 */
  margin: 3rem !important;
}
.dds-mt-5,
.dds-my-5 { /* danceit.css:6912 */
  margin-top: 3rem !important;
}
.dds-mr-5,
.dds-mx-5 { /* danceit.css:6917 */
  margin-right: 3rem !important;
}
.dds-mb-5,
.dds-my-5 { /* danceit.css:6922 */
  margin-bottom: 3rem !important;
}
.dds-ml-5,
.dds-mx-5 { /* danceit.css:6927 */
  margin-left: 3rem !important;
}
.dds-p-0 { /* danceit.css:6932 */
  padding: 0 !important;
}
.dds-pt-0,
.dds-py-0 { /* danceit.css:6936 */
  padding-top: 0 !important;
}
.dds-pr-0,
.dds-px-0 { /* danceit.css:6941 */
  padding-right: 0 !important;
}
.dds-pb-0,
.dds-py-0 { /* danceit.css:6946 */
  padding-bottom: 0 !important;
}
.dds-pl-0,
.dds-px-0 { /* danceit.css:6951 */
  padding-left: 0 !important;
}
.dds-p-1 { /* danceit.css:6956 */
  padding: .25rem !important;
}
.dds-pt-1,
.dds-py-1 { /* danceit.css:6960 */
  padding-top: .25rem !important;
}
.dds-pr-1,
.dds-px-1 { /* danceit.css:6965 */
  padding-right: .25rem !important;
}
.dds-pb-1,
.dds-py-1 { /* danceit.css:6970 */
  padding-bottom: .25rem !important;
}
.dds-pl-1,
.dds-px-1 { /* danceit.css:6975 */
  padding-left: .25rem !important;
}
.dds-p-2 { /* danceit.css:6980 */
  padding: .5rem !important;
}
.dds-pt-2,
.dds-py-2 { /* danceit.css:6984 */
  padding-top: .5rem !important;
}
.dds-pr-2,
.dds-px-2 { /* danceit.css:6989 */
  padding-right: .5rem !important;
}
.dds-pb-2,
.dds-py-2 { /* danceit.css:6994 */
  padding-bottom: .5rem !important;
}
.dds-pl-2,
.dds-px-2 { /* danceit.css:6999 */
  padding-left: .5rem !important;
}
.dds-p-3 { /* danceit.css:7004 */
  padding: 1rem !important;
}
.dds-pt-3,
.dds-py-3 { /* danceit.css:7008 */
  padding-top: 1rem !important;
}
.dds-pr-3,
.dds-px-3 { /* danceit.css:7013 */
  padding-right: 1rem !important;
}
.dds-pb-3,
.dds-py-3 { /* danceit.css:7018 */
  padding-bottom: 1rem !important;
}
.dds-pl-3,
.dds-px-3 { /* danceit.css:7023 */
  padding-left: 1rem !important;
}
.dds-p-4 { /* danceit.css:7028 */
  padding: 1.5rem !important;
}
.dds-pt-4,
.dds-py-4 { /* danceit.css:7032 */
  padding-top: 1.5rem !important;
}
.dds-pr-4,
.dds-px-4 { /* danceit.css:7037 */
  padding-right: 1.5rem !important;
}
.dds-pb-4,
.dds-py-4 { /* danceit.css:7042 */
  padding-bottom: 1.5rem !important;
}
.dds-pl-4,
.dds-px-4 { /* danceit.css:7047 */
  padding-left: 1.5rem !important;
}
.dds-p-5 { /* danceit.css:7052 */
  padding: 3rem !important;
}
.dds-pt-5,
.dds-py-5 { /* danceit.css:7056 */
  padding-top: 3rem !important;
}
.dds-pr-5,
.dds-px-5 { /* danceit.css:7061 */
  padding-right: 3rem !important;
}
.dds-pb-5,
.dds-py-5 { /* danceit.css:7066 */
  padding-bottom: 3rem !important;
}
.dds-pl-5,
.dds-px-5 { /* danceit.css:7071 */
  padding-left: 3rem !important;
}
.dds-m-auto { /* danceit.css:7076 */
  margin: auto !important;
}
.dds-mt-auto,
.dds-my-auto { /* danceit.css:7080 */
  margin-top: auto !important;
}
.dds-mr-auto,
.dds-mx-auto { /* danceit.css:7085 */
  margin-right: auto !important;
}
.dds-mb-auto,
.dds-my-auto { /* danceit.css:7090 */
  margin-bottom: auto !important;
}
.dds-ml-auto,
.dds-mx-auto { /* danceit.css:7095 */
  margin-left: auto !important;
}
@media (min-width: 576px) {
  .dds-m-sm-0 { /* danceit.css:7101 */
    margin: 0 !important;
  }
  .dds-mt-sm-0,
  .dds-my-sm-0 { /* danceit.css:7104 */
    margin-top: 0 !important;
  }
  .dds-mr-sm-0,
  .dds-mx-sm-0 { /* danceit.css:7108 */
    margin-right: 0 !important;
  }
  .dds-mb-sm-0,
  .dds-my-sm-0 { /* danceit.css:7112 */
    margin-bottom: 0 !important;
  }
  .dds-ml-sm-0,
  .dds-mx-sm-0 { /* danceit.css:7116 */
    margin-left: 0 !important;
  }
  .dds-m-sm-1 { /* danceit.css:7120 */
    margin: .25rem !important;
  }
  .dds-mt-sm-1,
  .dds-my-sm-1 { /* danceit.css:7123 */
    margin-top: .25rem !important;
  }
  .dds-mr-sm-1,
  .dds-mx-sm-1 { /* danceit.css:7127 */
    margin-right: .25rem !important;
  }
  .dds-mb-sm-1,
  .dds-my-sm-1 { /* danceit.css:7131 */
    margin-bottom: .25rem !important;
  }
  .dds-ml-sm-1,
  .dds-mx-sm-1 { /* danceit.css:7135 */
    margin-left: .25rem !important;
  }
  .dds-m-sm-2 { /* danceit.css:7139 */
    margin: .5rem !important;
  }
  .dds-mt-sm-2,
  .dds-my-sm-2 { /* danceit.css:7142 */
    margin-top: .5rem !important;
  }
  .dds-mr-sm-2,
  .dds-mx-sm-2 { /* danceit.css:7146 */
    margin-right: .5rem !important;
  }
  .dds-mb-sm-2,
  .dds-my-sm-2 { /* danceit.css:7150 */
    margin-bottom: .5rem !important;
  }
  .dds-ml-sm-2,
  .dds-mx-sm-2 { /* danceit.css:7154 */
    margin-left: .5rem !important;
  }
  .dds-m-sm-3 { /* danceit.css:7158 */
    margin: 1rem !important;
  }
  .dds-mt-sm-3,
  .dds-my-sm-3 { /* danceit.css:7161 */
    margin-top: 1rem !important;
  }
  .dds-mr-sm-3,
  .dds-mx-sm-3 { /* danceit.css:7165 */
    margin-right: 1rem !important;
  }
  .dds-mb-sm-3,
  .dds-my-sm-3 { /* danceit.css:7169 */
    margin-bottom: 1rem !important;
  }
  .dds-ml-sm-3,
  .dds-mx-sm-3 { /* danceit.css:7173 */
    margin-left: 1rem !important;
  }
  .dds-m-sm-4 { /* danceit.css:7177 */
    margin: 1.5rem !important;
  }
  .dds-mt-sm-4,
  .dds-my-sm-4 { /* danceit.css:7180 */
    margin-top: 1.5rem !important;
  }
  .dds-mr-sm-4,
  .dds-mx-sm-4 { /* danceit.css:7184 */
    margin-right: 1.5rem !important;
  }
  .dds-mb-sm-4,
  .dds-my-sm-4 { /* danceit.css:7188 */
    margin-bottom: 1.5rem !important;
  }
  .dds-ml-sm-4,
  .dds-mx-sm-4 { /* danceit.css:7192 */
    margin-left: 1.5rem !important;
  }
  .dds-m-sm-5 { /* danceit.css:7196 */
    margin: 3rem !important;
  }
  .dds-mt-sm-5,
  .dds-my-sm-5 { /* danceit.css:7199 */
    margin-top: 3rem !important;
  }
  .dds-mr-sm-5,
  .dds-mx-sm-5 { /* danceit.css:7203 */
    margin-right: 3rem !important;
  }
  .dds-mb-sm-5,
  .dds-my-sm-5 { /* danceit.css:7207 */
    margin-bottom: 3rem !important;
  }
  .dds-ml-sm-5,
  .dds-mx-sm-5 { /* danceit.css:7211 */
    margin-left: 3rem !important;
  }
  .dds-p-sm-0 { /* danceit.css:7215 */
    padding: 0 !important;
  }
  .dds-pt-sm-0,
  .dds-py-sm-0 { /* danceit.css:7218 */
    padding-top: 0 !important;
  }
  .dds-pr-sm-0,
  .dds-px-sm-0 { /* danceit.css:7222 */
    padding-right: 0 !important;
  }
  .dds-pb-sm-0,
  .dds-py-sm-0 { /* danceit.css:7226 */
    padding-bottom: 0 !important;
  }
  .dds-pl-sm-0,
  .dds-px-sm-0 { /* danceit.css:7230 */
    padding-left: 0 !important;
  }
  .dds-p-sm-1 { /* danceit.css:7234 */
    padding: .25rem !important;
  }
  .dds-pt-sm-1,
  .dds-py-sm-1 { /* danceit.css:7237 */
    padding-top: .25rem !important;
  }
  .dds-pr-sm-1,
  .dds-px-sm-1 { /* danceit.css:7241 */
    padding-right: .25rem !important;
  }
  .dds-pb-sm-1,
  .dds-py-sm-1 { /* danceit.css:7245 */
    padding-bottom: .25rem !important;
  }
  .dds-pl-sm-1,
  .dds-px-sm-1 { /* danceit.css:7249 */
    padding-left: .25rem !important;
  }
  .dds-p-sm-2 { /* danceit.css:7253 */
    padding: .5rem !important;
  }
  .dds-pt-sm-2,
  .dds-py-sm-2 { /* danceit.css:7256 */
    padding-top: .5rem !important;
  }
  .dds-pr-sm-2,
  .dds-px-sm-2 { /* danceit.css:7260 */
    padding-right: .5rem !important;
  }
  .dds-pb-sm-2,
  .dds-py-sm-2 { /* danceit.css:7264 */
    padding-bottom: .5rem !important;
  }
  .dds-pl-sm-2,
  .dds-px-sm-2 { /* danceit.css:7268 */
    padding-left: .5rem !important;
  }
  .dds-p-sm-3 { /* danceit.css:7272 */
    padding: 1rem !important;
  }
  .dds-pt-sm-3,
  .dds-py-sm-3 { /* danceit.css:7275 */
    padding-top: 1rem !important;
  }
  .dds-pr-sm-3,
  .dds-px-sm-3 { /* danceit.css:7279 */
    padding-right: 1rem !important;
  }
  .dds-pb-sm-3,
  .dds-py-sm-3 { /* danceit.css:7283 */
    padding-bottom: 1rem !important;
  }
  .dds-pl-sm-3,
  .dds-px-sm-3 { /* danceit.css:7287 */
    padding-left: 1rem !important;
  }
  .dds-p-sm-4 { /* danceit.css:7291 */
    padding: 1.5rem !important;
  }
  .dds-pt-sm-4,
  .dds-py-sm-4 { /* danceit.css:7294 */
    padding-top: 1.5rem !important;
  }
  .dds-pr-sm-4,
  .dds-px-sm-4 { /* danceit.css:7298 */
    padding-right: 1.5rem !important;
  }
  .dds-pb-sm-4,
  .dds-py-sm-4 { /* danceit.css:7302 */
    padding-bottom: 1.5rem !important;
  }
  .dds-pl-sm-4,
  .dds-px-sm-4 { /* danceit.css:7306 */
    padding-left: 1.5rem !important;
  }
  .dds-p-sm-5 { /* danceit.css:7310 */
    padding: 3rem !important;
  }
  .dds-pt-sm-5,
  .dds-py-sm-5 { /* danceit.css:7313 */
    padding-top: 3rem !important;
  }
  .dds-pr-sm-5,
  .dds-px-sm-5 { /* danceit.css:7317 */
    padding-right: 3rem !important;
  }
  .dds-pb-sm-5,
  .dds-py-sm-5 { /* danceit.css:7321 */
    padding-bottom: 3rem !important;
  }
  .dds-pl-sm-5,
  .dds-px-sm-5 { /* danceit.css:7325 */
    padding-left: 3rem !important;
  }
  .dds-m-sm-auto { /* danceit.css:7329 */
    margin: auto !important;
  }
  .dds-mt-sm-auto,
  .dds-my-sm-auto { /* danceit.css:7332 */
    margin-top: auto !important;
  }
  .dds-mr-sm-auto,
  .dds-mx-sm-auto { /* danceit.css:7336 */
    margin-right: auto !important;
  }
  .dds-mb-sm-auto,
  .dds-my-sm-auto { /* danceit.css:7340 */
    margin-bottom: auto !important;
  }
  .dds-ml-sm-auto,
  .dds-mx-sm-auto { /* danceit.css:7344 */
    margin-left: auto !important;
  }
}
@media (min-width: 768px) {
  .dds-m-md-0 { /* danceit.css:7351 */
    margin: 0 !important;
  }
  .dds-mt-md-0,
  .dds-my-md-0 { /* danceit.css:7354 */
    margin-top: 0 !important;
  }
  .dds-mr-md-0,
  .dds-mx-md-0 { /* danceit.css:7358 */
    margin-right: 0 !important;
  }
  .dds-mb-md-0,
  .dds-my-md-0 { /* danceit.css:7362 */
    margin-bottom: 0 !important;
  }
  .dds-ml-md-0,
  .dds-mx-md-0 { /* danceit.css:7366 */
    margin-left: 0 !important;
  }
  .dds-m-md-1 { /* danceit.css:7370 */
    margin: .25rem !important;
  }
  .dds-mt-md-1,
  .dds-my-md-1 { /* danceit.css:7373 */
    margin-top: .25rem !important;
  }
  .dds-mr-md-1,
  .dds-mx-md-1 { /* danceit.css:7377 */
    margin-right: .25rem !important;
  }
  .dds-mb-md-1,
  .dds-my-md-1 { /* danceit.css:7381 */
    margin-bottom: .25rem !important;
  }
  .dds-ml-md-1,
  .dds-mx-md-1 { /* danceit.css:7385 */
    margin-left: .25rem !important;
  }
  .dds-m-md-2 { /* danceit.css:7389 */
    margin: .5rem !important;
  }
  .dds-mt-md-2,
  .dds-my-md-2 { /* danceit.css:7392 */
    margin-top: .5rem !important;
  }
  .dds-mr-md-2,
  .dds-mx-md-2 { /* danceit.css:7396 */
    margin-right: .5rem !important;
  }
  .dds-mb-md-2,
  .dds-my-md-2 { /* danceit.css:7400 */
    margin-bottom: .5rem !important;
  }
  .dds-ml-md-2,
  .dds-mx-md-2 { /* danceit.css:7404 */
    margin-left: .5rem !important;
  }
  .dds-m-md-3 { /* danceit.css:7408 */
    margin: 1rem !important;
  }
  .dds-mt-md-3,
  .dds-my-md-3 { /* danceit.css:7411 */
    margin-top: 1rem !important;
  }
  .dds-mr-md-3,
  .dds-mx-md-3 { /* danceit.css:7415 */
    margin-right: 1rem !important;
  }
  .dds-mb-md-3,
  .dds-my-md-3 { /* danceit.css:7419 */
    margin-bottom: 1rem !important;
  }
  .dds-ml-md-3,
  .dds-mx-md-3 { /* danceit.css:7423 */
    margin-left: 1rem !important;
  }
  .dds-m-md-4 { /* danceit.css:7427 */
    margin: 1.5rem !important;
  }
  .dds-mt-md-4,
  .dds-my-md-4 { /* danceit.css:7430 */
    margin-top: 1.5rem !important;
  }
  .dds-mr-md-4,
  .dds-mx-md-4 { /* danceit.css:7434 */
    margin-right: 1.5rem !important;
  }
  .dds-mb-md-4,
  .dds-my-md-4 { /* danceit.css:7438 */
    margin-bottom: 1.5rem !important;
  }
  .dds-ml-md-4,
  .dds-mx-md-4 { /* danceit.css:7442 */
    margin-left: 1.5rem !important;
  }
  .dds-m-md-5 { /* danceit.css:7446 */
    margin: 3rem !important;
  }
  .dds-mt-md-5,
  .dds-my-md-5 { /* danceit.css:7449 */
    margin-top: 3rem !important;
  }
  .dds-mr-md-5,
  .dds-mx-md-5 { /* danceit.css:7453 */
    margin-right: 3rem !important;
  }
  .dds-mb-md-5,
  .dds-my-md-5 { /* danceit.css:7457 */
    margin-bottom: 3rem !important;
  }
  .dds-ml-md-5,
  .dds-mx-md-5 { /* danceit.css:7461 */
    margin-left: 3rem !important;
  }
  .dds-p-md-0 { /* danceit.css:7465 */
    padding: 0 !important;
  }
  .dds-pt-md-0,
  .dds-py-md-0 { /* danceit.css:7468 */
    padding-top: 0 !important;
  }
  .dds-pr-md-0,
  .dds-px-md-0 { /* danceit.css:7472 */
    padding-right: 0 !important;
  }
  .dds-pb-md-0,
  .dds-py-md-0 { /* danceit.css:7476 */
    padding-bottom: 0 !important;
  }
  .dds-pl-md-0,
  .dds-px-md-0 { /* danceit.css:7480 */
    padding-left: 0 !important;
  }
  .dds-p-md-1 { /* danceit.css:7484 */
    padding: .25rem !important;
  }
  .dds-pt-md-1,
  .dds-py-md-1 { /* danceit.css:7487 */
    padding-top: .25rem !important;
  }
  .dds-pr-md-1,
  .dds-px-md-1 { /* danceit.css:7491 */
    padding-right: .25rem !important;
  }
  .dds-pb-md-1,
  .dds-py-md-1 { /* danceit.css:7495 */
    padding-bottom: .25rem !important;
  }
  .dds-pl-md-1,
  .dds-px-md-1 { /* danceit.css:7499 */
    padding-left: .25rem !important;
  }
  .dds-p-md-2 { /* danceit.css:7503 */
    padding: .5rem !important;
  }
  .dds-pt-md-2,
  .dds-py-md-2 { /* danceit.css:7506 */
    padding-top: .5rem !important;
  }
  .dds-pr-md-2,
  .dds-px-md-2 { /* danceit.css:7510 */
    padding-right: .5rem !important;
  }
  .dds-pb-md-2,
  .dds-py-md-2 { /* danceit.css:7514 */
    padding-bottom: .5rem !important;
  }
  .dds-pl-md-2,
  .dds-px-md-2 { /* danceit.css:7518 */
    padding-left: .5rem !important;
  }
  .dds-p-md-3 { /* danceit.css:7522 */
    padding: 1rem !important;
  }
  .dds-pt-md-3,
  .dds-py-md-3 { /* danceit.css:7525 */
    padding-top: 1rem !important;
  }
  .dds-pr-md-3,
  .dds-px-md-3 { /* danceit.css:7529 */
    padding-right: 1rem !important;
  }
  .dds-pb-md-3,
  .dds-py-md-3 { /* danceit.css:7533 */
    padding-bottom: 1rem !important;
  }
  .dds-pl-md-3,
  .dds-px-md-3 { /* danceit.css:7537 */
    padding-left: 1rem !important;
  }
  .dds-p-md-4 { /* danceit.css:7541 */
    padding: 1.5rem !important;
  }
  .dds-pt-md-4,
  .dds-py-md-4 { /* danceit.css:7544 */
    padding-top: 1.5rem !important;
  }
  .dds-pr-md-4,
  .dds-px-md-4 { /* danceit.css:7548 */
    padding-right: 1.5rem !important;
  }
  .dds-pb-md-4,
  .dds-py-md-4 { /* danceit.css:7552 */
    padding-bottom: 1.5rem !important;
  }
  .dds-pl-md-4,
  .dds-px-md-4 { /* danceit.css:7556 */
    padding-left: 1.5rem !important;
  }
  .dds-p-md-5 { /* danceit.css:7560 */
    padding: 3rem !important;
  }
  .dds-pt-md-5,
  .dds-py-md-5 { /* danceit.css:7563 */
    padding-top: 3rem !important;
  }
  .dds-pr-md-5,
  .dds-px-md-5 { /* danceit.css:7567 */
    padding-right: 3rem !important;
  }
  .dds-pb-md-5,
  .dds-py-md-5 { /* danceit.css:7571 */
    padding-bottom: 3rem !important;
  }
  .dds-pl-md-5,
  .dds-px-md-5 { /* danceit.css:7575 */
    padding-left: 3rem !important;
  }
  .dds-m-md-auto { /* danceit.css:7579 */
    margin: auto !important;
  }
  .dds-mt-md-auto,
  .dds-my-md-auto { /* danceit.css:7582 */
    margin-top: auto !important;
  }
  .dds-mr-md-auto,
  .dds-mx-md-auto { /* danceit.css:7586 */
    margin-right: auto !important;
  }
  .dds-mb-md-auto,
  .dds-my-md-auto { /* danceit.css:7590 */
    margin-bottom: auto !important;
  }
  .dds-ml-md-auto,
  .dds-mx-md-auto { /* danceit.css:7594 */
    margin-left: auto !important;
  }
  .dds-m-lg-0 { /* danceit.css:7601 */
    margin: 0 !important;
  }
  .dds-mt-lg-0,
  .dds-my-lg-0 { /* danceit.css:7604 */
    margin-top: 0 !important;
  }
  .dds-mr-lg-0,
  .dds-mx-lg-0 { /* danceit.css:7608 */
    margin-right: 0 !important;
  }
  .dds-mb-lg-0,
  .dds-my-lg-0 { /* danceit.css:7612 */
    margin-bottom: 0 !important;
  }
  .dds-ml-lg-0,
  .dds-mx-lg-0 { /* danceit.css:7616 */
    margin-left: 0 !important;
  }
  .dds-m-lg-1 { /* danceit.css:7620 */
    margin: .25rem !important;
  }
  .dds-mt-lg-1,
  .dds-my-lg-1 { /* danceit.css:7623 */
    margin-top: .25rem !important;
  }
  .dds-mr-lg-1,
  .dds-mx-lg-1 { /* danceit.css:7627 */
    margin-right: .25rem !important;
  }
  .dds-mb-lg-1,
  .dds-my-lg-1 { /* danceit.css:7631 */
    margin-bottom: .25rem !important;
  }
  .dds-ml-lg-1,
  .dds-mx-lg-1 { /* danceit.css:7635 */
    margin-left: .25rem !important;
  }
  .dds-m-lg-2 { /* danceit.css:7639 */
    margin: .5rem !important;
  }
  .dds-mt-lg-2,
  .dds-my-lg-2 { /* danceit.css:7642 */
    margin-top: .5rem !important;
  }
  .dds-mr-lg-2,
  .dds-mx-lg-2 { /* danceit.css:7646 */
    margin-right: .5rem !important;
  }
  .dds-mb-lg-2,
  .dds-my-lg-2 { /* danceit.css:7650 */
    margin-bottom: .5rem !important;
  }
  .dds-ml-lg-2,
  .dds-mx-lg-2 { /* danceit.css:7654 */
    margin-left: .5rem !important;
  }
  .dds-m-lg-3 { /* danceit.css:7658 */
    margin: 1rem !important;
  }
  .dds-mt-lg-3,
  .dds-my-lg-3 { /* danceit.css:7661 */
    margin-top: 1rem !important;
  }
  .dds-mr-lg-3,
  .dds-mx-lg-3 { /* danceit.css:7665 */
    margin-right: 1rem !important;
  }
  .dds-mb-lg-3,
  .dds-my-lg-3 { /* danceit.css:7669 */
    margin-bottom: 1rem !important;
  }
  .dds-ml-lg-3,
  .dds-mx-lg-3 { /* danceit.css:7673 */
    margin-left: 1rem !important;
  }
  .dds-m-lg-4 { /* danceit.css:7677 */
    margin: 1.5rem !important;
  }
  .dds-mt-lg-4,
  .dds-my-lg-4 { /* danceit.css:7680 */
    margin-top: 1.5rem !important;
  }
  .dds-mr-lg-4,
  .dds-mx-lg-4 { /* danceit.css:7684 */
    margin-right: 1.5rem !important;
  }
  .dds-mb-lg-4,
  .dds-my-lg-4 { /* danceit.css:7688 */
    margin-bottom: 1.5rem !important;
  }
  .dds-ml-lg-4,
  .dds-mx-lg-4 { /* danceit.css:7692 */
    margin-left: 1.5rem !important;
  }
  .dds-m-lg-5 { /* danceit.css:7696 */
    margin: 3rem !important;
  }
  .dds-mt-lg-5,
  .dds-my-lg-5 { /* danceit.css:7699 */
    margin-top: 3rem !important;
  }
  .dds-mr-lg-5,
  .dds-mx-lg-5 { /* danceit.css:7703 */
    margin-right: 3rem !important;
  }
  .dds-mb-lg-5,
  .dds-my-lg-5 { /* danceit.css:7707 */
    margin-bottom: 3rem !important;
  }
  .dds-ml-lg-5,
  .dds-mx-lg-5 { /* danceit.css:7711 */
    margin-left: 3rem !important;
  }
  .dds-p-lg-0 { /* danceit.css:7715 */
    padding: 0 !important;
  }
  .dds-pt-lg-0,
  .dds-py-lg-0 { /* danceit.css:7718 */
    padding-top: 0 !important;
  }
  .dds-pr-lg-0,
  .dds-px-lg-0 { /* danceit.css:7722 */
    padding-right: 0 !important;
  }
  .dds-pb-lg-0,
  .dds-py-lg-0 { /* danceit.css:7726 */
    padding-bottom: 0 !important;
  }
  .dds-pl-lg-0,
  .dds-px-lg-0 { /* danceit.css:7730 */
    padding-left: 0 !important;
  }
  .dds-p-lg-1 { /* danceit.css:7734 */
    padding: .25rem !important;
  }
  .dds-pt-lg-1,
  .dds-py-lg-1 { /* danceit.css:7737 */
    padding-top: .25rem !important;
  }
  .dds-pr-lg-1,
  .dds-px-lg-1 { /* danceit.css:7741 */
    padding-right: .25rem !important;
  }
  .dds-pb-lg-1,
  .dds-py-lg-1 { /* danceit.css:7745 */
    padding-bottom: .25rem !important;
  }
  .dds-pl-lg-1,
  .dds-px-lg-1 { /* danceit.css:7749 */
    padding-left: .25rem !important;
  }
  .dds-p-lg-2 { /* danceit.css:7753 */
    padding: .5rem !important;
  }
  .dds-pt-lg-2,
  .dds-py-lg-2 { /* danceit.css:7756 */
    padding-top: .5rem !important;
  }
  .dds-pr-lg-2,
  .dds-px-lg-2 { /* danceit.css:7760 */
    padding-right: .5rem !important;
  }
  .dds-pb-lg-2,
  .dds-py-lg-2 { /* danceit.css:7764 */
    padding-bottom: .5rem !important;
  }
  .dds-pl-lg-2,
  .dds-px-lg-2 { /* danceit.css:7768 */
    padding-left: .5rem !important;
  }
  .dds-p-lg-3 { /* danceit.css:7772 */
    padding: 1rem !important;
  }
  .dds-pt-lg-3,
  .dds-py-lg-3 { /* danceit.css:7775 */
    padding-top: 1rem !important;
  }
  .dds-pr-lg-3,
  .dds-px-lg-3 { /* danceit.css:7779 */
    padding-right: 1rem !important;
  }
  .dds-pb-lg-3,
  .dds-py-lg-3 { /* danceit.css:7783 */
    padding-bottom: 1rem !important;
  }
  .dds-pl-lg-3,
  .dds-px-lg-3 { /* danceit.css:7787 */
    padding-left: 1rem !important;
  }
  .dds-p-lg-4 { /* danceit.css:7791 */
    padding: 1.5rem !important;
  }
  .dds-pt-lg-4,
  .dds-py-lg-4 { /* danceit.css:7794 */
    padding-top: 1.5rem !important;
  }
  .dds-pr-lg-4,
  .dds-px-lg-4 { /* danceit.css:7798 */
    padding-right: 1.5rem !important;
  }
  .dds-pb-lg-4,
  .dds-py-lg-4 { /* danceit.css:7802 */
    padding-bottom: 1.5rem !important;
  }
  .dds-pl-lg-4,
  .dds-px-lg-4 { /* danceit.css:7806 */
    padding-left: 1.5rem !important;
  }
  .dds-p-lg-5 { /* danceit.css:7810 */
    padding: 3rem !important;
  }
  .dds-pt-lg-5,
  .dds-py-lg-5 { /* danceit.css:7813 */
    padding-top: 3rem !important;
  }
  .dds-pr-lg-5,
  .dds-px-lg-5 { /* danceit.css:7817 */
    padding-right: 3rem !important;
  }
  .dds-pb-lg-5,
  .dds-py-lg-5 { /* danceit.css:7821 */
    padding-bottom: 3rem !important;
  }
  .dds-pl-lg-5,
  .dds-px-lg-5 { /* danceit.css:7825 */
    padding-left: 3rem !important;
  }
  .dds-m-lg-auto { /* danceit.css:7829 */
    margin: auto !important;
  }
  .dds-mt-lg-auto,
  .dds-my-lg-auto { /* danceit.css:7832 */
    margin-top: auto !important;
  }
  .dds-mr-lg-auto,
  .dds-mx-lg-auto { /* danceit.css:7836 */
    margin-right: auto !important;
  }
  .dds-mb-lg-auto,
  .dds-my-lg-auto { /* danceit.css:7840 */
    margin-bottom: auto !important;
  }
  .dds-ml-lg-auto,
  .dds-mx-lg-auto { /* danceit.css:7844 */
    margin-left: auto !important;
  }
}
@media (min-width: 1200px) {
  .dds-m-xl-0 { /* danceit.css:7851 */
    margin: 0 !important;
  }
  .dds-mt-xl-0,
  .dds-my-xl-0 { /* danceit.css:7854 */
    margin-top: 0 !important;
  }
  .dds-mr-xl-0,
  .dds-mx-xl-0 { /* danceit.css:7858 */
    margin-right: 0 !important;
  }
  .dds-mb-xl-0,
  .dds-my-xl-0 { /* danceit.css:7862 */
    margin-bottom: 0 !important;
  }
  .dds-ml-xl-0,
  .dds-mx-xl-0 { /* danceit.css:7866 */
    margin-left: 0 !important;
  }
  .dds-m-xl-1 { /* danceit.css:7870 */
    margin: .25rem !important;
  }
  .dds-mt-xl-1,
  .dds-my-xl-1 { /* danceit.css:7873 */
    margin-top: .25rem !important;
  }
  .dds-mr-xl-1,
  .dds-mx-xl-1 { /* danceit.css:7877 */
    margin-right: .25rem !important;
  }
  .dds-mb-xl-1,
  .dds-my-xl-1 { /* danceit.css:7881 */
    margin-bottom: .25rem !important;
  }
  .dds-ml-xl-1,
  .dds-mx-xl-1 { /* danceit.css:7885 */
    margin-left: .25rem !important;
  }
  .dds-m-xl-2 { /* danceit.css:7889 */
    margin: .5rem !important;
  }
  .dds-mt-xl-2,
  .dds-my-xl-2 { /* danceit.css:7892 */
    margin-top: .5rem !important;
  }
  .dds-mr-xl-2,
  .dds-mx-xl-2 { /* danceit.css:7896 */
    margin-right: .5rem !important;
  }
  .dds-mb-xl-2,
  .dds-my-xl-2 { /* danceit.css:7900 */
    margin-bottom: .5rem !important;
  }
  .dds-ml-xl-2,
  .dds-mx-xl-2 { /* danceit.css:7904 */
    margin-left: .5rem !important;
  }
  .dds-m-xl-3 { /* danceit.css:7908 */
    margin: 1rem !important;
  }
  .dds-mt-xl-3,
  .dds-my-xl-3 { /* danceit.css:7911 */
    margin-top: 1rem !important;
  }
  .dds-mr-xl-3,
  .dds-mx-xl-3 { /* danceit.css:7915 */
    margin-right: 1rem !important;
  }
  .dds-mb-xl-3,
  .dds-my-xl-3 { /* danceit.css:7919 */
    margin-bottom: 1rem !important;
  }
  .dds-ml-xl-3,
  .dds-mx-xl-3 { /* danceit.css:7923 */
    margin-left: 1rem !important;
  }
  .dds-m-xl-4 { /* danceit.css:7927 */
    margin: 1.5rem !important;
  }
  .dds-mt-xl-4,
  .dds-my-xl-4 { /* danceit.css:7930 */
    margin-top: 1.5rem !important;
  }
  .dds-mr-xl-4,
  .dds-mx-xl-4 { /* danceit.css:7934 */
    margin-right: 1.5rem !important;
  }
  .dds-mb-xl-4,
  .dds-my-xl-4 { /* danceit.css:7938 */
    margin-bottom: 1.5rem !important;
  }
  .dds-ml-xl-4,
  .dds-mx-xl-4 { /* danceit.css:7942 */
    margin-left: 1.5rem !important;
  }
  .dds-m-xl-5 { /* danceit.css:7946 */
    margin: 3rem !important;
  }
  .dds-mt-xl-5,
  .dds-my-xl-5 { /* danceit.css:7949 */
    margin-top: 3rem !important;
  }
  .dds-mr-xl-5,
  .dds-mx-xl-5 { /* danceit.css:7953 */
    margin-right: 3rem !important;
  }
  .dds-mb-xl-5,
  .dds-my-xl-5 { /* danceit.css:7957 */
    margin-bottom: 3rem !important;
  }
  .dds-ml-xl-5,
  .dds-mx-xl-5 { /* danceit.css:7961 */
    margin-left: 3rem !important;
  }
  .dds-p-xl-0 { /* danceit.css:7965 */
    padding: 0 !important;
  }
  .dds-pt-xl-0,
  .dds-py-xl-0 { /* danceit.css:7968 */
    padding-top: 0 !important;
  }
  .dds-pr-xl-0,
  .dds-px-xl-0 { /* danceit.css:7972 */
    padding-right: 0 !important;
  }
  .dds-pb-xl-0,
  .dds-py-xl-0 { /* danceit.css:7976 */
    padding-bottom: 0 !important;
  }
  .dds-pl-xl-0,
  .dds-px-xl-0 { /* danceit.css:7980 */
    padding-left: 0 !important;
  }
  .dds-p-xl-1 { /* danceit.css:7984 */
    padding: .25rem !important;
  }
  .dds-pt-xl-1,
  .dds-py-xl-1 { /* danceit.css:7987 */
    padding-top: .25rem !important;
  }
  .dds-pr-xl-1,
  .dds-px-xl-1 { /* danceit.css:7991 */
    padding-right: .25rem !important;
  }
  .dds-pb-xl-1,
  .dds-py-xl-1 { /* danceit.css:7995 */
    padding-bottom: .25rem !important;
  }
  .dds-pl-xl-1,
  .dds-px-xl-1 { /* danceit.css:7999 */
    padding-left: .25rem !important;
  }
  .dds-p-xl-2 { /* danceit.css:8003 */
    padding: .5rem !important;
  }
  .dds-pt-xl-2,
  .dds-py-xl-2 { /* danceit.css:8006 */
    padding-top: .5rem !important;
  }
  .dds-pr-xl-2,
  .dds-px-xl-2 { /* danceit.css:8010 */
    padding-right: .5rem !important;
  }
  .dds-pb-xl-2,
  .dds-py-xl-2 { /* danceit.css:8014 */
    padding-bottom: .5rem !important;
  }
  .dds-pl-xl-2,
  .dds-px-xl-2 { /* danceit.css:8018 */
    padding-left: .5rem !important;
  }
  .dds-p-xl-3 { /* danceit.css:8022 */
    padding: 1rem !important;
  }
  .dds-pt-xl-3,
  .dds-py-xl-3 { /* danceit.css:8025 */
    padding-top: 1rem !important;
  }
  .dds-pr-xl-3,
  .dds-px-xl-3 { /* danceit.css:8029 */
    padding-right: 1rem !important;
  }
  .dds-pb-xl-3,
  .dds-py-xl-3 { /* danceit.css:8033 */
    padding-bottom: 1rem !important;
  }
  .dds-pl-xl-3,
  .dds-px-xl-3 { /* danceit.css:8037 */
    padding-left: 1rem !important;
  }
  .dds-p-xl-4 { /* danceit.css:8041 */
    padding: 1.5rem !important;
  }
  .dds-pt-xl-4,
  .dds-py-xl-4 { /* danceit.css:8044 */
    padding-top: 1.5rem !important;
  }
  .dds-pr-xl-4,
  .dds-px-xl-4 { /* danceit.css:8048 */
    padding-right: 1.5rem !important;
  }
  .dds-pb-xl-4,
  .dds-py-xl-4 { /* danceit.css:8052 */
    padding-bottom: 1.5rem !important;
  }
  .dds-pl-xl-4,
  .dds-px-xl-4 { /* danceit.css:8056 */
    padding-left: 1.5rem !important;
  }
  .dds-p-xl-5 { /* danceit.css:8060 */
    padding: 3rem !important;
  }
  .dds-pt-xl-5,
  .dds-py-xl-5 { /* danceit.css:8063 */
    padding-top: 3rem !important;
  }
  .dds-pr-xl-5,
  .dds-px-xl-5 { /* danceit.css:8067 */
    padding-right: 3rem !important;
  }
  .dds-pb-xl-5,
  .dds-py-xl-5 { /* danceit.css:8071 */
    padding-bottom: 3rem !important;
  }
  .dds-pl-xl-5,
  .dds-px-xl-5 { /* danceit.css:8075 */
    padding-left: 3rem !important;
  }
  .dds-m-xl-auto { /* danceit.css:8079 */
    margin: auto !important;
  }
  .dds-mt-xl-auto,
  .dds-my-xl-auto { /* danceit.css:8082 */
    margin-top: auto !important;
  }
  .dds-mr-xl-auto,
  .dds-mx-xl-auto { /* danceit.css:8086 */
    margin-right: auto !important;
  }
  .dds-mb-xl-auto,
  .dds-my-xl-auto { /* danceit.css:8090 */
    margin-bottom: auto !important;
  }
  .dds-ml-xl-auto,
  .dds-mx-xl-auto { /* danceit.css:8094 */
    margin-left: auto !important;
  }
}
.dds-text-justify { /* danceit.css:8100 */
  text-align: justify !important;
}
.dds-text-nowrap { /* danceit.css:8104 */
  white-space: nowrap !important;
}
.dds-text-truncate { /* danceit.css:8108 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dds-text-left { /* danceit.css:8114 */
  text-align: left !important;
}
.dds-text-right { /* danceit.css:8118 */
  text-align: right !important;
}
.dds-text-center { /* danceit.css:8122 */
  text-align: center !important;
}
@media (min-width: 576px) {
  .dds-text-sm-left { /* danceit.css:8127 */
    text-align: left !important;
  }
  .dds-text-sm-right { /* danceit.css:8130 */
    text-align: right !important;
  }
  .dds-text-sm-center { /* danceit.css:8133 */
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .dds-text-md-left { /* danceit.css:8139 */
    text-align: left !important;
  }
  .dds-text-md-right { /* danceit.css:8142 */
    text-align: right !important;
  }
  .dds-text-md-center { /* danceit.css:8145 */
    text-align: center !important;
  }
  .dds-text-lg-left { /* danceit.css:8151 */
    text-align: left !important;
  }
  .dds-text-lg-right { /* danceit.css:8154 */
    text-align: right !important;
  }
  .dds-text-lg-center { /* danceit.css:8157 */
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .dds-text-xl-left { /* danceit.css:8163 */
    text-align: left !important;
  }
  .dds-text-xl-right { /* danceit.css:8166 */
    text-align: right !important;
  }
  .dds-text-xl-center { /* danceit.css:8169 */
    text-align: center !important;
  }
}
.dds-text-lowercase { /* danceit.css:8174 */
  text-transform: lowercase !important;
}
.dds-text-uppercase { /* danceit.css:8178 */
  text-transform: uppercase !important;
}
.dds-text-capitalize { /* danceit.css:8182 */
  text-transform: capitalize !important;
}
.dds-font-weight-light { /* danceit.css:8186 */
  font-weight: 300 !important;
}
.dds-font-weight-normal { /* danceit.css:8190 */
  font-weight: 400 !important;
}
.dds-font-weight-bold { /* danceit.css:8194 */
  font-weight: 500 !important;
}
.dds-font-italic { /* danceit.css:8198 */
  font-style: italic !important;
}
.dds-text-white { /* danceit.css:8202 */
  color: #fff !important;
}
.dds-text-primary { /* danceit.css:8206 */
  color: #2196f3 !important;
}
a.dds-text-primary:focus,
a.dds-text-primary:hover { /* danceit.css:8210 */
  color: #0c7cd5 !important;
}
.dds-text-secondary { /* danceit.css:8215 */
  color: #6c757d !important;
}
a.dds-text-secondary:focus,
a.dds-text-secondary:hover { /* danceit.css:8219 */
  color: #545b62 !important;
}
a.dds-text-success:focus,
a.dds-text-success:hover { /* danceit.css:8224 */
  color: #3d8b40 !important;
}
a.dds-text-info:focus,
a.dds-text-info:hover { /* danceit.css:8229 */
  color: #008fa1 !important;
}
.dds-text-warning { /* danceit.css:8234 */
  color: #ffeb3b !important;
}
a.dds-text-warning:focus,
a.dds-text-warning:hover { /* danceit.css:8238 */
  color: #ffe608 !important;
}
a.dds-text-danger:focus,
a.dds-text-danger:hover { /* danceit.css:8243 */
  color: #ea1c0d !important;
}
.dds-text-light { /* danceit.css:8248 */
  color: #f8f9fa !important;
}
a.dds-text-light:focus,
a.dds-text-light:hover { /* danceit.css:8252 */
  color: #dae0e5 !important;
}
.dds-text-dark { /* danceit.css:8257 */
  color: #343a40 !important;
}
a.dds-text-dark:focus,
a.dds-text-dark:hover { /* danceit.css:8261 */
  color: #1d2124 !important;
}
.dds-text-muted { /* danceit.css:8266 */
  color: #6c757d !important;
}
.dds-text-hide { /* danceit.css:8271 */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.dds-visible { /* danceit.css:8279 */
  visibility: visible !important;
}
.dds-invisible { /* danceit.css:8283 */
  visibility: hidden !important;
}

/* ---- 2. Material Dashboard overrides ------------------------------------ */
.dds-rounded { /* danceit.css:12254 */
  border-radius: 6px !important;
}
.dds-text-warning { /* danceit.css:12884 */
  color: #ff9800 !important;
}
.dds-text-primary { /* danceit.css:12888 */
  color: #007bff !important;
}
.dds-text-danger { /* danceit.css:12892 */
  color: #f44336 !important;
}
.dds-text-success { /* danceit.css:12896 */
  color: #4caf50 !important;
}
.dds-text-info { /* danceit.css:12900 */
  color: #00bcd4 !important;
}
.dds-text-rose { /* danceit.css:12904 */
  color: #e91e63 !important;
}
.dds-text-gray { /* danceit.css:12908 */
  color: #999 !important;
}

/* ---- 3. danceit's own helpers -------------------------------------------- */
/* text */
.dds-capitalize::first-letter { text-transform: uppercase; }        /* danceit.css:26561 */
.dds-uppercase { text-transform: uppercase; }                        /* danceit.css:26565 */
.dds-marquee { white-space: nowrap; overflow: hidden; }              /* danceit.css:26605 */
.dds-unimportant { color: var(--dds-unimportant) !important; }       /* danceit.css:26868 */
.dds-bigger-helper { font-size: 1.28em !important; }                 /* danceit.css:28729 */
a.dds-helper i.dds-material-icons {                                  /* danceit.css:28714 the info icon after a label */
  width: 1em !important;
  height: unset !important;
  margin-left: .15rem;
  font-size: 1em !important;
  line-height: 1em !important;
  color: var(--dds-primary);
}
.dds-card-title a.dds-helper i.dds-material-icons {                  /* danceit.css:28723 */
  position: relative;
  top: -.1rem;
  margin-left: .3rem;
}
.dds-size-1em { font-size: 1em; }                                    /* danceit.css:28493 */
.dds-size-2em { font-size: 2em; }
.dds-size-3em { font-size: 3em; }
.dds-size-4em { font-size: 4em; }
.dds-size-5em { font-size: 5em; }
.dds-size-6em { font-size: 6em; }
.dds-size-7em { font-size: 7em; }
.dds-size-1emi { font-size: 1em !important; }
.dds-size-2emi { font-size: 2em !important; }
.dds-size-3emi { font-size: 3em !important; }
.dds-size-4emi { font-size: 4em !important; }
.dds-size-5emi { font-size: 5em !important; }
.dds-size-6emi { font-size: 6em !important; }
.dds-size-7emi { font-size: 7em !important; }
a.dds-normal-hover { color: var(--dds-text) !important; }            /* danceit.css:28122 */
a.dds-normal-hover:hover { color: var(--dds-primary) !important; }   /* danceit.css:28126 */
a.dds-underline { text-decoration: underline !important; }           /* danceit.css:28130 */
a.dds-normal, a.dds-normal:hover { color: inherit !important; }      /* danceit.css:27257 */
a.dds-simple {                                                       /* danceit.css:27615 */
  text-decoration: underline;
  margin: 0 .5em;
  transition: opacity var(--dds-duration-fast) ease-in-out;
}
a.dds-simple:hover { opacity: .8; }                                  /* danceit.css:27621 */
span.dds-link-list-divider { margin: 0 1em; color: var(--dds-gray); } /* danceit.css:27826 */

/* box */
.dds-right { float: right; }                                         /* danceit.css:26828 */
.dds-left { float: left; }                                           /* danceit.css:26832 */
.dds-hidden { display: none; }                                       /* danceit.css:27139 */
.dds-mb-05 { margin-bottom: -.5em !important; }                      /* danceit.css:26949 */
/* .mt--1/.mt--2 sit near the end of danceit.css, after every Material rule, so they
   win at equal specificity; 06 is built before the components, so !important keeps that. */
.dds-mt--1 { margin-top: -.25em !important; }                        /* danceit.css:28733 */
.dds-mt--2 { margin-top: -.5em !important; }                         /* danceit.css:28737 */
.dds-mt-not-first:not(:first-child) { margin-top: 6em; }            /* danceit.css:27869 */
.dds-badge-margin { margin: .2em; }                                  /* danceit.css:27678 */
.dds-flag-border { border: 1px solid var(--dds-border-light); }      /* danceit.css:28675 */
.dds-flag-more-border { border: 1px solid var(--dds-gray); }         /* danceit.css:28679 */
div.dds-blank-divider { height: 15px; }                              /* danceit.css:28083 */
.dds-visible-only-in-danger { display: none; }                       /* danceit.css:28157 */
.dds-danger .dds-visible-only-in-danger { display: inline; }         /* danceit.css:28161 */

/* behaviour */
.dds-nonselectable { -webkit-user-select: none; user-select: none; } /* danceit.css:27421 */
span.dds-pointer { cursor: pointer; }                                /* danceit.css:28661 */
.dds-less-opacity { opacity: .6; }                                   /* danceit.css:27285 */
.dds-blur { filter: blur(5px); }                                     /* danceit.css:28216 */
/* danceit: .5s ease-in-out (danceit.css:27289, 28212), clamped to the 320ms cap */
.dds-opacity-smooth { transition: opacity var(--dds-duration-max) var(--dds-ease-in-out); }
.dds-animate-blur { transition: filter var(--dds-duration-max) var(--dds-ease-in-out); }

/* print (danceit.css:27380, 28298, 28916–29010) */
.dds-page-break { page-break-after: always; }                        /* danceit.css:27380 */
.dds-dont-break-across-pages { page-break-inside: avoid; }           /* danceit.css:28298 */
@media print {
  .dds-hide-print { display: none !important; }
  .dds-unimportant { color: var(--dds-black) !important; }
}
/* Bootstrap's print reset, which danceit keeps at the very bottom of its file
   (danceit.css:28916–28953, 28981); it needs !important, so it lives here. The
   component lines of that block (.table, .navbar, .sidebar, .main-panel, .badge,
   .card.list-item …) belong to their owners. @page { size: auto } is the default. */
@media print {
  :where(.dds-scope) *,
  :where(.dds-scope) *::before,
  :where(.dds-scope) *::after {                                      /* danceit.css:28917 */
    text-shadow: none !important;
    box-shadow: none !important;
  }
  :where(.dds-scope) a:not(.dds-btn) { text-decoration: underline; }  /* danceit.css:28923 */
  :where(.dds-scope) abbr[title]::after { content: " (" attr(title) ")"; }  /* danceit.css:28926 */
  :where(.dds-scope) pre { white-space: pre-wrap !important; }        /* danceit.css:28929 */
  :where(.dds-scope) :where(blockquote, pre) {                        /* danceit.css:28932 */
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  :where(.dds-scope) thead { display: table-header-group; }           /* danceit.css:28937 */
  :where(.dds-scope) :where(img, tr) { page-break-inside: avoid; }    /* danceit.css:28940 */
  :where(.dds-scope) :where(h2, h3, p) { orphans: 3; widows: 3; }     /* danceit.css:28944 */
  :where(.dds-scope) :where(h2, h3) { page-break-after: avoid; }      /* danceit.css:28950 */
  body.dds-scope { padding: 0 !important; margin: 0 !important; }     /* danceit.css:28981 .content, body */
}

/* ---- 4. Responsive helpers (dds's own; docs/00-foundations #responsive) ----
   One place, two wordings: .dds-text-wide from 640px, .dds-text-narrow below
   (--dds-bp-table-stack). Both come from translation keys, never from CSS
   content, so every language picks its own short form ("Records:" for
   "Number of records:"). data-dds-fit (00-core): a line that drops its
   optional parts when they no longer fit; .dds-fit-hide goes while the
   container is .dds-fit-tight, .dds-fit-show comes. A part with min-width: 0
   and an ellipsis never overflows, so it never makes the line tight. */
@media (max-width: 639.98px) { .dds-text-wide { display: none !important; } }
@media (min-width: 640px) { .dds-text-narrow { display: none !important; } }
[data-dds-fit].dds-fit-tight .dds-fit-hide,
[data-dds-fit]:not(.dds-fit-tight) .dds-fit-show { display: none !important; }
[data-dds-fit].dds-fit-measure,
[data-dds-fit].dds-fit-measure > *,
[data-dds-fit].dds-fit-measure .dds-fit-hide,
[data-dds-fit].dds-fit-measure .dds-fit-hide * { flex-wrap: nowrap !important; white-space: nowrap !important; }


/* ===== 10-buttons.css ==================================================== */

/* ==========================================================================
   dds · 10-buttons — .dds-btn and every variant danceit uses
   --------------------------------------------------------------------------
   Owner: buttons. Spec: spec/10-buttons.md (computed styles of danceit).
   danceit's .btn is two layers: Bootstrap 4 (danceit.css:2185–2275) under
   Material Dashboard (8287+, which wins on everything it sets). The values
   below are the rendered result, cited to the rule that produces it.

     .dds-btn                      default grey #999 (a bare .btn is grey in danceit)
     .dds-btn-primary              #007bff with the tinted MD shadow; the everyday button
     .dds-btn-default / -secondary / -white
     .dds-btn-info / -success / -warning / -danger   status only (divergence 1)
     .dds-btn-link                 transparent; grey bare, blue with -primary, white with -white
     .dds-btn-quiet                no fill, no border, no shadow, sentence case, the text's
                                   own ink (blue with -primary); a soft tint on hover. For a
                                   tool that should not shout: the filter in a card header
     .dds-btn-set (+ .dds-btn-set-clear)  a quiet tool and its attached clear (×): one
                                   control in two parts. While the tool is on
                                   (aria-pressed="true") it takes a firmer tint and
                                   the × is shown fused to its end; off, the × is
                                   [hidden] and the tool is a plain quiet button.
                                   Takes no line of its own (the filter's state)
     .dds-btn-sm / -lg / -block / -round
     .dds-btn-just-icon / -fab / -fab-mini           41px square (30 sm, 57 lg)
     .dds-btn-group (-sm, -lg, -vertical, -toggle)
     .dds-dropdown-toggle on a .dds-btn             the Bootstrap caret
     .dds-active / :active, :disabled / .dds-disabled, .dds-busy (divergence 3)
     .dds-page-toolbar-static (--end: to the right) / -footer-static, .dds-submit-parrent, .dds-shakeit
     .dds-btn-quiet.dds-btn-framed                    a quiet setting with the set's hairline ring

   Every state is danceit's rendered one, measured per variant: hover and
   :focus share the darker fill and the big shadow (a clicked button keeps
   it while focused), .dds-active at rest is Bootstrap's pressed fill,
   pressed is MD's. The only additions are divergences 3 and 8 (busy) and
   7 (the foundation's :focus-visible ring on top).
   Motion: danceit's own .2s shadow + background transition (8301, via
   --dds-transition-btn) plus a 150ms colour fade for link buttons. The
   ripple is the foundation's (05-motion, 00-core.js); a button only has to
   be positioned for it, which it is.
   ========================================================================== */

/* ---- Base (danceit.css:2185, 8287, 8868) ---------------------------------- */
.dds-btn {
  position: relative;                                   /* 8288: the ripple's anchor */
  display: inline-block;                                /* 2186 */
  padding: 12px 30px;                                   /* 8289 */
  margin: .3125rem 1px;                                 /* 8290 */
  font-family: inherit;
  font-size: var(--dds-font-size-btn);                  /* 8291 .75rem */
  font-weight: var(--dds-font-weight-normal);           /* 8292 400 */
  line-height: var(--dds-line-height-btn);              /* 8293 1.428571 -> 41.14px high */
  color: #fff;                                          /* 8868 */
  text-align: center;                                   /* 2188 */
  text-decoration: none;
  text-transform: uppercase;                            /* 8295 */
  letter-spacing: 0;
  white-space: nowrap;                                  /* 2189 */
  vertical-align: middle;                               /* 2190 */
  -webkit-user-select: none;
  user-select: none;                                    /* 2191 */
  cursor: pointer;                                      /* 2216 */
  background-color: #999;                               /* 8868 default grey */
  border: 0;                                            /* 8299 */
  border-radius: var(--dds-radius-btn);                 /* 8300 .2rem */
  box-shadow: 0 2px 2px 0 hsla(0, 0%, 60%, .14), 0 3px 1px -2px hsla(0, 0%, 60%, .2), 0 1px 5px 0 hsla(0, 0%, 60%, .12); /* 8868 */
  transition: var(--dds-transition-btn), color var(--dds-duration-fast) var(--dds-ease-standard); /* 8301 + dds colour */
  will-change: box-shadow, transform;                   /* 8302 */
}
a.dds-btn:hover { text-decoration: none; }
/* The keyboard ring sits on a blue field in a hero header: make it white there */
.dds-btn.dds-btn-white.dds-btn-link:focus-visible { outline-color: #fff; }

/* ---- States, as danceit renders them (measured: rest, hover, focus after a
   click, pressed, .active, :disabled, .disabled — every variant) ------------
   The states sit in :where() so each carries only its variant's weight and
   the next block wins by order, as MD's rules win over Bootstrap's there:
     :hover, :focus        the darker fill + the big MD shadow (8323, 8869).
                           A clicked button keeps it while focused, as danceit.
     .dds-active at rest   Bootstrap's pressed fill, no shadow (2220, 2261…)
     :active, .dds-active:hover/:focus   MD's pressed fill, no shadow (8339…)
     :disabled:hover       the rest fill, but still the big shadow (8366) */

/* Hover and focus (danceit.css:8869, 8875) */
.dds-btn:where(:hover, :focus) {
  color: #fff;
  background-color: #919191;
  box-shadow: 0 14px 26px -12px hsla(0, 0%, 60%, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px hsla(0, 0%, 60%, .2);
}
/* .active at rest and pressed (2220, 8870): no shadow */
.dds-btn:where(.dds-active:not(:disabled, .dds-disabled), :active:not(:disabled, .dds-disabled)) {
  background-color: #919191;
  box-shadow: none;
}

/* ---- Colour variants (danceit.css:8315–8990; .active = BS 2261–2456) ------ */
.dds-btn.dds-btn-default {                             /* 8868 = bare .dds-btn, but its rest */
  color: #fff;                                          /* shadow survives :disabled (render) */
  background-color: #999;
  box-shadow: 0 2px 2px 0 hsla(0, 0%, 60%, .14), 0 3px 1px -2px hsla(0, 0%, 60%, .2), 0 1px 5px 0 hsla(0, 0%, 60%, .12);
}
.dds-btn.dds-btn-default:where(:hover, :focus) {
  background-color: #919191;
  box-shadow: 0 14px 26px -12px hsla(0, 0%, 60%, .42), 0 4px 23px 0 rgba(0, 0, 0, .12), 0 8px 10px -5px hsla(0, 0%, 60%, .2);
}
.dds-btn.dds-btn-default:where(.dds-active:not(:disabled, .dds-disabled), :active:not(:disabled, .dds-disabled)) { background-color: #919191; box-shadow: none; }

.dds-btn.dds-btn-primary {                               /* 8315 */
  color: #fff;
  background-color: var(--dds-primary);
  box-shadow: var(--dds-shadow-primary);
}
.dds-btn.dds-btn-primary:where(:hover, :focus) {
  background-color: var(--dds-primary-hover);           /* 8323 #006fe6 */
  box-shadow: var(--dds-shadow-primary-hover);          /* 8379 */
}
.dds-btn.dds-btn-primary:where(.dds-active:not(:disabled, .dds-disabled)) {
  background-color: #0c7cd5;                            /* BS 2261: .active at rest */
  box-shadow: none;
}
.dds-btn.dds-btn-primary:where(:active:not(:disabled, .dds-disabled), .dds-active:hover, .dds-active:focus) {
  background-color: #005abb;                            /* 8339 .active:hover, :active:hover */
  box-shadow: none;
}
.dds-show > .dds-btn.dds-btn-primary.dds-dropdown-toggle {
  background-color: #005abb;                            /* 8331 .show > .dropdown-toggle */
  box-shadow: var(--dds-shadow-primary);
}

.dds-btn.dds-btn-secondary {                             /* 8394 */
  color: #333;
  background-color: var(--dds-secondary);               /* #fafafa */
  box-shadow: var(--dds-shadow-secondary);
}
.dds-btn.dds-btn-secondary:where(:hover, :focus) {
  color: #333;
  background-color: #f2f2f2;                            /* 8402 */
  box-shadow: var(--dds-shadow-secondary-hover);
}
.dds-btn.dds-btn-secondary:where(.dds-active:not(:disabled, .dds-disabled)) {
  color: #fff;
  background-color: #545b62;                            /* BS 2300: .active at rest */
  box-shadow: none;
}
.dds-btn.dds-btn-secondary:where(:active:not(:disabled, .dds-disabled), .dds-active:hover, .dds-active:focus) {
  color: #333;
  background-color: #f2f2f2;                            /* MD .active:hover */
  box-shadow: none;
}

.dds-btn.dds-btn-info { color: #fff; background-color: var(--dds-info); box-shadow: var(--dds-shadow-info); }  /* 8473 */
.dds-btn.dds-btn-success { color: #fff; background-color: var(--dds-success); box-shadow: var(--dds-shadow-success); }  /* 8552 */
.dds-btn.dds-btn-warning { color: #fff; background-color: var(--dds-warning); box-shadow: var(--dds-shadow-warning); }  /* 8631 */
.dds-btn.dds-btn-danger { color: #fff; background-color: var(--dds-danger); box-shadow: var(--dds-shadow-danger); }  /* 8710 */
.dds-btn.dds-btn-info:where(:hover, :focus) { color: #fff; background-color: #00aec5; box-shadow: var(--dds-shadow-info-hover); }
.dds-btn.dds-btn-success:where(:hover, :focus) { color: #fff; background-color: #47a44b; box-shadow: var(--dds-shadow-success-hover); }
.dds-btn.dds-btn-warning:where(:hover, :focus) { color: #fff; background-color: #f08f00; box-shadow: var(--dds-shadow-warning-hover); }
.dds-btn.dds-btn-danger:where(:hover, :focus) { color: #fff; background-color: #f33527; box-shadow: var(--dds-shadow-danger-hover); }
.dds-btn.dds-btn-info:where(.dds-active:not(:disabled, .dds-disabled)) { color: #fff; background-color: #008fa1; box-shadow: none; }  /* BS 2378 */
.dds-btn.dds-btn-success:where(.dds-active:not(:disabled, .dds-disabled)) { color: #fff; background-color: #3d8b40; box-shadow: none; }  /* BS 2339 */
.dds-btn.dds-btn-warning:where(.dds-active:not(:disabled, .dds-disabled)) { color: #212529; background-color: #ffe608; box-shadow: none; }  /* BS 2417 */
.dds-btn.dds-btn-danger:where(.dds-active:not(:disabled, .dds-disabled)) { color: #fff; background-color: #ea1c0d; box-shadow: none; }  /* BS 2456 */
.dds-btn.dds-btn-info:where(:active:not(:disabled, .dds-disabled), .dds-active:hover, .dds-active:focus) { color: #fff; background-color: #00aec5; box-shadow: none; }
.dds-btn.dds-btn-success:where(:active:not(:disabled, .dds-disabled), .dds-active:hover, .dds-active:focus) { color: #fff; background-color: #47a44b; box-shadow: none; }
.dds-btn.dds-btn-warning:where(:active:not(:disabled, .dds-disabled), .dds-active:hover, .dds-active:focus) { color: #fff; background-color: #f08f00; box-shadow: none; }
.dds-btn.dds-btn-danger:where(:active:not(:disabled, .dds-disabled), .dds-active:hover, .dds-active:focus) { color: #fff; background-color: #f33527; box-shadow: none; }

.dds-btn.dds-btn-white {                                 /* 8983: grey text on white in every state */
  color: #999;
  background-color: #fff;
}

/* ---- Disabled (danceit.css:2210, 8297, 8366, 16181) ------------------------
   Faded to .65. A :disabled button keeps the pointer cursor and still takes
   the big shadow on hover, over its rest fill; .dds-disabled (danceit's
   global .disabled) takes no pointer at all. A bare grey or white button
   loses its rest shadow; the colour variants keep theirs (render). */
.dds-btn:where(:disabled, .dds-disabled, [aria-disabled="true"]) { opacity: .65; }
.dds-btn:where(.dds-disabled, [aria-disabled="true"]) {
  pointer-events: none;
  cursor: not-allowed;
}
.dds-btn:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:not(:hover, :focus)) { box-shadow: none; }
.dds-btn:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: #999; }
.dds-btn.dds-btn-default:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: #999; }
.dds-btn.dds-btn-primary:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: var(--dds-primary); }
.dds-btn.dds-btn-secondary:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: var(--dds-secondary); }
.dds-btn.dds-btn-info:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: var(--dds-info); }
.dds-btn.dds-btn-success:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: var(--dds-success); }
.dds-btn.dds-btn-warning:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: var(--dds-warning); }
.dds-btn.dds-btn-danger:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: var(--dds-danger); }
.dds-btn.dds-btn-white:where(:disabled, .dds-disabled, [aria-disabled="true"]):where(:hover, :focus) { background-color: #fff; }

/* ---- Link buttons (danceit.css:8382–8392, 8990–9000) -----------------------
   Transparent, no shadow, and no hover change — in every state, as danceit.
   A bare link is grey #999; with -primary it is the blue row action
   (PKbutton(), PK.php:2095); with -white it sits on a blue hero header. */
.dds-btn.dds-btn-link {
  color: #999;
  text-decoration: none;                                /* 9000 (danceit: !important) */
  background-color: transparent;
  box-shadow: none;
}
.dds-btn.dds-btn-primary.dds-btn-link { color: var(--dds-primary); }
.dds-btn.dds-btn-info.dds-btn-link { color: var(--dds-info); }
.dds-btn.dds-btn-success.dds-btn-link { color: var(--dds-success); }
.dds-btn.dds-btn-warning.dds-btn-link { color: var(--dds-warning); }
.dds-btn.dds-btn-danger.dds-btn-link { color: var(--dds-danger); }
.dds-btn.dds-btn-white.dds-btn-link { color: #fff; }  /* 8990 */
/* A blue link marked .dds-active and left alone shows Bootstrap's pressed
   fill (BS 2261 outranks MD's link rule there); hovered or focused it is a
   plain link again (8386) */
.dds-btn.dds-btn-primary.dds-btn-link:where(.dds-active:not(:hover, :focus, :disabled, .dds-disabled)) {
  color: #fff;
  background-color: #0c7cd5;
}
/* The card-header "add" stays #aaa in every state (27873: color !important);
   its place is 12-cards' / 14-tables' */
.dds-btn.dds-btn-link.dds-btn-datatable { color: var(--dds-label); }
/* <a class="dds-btn"> without href or tabindex takes its parent's colour, on
   hover always (BS 178: a:not([href]):not([tabindex]) outranks the variants).
   The white icon link on a hero header stays white there; elsewhere it
   turns the surrounding text colour, as in danceit. */
a:not([href]):not([tabindex]):where(.dds-btn) { color: inherit; }
a:not([href]):not([tabindex]):where(.dds-btn):is(:hover, :focus) { color: inherit; }

/* A row action just tapped keeps a pale blue square until focus moves on:
   it marks "the row I just hit" (danceit.css:28814, .3s ease-in-out) */
td .dds-btn.dds-btn-primary.dds-btn-link { transition: background-color var(--dds-duration-slow) var(--dds-ease-in-out); }
td .dds-btn.dds-btn-primary.dds-btn-link:focus:not(:disabled, .dds-disabled) { background-color: #007bff22; }
/* In a table a row action does not grow the row (27112, 27347): 38 x 36.5 */
.dds-table .dds-btn,
.dds-btn.dds-btn-dropdown.dds-btn-link.dds-btn-sm {
  padding: 10px;
  margin: -10px 0;
}

/* ---- Sizes (danceit.css:9896–9912) ----------------------------------------- */
.dds-btn.dds-btn-lg,
.dds-btn-group-lg > .dds-btn {
  padding: 1.125rem 2.25rem;                            /* 9896: 18px 36px -> 54.66px high */
  font-size: var(--dds-font-size-btn-lg);               /* 14px */
  line-height: var(--dds-line-height-btn-lg);
  border-radius: var(--dds-radius-btn);
}
.dds-btn.dds-btn-sm,
.dds-btn-group-sm > .dds-btn {
  padding: .40625rem 1.25rem;                           /* 9905: 6.5px 20px -> 29.5px high */
  font-size: var(--dds-font-size-btn-sm);               /* 11px */
  line-height: var(--dds-line-height-btn-sm);
  border-radius: var(--dds-radius-btn);
}
.dds-btn.dds-btn-round { border-radius: var(--dds-radius-btn); }  /* 9912's 30px capsule: dds has one button radius; an icon alone is round (below) */

.dds-btn.dds-btn-block {                                 /* 2896 */
  display: block;
  width: 100%;
}
.dds-btn.dds-btn-block + .dds-btn.dds-btn-block { margin-top: .5rem; }  /* 2901 */

/* ---- Icon only: 41px square, 30 small, 57 large (danceit.css:9916–9996) ---- */
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab) {
  width: 41px;
  min-width: 41px;
  height: 41px;
  padding: 0;
  overflow: hidden;
  font-size: 24px;
  line-height: 41px;
}
.dds-btn.dds-btn-fab,
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab).dds-btn-round { border-radius: 50%; }  /* 9929 */
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab):is(.dds-btn-sm, .dds-btn-fab-mini),
.dds-btn-group-sm > .dds-btn:is(.dds-btn-just-icon, .dds-btn-fab) {
  width: 30px;
  min-width: 30px;
  height: 30px;                                         /* 9939 */
  padding: 0;
}
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab).dds-btn-lg,
.dds-btn-group-lg > .dds-btn:is(.dds-btn-just-icon, .dds-btn-fab) {
  width: 57px;
  min-width: 57px;
  height: 57px;                                         /* 9971 (10009's 41px loses: the render is 57) */
  padding: 0;
  line-height: 56px;
}

/* ---- Icon + label (danceit.css:10021) --------------------------------------
   The icon is 1.1rem and pulls itself out of the line box (margin -1em 0),
   so the button stays 41.14px high. The gap is the literal space in the
   label: <i>play_arrow</i><span> start</span>, <span>next </span><i>…</i>. */
.dds-btn .dds-material-icons {
  position: relative;
  top: 0;
  display: inline-block;
  margin-top: -1em;
  margin-bottom: -1em;
  font-size: 1.1rem;
  vertical-align: middle;
}
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab) .dds-material-icons {  /* 9996 */
  position: absolute;                                   /* computes to display: block */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  font-size: 20px;
  line-height: 41px;                                    /* centred by line-height, as danceit */
  transform: none;
}
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab):is(.dds-btn-sm, .dds-btn-fab-mini) .dds-material-icons,
.dds-btn-group-sm > .dds-btn:is(.dds-btn-just-icon, .dds-btn-fab) .dds-material-icons { font-size: 17px; line-height: 29px; }  /* 9950 */
.dds-btn:is(.dds-btn-just-icon, .dds-btn-fab).dds-btn-lg .dds-material-icons,
.dds-btn-group-lg > .dds-btn:is(.dds-btn-just-icon, .dds-btn-fab) .dds-material-icons { font-size: 32px; line-height: 56px; }  /* 9983 */

/* ---- The dropdown caret on a button (danceit.css:2948, 14011) --------------
   PKdropdown(): button.dds-btn.dds-btn-primary.dds-dropdown-toggle "actions".
   It turns over while the menu is open (150ms, danceit's .15s linear). */
.dds-btn.dds-dropdown-toggle::after {
  content: "";
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  transition: transform var(--dds-duration-fast) linear;
}
.dds-show > .dds-btn.dds-dropdown-toggle::after,
.dds-btn.dds-dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
/* A PKtable / PKdropdown toolbar button is a little tighter (26719) */
.dds-toolbar-item button.dds-btn {
  padding: 10px 24px;
  margin-right: 15px;
}

/* ---- Button groups (danceit.css:3121–3250, MD 10051) -------------------------
   Joined buttons: inner ones lose their margin (MD 10066 .btn-group .btn+.btn
   {margin:0} beats Bootstrap's -1px) and their inner corners. Rare
   in danceit (the scr_results switch pair is two separate buttons). */
.dds-btn-group,
.dds-btn-group-vertical {
  position: relative;
  display: inline-flex;
  margin: 10px 1px;                                     /* MD 10051 */
  vertical-align: middle;
}
.dds-btn-group > .dds-btn,
.dds-btn-group-vertical > .dds-btn {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
}
.dds-btn-group > .dds-btn:is(:hover, :focus, :active, .dds-active),
.dds-btn-group-vertical > .dds-btn:is(:hover, :focus, :active, .dds-active) { z-index: 1; }
.dds-btn-group > .dds-btn:not(:last-child):not(.dds-dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.dds-btn-group > .dds-btn:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dds-btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.dds-btn-group-vertical > .dds-btn { width: 100%; }
.dds-btn-group-vertical > .dds-btn:not(:last-child) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.dds-btn-group-vertical > .dds-btn:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Radio / checkbox buttons: the input is there for the form, not for the eye */
.dds-btn-group-toggle > .dds-btn :is(input[type="radio"], input[type="checkbox"]) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* ---- Busy: a submit in progress (divergence 3) -----------------------------
   danceit hides the button and shows loader.svg in its place (PK.js:1-4), so
   the page reflows. dds keeps the button and its readable label where they
   are, stops it taking clicks, and runs a 2px line along its bottom edge in
   the text colour (white on a filled button, blue on a link) — the route
   bar's dds-sweep-x, on a faint track of the same colour (divergence 8). Set it
   with dds.busy(button, on) or <form data-dds-submit>. The track is a
   background layer, not a pseudo-element: ::before is left free for the
   judging area's enlarged touch targets. No cursor: pointer-events is none,
   so the pointer shows what lies beneath (10-buttons.js also guards clicks). */
.dds-btn.dds-busy {
  overflow: hidden;                                     /* the line stays inside the corners */
  pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, currentColor 25%, transparent),
                                    color-mix(in srgb, currentColor 25%, transparent));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% var(--dds-sweep-height);        /* the faint track, 2px */
}
.dds-btn.dds-busy::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--dds-sweep-width);                        /* 40%: only its transform moves */
  height: var(--dds-sweep-height);                      /* 2px */
  pointer-events: none;
  background-color: currentColor;
  border-radius: var(--dds-radius-item);
  opacity: .8;
  will-change: transform;
  animation: dds-sweep-x var(--dds-sweep-duration) var(--dds-sweep-ease) infinite;
}
/* the dropdown caret uses ::after too: a busy toggle drops its caret */
.dds-btn.dds-dropdown-toggle.dds-busy::after {
  display: block;
  margin: 0;
  vertical-align: 0;
  border: 0;
  transform: none;
}

/* ---- Toolbars around buttons (danceit.css:26557, 27135, 27275, 27280) ------ */
.dds-page-toolbar-static {
  margin-bottom: 2em;
  text-align: center;
}
.dds-page-toolbar-static.dds-page-toolbar-static--end { text-align: right; }   /* dds: a row of tools at the right */
.dds-page-footer-static {
  margin-top: 2em;
  text-align: center;
}
.dds-page-toolbar .dds-btn:not(:last-child) { margin-right: 1em; }
.dds-submit-parrent,                                     /* sic: danceit's .submit_parrent */
.dds-submit-parent { text-align: center; }

/* ---- The "press me" nudge (danceit.css:28599 .shakeit) ---------------------
   danceit shakes START and the award ceremony's END forever. dds nudges once
   when the button appears (nothing loops but loader lines), and a hidden
   button stays hidden (danceit's .shakeit beat .hidden). */
@keyframes dds-shakeit {                                /* one gentle sway, not danceit's 7-step jitter */
  30% { transform: translateX(-3px); }
  70% { transform: translateX(3px); }
}
.dds-btn.dds-shakeit { animation: dds-shakeit var(--dds-duration-slow) var(--dds-ease-standard) 1 both; }  /* danceit .82s loop */
/* danceit's own shake, ported exactly: mod_bank's START jitters left and right (-1, 2, -4,
   4px) for .82s, ease-in-out between every step. Two options:
   .dds-shakeit-loop  danceit's endless loop, for a button that must not be missed;
   .dds-shakeit-hint  the same .82s shake, then 5.2s of rest, repeating (a 6s cycle):
                      a "you can press this" hint. Stagger several with animation-delay. */
@keyframes dds-shakeit-loop {                            /* danceit.css:28604, step for step */
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes dds-shakeit-hint {                            /* the loop's steps in the first .82s of 6s */
  0%, 13.67%, 100% { transform: none; }
  1.37%, 12.3% { transform: translate3d(-1px, 0, 0); }
  2.73%, 10.93% { transform: translate3d(2px, 0, 0); }
  4.1%, 6.83%, 9.57% { transform: translate3d(-4px, 0, 0); }
  5.47%, 8.2% { transform: translate3d(4px, 0, 0); }
}
.dds-btn.dds-shakeit-loop { animation: dds-shakeit-loop .82s ease-in-out infinite both; }   /* 28601 */
.dds-btn.dds-shakeit-hint { animation: dds-shakeit-hint 6s ease-in-out 1.2s infinite both; }
.dds-btn.dds-hidden { display: none; }                  /* 27139 .hidden comes after .btn in danceit */

/* ---- The quiet button (spec 10 §quiet) -------------------------------------
   A secondary tool beside a heading: no fill, no border, no shadow, sentence
   case at the body size, in the ink it sits on (white on a hero header, the
   text colour on white; -primary makes it blue). Hover and focus lay a 12%
   tint of that ink under it. An icon leads; with [data-dds-fit] around it the
   words can drop and leave the icon (06-utilities .dds-fit-hide). */
.dds-btn.dds-btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--dds-radius-btn);
  box-shadow: none;
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-btn.dds-btn-quiet.dds-btn-primary { color: var(--dds-primary-dark); }
.dds-btn.dds-btn-quiet:is(:hover, :focus-visible),
.dds-btn.dds-btn-quiet[aria-pressed="true"] { color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); box-shadow: none; }
.dds-btn.dds-btn-quiet.dds-btn-primary:is(:hover, :focus-visible, [aria-pressed="true"]) { color: var(--dds-primary-dark); }
.dds-btn.dds-btn-quiet:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.dds-btn.dds-btn-quiet > .dds-material-icons { margin-top: 0; margin-bottom: 0; font-size: 20px; line-height: 20px; }   /* not .dds-btn's -1em: an icon alone keeps the button's height */
/* .dds-btn-set: the tool and its clear, fused like a chip and its action. The
   tool is a setting, not a call to act: normal weight, and while off a hairline
   ring (an inset shadow, so on and off are the same size); on, the firmer tint
   takes the ring's place. Below 640px a tool that is on drops its words (the
   tool's icon and the × say it), so it never crowds the title.
   .dds-btn-framed gives a quiet button outside a set the same hairline ring and
   normal weight: a setting that sits beside a .dds-btn-set and should match it. */
.dds-btn-set { display: inline-flex; align-items: stretch; gap: 1px; vertical-align: middle; }
.dds-btn-set > .dds-btn.dds-btn-quiet,
.dds-btn.dds-btn-quiet.dds-btn-framed { font-weight: var(--dds-font-weight-normal); }
.dds-btn-set > .dds-btn.dds-btn-quiet:not([aria-pressed="true"], .dds-btn-set-clear),
.dds-btn.dds-btn-quiet.dds-btn-framed:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 38%, transparent); }
.dds-btn-set > .dds-btn.dds-btn-quiet:not([aria-pressed="true"], .dds-btn-set-clear):is(:hover, :focus-visible),
.dds-btn.dds-btn-quiet.dds-btn-framed:not([aria-pressed="true"]):is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 50%, transparent); }
.dds-btn-set > .dds-btn[hidden] { display: none; }
.dds-btn-set > .dds-btn.dds-btn-quiet[aria-pressed="true"] { background: color-mix(in srgb, currentColor 20%, transparent); }
.dds-btn-set > .dds-btn.dds-btn-quiet:has(+ .dds-btn-set-clear:not([hidden])) { border-radius: var(--dds-radius-btn) 0 0 var(--dds-radius-btn); }
.dds-btn-set > .dds-btn.dds-btn-quiet.dds-btn-set-clear {
  padding: 6px 7px;
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 0 var(--dds-radius-btn) var(--dds-radius-btn) 0;
}
.dds-btn-set > .dds-btn.dds-btn-quiet.dds-btn-set-clear:is(:hover, :focus-visible) { background: color-mix(in srgb, currentColor 32%, transparent); }
.dds-btn-set > .dds-btn-set-clear > .dds-material-icons { font-size: 18px; line-height: 20px; }
/* words dropped (06 .dds-fit-hide in a .dds-fit-tight line): a square, its padding even all round */
.dds-fit-tight .dds-btn.dds-btn-quiet:has(> .dds-fit-hide) { justify-content: center; min-width: 36px; padding: 8px; }
.dds-fit-tight .dds-btn-set > .dds-btn.dds-btn-quiet.dds-btn-set-clear { min-width: 36px; padding: 8px; justify-content: center; }
@media (max-width: 639.98px) {
  .dds-btn-set > .dds-btn.dds-btn-quiet[aria-pressed="true"] > :is(.dds-fit-hide, .dds-btn-set-words) { display: none; }
  .dds-btn-set > .dds-btn.dds-btn-quiet[aria-pressed="true"]:has(> :is(.dds-fit-hide, .dds-btn-set-words)),
  .dds-btn-set:has(> [aria-pressed="true"]) > .dds-btn.dds-btn-quiet.dds-btn-set-clear { justify-content: center; min-width: 36px; padding: 8px; }
}

/* ---- Reduced motion --------------------------------------------------------
   The duration tokens already drop to 1ms (05-motion); what is left is the
   loops: the busy line stands still at 40% of the edge (divergence 8), no nudge. */
@media (prefers-reduced-motion: reduce) {
  .dds-btn,
  .dds-btn.dds-dropdown-toggle::after { transition: none; }
  .dds-btn.dds-busy::after { animation: none; }         /* stands at left: 0, 40% wide */
  .dds-btn:is(.dds-shakeit, .dds-shakeit-loop, .dds-shakeit-hint) { animation: none; }
}


/* ===== 11-forms.css ====================================================== */

/* ==========================================================================
   dds · 11-forms — Material Dashboard forms, as danceit draws them
   --------------------------------------------------------------------------
   Owner: forms. Spec: spec/11-forms.md (measured). Values from
   PKassets/css/danceit.css, cited by line; where the render disagreed, the
   render won (spec section noted).

   Contents
     1  group            .dds-form-group(.dds-bmd-form-group)
     2  text input       .dds-form-control (+ :read-only, disabled, number, code)
     3  labels           .dds-bmd-label-floating / -static, .dds-description
     4  status           .dds-has-danger / -success, .dds-form-control-feedback,
                         .dds-error, .dds-bmd-help
     5  reveal           .dds-has-reveal + .dds-input-reveal (password eye)
     6  compact grid     .dds-form-grid > .dds-col-form-label + control
     7  input group      .dds-input-group(-prepend, -text, -btn, -focus)
     8  textarea         textarea.dds-form-control
     9  native selects   select.dds-form-control, .dds-custom-select-sm,
                         .dds-simple-select(+ -arrow-down)
    10  bootstrap-select .dds-select, .dds-select-toggle, .dds-filter-option,
                         .dds-select-menu (on navigation's .dds-dropdown-menu)
    11  checkbox, radio  .dds-form-check(-label, -input, -sign), .dds-check, .dds-circle
    12  toggle           .dds-togglebutton > label > input + .dds-toggle
    13  file             .dds-form-file-upload, .dds-input-file-hidden / -visible
    14  datetime picker  .dds-datetimepicker (on .dds-dropdown-menu)
    15  search field     .dds-search(-sm) > i.dds-search-icon + input.dds-form-control, .dds-search-line
                         [data-dds-search-list] filters a list as you type (11-forms.js)

   Motion (CONVENTIONS 11). The floating label moves with transform (danceit
   animates top/font-size .3s ease; dds moves the same distance with a
   translate + scale, so only transform animates). The underline grows from
   the centre in 300ms on focus and snaps back on blur, as in danceit
   (10447). The checkbox tick is danceit's own box-shadow draw (@keyframes b).
   The toggle knob slides with transform. Menus arrive with danceit's
   dropdown scale-in (navigation owns the menu; forms only positions it).
   Reduced motion: the duration tokens are 1ms (05-motion).

   Divergences: 7 (visible :focus-visible on checks, radios, toggles and the
   select button).
   ========================================================================== */

/* ---- 1. Group ----------------------------------------------------------- */
/* danceit.css:12168 .form-group; bmd.js adds .bmd-form-group (dds JS adds
   .dds-bmd-form-group). 46px tall with one input. */
.dds-form-group {
  position: relative;
  margin: 8px 0 0;
  padding-bottom: 10px;
}
.dds-bmd-form-group { position: relative; }

/* ---- 2. Text input ---------------------------------------------------------
   danceit.css:10435 (.form-control), 10611 (the two gradients). The blue 2px
   line is the first background layer, 0 wide at rest; focus widens it to
   100% from the centre in .3s (10447); blur snaps back (0s). */
.dds-form-control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: .4375rem 0;                            /* 7px 0 */
  border: 0;
  border-radius: 0;
  font-family: var(--dds-font);
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.1;                               /* render 15.4px */
  color: var(--dds-input-text);
  background-color: transparent;
  /* --dds-form-line: the 2px focus line (blue; red / green with status;
     grey when read-only). --dds-form-extra: a third layer (the select caret). */
  --dds-form-line: var(--dds-input-line-focus);
  background-image:
    linear-gradient(0deg, var(--dds-form-line) 2px, transparent 0),
    linear-gradient(0deg, var(--dds-input-line) 1px, rgba(209, 209, 209, 0) 0),
    var(--dds-form-extra, none);
  background-repeat: no-repeat;
  background-position: bottom, 50% calc(100% - 1px);
  background-size: 0 100%, 100% 100%, auto;
  box-shadow: none;
  outline: 0;
  transition: background-size 0s var(--dds-ease-out);   /* danceit: background 0s ease-out */
  -webkit-appearance: none;
  appearance: none;
}
.dds-form-control:focus,
.dds-is-focused .dds-form-control {
  background-size: 100% 100%, 100% 100%, auto;
  transition-duration: var(--dds-duration-slow);          /* danceit.css:10447 .3s */
}
.dds-form-control::placeholder {                          /* danceit.css:10466 */
  color: var(--dds-label);
  font-weight: var(--dds-font-weight-normal);
  font-size: 14px;
  opacity: 1;
}
.dds-form-control:invalid { --dds-form-line: var(--dds-danger); }   /* danceit.css:10616 */
/* Read-only: both layers grey, so focus shows no blue (danceit.css:10620). */
.dds-form-control:read-only:not(select),
.dds-form-control[readonly] { --dds-form-line: var(--dds-input-line); }
/* ...and the readonly attribute keeps Bootstrap's grey fill (danceit.css:1740;
   Material Dashboard clears it for :disabled only - render). */
.dds-form-control[readonly] { background-color: #e9ecef; }
/* Disabled: danceit.css:10624 + the danceit layer at 12227 (a dotted 1px
   bottom border, not-allowed cursor; the dash image repeats no more). */
.dds-form-control:disabled,
.dds-form-control.dds-disabled,
fieldset:disabled .dds-form-control {
  background-image: linear-gradient(90deg, var(--dds-input-line) 0, var(--dds-input-line) 30%, transparent 0, transparent);
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 3px 1px;
  border-bottom: 1px dotted var(--dds-input-line);
  cursor: not-allowed;
  opacity: 1;                                        /* danceit.css:1740 (the UA dims a select to .7) */
}
/* Number: spin buttons hidden (danceit.css:26575). */
input[type=number].dds-form-control { -moz-appearance: textfield; }
input[type=number].dds-form-control::-webkit-inner-spin-button,
input[type=number].dds-form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* The judge access code is masked (danceit.css:27946 input[name=code]). */
input[name=code].dds-form-control,
.dds-form-control.dds-masked { -webkit-text-security: disc; }
/* Native date / time pickers keep the UA widget and its indicator as danceit
   shows it (no rule in danceit.css: the UA's full-strength icon, render). */
.dds-form-control::-webkit-calendar-picker-indicator { cursor: pointer; }
.dds-form-control::-webkit-datetime-edit { padding: 0; }

/* ---- 3. Labels -------------------------------------------------------------
   Floating label: after the input (PKinput). Rest: top 9.8px (.6125rem), 14px
   / 19.6px (11851, 11776). Filled: top -16px at 11px (11856, 12084). Focused:
   top -11.2px (15818 !important), so blurring a filled field moves the label
   up 4.8px; danceit does this. dds ends on danceit's own raster (a real 11px
   label at the real top); the move is animated by forms-state in JS (FLIP:
   the old box is drawn with an inverse transform that eases to none), so
   only transform moves.
   A floating label never turns blue (11776 beats 10758); a static one does. */
.dds-bmd-label-floating,
.dds-bmd-label-static {
  position: absolute;
  left: 0;
  margin: 0;
  font-family: var(--dds-font);
  font-weight: var(--dds-font-weight-normal);
  color: var(--dds-label);
  pointer-events: none;
}
.dds-bmd-label-floating {
  top: .6125rem;                                  /* 9.8px */
  font-size: 14px;
  line-height: 1.4;                               /* 19.6px */
  white-space: nowrap;
  transform-origin: 0 0;
  transition:
    transform var(--dds-duration-slow) var(--dds-ease-standard),
    color var(--dds-duration-fast) var(--dds-ease-standard);   /* danceit: all .3s ease */
}
.dds-is-filled .dds-bmd-label-floating {
  top: -16px;                                     /* 11856 */
  font-size: var(--dds-font-size-label);          /* 11px / 15.4px, 12084 */
}
.dds-is-focused .dds-bmd-label-floating {
  top: -11.2px;                                   /* 15818 */
  font-size: var(--dds-font-size-label);
}
/* The label masks what is under it with the card's #fff (26672:
   input[type=date|time] + label, input[value] + label; min-width 75%). A date
   or time label does it at rest too, so an empty field shows the label, not
   --:-- (render). */
.dds-form-control:is([type=date], [type=time], [type=datetime-local]) + .dds-bmd-label-floating {
  background: var(--dds-surface);
  min-width: 75%;
}
.dds-is-filled > .dds-form-control:is([type=date], [type=time], [type=datetime-local], [value]) + .dds-bmd-label-floating,
.dds-is-focused > .dds-form-control:is([type=date], [type=time], [type=datetime-local], [value]) + .dds-bmd-label-floating {
  background: var(--dds-surface);
  min-width: 75%;
}
/* Static label: before the input, top -7px (15801), 14px / 15.4px (11863). */
.dds-bmd-label-static {
  top: -7px;
  font-size: 14px;
  line-height: 1.1;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-is-focused .dds-bmd-label-static { color: var(--dds-primary); }   /* 10758 */
/* "(optional)" inside a label: danceit.css:12879 .description */
.dds-bmd-label-floating .dds-description,
.dds-bmd-label-static .dds-description,
.dds-description { color: var(--dds-description); }

/* ---- 4. Status: danger, success, feedback icon, error, help -----------------
   danceit.css:11443/11448 (danger), 10775/10780 (success), 12144 feedback,
   15788 .error, 10484 .bmd-help. Red / green are status next to a message
   (divergence 1). .has-danger i colours every icon in the group (26660). */
.dds-has-danger .dds-form-control { --dds-form-line: var(--dds-danger); }
.dds-has-success .dds-form-control { --dds-form-line: var(--dds-success); }
.dds-has-danger :is(.dds-bmd-label-floating, .dds-bmd-label-static),
.dds-has-danger .dds-material-icons { color: var(--dds-danger); }
.dds-has-success :is(.dds-bmd-label-floating, .dds-bmd-label-static),
.dds-has-success .dds-material-icons { color: var(--dds-success); }
.dds-form-control-feedback {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.dds-has-danger .dds-form-control-feedback { color: var(--dds-danger); opacity: 1; }
.dds-has-success .dds-form-control-feedback { color: var(--dds-success); opacity: 1; }
.dds-form-control-feedback .dds-material-icons { font-size: 24px; line-height: 24px; vertical-align: top; }
/* Room for the feedback icon: the value never runs under it. */
.dds-has-danger > .dds-form-control-feedback ~ .dds-form-control,
.dds-form-group:has(> .dds-form-control-feedback) > .dds-form-control { padding-right: 34px; }
.dds-error {                                       /* danceit.css:15788 */
  display: block;
  margin: 0;
  font-size: .8rem;                                /* 12.8px */
  font-weight: var(--dds-font-weight-light);
  line-height: 24px;
  color: var(--dds-form-error-ink, var(--dds-danger));
}
/* --dds-form-error-ink: an opt-in hook for the error text only. danceit's
   #f44336 at 12.8px/300 is 3.7:1 on white; a page that must meet WCAG AA
   (the API reference) sets --dds-form-error-ink: #c62828 (5.6:1, the
   design's danger ink) on its own root. The underline, label and icon stay
   danceit's red; unset, the text is danceit's red too. */
.dds-bmd-help {                                    /* danceit.css:10484: no margin of its own, */
  display: none;                                   /* so a .dds-mt-* utility on it still applies */
  font-size: .75rem;
  font-weight: var(--dds-font-weight-normal);
  line-height: 24px;
  color: var(--dds-text-muted);
}
.dds-is-focused .dds-bmd-help,
.dds-bmd-help.dds-always-visible { display: block; }

/* ---- 5. Password with a reveal button inside it -------------------------------
   No danceit counterpart (danceit's password fields have no eye); built from
   its parts: the feedback slot geometry (12144: 34px at the right, top 4px)
   holding a quiet icon button. The input keeps 40px on the right so typed
   text never runs under the button. JS: [data-dds-reveal] toggles the type. */
.dds-has-reveal > .dds-form-control { padding-right: 40px; }
.dds-input-reveal {
  position: absolute;
  top: 2px;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--dds-radius-dropdown);
  background: transparent;
  color: var(--dds-label);
  cursor: pointer;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-input-reveal::before {       /* an invisible 40x40 hit area around the 34x32 drawn button */
  content: "";
  position: absolute;
  inset: -4px -3px;
}
.dds-input-reveal .dds-material-icons { font-size: 20px; line-height: 20px; }
.dds-input-reveal[aria-pressed=true] { color: var(--dds-primary); }
.dds-input-reveal:focus-visible { outline: var(--dds-focus-ring); outline-offset: -2px; }
.dds-input-reveal:disabled { cursor: not-allowed; opacity: .5; }

/* ---- 6. Compact label | field grid ----------------------------------------------
   The horizontal form of Material Dashboard (.col-form-label, danceit.css:1760,
   15746: label padded to the input's text line), as a grid: the label column
   is as wide as its longest label; the field column takes the rest. Below
   576px the label sits above its field. Fields are plain underline inputs
   (no floating label) in .dds-form-group-sm (no top margin). */
.dds-form-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  column-gap: 15px;
}
.dds-col-form-label {
  margin: 0;
  padding: calc(.4375rem + 1px) 0;                 /* 8px: level with the value */
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 20px;
  color: var(--dds-label);                          /* 13308 label #aaa */
  text-align: right;
}
/* A native select is 41px (danceit.css:1745) against the inputs' 36px, and
   centres its value: drop the label by the 2.5px difference so its text
   stays level with the value. */
@media (min-width: 576px) {
  .dds-col-form-label:has(+ .dds-form-group > select.dds-form-control) { padding-top: 10.5px; padding-bottom: 10.5px; }
}
/* Inside a card, 12-cards' `.dds-card .dds-card-body .dds-form-group`
   (8px top margin, 0,3,0) comes later in the build; these beat it (0,4,0)
   so the field stays level with its label. */
.dds-form-grid > .dds-form-group,
.dds-form-group.dds-form-group-sm,
.dds-card .dds-card-body .dds-form-grid > .dds-form-group,
.dds-card .dds-card-body .dds-form-group.dds-form-group-sm { margin: 0; padding-bottom: 8px; }
@media (max-width: 575.98px) {
  .dds-form-grid { grid-template-columns: minmax(0, 1fr); }
  .dds-form-grid > .dds-col-form-label { padding: 8px 0 0; text-align: left; }
}

/* ---- 7. Input group with a prepend icon (Material Dashboard login) ----------
   Bootstrap 3252 / 3317 / 3346 + MD 12237: flex; the icon cell is 56px
   (24px icon + 15px each side + 1px transparent borders), 36px tall. The
   icon keeps #495057 on focus; the focus state is the group's .dds-is-focused. */
.dds-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.dds-input-group > .dds-form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.dds-input-group > .dds-form-control:focus { z-index: 3; }
.dds-input-group-prepend,
.dds-input-group-append,
.dds-input-group-btn { display: flex; }
.dds-input-group-prepend { margin-right: -1px; }
.dds-input-group-append { margin-left: -1px; }
.dds-input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  padding: 0 15px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.5;
  color: var(--dds-input-text);
  text-align: center;
  white-space: nowrap;
  background-color: transparent;
}
.dds-input-group-text .dds-material-icons { font-size: 24px; line-height: 1; }

/* ---- 8. Textarea ---------------------------------------------------------------
   danceit.css:12178 (height auto, resize none, 20px lines), 28322 (min-height
   10em, i.e. 140px at 14px), 26032 (padding-top 15px below 768). Label first
   (PKtextarea), so the #fff label box (26672) never applies. */
textarea.dds-form-control {
  height: auto;
  min-height: 10em;
  line-height: 1.428571;
  white-space: pre-wrap;
  resize: none;
}
@media (max-width: 767.98px) {
  textarea.dds-form-control { padding-top: 15px; }
}
.dds-form-control.dds-resize-y { resize: vertical; }

/* ---- 9. Native selects -------------------------------------------------------
   select.dds-form-control: danceit's plain underline select - appearance none
   and no caret (danceit.css:12132, render), 41px tall (1745: calc(2.4375rem +
   2px)). For short fixed lists where the enhanced select is too much (API console). */
select.dds-form-control {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
select.dds-form-control:not([size], [multiple], .dds-custom-select-sm) { height: calc(2.4375rem + 2px); }   /* 1745 */
select.dds-form-control::-ms-expand { display: none; }
select.dds-form-control[multiple],
select.dds-form-control[size]:not([size="1"]) { height: auto; --dds-form-extra: none; padding-right: 0; }
select.dds-form-control:disabled { cursor: not-allowed; }
/* Small control: Bootstrap's .form-control-sm (danceit.css:1810, 1827) - 4px
   top/bottom, a select 36px tall. Material keeps the font 14px / 1.1, the side
   padding 0 and the radius 0 (render). On the DataTables length box
   custom-select-sm's 6px wins, as in danceit (render). */
.dds-form-control.dds-form-control-sm:not(.dds-custom-select-sm) { padding-top: .25rem; padding-bottom: .25rem; }
select.dds-form-control.dds-form-control-sm:not([size], [multiple]) { height: calc(2.125rem + 2px); }
/* DataTables length box (14-tables uses it): danceit.css custom-select-sm,
   both lines grey, inline, 36px (render). */
.dds-custom-select-sm {
  display: inline-block;
  width: auto;
  height: 36px;
  padding: 6px 0;
  vertical-align: middle;
  --dds-form-line: var(--dds-input-line);
  cursor: pointer;
}
/* danceit draws no caret on the DataTables length box (render). */
select.dds-custom-select-sm { --dds-form-extra: none; padding-right: 0; }
/* danceit shows nothing on keyboard focus (both lines stay grey): dds adds
   the ring on :focus-visible only (divergence 7, as .dds-simple-select). */
.dds-custom-select-sm:focus-visible { outline: var(--dds-focus-ring); outline-offset: 1px; }
/* Chromium matches :focus-visible on a clicked select: 11-forms.js marks a
   pointer press [data-dds-pointer], and the pointer look stays danceit's. */
select.dds-custom-select-sm[data-dds-pointer]:focus-visible,
select.dds-simple-select[data-dds-pointer]:focus-visible { outline: 0; }
/* PKselect $simple / 500+ options (danceit.css:28619, 28627). */
.dds-simple-select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: .3em;
  border: 1px solid var(--dds-gray);
  border-radius: var(--dds-radius-dropdown);
  font-family: var(--dds-font);
  font-size: 16px;
  font-weight: var(--dds-font-weight-normal);       /* render: the UA's 400, danceit sets none */
  line-height: 24px;
  color: var(--dds-black);
  background-color: #efefef;                        /* danceit.css:28619 */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.dds-simple-select:focus-visible { outline: var(--dds-focus-ring); outline-offset: 1px; }
.dds-simple-select-wrap { position: relative; }
.dds-simple-select-arrow-down {
  position: absolute;
  top: 0;
  right: 1em;
  margin-top: 6px;
  color: var(--dds-text);
  pointer-events: none;
}

/* ---- 10. bootstrap-select look: <select data-dds-select> -----------------------
   bootstrap-select 1.13.1 as danceit skins it (25444 select-with-transition,
   26645-26664). The native <select> stays in the wrapper, invisible, and is
   the submitted field (24999). The value text is always 14px #aaa (26654). */
.dds-select {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 8px;                               /* 26650 */
  vertical-align: middle;
}
.dds-select > select {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  display: block;
  width: .5px;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.dds-select-toggle {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  min-width: 3em;
  height: 34px;
  margin: 5px 1px;
  padding: 12px 25px 5px 0;
  border: 0;
  border-radius: 0;
  font-family: var(--dds-font);
  font-size: 12px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.428571;
  color: var(--dds-text);
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  background-color: transparent;
  background-image:
    linear-gradient(0deg, var(--dds-input-line-focus) 2px, transparent 0),
    linear-gradient(0deg, var(--dds-input-line) 1px, rgba(209, 209, 209, 0) 0);
  background-repeat: no-repeat;
  background-position: bottom, 50% calc(100% - 1px);
  background-size: 0 100%, 100% 100%;
  box-shadow: none;
  outline: 0;
  transition: background-size 0s linear;
  -webkit-appearance: none;
  appearance: none;
}
.dds-select-toggle:focus {        /* open, focus sits in the list: the line stays grey as in danceit */
  background-size: 100% 100%, 100% 100%;
  transition-duration: var(--dds-duration-slow);   /* 25462 .3s */
}
.dds-select-toggle:focus-visible { outline: var(--dds-focus-ring); outline-offset: 1px; }  /* divergence 7, as .dds-simple-select */
.dds-select-toggle::after {                         /* the caret, danceit.css:2948, 14011 */
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  transition: transform var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-select.dds-dropup .dds-select-toggle::after {  /* danceit.css:2991: a dropup's caret points up... */
  border-top: 0;
  border-bottom: .3em solid;
}
.dds-select.dds-show .dds-select-toggle::after { transform: rotate(180deg); }  /* ...and flips when open (13992) */
.dds-filter-option {
  position: absolute;
  inset: 0;
  padding: inherit;
  overflow: hidden;
  text-align: left;
}
.dds-filter-option-inner {
  display: block;
  overflow: hidden;
  padding-right: inherit;                            /* bootstrap-select .filter-option-inner */
  font-size: .875rem;                                /* 26654 */
  line-height: 1.42857;                              /* 19.98px, as .filter-option-inner-inner renders */
  color: var(--dds-label);
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dds-select.dds-has-danger .dds-filter-option-inner { color: var(--dds-danger); }   /* 26660 */
.dds-select.dds-has-success .dds-filter-option-inner { color: var(--dds-success); } /* 26664 */
.dds-select + .dds-error { margin: -14px 0 18px; }                                  /* 26645 */
.dds-select.dds-disabled .dds-select-toggle,
.dds-select-toggle:disabled { opacity: .65; cursor: not-allowed; }

/* The open menu: navigation's .dds-dropdown-menu (look, scale-in motion) +
   .dds-select-menu (forms: where it sits and how it scrolls). Measured:
   top 39px / left 1px under the wrapper, margin-top 2px, padding 0 0 5px
   (25389 zeroes the top), min-width = the button, max-height 50vh (26614);
   the menu itself scrolls so the search box can stick (25393). */
.dds-select-menu {
  position: absolute;
  top: 39px;
  left: 1px;
  z-index: var(--dds-z-select-menu);
  box-sizing: border-box;
  min-width: 100%;
  max-height: 50vh;
  margin-top: 2px;
  padding: 0 0 5px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dds-select.dds-dropup .dds-select-menu { top: auto; bottom: 39px; margin: 0 0 2px; transform-origin: 0 100%; }
.dds-select-options { margin: 0; padding: 0; list-style: none; }
.dds-select-options > li { display: block; }
.dds-select-options > li[hidden] { display: none; }
.dds-select-menu .dds-dropdown-item { position: relative; cursor: pointer; }
.dds-select-menu .dds-dropdown-item.dds-disabled { color: #777; cursor: default; }          /* 13923 */
/* The blue fill (13980 .active, no shadow) belongs to the keyboard-active
   option only. A single select opens with its chosen option active
   (bootstrap-select's keepActive), so that one is blue; the first arrow key
   moves .dds-active and the chosen option goes back to plain text, as
   bootstrap-select 1.13.1 drops 'active' from the previous item
   (bootstrap-selectpicker.js:2434, 2486) and has no .selected fill.
   Multiple (.dds-show-tick): chosen options are marked by the tick box.
   Doubled hook: navigation's :hover/:focus/.dds-active chip shadow (0,3,0)
   comes later in the build; a resting active option is flat (24942,
   measured). Hover keeps navigation's shadow, as danceit does (24938). */
.dds-dropdown-menu.dds-select-menu .dds-dropdown-item.dds-active {
  background-color: var(--dds-primary);
  color: var(--dds-text-on-primary);
}
.dds-dropdown-menu.dds-select-menu .dds-dropdown-item.dds-active:not(:hover) { box-shadow: none; }
.dds-select-menu .dds-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.dds-check-mark { display: none; }                                                         /* 25242 */
.dds-select.dds-show-tick .dds-text { margin-right: 34px; }
.dds-select.dds-show-tick .dds-selected .dds-check-mark {                                  /* 25293 */
  position: absolute;
  top: 11px;
  right: 15px;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--dds-primary);
}
.dds-select.dds-show-tick .dds-selected .dds-check-mark::after {                           /* 25308 */
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  margin: 2px auto 0;
  border: solid var(--dds-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dds-bs-searchbox {                                                                        /* 25393 */
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px;
  background-color: var(--dds-surface);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
}
.dds-bs-searchbox .dds-form-control { margin-bottom: 0; }
/* Below 768 the menu shrinks to its content (25805). */
@media (max-width: 767.98px) {
  .dds-select-menu { min-width: auto; max-width: calc(100vw - 30px); }
}

/* ---- 11. Checkbox and radio -----------------------------------------------------
   Material Dashboard (danceit.css:10080-10340) with danceit's layer (15805,
   26756). Checkbox: label text first, then input + .dds-form-check-sign >
   .dds-check (PKcheckbox). Radio: input first, the text, then .dds-circle >
   .dds-check (PKradio). A checked checkbox is a #007bff fill masked by six
   white box-shadows, so what shows is a blue outline and a blue tick
   (spec 8); the mask is copied verbatim and drawn in with danceit's
   @keyframes b. */
.dds-form-check {
  position: relative;
  display: inline-block;                            /* 26756 */
  margin-bottom: .5rem;
  padding-left: 0;
  font-size: .875rem;                               /* inherits danceit's 14px / 20px body text */
  line-height: 1.42857;                          /* danceit.css:13306 (19.98px) */
}
.dds-card .dds-form-check { margin-top: 5px; }      /* 14521 */
.dds-form-check-label {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 15px 0 25px;                           /* 15805 */
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.42857;                          /* danceit.css:13306 (19.98px) */
  color: var(--dds-label);
  cursor: pointer;
}
.dds-form-check-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.dds-form-check-label .dds-form-check-sign,
.dds-form-check-label .dds-circle {
  position: absolute;
  top: -1px;
  left: -1px;
  display: block;
  vertical-align: middle;
}
.dds-form-check-sign { padding-right: 10px; }
.dds-form-check-sign .dds-check {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  top: -1px;                                        /* measured: the box sits 1px up-left of the sign */
  left: -1px;
  border-radius: 3px;
  overflow: hidden;
  vertical-align: baseline;               /* as danceit: the line box grows with it */
  transition: background-color var(--dds-duration-base) var(--dds-ease-standard), border-color var(--dds-duration-base) var(--dds-ease-standard);
}
.dds-form-check-sign .dds-check::before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  margin-top: -3px;
  margin-left: 7px;
  color: var(--dds-white);
  transform: rotate(45deg);
  box-shadow: 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, 0 0 0 0, inset 0 0 0 0;
}
.dds-form-check-input:checked + .dds-form-check-sign .dds-check { background: var(--dds-primary); }
.dds-form-check-input:checked + .dds-form-check-sign .dds-check::before {
  box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
  animation: dds-check-draw var(--dds-duration-slow) var(--dds-ease-decelerate) forwards;
}
@keyframes dds-check-draw {                         /* danceit.css:10317 @keyframes b */
  0%   { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; }
  50%  { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px; }
  100% { box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; }
}
/* The halo: when a box becomes checked, danceit fades a dark disc in and out
   behind it (.form-check-sign:before 20px, rgba(0,0,0,.84), scale 2.3,
   danceit.css:10097; radio .circle:before 15px at -1px, 10287; both run
   `animation: c .5s`, 10152 / 10303; @keyframes c 0 -> .2 -> 0, 10329).
   500ms is danceit's own duration (2.5 x base, so it drops to ~0 under
   reduced motion); the standard curve per segment is within .01 of danceit's
   default `ease` at the measured frames. It
   runs only on becoming :checked, never on unchecking. */
.dds-form-check-sign::before,
.dds-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, .84);
  opacity: 0;
  transform: scale3d(2.3, 2.3, 1);
  pointer-events: none;
}
.dds-circle::before { top: -1px; left: -1px; width: 15px; height: 15px; }  /* 10287 */
.dds-form-check-input:checked + .dds-form-check-sign::before,
.dds-form-check-input:checked + .dds-circle::before {
  animation: dds-check-halo calc(var(--dds-duration-base) * 2.5) var(--dds-ease-standard);
}
@keyframes dds-check-halo {                         /* danceit.css:10329 @keyframes c */
  0%   { opacity: 0; }
  50%  { opacity: .2; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dds-form-check-input:checked + .dds-form-check-sign::before,
  .dds-form-check-input:checked + .dds-circle::before { animation: none; }
}
.dds-form-check-input:disabled ~ .dds-form-check-sign .dds-check { border-color: var(--dds-black); opacity: .26; }  /* 10169 */
.dds-form-check-input:disabled:checked ~ .dds-form-check-sign .dds-check { background-color: var(--dds-black); }    /* 10186 */
.dds-form-check-input:focus-visible + .dds-form-check-sign .dds-check,
.dds-form-check-input:focus-visible ~ .dds-circle {                        /* divergence 7 */
  outline: var(--dds-focus-ring);
  outline-offset: var(--dds-focus-ring-offset);
}
/* Radio: danceit.css:10217-10274. The dot is the 15px .dds-check scaled to
   .65 (9.75px) in 200ms (the MD span transition). */
.dds-circle {
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(0, 0, 0, .54);
  border-radius: 100%;
  transition: border-color var(--dds-duration-base) var(--dds-ease-standard);
}
.dds-form-check-label .dds-circle { top: 1px; }
.dds-circle .dds-check {
  position: absolute;
  top: -1px;
  left: -1px;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background-color: var(--dds-primary);
  transform: scale3d(0, 0, 0);
  transition: transform var(--dds-duration-base) var(--dds-ease-standard), background-color var(--dds-duration-base) var(--dds-ease-standard);
}
.dds-form-check-input:checked ~ .dds-circle { border-color: var(--dds-primary); }
.dds-form-check-input:checked ~ .dds-circle .dds-check { transform: scale3d(.65, .65, 1); }
.dds-form-check-input:disabled ~ .dds-circle { border-color: var(--dds-black); opacity: .26; }
.dds-form-check-input:disabled ~ .dds-circle .dds-check { background-color: var(--dds-black); }
.dds-form-check-input:disabled ~ .dds-form-check-sign,
.dds-form-check-input:disabled ~ .dds-circle { cursor: not-allowed; }
/* Heats controls (moderator bank): danceit.css:28847, 27411, 28855. */
.dds-heats-controls .dds-form-check-label { padding-right: .7em; padding-left: 1.5em; }
.dds-pipe { margin: 0 .5em; opacity: .6; }
a.dds-edit-heats {
  color: var(--dds-label);
  font-weight: var(--dds-font-weight-normal);
  text-decoration: none;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
a.dds-edit-heats:hover { color: var(--dds-primary); }

/* ---- 12. Toggle switch ----------------------------------------------------------
   danceit.css:14128-14218 (+ 26760 inline-block, 28317 .form). Track 30x15
   rgba(80,80,80,.7); knob 20px white at left -5px, top -2.5px; on: track
   #007bff at .7, knob slides 20px right (danceit animates left .3s; dds
   the same distance with transform). No focus style in danceit: dds shows
   the 15px press halo on :focus-visible (divergence 7). */
.dds-togglebutton {
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
}
.dds-form .dds-togglebutton { position: relative; top: .5em; }
.dds-togglebutton label {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.42857;                          /* danceit.css:13306 (19.98px) */
  color: rgba(0, 0, 0, .26);
  cursor: pointer;
}
.dds-togglebutton input[type=checkbox] {        /* danceit.css:14157: in flow, 0x0 */
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0;
  opacity: 0;
}
.dds-toggle {
  display: inline-block;
  width: 30px;
  height: 15px;
  margin: 0 15px 0 5px;
  border-radius: 15px;
  background-color: rgba(80, 80, 80, .7);
  text-align: left;
  vertical-align: middle;
  transition: background-color var(--dds-duration-slow) var(--dds-ease-standard);
}
.dds-toggle::after {                               /* danceit.css:14174: in flow, nudged */
  content: "";
  position: relative;
  display: inline-block;
  top: -2.5px;
  left: -5px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(0, 0, 0, .54);
  border-radius: 20px;
  background-color: var(--dds-white);
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4);
  transition:
    transform var(--dds-duration-slow) var(--dds-ease-standard),
    background-color var(--dds-duration-slow) var(--dds-ease-standard),
    border-color var(--dds-duration-slow) var(--dds-ease-standard),
    box-shadow var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-togglebutton input:checked + .dds-toggle { background-color: rgba(var(--dds-primary-rgb), .7); }
.dds-togglebutton input:checked + .dds-toggle::after { transform: translateX(20px); border-color: var(--dds-primary); }
.dds-togglebutton input + .dds-toggle:active::after,
.dds-togglebutton input:focus-visible + .dds-toggle::after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px rgba(0, 0, 0, .1);
}
.dds-togglebutton input:checked + .dds-toggle:active::after,
.dds-togglebutton input:checked:focus-visible + .dds-toggle::after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .4), 0 0 0 15px rgba(var(--dds-primary-rgb), .1);
}
/* Divergence 7: the same 2px #007bff ring as radios and buttons, on the track.
   Offset 6px clears the 20px knob (2.5px above/below, 5px beyond each end). */
.dds-togglebutton input:focus-visible + .dds-toggle {
  outline: var(--dds-focus-ring);
  outline-offset: 6px;
}
/* On a blue header or chip (the mod_bank toolbar chip) the ring is white, as in
   12-cards' "keyboard focus on blue". */
:is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger):not(.dds-card-header-icon, .dds-card-header-text) .dds-togglebutton input:focus-visible + .dds-toggle,
:is(.dds-card-icon, .dds-card-text) .dds-togglebutton input:focus-visible + .dds-toggle { outline-color: var(--dds-white); }
.dds-togglebutton input:disabled + .dds-toggle::after { background-color: #bdbdbd; }        /* 14196 */
.dds-togglebutton input:disabled + .dds-toggle,
.dds-togglebutton label:has(input:disabled) { cursor: not-allowed; }
/* Saving and failed (moderator bank: danceit.css:28863-28884, PKbankModerator.js
   addPendingIndicator / addFailedIndicator). danceit pulses the track
   (pendingPulse .7 <-> .4 blue, failedPulse red); dds never pulses. Saving is
   loading, so it is a line (divergence 8): the track holds its checked blue
   (danceit's 0% frame) and a 2px dds-sweep line runs under the track -
   dds.forms.saving(input, 'pending') puts it there with dds.loading(label).
   Failed: the track holds danceit's red (its 0% frame), with the reason as a
   word next to it (divergence 1); a click retries, as in danceit. */
.dds-togglebutton .dds-toggle.dds-pending-pulse { cursor: progress; }
.dds-togglebutton input + .dds-toggle.dds-failed-toggle,
.dds-toggle.dds-failed-toggle { background-color: #dc3545; cursor: pointer; }                 /* 28867 */
.dds-togglebutton label > .dds-loader-line {        /* under the 30px track, not the whole label */
  right: auto;
  bottom: -2px;
  left: 5px;
  width: 30px;
  border-radius: 0;
}

/* ---- 13. File input (PKfile) ------------------------------------------------------
   danceit.css:12184 (the real file input fills the group, invisible),
   12215 (the button has no margin), 26668 (.error pulled up 5px). The button
   is 10-buttons' .dds-btn.dds-btn-link.dds-btn-fab.dds-btn-primary (41px). */
.dds-form-file-upload .dds-input-file-hidden {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.dds-form-file-upload .dds-input-group { width: 100%; flex-wrap: nowrap; }
.dds-form-file-upload .dds-input-group-btn .dds-btn { margin: 0; }
.dds-input-file-visible { cursor: pointer; }
/* readonly stops typing into the visible field; danceit's field stays transparent,
   not Bootstrap's readonly grey (twin 11-forms--file) */
.dds-input-file-visible[readonly] { background-color: transparent; }
.dds-form-file-upload .dds-error { margin-top: -5px; }

/* Closed menus stay out of the page even where navigation's .dds-dropdown-menu
   is not loaded; when it is, its own display:none + allow-discrete rule animates them. */
.dds-select-menu:not(.dds-show),
.dds-datetimepicker:not(.dds-show) { display: none; }

/* ---- 14. Date / time picker ----------------------------------------------------------
   danceit really uses native date / time / datetime-local inputs (PKinput);
   they are .dds-form-control as above. The picker widget is the Material
   Dashboard skin of Eonasdan bootstrap-datetimepicker (danceit.css:22512-22900),
   which danceit styles but never loads; dds draws it for
   <input data-dds-datetimepicker> and writes ISO values. It sits on
   navigation's .dds-dropdown-menu (look and scale-in motion). */
.dds-datetimepicker {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: var(--dds-z-datetimepicker);
  box-sizing: border-box;
  width: 19em;                                      /* 22553: 304px */
  min-width: 0;
  margin-top: 2px;
  padding: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--dds-text-dark);
}
.dds-datetimepicker table { width: 100%; margin: 0; border-collapse: collapse; }
.dds-datetimepicker :is(th, td) { padding: 1px; text-align: center; }
.dds-datetimepicker th { font-weight: var(--dds-font-weight-normal); line-height: 20px; }
.dds-datetimepicker-nav,
.dds-picker-switch,
.dds-day,
.dds-timepicker-step,
.dds-timepicker-hour,
.dds-timepicker-minute {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard), color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-datetimepicker-nav {                           /* 22740: 27px round, 12px icon */
  display: inline-block;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  line-height: 28px;
  vertical-align: top;
}
.dds-datetimepicker-nav .dds-material-icons { font-size: 12px; line-height: 28px; vertical-align: top; }
.dds-picker-switch {                                /* 22684, 22728 */
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 27px;
  padding-top: 3.5px;                               /* th: 20px line, middle of a 27px cell */
  border-radius: 3px;
  font-size: 14px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 20px;
  cursor: default;                                  /* a title here, not a button */
}
.dds-datetimepicker .dds-dow {                      /* 22758 */
  padding: 10px 1px 5px;
  border-bottom: 1px solid var(--dds-border-light);
  font-size: 12px;
  font-weight: var(--dds-font-weight-normal);
  color: var(--dds-text-card);
  text-transform: uppercase;
}
.dds-datetimepicker td { line-height: 24px; }
.dds-day {                                          /* 22793 */
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;                                        /* render: at the cell's left, not centred */
  border-radius: 50%;
  font-size: 14px;
  font-weight: var(--dds-font-weight-light);
  line-height: 30px;
  color: var(--dds-text);
}
.dds-day.dds-old,
.dds-day.dds-new { color: var(--dds-muted); }      /* 22820 */
:is(.dds-datetimepicker-nav, .dds-day, .dds-timepicker-step, .dds-timepicker-hour, .dds-timepicker-minute):hover,
.dds-day.dds-focus { background-color: var(--dds-border-light); }                     /* 22811 #eee */
.dds-day.dds-active,
.dds-day.dds-active:hover {                         /* 22839 */
  background-color: var(--dds-primary);
  color: var(--dds-text-on-primary);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 10px -5px var(--dds-primary-tint);
}
.dds-day.dds-today::before {                        /* 22828 */
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 5px solid transparent;                    /* a 10 x 5 triangle pointing up */
  border-bottom-color: var(--dds-primary);
}
.dds-day.dds-active.dds-today::before { border-bottom-color: var(--dds-white); }
.dds-day:disabled,
.dds-day.dds-disabled { color: var(--dds-border-light); background: none; cursor: not-allowed; }  /* 22850 */
.dds-datetimepicker :focus-visible { outline: var(--dds-focus-ring); outline-offset: 0; }
/* Time view: 40px round steppers in blue, 18px / 300 hour and minute (22607-22641). */
.dds-datetimepicker-time td { line-height: 24px; }
.dds-timepicker-step,
.dds-timepicker-hour,
.dds-timepicker-minute {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  vertical-align: middle;
}
/* A stepper is danceit's .btn (12px / 17.14px line, 3.2px radius) holding a
   40px round icon pulled out by -17.6px margins (render: 46 x 17.1 button). */
.dds-datetimepicker .dds-timepicker-step {
  width: auto;
  height: auto;
  border-radius: var(--dds-radius-btn);
  font-size: 12px;
  line-height: 1.42857;
  color: var(--dds-primary);
}
.dds-datetimepicker .dds-timepicker-step:hover { background-color: transparent; }
.dds-datetimepicker .dds-timepicker-step .dds-material-icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -17.6px 3px;
  border-radius: 50%;
  font-size: 17.6px;
  line-height: 40px;
  color: inherit;
  vertical-align: middle;
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-datetimepicker .dds-timepicker-step:hover .dds-material-icons { background-color: var(--dds-border-light); }
.dds-datetimepicker .dds-timepicker-step:focus-visible { outline: 0; }
.dds-datetimepicker .dds-timepicker-step:focus-visible .dds-material-icons { outline: var(--dds-focus-ring); outline-offset: -2px; }
/* navigation's dropdown icon rule (grey, 8px right margin) must not reach the picker */
.dds-datetimepicker .dds-datetimepicker-nav .dds-material-icons { margin: 0; color: inherit; }
.dds-timepicker-hour,
.dds-timepicker-minute { font-size: 18px; font-weight: var(--dds-font-weight-light); }
.dds-datetimepicker-time .dds-separator { box-sizing: border-box; width: 14.64px; }   /* render: 14.64px cell */
.dds-datetimepicker-time + .dds-datetimepicker-days,
.dds-datetimepicker-days + .dds-datetimepicker-time { margin-top: 4px; border-top: 1px solid var(--dds-border-light); }
@media (max-width: 399.98px) {
  .dds-datetimepicker { width: min(19em, calc(100vw - 30px)); }
}

/* ---- 15. Search field ---------------------------------------------------------
   dds's one search: every search in dds is this field (the table's own, 14-tables,
   is built as a -sm one). It says what it searches in its placeholder, so it
   needs no label above it (give the input an aria-label). Material's search
   glyph leads, in the placeholder's grey, blue on focus. */
.dds-search {
  position: relative;
  display: block;
  margin: 0;
}
.dds-search > .dds-search-icon {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--dds-label);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-search:focus-within > .dds-search-icon { color: var(--dds-primary); }
.dds-search > .dds-form-control { padding-left: 30px; }
.dds-search > .dds-form-control::placeholder { text-transform: lowercase; }  /* as the table's search */
/* -sm: the small search at the end of a line (a table's chrome, a section title,
   a step in a dialog): a 20px glyph, 12.5em wide (10em on a phone). Inline-flex,
   so the box is the input's height exactly and the glyph centres on it. */
.dds-search.dds-search-sm { display: inline-flex; vertical-align: middle; max-width: 100%; }
.dds-search.dds-search-sm > .dds-search-icon { font-size: 20px; }
.dds-search.dds-search-sm > .dds-form-control { width: 12.5em; max-width: 100%; margin: 0; padding: 4px 0 4px 26px; }
@media (max-width: 639.98px) {
  .dds-search.dds-search-sm > .dds-form-control { width: 10em; }
}
/* .dds-search-line: a title at the start, a -sm search at the end of the same
   line. The search drops under the title only when the two do not fit side by side. */
.dds-search-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}
.dds-search-line > :first-child { min-width: 0; margin-top: 0; margin-bottom: 0; }
.dds-search-line > .dds-search { margin-left: auto; }


/* ===== 12-cards.css ====================================================== */

/* ==========================================================================
   dds · 12-cards — danceit's cards, ported
   --------------------------------------------------------------------------
   Owner: cards. Material Dashboard 2.1.1's .card (danceit.css 14490–15520)
   with danceit's own overrides on top (25000–29112). Same vocabulary with the
   dds- prefix, same values; the specificity mirrors danceit's (.card .x) so a
   screen part can override a card the way danceit's screens do.

     .dds-card                         white, 6px, 0 1px 4px shadow, 30px 0
       .dds-card-header                transparent band (plain)
         .dds-card-header-primary      the hero: gradient band lifted 20px
           + .dds-card-header-icon     … or only the .dds-card-icon chip
           + .dds-card-header-text     … or only the .dds-card-text chip
         -success / -danger            status gradients (JS swaps them)
         > .dds-card-header-line       the title and its tools on one line ([data-dds-fit]
             > .dds-card-header-tools    lets the tools drop their words first)
       .dds-card-body                  15px 20px
       .dds-card-footer                flex, 10px 0 0, margin 0 15px 10px
     .dds-card-plain  .dds-card-raised  .dds-card-stats  .dds-card-login
     .dds-card-hidden (the login drop) .dds-card-pricing .dds-category-header
     .dds-card-collapse  .dds-list-item  .dds-card-scroll  .dds-card-sticky-footer
     .dds-card-shade-1 / -2 / -3       a card on a card: a touch bluer per step (design §5)
     .dds-card-shade-0                 keep a nested card white

   Not here: .dds-rate and everything the judging cards do (20-judging), the
   buttons inside (10-buttons), the form groups (11-forms), the DataTables
   move-up row (14-tables).
   ========================================================================== */

/* ---- The card ------------------------------------------------------------ */
.dds-card {
  position: relative;                                   /* danceit.css:4113 */
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;                                          /* danceit.css:14496 */
  margin: var(--dds-card-margin) 0;                     /* 30px 0 */
  border: 0;
  border-radius: var(--dds-radius-card);                /* 6px */
  background: var(--dds-card-bg);
  background-clip: border-box;
  box-shadow: var(--dds-shadow-card);                   /* danceit.css:14827 overrides MD's 3 layers */
  color: var(--dds-text-card);                          /* #333 */
  font-size: var(--dds-font-size-card);                 /* 14px */
  overflow-wrap: break-word;
}
/* .dds-card-raised has no danceit rule: it is the default card, kept as a hook (spec §2)
   so prefixed danceit markup (a_select, a_purchase_or_code, c_code_show: card card-raised)
   ports as is. Declared empty, so the class is defined and changes nothing. */
.dds-card-raised { }

/* ---- Shades: a card on a card (design §5) ---------------------------------
   White on white loses the edge, so a card inside a card takes a tone: shade 1 on its
   own, shade 2 one level deeper. Each step adds a little blue rather than grey, and the
   lift softens, since the parent already carries the shadow. Pick a step by hand with
   .dds-card-shade-1|2|3 (on any card, or any block that should read as a card's inset);
   .dds-card-shade-0 keeps a nested card white. :where() keeps it at the card's weight,
   so every variant below (plain, stats, pricing…) still wins. */
.dds-card :where(.dds-card) { background: var(--dds-card-shade-1); box-shadow: var(--dds-shadow-card-inset); }
:where(.dds-card .dds-card) .dds-card { background: var(--dds-card-shade-2); }
:where(.dds-card-shade-1, .dds-card-shade-2, .dds-card-shade-3) { box-shadow: var(--dds-shadow-card-inset); }
.dds-card-shade-1 { background: var(--dds-card-shade-1); }
.dds-card-shade-2 { background: var(--dds-card-shade-2); }
.dds-card-shade-3 { background: var(--dds-card-shade-3); }
.dds-card-shade-0 { background: var(--dds-card-bg); box-shadow: var(--dds-shadow-card); }

.dds-card .dds-card-body {
  position: relative;
  flex: 1 1 auto;                                       /* danceit.css:4140 */
  padding: var(--dds-card-padding-y) var(--dds-card-padding-x);   /* 15px 20px, danceit.css:14840 */
}
.dds-card .dds-card-body .dds-form-group { margin: 8px 0 0; }     /* danceit.css:14845 */

/* ---- Title, category, description ------------------------------------------
   Outside a card .card-title keeps Bootstrap's margin-bottom (4145) and
   Material's colour, links included (12852). Inside: 0 0 3px, the last child 0. */
.dds-card-title { margin-bottom: .75rem; }             /* danceit.css:4145 */
.dds-card-title,
.dds-card-title a {                                     /* danceit.css:12852 */
  color: var(--dds-heading);
  text-decoration: none;
}
/* Bootstrap's a:hover/a:focus (15826) comes after 12852 at the same weight, so
   the title link turns #0056b3; inside a coloured header the white rule below
   (14741, heavier) still wins. danceit snaps; dds eases the colour 150ms. */
.dds-card-title a { transition: color var(--dds-duration-fast) var(--dds-ease-standard); }
.dds-card-title a:is(:hover, :focus) { color: var(--dds-link-hover); }  /* danceit.css:15826 */
@media (prefers-reduced-motion: reduce) {
  .dds-card-title a { transition: none; }
}
.dds-card .dds-card-title { margin-top: 0; margin-bottom: 3px; }  /* danceit.css:14835 */
.dds-card .dds-card-title:last-child { margin-bottom: 0; }        /* danceit.css:14528 */

.dds-card .dds-card-category { margin-top: 10px; }                /* danceit.css:14511 */
.dds-card .dds-card-category:not([class*="dds-text-"]) { color: var(--dds-muted); }  /* 14507 */
.dds-card .dds-card-category .dds-material-icons {                /* danceit.css:14514 */
  position: relative;
  top: 8px;
  line-height: 0;
}
.dds-card-description {                                 /* danceit.css:12878, 26864 */
  margin: 3em 0;
  color: var(--dds-description);                        /* #ccc, as danceit (spec §13.3) */
}

/* ---- Header: the plain band ------------------------------------------------ */
.dds-card .dds-card-header {
  margin-bottom: 0;
  padding: .75rem .9rem;                                /* danceit.css:4160 */
  border-bottom: none;                                  /* danceit.css:14583 */
  background: transparent;
}
.dds-card .dds-card-header :where(h4) { display: inline-block; }  /* danceit.css:26751 */
.dds-card .dds-card-header .dds-card-category { margin: 0; }      /* danceit.css:14855 */

/* ---- Header line: the title and its tools ------------------------------------
   .dds-card-header-line holds the title and .dds-card-header-tools (a quiet
   button, a filter) on one line, the tools at the right edge. With
   data-dds-fit the tools lose their words before they would cover the title;
   if even the icons do not fit, the tools wrap under the title, never off the
   card. */
.dds-card .dds-card-header-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}
.dds-card .dds-card-header-line > :first-child { flex: 1 1 auto; min-width: 0; }
.dds-card .dds-card-header-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin: -6px 0 -6px auto;                             /* the quiet button's padding sits in the header's; no negative right edge: [data-dds-fit] would read it as overflow */
}
/* data-dds-fit measures the title at its full width, so the tools drop their
   words as soon as they would sit over it (not once the title has shrunk to
   nothing). Tight, the tools are icon squares (36px, 10-buttons) beside the
   title; the line keeps their full height and a 6px breath under it, so they
   never reach into the subtitle below. */
.dds-card .dds-card-header-line.dds-fit-measure > :first-child { min-width: max-content; }
.dds-card .dds-card-header-line.dds-fit-tight { margin-bottom: 6px; }
.dds-card .dds-card-header-line.dds-fit-tight > .dds-card-header-tools { margin-bottom: 0; }

/* ---- Coloured headers: geometry ---------------------------------------------
   danceit matches [class*=card-header-]; dds names the four classes. */
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger,
              .dds-card-header-icon, .dds-card-header-text) {
  position: relative;                                   /* danceit.css:14975 */
  margin: 0 var(--dds-card-header-inset);               /* 0 15px */
  padding: 0;
  color: var(--dds-text-on-primary);                    /* danceit.css:14741 */
}
/* The hero band: lifted 20px over the card's top edge, inset 15px */
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger):not(.dds-card-header-icon):not(.dds-card-header-text) {
  margin-top: var(--dds-card-header-lift);              /* -20px, danceit.css:14989 */
  padding: var(--dds-chip-padding);                     /* 15px */
  border-radius: var(--dds-radius-sm);                  /* 3px */
}
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger,
              .dds-card-header-icon, .dds-card-header-text) :is(.dds-card-title, .dds-card-title a) {
  color: var(--dds-text-on-primary);                    /* danceit.css:14741 */
}
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger,
              .dds-card-header-icon, .dds-card-header-text) :is(.dds-card-category, .dds-card-description, .dds-stats) {
  color: hsla(0, 0%, 100%, .8);                         /* danceit.css:14757 */
}
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger) .dds-card-title + .dds-card-category a {
  color: var(--dds-white);                              /* danceit.css:14979 */
}

/* ---- Coloured headers: the gradient ------------------------------------------
   One custom property pair per colour, so the rate JS can swap -primary for
   -success or -danger (spec §5) and only the paint changes. */
.dds-card-header-primary { --dds-chip-bg: var(--dds-hero-gradient);     --dds-chip-shadow: var(--dds-shadow-chip); }          /* 14648, 14701 */
.dds-card-header-success { --dds-chip-bg: var(--dds-success-gradient);  --dds-chip-shadow: var(--dds-shadow-chip-success); }  /* 14652, 14711 */
.dds-card-header-danger  { --dds-chip-bg: var(--dds-danger-gradient);   --dds-chip-shadow: var(--dds-shadow-chip-danger); }   /* 14660, 14706 */
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger):not(.dds-card-header-icon):not(.dds-card-header-text),
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger) :is(.dds-card-icon, .dds-card-text) {
  background: var(--dds-chip-bg);
  box-shadow: var(--dds-chip-shadow);
}

/* ---- The chips: .dds-card-icon and .dds-card-text ------------------------------
   Both lifted 20px over the card, 15px padding, 3px radius. The icon chip
   floats left of the title; the text chip is an inline-block that shrinks
   to its text and fills the header when the text wraps (spec §5). */
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger,
              .dds-card-header-icon, .dds-card-header-text) :is(.dds-card-icon, .dds-card-text) {
  float: left;                                          /* danceit.css:14995 */
  margin-top: var(--dds-card-header-lift);              /* -20px */
  margin-right: var(--dds-card-header-inset);           /* 15px */
  padding: var(--dds-chip-padding);
  border-radius: var(--dds-radius-sm);
  background-color: var(--dds-muted);                   /* #999 until a colour class paints it */
}
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger,
              .dds-card-header-icon, .dds-card-header-text) .dds-card-text {
  float: none;                                          /* danceit.css:15005 */
  display: inline-block;
  margin-right: 0;
}
.dds-card .dds-card-header.dds-card-header-text { display: inline-block; }        /* 14861 (blockified by the flex card) */
.dds-card .dds-card-header.dds-card-header-text::after { content: ""; display: table; }   /* 14865 */
.dds-card .dds-card-header:is(.dds-card-header-icon, .dds-card-header-text) i {  /* danceit.css:14870 */
  width: 33px;
  height: 33px;
  line-height: 33px;
  text-align: center;
}
.dds-card .dds-card-header:is(.dds-card-header-icon, .dds-card-header-text) .dds-card-title {
  margin-top: 15px;                                     /* danceit.css:14878 */
  color: var(--dds-heading);                            /* the icon header's title is dark */
}
.dds-card .dds-card-header:is(.dds-card-header-icon, .dds-card-header-text) :where(h4) {
  font-weight: var(--dds-font-weight-light);            /* danceit.css:14884 */
}
/* the text chip's title is white and sits flush: after 14878, as in danceit */
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger,
              .dds-card-header-icon, .dds-card-header-text) .dds-card-text .dds-card-title {
  margin-top: 0;                                        /* danceit.css:15011 */
  color: var(--dds-text-on-primary);
}

/* The "add" link button beside the icon chip: its look is 10-buttons', its
   place is here (danceit.css:27873, 28692; the !important of danceit dropped) */
.dds-card .dds-card-header .dds-btn.dds-btn-datatable {
  margin: .2em 1em 0 -1em;
  padding: 0;
  color: var(--dds-text-unimportant);                   /* #aaa */
}

/* ---- The category header -----------------------------------------------------
   div.dds-card-header.dds-card-header-primary.dds-card-header-text
     > .dds-card-text > h4.dds-card-title
       > p.dds-category-header  Name <span.dds-small-pipe>|</span> … <sup.dds-less-opacity>
       + " " + span.dds-less-opacity (count)
   Inline blocks all the way down, and a space either side of every pipe:
   at 390px the name fills the chip, each pipe ends its line and the count
   drops to a line of its own, exactly as danceit (spec §5). */
p.dds-category-header { display: inline-block; }       /* danceit.css:26957 */
/* .dds-card-header.dds-category is a hook: judging makes it sticky (26969) */

/* ---- Footer ----------------------------------------------------------------- */
.dds-card .dds-card-footer {
  display: flex;                                        /* danceit.css:14539 */
  justify-content: space-between;                       /* danceit.css:14940 */
  align-items: center;
  margin: 0 15px 10px;
  padding: 10px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.dds-card .dds-card-footer :where(h6) { width: 100%; }
.dds-card .dds-card-footer .dds-stats {                 /* danceit.css:14549, 14954 */
  display: inline-flex;
  color: var(--dds-muted);
  font-size: 12px;
  line-height: 22px;
}
.dds-card .dds-card-footer .dds-stats .dds-card-category { margin: 0; padding: 7px 0; }
.dds-card .dds-card-footer .dds-stats .dds-material-icons {    /* danceit.css:14553, 14962 */
  position: relative;
  top: 4px;
  margin: 0 3px;
  font-size: 16px;
}

/* ---- card-plain ------------------------------------------------------------- */
.dds-card-plain { background: transparent; box-shadow: none; }                    /* danceit.css:15175 */
.dds-card-plain .dds-card-header { margin-left: 0; margin-right: 0; }             /* 15180 */
.dds-card-plain .dds-card-body,
.dds-card-plain .dds-card-footer { padding-left: 5px; padding-right: 5px; }       /* 15185, 15199 */
.dds-card-plain .dds-card-header :is(.dds-card-category, .dds-card-description) { color: var(--dds-muted); }  /* 15205 */

/* ---- card-stats --------------------------------------------------------------- */
.dds-card-stats .dds-card-header:is(.dds-card-header-icon, .dds-card-header-text) { text-align: right; }   /* 15210 */
.dds-card-stats .dds-card-header .dds-card-icon + :is(.dds-card-category, .dds-card-title) { padding-top: 10px; }  /* 15215 */
.dds-card-stats .dds-card-header:is(.dds-card-header-icon, .dds-card-header-text) :is(.dds-card-category, .dds-card-title) { margin: 0; }
.dds-card-stats .dds-card-header .dds-card-category { margin: 0; }
.dds-card-stats .dds-card-header .dds-card-category:not([class*="dds-text-"]) { color: var(--dds-muted); font-size: 14px; }
.dds-card-stats .dds-card-header + .dds-card-footer { margin-top: 20px; border-top: 1px solid var(--dds-border-light); }  /* 15237 */
.dds-card-stats .dds-card-header.dds-card-header-icon i {       /* danceit.css:15242 */
  width: 56px;
  height: 56px;
  font-size: 36px;
  line-height: 56px;
  text-align: center;
}
.dds-card-stats .dds-card-body { text-align: right; }          /* danceit.css:15250 */

/* ---- card-login ------------------------------------------------------------------
   danceit applies these under .login-page only (18306, 25734); dds bakes them
   into the card, so a sign-in card needs no page wrapper. */
.dds-card-login { transform: translateZ(0); }                  /* danceit.css:18306 */
.dds-card.dds-card-login .dds-card-header:not(.dds-card-header-icon):not(.dds-card-header-text) {
  margin: -40px 15px 20px;                                      /* danceit.css:25734 (!important there) */
}
.dds-card.dds-card-login .dds-card-title {
  display: block;                                               /* danceit.css:26764 */
  margin-top: 10px;                                             /* danceit.css:25744 */
  margin-bottom: 10px;
  font-weight: var(--dds-font-weight-bold);
}
.dds-card.dds-card-login .dds-card-footer { margin: -1.5rem 15px 10px; }   /* danceit.css:26553 */

/* ---- card-hidden: the login card's drop -------------------------------------------
   danceit: opacity 0, 60px up (18328), `all .3s linear` (13317), the class
   removed on document ready. dds: the same 300ms and 60px on opacity and
   transform only, decelerating as it lands; 12-cards.js removes the class and
   adds .dds-card-reveal, which carries the transition. Reduced motion: 1ms. */
.dds-card.dds-card-hidden {
  opacity: 0;
  transform: translate3d(0, -60px, 0);
}
.dds-card.dds-card-reveal {
  transition: opacity var(--dds-duration-slow) var(--dds-ease-decelerate),
              transform var(--dds-duration-slow) var(--dds-ease-decelerate);
}
@media (prefers-reduced-motion: reduce) {
  .dds-card.dds-card-reveal { transition: none; }
}
/* Safety net (dds, not danceit): if scripting is off, or dds.js never ran
   (a broken bundle), a hidden card must not stay invisible. Without scripting
   it shows at once; otherwise a one-shot fade lands it 1.5s after load unless
   12-cards.js has claimed it (data-dds-ready contains "cards"). A manual card
   is claimed too, so it stays hidden until dds.revealCard(). If dds.js arrives
   after the net has started, 12-cards.js lets it land and then only removes
   .dds-card-hidden (no second drop; a manual card stays visible). */
@media (scripting: none) {
  .dds-card.dds-card-hidden { opacity: 1; transform: none; }
}
@keyframes dds-card-failsafe {
  to { opacity: 1; transform: none; }
}
.dds-card.dds-card-hidden:not([data-dds-ready~="cards"]) {
  animation: dds-card-failsafe var(--dds-duration-slow) var(--dds-ease-decelerate) 1.5s both;
}
@media (prefers-reduced-motion: reduce) {
  .dds-card.dds-card-hidden:not([data-dds-ready~="cards"]) { animation-duration: 1ms; }
}

/* ---- card-pricing: role and access-code cards ------------------------------------ */
.dds-card-pricing { text-align: center; }                      /* danceit.css:15394 */
.dds-card-pricing .dds-card-title { margin-top: 30px; }        /* 15402 */
.dds-card.dds-card-pricing .dds-card-body { margin: 0; padding: 15px; }    /* 15406 (!important dropped) */
.dds-card-pricing .dds-card-icon { padding: 10px 0 0; }        /* 15411: not a chip */
.dds-card-pricing .dds-card-icon i {                           /* danceit.css:15415 */
  width: 130px;
  height: 130px;
  border: 1px solid #e5e5e5;
  border-radius: var(--dds-radius-circle);
  color: var(--dds-heading);
  font-size: 55px;
  line-height: 130px;
}
.dds-card-pricing .dds-card-icon.dds-icon-primary i { color: var(--dds-primary); }   /* 15425 */
.dds-card-pricing .dds-card-icon.dds-icon-danger i { color: var(--dds-danger); }     /* 15441 */
.dds-code-cards { display: flex; flex-wrap: wrap; }            /* danceit.css:29108 */
.dds-code-cards > .dds-cards { display: flex; flex-direction: column; }
.dds-code-cards > .dds-cards > .dds-card { flex: 1; margin-bottom: 0; }
/* .access-code (the code the copy button reads, c_code_show.php:57, 69) has no danceit rule
   either: an empty hook, the h2 keeps the heading look. */
.dds-access-code { }

/* ---- Smaller danceit variants (no twin; spec §9) ------------------------------------ */
.dds-card.dds-list-item {                                      /* danceit.css:26804 */
  display: block;
  margin: .5em 0;
  padding: 1em;
}
.dds-card.dds-list-item :where(h3) + p.dds-card-category { margin-top: -1em; margin-bottom: 1em; }   /* 27692 */
.dds-card.dds-list-item:is(.dds-active, .dds-selected) {       /* danceit.css:28710, 26860 */
  border: 2px solid var(--dds-primary);
}
.dds-card.dds-card-collapse { margin: 0 0 1em; }               /* danceit.css:26787 */
.dds-card.dds-card-collapse .dds-card-body:first-child { padding: 0; }
.dds-card-collapse .dds-card { box-shadow: none; }
.dds-card-collapse.dds-table .dds-card-body { margin-bottom: -15px; }
.dds-card.dds-card-collapse.dds-table {                         /* danceit: .card (#fff) comes after .table (1453) and wins; */
  background-color: var(--dds-card-bg);                          /* in dds.css 14-tables comes last, so restate the card here */
  border-collapse: separate;
}
.dds-card-collapse .dds-card-header a {                          /* danceit.css:15522 */
  display: block;
  color: var(--dds-text);                                        /* #3c4858 */
  font-size: .9375rem;
  text-decoration: none;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);   /* where danceit snaps, a 150ms colour */
}
.dds-card-collapse .dds-card-header a > .dds-material-icons {    /* danceit.css:15528 */
  float: right;
  position: relative;
  transition: transform var(--dds-duration-fast) var(--dds-ease-standard);   /* danceit.css:15848 all .15s */
}
.dds-card-collapse .dds-card-header a[aria-expanded="true"] > .dds-material-icons {
  transform: rotate(180deg);                                     /* danceit.css:15533 */
}
@media (prefers-reduced-motion: reduce) {
  .dds-card-collapse .dds-card-header a,
  .dds-card-collapse .dds-card-header a > .dds-material-icons { transition: none; }
}
.dds-card-collapse .dds-card-header a:is(:hover, :active, [aria-expanded="true"]) {
  color: var(--dds-primary);                                   /* danceit.css:26780 (15137's rose: colour discipline) */
}
.dds-card-body-header {                                        /* mod_bank.php:326 */
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .dds-card-body-header { flex-direction: column; }
}
.dds-card-scroll .dds-card-body { max-height: 70vh; overflow-y: auto; }   /* danceit.css:27821 */
.dds-card-sticky-footer {                                      /* danceit.css:28178 */
  position: sticky;
  bottom: 0;
  padding: 10px;
  border-radius: var(--dds-radius-card);
  background: #efefef;
}
@media (max-width: 768px) {
  .dds-card-sticky-footer { position: fixed; bottom: 0; left: 0; z-index: 1; }   /* 28422 */
}

/* ---- Keyboard focus on blue (divergence 7) ---------------------------------------
   The foundation's #007bff ring vanishes on a gradient header or chip; there it
   is white. :focus-visible only, so the pointer look is unchanged. */
.dds-card :is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger):not(.dds-card-header-icon):not(.dds-card-header-text) :focus-visible,
.dds-card :is(.dds-card-icon, .dds-card-text) :focus-visible {
  outline: 2px solid var(--dds-white);
  outline-offset: 2px;
}


/* ===== 13-feedback.css =================================================== */

/* ==========================================================================
   dds · 13-feedback — alerts, notifications, badges, progress
   --------------------------------------------------------------------------
   Owner: feedback. Material Dashboard 2.1.1's solid alerts (danceit.css
   13564–13766) with danceit's white icon on top (26768), bootstrap-notify's
   notification (PKassets/js/plugins/bootstrap-notify.js, placed by
   13-feedback.js), Material badges (10340–10412, 26840) and the 4px Material
   progress line (14071–14126). Spec: spec/13-feedback.md.

     .dds-alert                         white #fff / #555 (plain)
       .dds-alert-primary               the interface alert, #006fe6
       -success -warning -danger -info  status only, always next to a word
       .dds-alert-with-icon             66px left, i[data-dds-notify=icon] white
     .dds-close                         Bootstrap's × button (shared with overlays)
     .dds-alert[data-dds-notify=container]   a notification (dds.notify)
       .dds-animated.dds-fadeInDown / .dds-fadeOutUp   its entrance and exit
     .dds-banner                        the page's quiet notice: a tinted strip, a 3px
       .dds-banner-success -warning -danger   tone (primary when none)
       > i.dds-material-icons (optional)  the glyph, in the tone
       > div                            the words: one line or several
       [data-dds-dismiss-key=k]         a gentle × (13-feedback.js); remembered per key
     .dds-badge .dds-badge-pill .dds-badge-primary (+ status) .dds-badge-margin
     .dds-ongoing                       "on now": a step bolder text a primary band sweeps through
                                        (the one loop allowed for a state, CONVENTIONS §11);
                                        tr.dds-active (14) and the bank on the floor (21) too
     .dds-progress .dds-progress-line-* > .dds-progress-bar .dds-progress-bar-*

   Not here (divergence 8): no spinner and no loader.svg. Loading is the
   foundation's line (05-motion: .dds-loader-line, .dds-route-bar,
   dds.loading, dds.routeBar) and the busy button (10-buttons: .dds-busy).
   ========================================================================== */

/* ---- The alert ------------------------------------------------------------ */
.dds-alert {
  position: relative;                                    /* danceit.css:4476 */
  margin-bottom: 1rem;                                   /* danceit.css:4476 */
  padding: 20px 15px;                                    /* danceit.css:13568 */
  border: 0;                                             /* danceit.css:13565 */
  border-radius: var(--dds-radius-sm);                   /* danceit.css:13566 (3px) */
  line-height: var(--dds-line-height-alert);             /* danceit.css:13569 (20px) */
  background-color: var(--dds-alert-default-bg);        /* danceit.css:13578 */
  color: var(--dds-alert-default-text);
}
.dds-alert b {                                           /* danceit.css:13572 */
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--dds-font-size-alert-b);
}
.dds-alert a,
.dds-alert .dds-alert-link { color: var(--dds-alert-default-text); }   /* danceit.css:13582 */

/* Interface alert: blue. danceit fills it with #006fe6 and lifts it with the
   #007bff chip shadow (13601–13612). */
.dds-alert.dds-alert-primary {
  background-color: var(--dds-primary-hover);
  color: var(--dds-text-on-primary);
  box-shadow: var(--dds-shadow-chip);
}
/* Status only (divergence 1): each is shown next to a word such as <b>saved</b>. */
.dds-alert.dds-alert-success {                           /* danceit.css:13613 */
  background-color: var(--dds-success-alert);
  color: var(--dds-white);
  box-shadow: var(--dds-shadow-chip-success);
}
.dds-alert.dds-alert-warning {                           /* danceit.css:13631 */
  background-color: var(--dds-warning-alert);
  color: var(--dds-white);
  box-shadow: var(--dds-shadow-chip-warning);
}
.dds-alert.dds-alert-danger {                            /* danceit.css:13641 */
  background-color: var(--dds-danger-alert);
  color: var(--dds-white);
  box-shadow: var(--dds-shadow-chip-danger);
}
.dds-alert.dds-alert-info {                              /* danceit.css:13622 */
  background-color: var(--dds-info-alert);
  color: var(--dds-white);
  box-shadow: var(--dds-shadow-chip-info);
}
.dds-alert:is(.dds-alert-primary, .dds-alert-success, .dds-alert-warning, .dds-alert-danger, .dds-alert-info) :is(a, .dds-alert-link) {
  color: var(--dds-white);                               /* danceit.css:13606 … */
}
.dds-alert.dds-alert-default {                           /* danceit.css:13578 */
  background-color: var(--dds-alert-default-bg);
  color: var(--dds-alert-default-text);
  box-shadow: none;
}
/* The status hue on every <i> inside an alert (13675–13717) is not ported: it
   makes a second icon in a message vanish. Only the notify icon is styled. */

/* ---- The icon ------------------------------------------------------------- */
.dds-alert.dds-alert-with-icon {
  margin-top: 43px;                                      /* danceit.css:13720 (real: in-page alerts sit 43px down) */
  padding-left: 66px;                                    /* danceit.css:13721 */
}
.dds-alert i[data-dds-notify="icon"] { display: none; }  /* danceit.css:13750 */
.dds-alert.dds-alert-with-icon i[data-dds-notify="icon"] {  /* danceit.css:26768 */
  position: absolute;
  left: 15px;
  display: block;
  margin-top: -12px;                                     /* 8px below the alert's top; stays on the first line */
  padding: 9px;
  color: inherit;                                        /* danceit: #fff; = the alert's text colour, so a plain alert's icon stays visible */
}

/* ---- The close button (Bootstrap .close, danceit.css:4874–4899) ------------
   Shared: 16-overlays reuses it in modal headers. */
.dds-close {
  float: right;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-standard);   /* danceit snaps */
}
.dds-close:is(:hover, :focus-visible) {                  /* danceit.css:4884 */
  color: #000;
  text-decoration: none;
  opacity: .75;
}
.dds-close:focus-visible {                               /* divergence 7 */
  outline: var(--dds-focus-ring);
  outline-offset: var(--dds-focus-ring-offset);
}
.dds-close:disabled { cursor: default; }
.dds-alert .dds-close { line-height: .5; }               /* danceit.css:13737 */
.dds-alert .dds-close i {                                /* danceit.css:13741 */
  color: var(--dds-white);
  font-size: 11px;
}
.dds-alert .dds-close:focus-visible {
  outline-color: var(--dds-white);
  outline-offset: 5px;                                   /* the button is only 11 × 14px */
  border-radius: 2px;
  opacity: 1;
}
.dds-alert.dds-alert-default .dds-close:focus-visible,
.dds-alert:not(.dds-alert-primary, .dds-alert-success, .dds-alert-warning, .dds-alert-danger, .dds-alert-info) .dds-close:focus-visible {
  outline-color: var(--dds-primary);
}

/* ---- The notification (bootstrap-notify, placed by dds.notify) ------------
   <div class="dds-alert dds-alert-success dds-alert-with-icon" role="alert"
        data-dds-notify="container" data-dds-notify-position="top-right"> … </div>
   Last child of <body>, fixed top-right. danceit's inline styles are baked in
   here: margin 15px auto, top/right 20px, z-index 1031 (bootstrap-notify.js:53
   z_index), so, as in danceit, a notification shown while a modal is open sits
   under the backdrop (1040) and the modal (1050). Width is .col-11 / .col-md-4
   (danceit.css:771, 1050). The stack offset is a `translate` set by the JS, so
   the neighbours glide up on a close without animating `top` (danceit slides
   `top` for .5s); the entrance and exit use `transform`, a separate property. */
.dds-alert[data-dds-notify="container"] {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1031;                                        /* bootstrap-notify.js:53 z_index (not --dds-z-notify 1071) */
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  max-width: 91.666667%;                                 /* danceit.css:771 .col-11 */
  margin: 15px auto;                                     /* bootstrap-notify inline; beats the 43px */
  translate: 0 0;
  transition: translate var(--dds-duration-slow) var(--dds-ease-standard);
}
@media (min-width: 768px) {
  .dds-alert[data-dds-notify="container"] { max-width: 33.333333%; }   /* danceit.css:1050 .col-md-4 */
}
.dds-alert[data-dds-notify="container"].dds-fadeOutUp { pointer-events: none; }
.dds-alert [data-dds-notify="dismiss"] {                 /* bootstrap-notify styleDismiss */
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: var(--dds-z-raised);
  margin-top: -9px;
  margin-right: 5px;                                     /* danceit.css:13766 */
}
.dds-alert [data-dds-notify="title"]:empty { display: none; }

/* danceit's animate.css pair (danceit.css:19917, 19961, 20003): drop in from
   its own height above while fading in; leave the same way, up. danceit takes
   1s for each; dds keeps the path and uses the motion tokens (300ms in, 200ms
   out). */
@keyframes dds-fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes dds-fadeOutUp {
  from { opacity: 1; }
  to   { opacity: 0; transform: translate3d(0, -100%, 0); }
}
.dds-animated {
  animation-duration: var(--dds-duration-slow);
  animation-timing-function: var(--dds-ease-decelerate);
  animation-fill-mode: both;
}
.dds-animated.dds-fadeInDown { animation-name: dds-fadeInDown; }
.dds-animated.dds-fadeOutUp {                            /* later class wins, as in danceit */
  animation-name: dds-fadeOutUp;
  animation-duration: var(--dds-duration-base);
  animation-timing-function: var(--dds-ease-accelerate);
}

/* ---- Badges (danceit.css:4904–4930, 10340–10412, 26840) -------------------- */
.dds-badge {
  display: inline-block;
  padding: 5px 12px;                                     /* danceit.css:10342 */
  border-radius: var(--dds-radius-bs);                   /* danceit.css:4910 */
  font-size: 13px;                                       /* danceit.css:26840 */
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;                             /* danceit.css:10343 */
  white-space: normal;                                   /* danceit.css:10347 */
  vertical-align: baseline;
  color: var(--dds-white);
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-badge:empty { display: none; }                      /* danceit.css:4913: no count, no pill */
.dds-btn .dds-badge { position: relative; top: -1px; }   /* danceit.css:4916 */
.dds-badge.dds-badge-pill { border-radius: 10rem; }      /* danceit.css:4922 */
.dds-badge.dds-right { float: right; }                   /* danceit.css:26828 .right */
.dds-badge.dds-left { float: left; }
.dds-card-header .dds-badge.dds-right { margin-top: 1em; }   /* danceit.css:26836 */
.dds-badge.dds-badge-margin { margin: .2em; }            /* danceit.css:27678 */
.dds-badge.dds-badge-primary { background-color: var(--dds-primary); }   /* danceit.css:10350 */
.dds-badge.dds-badge-success { background-color: var(--dds-success); }
.dds-badge.dds-badge-warning { background-color: var(--dds-warning); }
.dds-badge.dds-badge-danger  { background-color: var(--dds-danger); }
.dds-badge.dds-badge-info    { background-color: var(--dds-info); }
.dds-badge.dds-badge-default { background-color: var(--dds-gray-dark); }
a.dds-badge { text-decoration: none; }
a.dds-badge:focus-visible { outline: var(--dds-focus-ring); outline-offset: var(--dds-focus-ring-offset); }
.dds-badge-primary[href]:is(:hover, :focus-visible) { background-color: #0056b3; }   /* danceit.css:10384 */
.dds-badge-success[href]:is(:hover, :focus-visible) { background-color: #449d48; }
.dds-badge-warning[href]:is(:hover, :focus-visible) { background-color: #e68900; color: var(--dds-white); }
.dds-badge-danger[href]:is(:hover, :focus-visible)  { background-color: #f32c1e; }
.dds-badge-info[href]:is(:hover, :focus-visible)    { background-color: #00a5bb; }
.dds-badge-default[href]:is(:hover, :focus-visible) { background-color: #8c8c8c; }

/* ---- Progress (danceit.css:4622–4650, 14071–14126) -------------------------
   A determinate 4px line. Waiting of unknown length is not a progress bar: it
   is the foundation's loader line (divergence 8). Stripes do not move (nothing
   loops but loader lines), and the width changes without a transition. */
.dds-progress {
  display: flex;
  height: 4px;                                           /* danceit.css:14071 */
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 0;
  background: #ddd;
  box-shadow: none;
  font-size: .75rem;
}
.dds-progress.dds-progress-line-primary { background: rgba(var(--dds-primary-rgb), .2); }   /* danceit.css:14108 */
.dds-progress.dds-progress-line-success { background: rgba(var(--dds-success-rgb), .2); }
.dds-progress.dds-progress-line-warning { background: rgba(var(--dds-warning-rgb), .2); }
.dds-progress.dds-progress-line-danger  { background: rgba(var(--dds-danger-rgb), .2); }
.dds-progress.dds-progress-line-info    { background: rgba(var(--dds-info-rgb), .2); }
.dds-progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--dds-white);
  text-align: center;
  white-space: nowrap;
  background-color: #2196f3;                             /* danceit.css:4637 (Bootstrap base) */
  box-shadow: none;
}
.dds-progress .dds-progress-bar.dds-progress-bar-primary { background-color: var(--dds-primary); }   /* danceit.css:14083 */
.dds-progress .dds-progress-bar.dds-progress-bar-success { background-color: var(--dds-success); }
.dds-progress .dds-progress-bar.dds-progress-bar-warning { background-color: var(--dds-warning); }
.dds-progress .dds-progress-bar.dds-progress-bar-danger  { background-color: var(--dds-danger); }
.dds-progress .dds-progress-bar.dds-progress-bar-info    { background-color: var(--dds-info); }
.dds-progress .dds-progress-bar.dds-progress-bar-striped {   /* danceit.css:14103 */
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 0, transparent 50%,
    rgba(255, 255, 255, .15) 0, rgba(255, 255, 255, .15) 75%, transparent 0, transparent);
  background-size: 1rem 1rem;
}

/* ---- The banner ----------------------------------------------------------------
   The model in-page notice (spec 13 §7): what the page wants the reader to know
   before the content ("not all places have been awarded yet", the organizer's
   message). Quiet on purpose: a tinted strip with the tone in a 3px left edge and
   the icon, never a solid fill (that is .dds-alert's job, for interface feedback).
   Not closable by default; data-dds-dismiss-key="<key>" adds a gentle × and the
   reader's choice is remembered in localStorage under dds-banner:<key>. */
.dds-banner {
  --dds-banner-tone: var(--dds-primary);
  --dds-banner-ink: var(--dds-primary-dark);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dds-text);
  background: var(--dds-card-shade-2);
  border-left: 3px solid var(--dds-banner-tone);
  border-radius: 0 var(--dds-radius-sm) var(--dds-radius-sm) 0;   /* CONVENTIONS §5.14: an edge stripe is straight, never bent round a corner */
}
.dds-banner.dds-banner-success { --dds-banner-tone: var(--dds-success); --dds-banner-ink: var(--dds-success-dark); background: rgba(var(--dds-success-rgb), .08); }
.dds-banner.dds-banner-warning { --dds-banner-tone: var(--dds-warning); --dds-banner-ink: var(--dds-warning-dark); background: rgba(var(--dds-warning-rgb), .09); }
.dds-banner.dds-banner-danger { --dds-banner-tone: var(--dds-danger); --dds-banner-ink: var(--dds-danger); background: rgba(var(--dds-danger-rgb), .07); }
.dds-banner > .dds-material-icons { flex: none; font-size: 20px; line-height: 21px; color: var(--dds-banner-ink); }
.dds-banner > div { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.dds-banner > div > :last-child { margin-bottom: 0; }
/* the gentle ×: small, grey, no box until it is hovered or focused */
.dds-banner > .dds-banner-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -2px -6px -2px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dds-label);
  cursor: pointer;
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard), color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-banner > .dds-banner-close > .dds-material-icons { font-size: 16px; }
.dds-banner > .dds-banner-close:hover,
.dds-banner > .dds-banner-close:focus-visible { background: rgba(0, 0, 0, .06); color: var(--dds-text-muted); }
.dds-banner > .dds-banner-close:focus-visible { outline: 2px solid var(--dds-banner-tone); outline-offset: 1px; }
.dds-banner.dds-banner-leaving {
  opacity: 0;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-accelerate);
}

/* ---- On now ----------------------------------------------------------------
   What is happening right now (a competition on today, the performance or the
   bank on the floor) says so in its text, and only there: no tint, no edge, no
   dot. The text goes a step bolder (500; 700 where it is 500 already), keeps its
   own colour exactly, and one band of
   --dds-ongoing-color sweeps through it left to right, again and again, the "working on it"
   shimmer. It is the one loop dds allows for a state (CONVENTIONS §11), so use
   it for "on now" alone, never for "new" or "look here".
   The box is the reading unit, not the cell: 13-feedback.js wraps each run of
   text in span.dds-ongoing-ink and gives it its x in the box, so the band
   crosses a card in its own columns (a phone card that wrapped its cells onto
   two lines still gets one sweep, the number first, the city last).
     .dds-ongoing                          any box
     .dds-table tr.dds-active              the running row (14), however it got the class
     .dds-schedule > .dds-list-item.dds-active   the bank on the floor (21)
   Only one custom property moves (--dds-ongoing-t, 0 → 1, on the box), so every
   run of a box sweeps in step. The pass eases in and out, gently (--dds-ongoing-ease): its
   slow ends happen off the text, so a stronger ease reads as a pause. Text that is already blue (a start number, a date
   chip) sets --dds-ongoing-color: var(--dds-ongoing-color-on-primary) in its part,
   so the band shows on it too. Reduced motion, print, forced colours: the plain
   bolder text. Without the script: the box at 500, nothing moves. */
@property --dds-ongoing-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes dds-ongoing-sweep {
  /* one way, then over: the pass (3.2s of 3.4s), a 0.2s rest, then the band starts
     again at the left edge. At 0 and at 1 only its faintest stop (16%) touches the text,
     so the jump back is not seen. The timing function eases the pass (one keyframe
     interval) */
  from { --dds-ongoing-t: 0; }
  94.118%, to { --dds-ongoing-t: 1; }
}
:is(.dds-ongoing, .dds-table tr.dds-active, .dds-schedule > .dds-list-item.dds-active) {
  animation: var(--dds-ongoing);
}
/* the weight: one step bolder than the text's own, never its colour. Each run is weighed
   by 13-feedback.js before it is wrapped (its box marked [data-dds-ink] first, so the box's
   rule below is off): 300/400 text → --dds-ongoing-weight (500), text already 500 or more
   → --strong, --dds-ongoing-weight-strong (700). Without the script: the box at 500. */
:is(.dds-ongoing, .dds-table tr.dds-active, .dds-schedule > .dds-list-item.dds-active):not([data-dds-ink]) {
  font-weight: var(--dds-ongoing-weight);
}
/* The band is the middle of an image one box and two bands wide, repeated, so the text is
   never left without ink; --dds-ongoing-t walks its centre from .75 band before the box's
   left edge to .75 band past its right one (the 16% stop on the edge: no long run off
   the text), and -x puts every run on the box's ruler. */
.dds-ongoing-ink {
  --dds-ongoing-image-w: calc(2 * var(--dds-ongoing-w, 100vw) + 4 * var(--dds-ongoing-band));
  font-weight: var(--dds-ongoing-weight);
  /* the band's edges ease in and out of the text's colour (a smoothstep in five stops), so it
     has no hard start or end: it rises from the ink and sinks back into it */
  background-image: linear-gradient(90deg,
    currentColor calc(50% - var(--dds-ongoing-band)),
    color-mix(in srgb, var(--dds-ongoing-color) 16%, currentColor) calc(50% - .75 * var(--dds-ongoing-band)),
    color-mix(in srgb, var(--dds-ongoing-color) 50%, currentColor) calc(50% - .5 * var(--dds-ongoing-band)),
    color-mix(in srgb, var(--dds-ongoing-color) 84%, currentColor) calc(50% - .25 * var(--dds-ongoing-band)),
    var(--dds-ongoing-color) 50%,
    color-mix(in srgb, var(--dds-ongoing-color) 84%, currentColor) calc(50% + .25 * var(--dds-ongoing-band)),
    color-mix(in srgb, var(--dds-ongoing-color) 50%, currentColor) calc(50% + .5 * var(--dds-ongoing-band)),
    color-mix(in srgb, var(--dds-ongoing-color) 16%, currentColor) calc(50% + .75 * var(--dds-ongoing-band)),
    currentColor calc(50% + var(--dds-ongoing-band)));
  background-repeat: repeat-x;
  background-size: var(--dds-ongoing-image-w) 100%;
  background-position-x: calc(var(--dds-ongoing-t) * (var(--dds-ongoing-w, 100vw) + 1.5 * var(--dds-ongoing-band))
    - var(--dds-ongoing-x, 0px) - var(--dds-ongoing-w, 100vw) - 2.75 * var(--dds-ongoing-band));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;                 /* a wrapped run: each line from its own left, */
  box-decoration-break: clone;                         /* so a name's two lines light together */
}

.dds-ongoing-ink.dds-ongoing-ink--strong { font-weight: var(--dds-ongoing-weight-strong); }

/* ---- Print (danceit.css:28975, 29004) ---------------------------------------- */
@media print {
  .dds-alert[data-dds-notify="container"] { display: none; }
  .dds-ongoing-ink { background: none; -webkit-text-fill-color: currentcolor; }
  .dds-banner > .dds-banner-close { display: none; }
  .dds-badge.dds-badge { background: none; color: #000; }
}

/* ---- Reduced motion ---------------------------------------------------------
   The duration tokens already drop to 1ms (05-motion); this also removes the
   travel so nothing moves even for a frame. */
@media (prefers-reduced-motion: reduce) {
  .dds-alert[data-dds-notify="container"] { transition: none; }
  .dds-animated.dds-fadeInDown,
  .dds-animated.dds-fadeOutUp { animation-duration: 1ms; }
}
/* forced colours paint no background images: the runs keep their own ink */
@media (forced-colors: active) {
  .dds-ongoing-ink { background: none; -webkit-text-fill-color: currentcolor; }
}

/* A dismissed in-page alert fades out (150ms) before the JS removes it. */
.dds-alert.dds-alert-dismissing {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-accelerate);
}


/* ===== 14-tables.css ===================================================== */

/* ==========================================================================
   dds · 14-tables — danceit's .table, the PKtable / DataTables chrome,
   sorting, the actions column, the toolbar, row states, the empty row, and
   the pkds stacked rows on phones (divergence 2). Owner: tables.
   Spec: spec/14-tables.md. Values from PKassets/css/danceit.css (cited) and
   from renders of the ref twins; where they disagree the render won.
   --------------------------------------------------------------------------
   Composes (not styled here): .dds-card* (cards), .dds-btn* incl. the row
   action rule .dds-table .dds-btn (buttons), .dds-form-control,
   .dds-custom-select-sm, .dds-form-check*, .dds-togglebutton (forms),
   .dds-pagination / .dds-page-* / .dds-dropdown* (navigation), .dds-pipe,
   .dds-small-pipe, .dds-unimportant, .dds-capitalize, .dds-text-right
   (foundation), .dds-loader-line* + dds.loading() (foundation).

     1  .dds-table              plain .table (judge screens, home)
     2  .dds-table-striped / -hover / -no-bordered
     3  .dds-datatable          the .dataTable form every PKtable renders
     4  sorting                 .dds-sorting(-asc|-desc), .dds-disabled-sorting
     5  DataTables chrome       wrapper, move-up, length, filter, info, paginate
     6  loader + empty row      .dds-datatables-loader, .dds-datatables-empty
     7  actions + toolbar       .dds-btn-dropdown-outer, .dds-toolbar*, checkboxes
     8  row states              .dds-preactive, .dds-active, .dds-past, .dds-unimportant,
                             .dds-row-highlight, .dds-row-clickable,
                             .dds-small-table-number, thead.dds-sticky
     9  .dds-table-responsive   sideways scroll, opt-in
     9a .dds-table-matrix       a grid read across: never cards, scrolls sideways (every width);
                             [data-dds-sticky-head], th[data-dds-sticky-col]
    10  .dds-table-stack        < 640px: rows become cards (divergence 2); -md < 768px
   10a  .dds-table-stack-flow   < 640px: a three-line card (title + flowing pairs)
   10f  wrap groups             < 640px: th[data-dds-wrap-group] columns wrap as one unit
   10b  a label with markup     < 640px: the head's sup/sub/b/abbr… kept in the card label
   10c  card options            joins (one line, one label), the lead column, the title,
                             the corner action (th[data-dds-actions]), crossed rows
   10e  .dds-datatables-bottom  the table's footer: the count, the pager (no rule)
   10d  .dds-table-group        row groups: one header, a heading row per group (heats)
    11  reduced motion
   ========================================================================== */

/* ---- 1. .dds-table -------------------------------------------------------------
   Bootstrap 1453 + Material Dashboard 14262 / 14296 / 27117. Text size and
   colour come from the card (14px/300 #333). Header 17px/300 (1.0625rem,
   14262 wins over 14397's .95rem/500 in the render). */
.dds-table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;                              /* 1453 */
  background-color: transparent;
  border-collapse: collapse;
}
.dds-table > thead > tr > th,
.dds-table > thead > tr > td,
.dds-table > tbody > tr > th,
.dds-table > tbody > tr > td,
.dds-table > tfoot > tr > th,
.dds-table > tfoot > tr > td {
  padding: 12px 8px;                                /* 14296 */
  vertical-align: middle;
  border-top: 1px solid var(--dds-table-line);      /* 1460 + 14296 #ddd */
}
.dds-table > tbody > tr > td {
  padding-top: .7em;                                /* 27117 (!important there) */
  padding-bottom: .7em;
}
.dds-table > thead > tr > th {
  font-size: 1.063rem;                              /* 14308 (.table thead tr th, after 14262's 1.0625rem): 17.008px */
  font-weight: var(--dds-font-weight-light, 300);
  text-align: inherit;
  vertical-align: middle;
  border-top: 0;
  border-bottom: 1px solid var(--dds-table-line);   /* 14262 bottom-width 1px */
}
.dds-table > thead > tr > th.dds-text-right,
.dds-table > tbody > tr > td.dds-text-right { text-align: right; }
.dds-table > tbody > tr { position: relative; }     /* 14334 */
.dds-table {
  --dds-row-highlight: color-mix(in srgb, var(--dds-primary) 7%, #fff);
  --dds-row-highlight-hover: color-mix(in srgb, var(--dds-primary) 11%, #fff);
  --dds-row-crossed: color-mix(in srgb, var(--dds-heading) 32%, #fff);   /* a crossed-out row: far from the live rows' ink */
}
/* the first row inside a card has no top rule (14831) */
.dds-card .dds-table > tbody > tr:first-child > td { border-top: 0; }
.dds-table .dds-form-check { margin-top: 0; }       /* 14268 */
/* ...but in a card 14521 (.card .form-check 5px, later in the file) wins: render */
.dds-card :is(.dds-table, .dds-toolbar) .dds-form-check { margin-top: 5px; }
.dds-table .dds-form-check .dds-form-check-sign { top: -13px; left: 0; padding-right: 0; }   /* 14271 */
.dds-startnumber { white-space: nowrap; }           /* 28831 */
/* a lead column (th[data-dds-lead], a start number): the figure people look
   for first; tabular, a step heavier, in the primary's dark tone */
.dds-table > tbody > tr > td[data-dds-lead] {
  font-variant-numeric: tabular-nums;
  font-weight: var(--dds-font-weight-medium);
  color: var(--dds-primary-dark);
  white-space: nowrap;
  --dds-ongoing-color: var(--dds-ongoing-color-on-primary);   /* blue text: a light band (13 on now) */
}

/* ---- 2. striped, hover, no-bordered ---------------------------------------------
   Striping is pure CSS (1492 as danceit renders it: #00000004); DataTables'
   odd/even classes carry no style. Hover #0000000d (14419) over .3s (14423). */
.dds-table-striped > tbody > tr:nth-of-type(odd) { background-color: #00000004; }
.dds-table-hover > tbody > tr {
  transition: background-color var(--dds-duration-slow) var(--dds-ease-standard);
}
.dds-table-hover > tbody > tr:hover { background-color: #0000000d; }
.dds-table-no-bordered { border: 0; }               /* no visible effect in danceit */

/* ---- 3. .dds-datatable — table.dataTable (21306, 21315, 14427) ------------------
   Separate borders, content-box cells, 6px margins and a 5px header cell. */
.dds-table.dds-datatable {
  clear: both;
  max-width: none;
  margin-top: 6px;
  margin-bottom: 6px;
  border-collapse: separate;
  border-spacing: 0;
}
.dds-datatable > thead > tr > th,
.dds-datatable > tbody > tr > td { box-sizing: content-box; }
.dds-table.dds-datatable > thead > tr > th,
.dds-table.dds-datatable > thead > tr > td { padding: 5px; }   /* 14427 */
.dds-table.dds-datatable > tfoot > tr > th,
.dds-table.dds-datatable > tfoot > tr > td { padding: 5px; }
.dds-table.dds-datatable > thead > tr > th:active { outline: 0; }  /* 21393 */

/* ---- 4. Sorting (21399–21449, 12681) — divergence 2 ------------------------------
   danceit: an up arrow (\2191, right 1em) and a down arrow (\2193, right .5em)
   in the header font, top 2px, at .3; the sorted one at 1. dds hides both until
   the column is sorted, or its header is hovered or keyboard-focused: then
   danceit's resting .3 shows. A .dds-disabled-sorting column is inert. The th
   keeps danceit's 5px padding (14427 kills DataTables' 30px), so arrows may
   overlap a narrow header's text — only once it is sorted or pointed at. */
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc) {
  position: relative;
  cursor: pointer;
}
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc)::before,
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc)::after {
  position: absolute;
  top: 2px;
  display: block;
  opacity: 0;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc)::before {
  right: 1em;
  content: "\2191";
}
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc)::after {
  right: .5em;
  content: "\2193";
}
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc):is(:hover, :focus-visible)::before,
.dds-table > thead > tr > th:is(.dds-sorting, .dds-sorting-asc, .dds-sorting-desc):is(:hover, :focus-visible)::after,
.dds-table > thead > tr > th.dds-sorting-asc::after,
.dds-table > thead > tr > th.dds-sorting-desc::before { opacity: .3; }
.dds-table > thead > tr > th.dds-sorting-asc::before,
.dds-table > thead > tr > th.dds-sorting-desc::after { opacity: 1; }
.dds-table > thead > tr > th:focus-visible { outline-offset: -2px; }  /* inside the cell, not over its neighbour */
.dds-table > thead > tr > th.dds-disabled-sorting { cursor: default; }
.dds-table > thead > tr > th.dds-disabled-sorting::before,
.dds-table > thead > tr > th.dds-disabled-sorting::after { display: none; }   /* 12681 */
.dds-th-checkbox { width: 20px; }                   /* 27555 */

/* ---- 5. DataTables chrome (21304–21372, 26681–26713, 1690) ------------------------
   Markup: div.dds-material-datatables > div.dds-datatables-wrapper > three
   lines: .dds-datatables-top [length | filter], .dds-datatables-body [table],
   .dds-datatables-bottom [info | paginate] (prebuilt .dds-row lines get the
   same classes from the JS). Labels are Material Dashboard's (13308:
   14px/1.42857/400 #aaa). The underline inputs are forms'; only their
   DataTables geometry is set here.
   dds (the user's ask): length left and search right share one line at
   every width; info and pages share theirs while they fit, and the pages
   wrap under the info, still right, when they do not. Nothing in the chrome
   is ever wider than its box. */
.dds-material-datatables { position: relative; }   /* a box for dds.loading() */
.dds-datatables-wrapper { position: relative; clear: both; }
.dds-datatables-wrapper > .dds-datatables-top,
.dds-datatables-wrapper > .dds-datatables-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: 1rem;
  margin-right: 0;                                  /* a prebuilt .dds-row's gutter */
  margin-left: 0;
}
.dds-datatables-wrapper > .dds-datatables-bottom { align-items: center; row-gap: .25rem; }
.dds-datatables-wrapper > .dds-datatables-top > *,
.dds-datatables-wrapper > .dds-datatables-bottom > * {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
}
.dds-datatables-wrapper > .dds-datatables-top > :last-child:not(:first-child),
.dds-datatables-wrapper > .dds-datatables-bottom > :last-child:not(:first-child) { margin-left: auto; }
.dds-datatables-wrapper > .dds-datatables-top > :only-child { flex-grow: 1; }
.dds-datatables-body { min-width: 0; }
.dds-datatables-length label,
.dds-datatables-filter label {
  display: inline-block;
  margin-bottom: .5rem;
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.42857;
  color: var(--dds-label);
  white-space: nowrap;
  text-align: left;
}
.dds-datatables-length select {                     /* 21330 + forms' custom-select-sm */
  display: inline-block;
  width: auto;
  padding-right: 0;
  --dds-form-extra: none;                           /* danceit's length box has no caret */
}
.dds-datatables-filter { text-align: right; }       /* 21342 */
.dds-datatables-filter label { max-width: 100%; }
/* the field itself is 11-forms' .dds-search-sm (14-tables.js builds it, and marks
   prebuilt chrome's input parent as one); in a card the form group's bottom
   padding (11-forms, card body) would push the magnifier below the input's middle */
.dds-datatables-wrapper .dds-datatables-filter .dds-search { padding-bottom: 0; }
.dds-datatables-info {                              /* 21357 */
  padding-top: .85em;
  white-space: nowrap;
}
.dds-datatables-wrapper > .dds-datatables-bottom > .dds-datatables-info,
.dds-datatables-wrapper > .dds-datatables-bottom > * > .dds-datatables-info { padding-top: 0; white-space: normal; }
.dds-datatables-paginate {                          /* 21362 */
  margin: 0;
  white-space: nowrap;
  text-align: right;
}
.dds-datatables-paginate .dds-pagination {          /* 21368 */
  flex-wrap: wrap;                                  /* never wider than the card */
  margin: 2px 0;
  white-space: nowrap;
  justify-content: flex-end;
}
/* the links themselves (round numbers, 0 5px, touching) are navigation's one pagination (15 §6) */
/* move-up: the chrome row rides up into the card header beside the card icon.
   Never together with a card title or the header add button (26681, 26701). */
.dds-material-datatables.dds-move-up .dds-datatables-wrapper > :first-child {
  margin-top: -3em;
  padding-right: 15px;
}
.dds-material-datatables.dds-move-up .dds-datatables-length label { margin-left: 5.3em; }
/* the header add button: a quiet link between the card icon and the title (27873) */
.dds-btn.dds-btn-datatable {
  margin: .2em 0 0 -1em;
  padding: 0;
  color: var(--dds-label);
}

/* ---- 6. Loading and the empty row ------------------------------------------------
   danceit shows loader.svg (26695) until DataTables is ready. dds (divergence 8):
   the same 25px slot holds a thin line, so a table that is loading never
   looks like an empty one. Or call dds.loading(wrapper, true, {size:'xs'}). */
.dds-datatables-loader {
  position: relative;
  display: block;
  height: 25px;
  margin: 0 0 3em;
}
.dds-datatables-loader > .dds-loader-line { position: absolute; top: 11px; right: 0; left: 0; }
.dds-table > tbody > tr > td.dds-datatables-empty { text-align: center; }  /* 21320 */

/* ---- 7. Actions column, toolbar, checkboxes (27343, 26709–26728, 27368, 27625) --- */
/* a row action does not grow the row, small or not (27112: .table .btn:not(
   [data-toggle]) outranks .btn-sm there; buttons' copy loses to .dds-btn-sm) */
.dds-table .dds-btn:not([data-toggle="dropdown"]):not([data-dds-toggle="dropdown"]) { padding: 10px; margin: -10px 0; }
.dds-table .dds-btn-dropdown-outer { position: relative; display: inline-block; }
.dds-material-datatables .dds-toolbar {
  padding: 5px;
  border-top: 1px solid var(--dds-footer-border);   /* #e7e7e7 */
  border-bottom: 1px solid var(--dds-footer-border);
}
.dds-toolbar-item { display: inline-block; }
.dds-select-all { padding: 10px 0; }
.dds-select-all .dds-form-check-sign { margin-top: .11em; }
.dds-card.dds-card-collapse.dds-table .dds-select-all .dds-form-check-sign { margin-top: 1em; }   /* 27372 */
.dds-material-datatables .dds-toolbar .dds-toolbar-item label { margin: .3em; }
/* bulk actions show only while a row is checked (PK.js 48) */
.dds-checkbox-hide { display: none; }
.dds-checkbox-hide.dds-show {
  display: inline-block;
  animation: dds-table-arrive var(--dds-duration-base) var(--dds-ease-decelerate);
}
@keyframes dds-table-arrive { from { opacity: 0; } }

/* ---- 8. Row states (27227–27251, 26868–26876) ------------------------------------
   danceit loops tr.active between #007bff and #aaa (PKactiveColor 3s); dds
   marks it on now (13-feedback .dds-ongoing, the on-now loop the motion
   contract allows): every text of the row goes bold in its own colour and
   one band of the primary sweeps through the whole row, or the whole stack
   card, in its columns. No colour, no tint: a highlighted row (the reader's
   school) keeps its tint and still sweeps. Reduced motion: bold, still.
   The rule is 13-feedback's; nothing here. */
.dds-table tr.dds-preactive { color: var(--dds-label); font-weight: var(--dds-font-weight-bold); }
.dds-table tr.dds-past { opacity: .5; }
.dds-table tr.dds-unimportant,
.dds-table tr.dds-unimportant .dds-material-icons { color: var(--dds-unimportant); }
/* tr.dds-row-crossed: a row that is out (a withdrawn performance): the whole row
   is struck through, every cell (the lead too) in --dds-row-crossed, a pale ink
   well away from the live rows. A table's .dds-cross-unimportant rows are the
   same row state (danceit's PKtable->additional_class 'cross-unimportant'). */
.dds-table > tbody > tr.dds-row-crossed > td,
.dds-table > tbody > tr.dds-row-crossed > td[data-dds-lead],
.dds-table.dds-cross-unimportant > tbody > tr.dds-unimportant > td,
.dds-table.dds-cross-unimportant > tbody > tr.dds-unimportant > td[data-dds-lead] {
  color: var(--dds-row-crossed);
  text-decoration: line-through;
  text-decoration-color: var(--dds-row-crossed);
}
.dds-table > tbody > tr.dds-row-crossed .dds-material-icons,
.dds-table.dds-cross-unimportant > tbody > tr.dds-unimportant .dds-material-icons { color: var(--dds-row-crossed); }
/* tr.dds-row-highlight: a row that is the reader's own (their school, by the
   public filter). A tint of the primary and a 3px primary edge at the row's
   start; the other rows stay exactly as they are (never dimmed). On a stack
   card the whole card takes the tint, its start edge goes square under the
   stripe and the cells stay transparent, so there are no seams. */
.dds-table > tbody > tr.dds-row-highlight > td { background-color: var(--dds-row-highlight); }
.dds-table > tbody > tr.dds-row-highlight > td:first-child { box-shadow: inset 3px 0 0 var(--dds-primary); }
/* a striped table under the filter (.dds-filter-active, 27-public-pages.js) loses its
   stripes, so the highlight is its one tint, as on an unstriped list (the start lists);
   the same specificity as the stripe, later, so a stack card keeps its own tile */
.dds-table-striped.dds-filter-active > tbody > tr:where(:nth-of-type(odd)) { background-color: transparent; }
/* tr.dds-row-clickable (14-tables.js, from th[data-dds-actions]): the row's
   one action is the row's; a click anywhere on it follows the action */
.dds-table > tbody > tr.dds-row-clickable { cursor: pointer; }
.dds-table > tbody > tr.dds-row-clickable:hover > td { background-color: #00000008; }
.dds-table > tbody > tr.dds-row-clickable.dds-row-highlight:hover > td { background-color: var(--dds-row-highlight-hover); }

/* Row accessories. span.small-table-number: the day/hall prefix of a
   category's sequence number, e.g. "1A 007" (c_categories, c_videos,
   scr_printing). thead.sticky: the header row stays at the top of the page
   while a long table scrolls under it (c_judges_panel). */
.dds-small-table-number { color: #ccc; margin-right: .3em; }       /* danceit.css:27835 */
.dds-table > thead.dds-sticky > tr > th {                            /* danceit.css:28146 */
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* ---- 9. .dds-table-responsive (1695) — opt-in sideways scroll --------------------- */
.dds-table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- 9a. .dds-table-matrix — a table read across, at every width (spec 14 §6j) ----
   A grid of marks (the category results: rounds over judges over a row per
   performance) means something only as a grid, so it never folds into cards: it
   keeps its rows on one line each and scrolls sideways in its .dds-table-responsive
   on any screen. .dds-table-matrix-split is the 2px line where a group starts: on a
   cell, the next column group (a round); on a row, the next row group. */
.dds-table-matrix > thead > tr > th,
.dds-table-matrix > tbody > tr > td,
.dds-table-matrix > tr > :is(td, th) { white-space: nowrap; }
.dds-table-matrix :is(th, td).dds-table-matrix-split { border-left: 2px solid var(--dds-border); }
.dds-table-matrix tr.dds-table-matrix-split > td { border-top: 2px solid var(--dds-border); }
/* data-dds-sticky-head on the matrix: its head rows (all of them, as one) stay in
   view while its rows scroll under them, so a mark keeps its round and judge.
   th[data-dds-sticky-col] in the last head row: that column (a start number)
   stays at the scroller's left edge while the grid scrolls sideways; the
   columns before it scroll away under it. 14-tables.js copies the attribute to
   the column's cells and measures the box: a matrix that fits its width needs
   no sideways scroll, so its box lets go of overflow and the head sticks to the
   page; one that is wider (a phone) scrolls inside a box no taller than the
   screen (data-dds-overflow), and the head sticks to the box's top. Without the
   script the box only scrolls sideways, as before. The stuck parts take the
   card's white, so nothing shows through; once the grid has moved sideways
   (data-dds-scrolled), a hairline marks the column's edge. */
.dds-table-responsive:has(> .dds-table-matrix[data-dds-sticky-head]):not([data-dds-overflow]) { overflow: visible; }
.dds-table-responsive[data-dds-overflow]:has(> .dds-table-matrix[data-dds-sticky-head]) {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
.dds-table-matrix[data-dds-sticky-head] > thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.dds-table-matrix[data-dds-sticky-head] > thead > tr > th { background-color: var(--dds-card-bg); }
.dds-table-matrix > :is(thead, tbody) > tr > :where([data-dds-sticky-col]) {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--dds-card-bg);
}
[data-dds-scrolled] > .dds-table-matrix > :is(thead, tbody) > tr > :where([data-dds-sticky-col]) { box-shadow: inset -1px 0 0 var(--dds-table-line); }
/* phones: the body stops being a scroll container (01-reset), so the head can stick */
body.dds-scope:has(.dds-table-matrix[data-dds-sticky-head]) { overflow-x: clip; }

/* ---- 10. .dds-table-stack — rows as cards below 640px (divergence 2) -------------
   pkds (nest pk.css 1427–1485) mechanics with danceit's values: thead hides,
   each row is a card (the td padding, #ddd rule, heat-header 4px radius,
   striping and hover kept), each td[data-label] is a line: the value on the
   left, its label floated right (td::before; pkds draws it with ::after);
   data-dds-stack-top puts every label above its value instead. Unlabelled cells (checkbox, toggle, actions)
   lead the card on one line; every accessory after the first goes right.
   Never a "+" expander. At 640px and up .dds-table-stack changes nothing.
   design §5: the tile is the table's row, folded: white, a 1px rule in the table's
   own line colour (--dds-table-line, #ddd) all round, 6px corners; each labelled
   line sits on a lighter hairline (--dds-border-light), so the eye keeps value and
   label paired; values carry the weight (400, the heading ink) and labels step
   back (11px, #aaa). */
@media (max-width: 639.98px) {
  .dds-table.dds-table-stack,
  .dds-table.dds-table-stack > tbody { display: block; }
  .dds-table.dds-table-stack { border: 0; }
  .dds-table.dds-table-stack > thead { display: none; }
  .dds-table.dds-table-stack > tbody > tr {
    --dds-stack-gap: .75rem;
    --dds-stack-pad-y: 4px;
    --dds-stack-pad-x: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--dds-stack-gap);
    margin-bottom: 8px;
    padding: var(--dds-stack-pad-y) var(--dds-stack-pad-x);
    background: #fff;
    border: 1px solid var(--dds-table-line);        /* the table rows' rule */
    border-radius: var(--dds-radius-card);          /* 6px, the card's */
    transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
  }
  .dds-table.dds-table-stack.dds-table-hover > tbody > tr:hover,
  .dds-table.dds-table-stack > tbody > tr.dds-api-errors-selectable:hover,
  .dds-table.dds-table-stack > tbody > tr.dds-row-clickable:hover { background: #00000008; }   /* the row's hover */
  .dds-table.dds-table-stack > tbody > tr.dds-row-clickable:hover > td { background-color: transparent; }
  /* the highlighted card: one tint edge to edge, its rule a step of the primary,
     and a straight 3px stripe at its start (the 1px rule + 2px inset, so nothing
     moves): both start corners go square, top and bottom alike */
  .dds-table.dds-table-stack > tbody > tr.dds-row-highlight {
    background: var(--dds-row-highlight);
    border-color: color-mix(in srgb, var(--dds-primary) 22%, #fff);
    border-left-color: var(--dds-primary);
    border-radius: 0 var(--dds-radius-card) var(--dds-radius-card) 0;
    box-shadow: inset 2px 0 0 var(--dds-primary);
  }
  .dds-table.dds-table-stack > tbody > tr.dds-row-highlight:hover { background: var(--dds-row-highlight-hover); }
  .dds-table.dds-table-stack > tbody > tr.dds-row-highlight > td,
  .dds-table.dds-table-stack > tbody > tr.dds-row-highlight:hover > td { background-color: transparent; box-shadow: none; }
  .dds-table.dds-table-stack > tbody > tr.dds-row-highlight > td[data-label] ~ td[data-label] { border-top-color: rgba(0, 94, 195, .1); }
  .dds-table.dds-table-stack > tbody > tr:last-child { margin-bottom: 0; }
  .dds-table.dds-table-stack > tbody > tr > td,
  .dds-table.dds-table-stack > tbody > tr > th {
    box-sizing: border-box;
    padding: 7px 0;
    border: 0;
    white-space: normal;
    text-align: left;
    font-weight: var(--dds-font-weight-medium);     /* 500: the value reads first */
    color: var(--dds-heading);
  }
  /* the gentle rule between the lines of one tile */
  .dds-table.dds-table-stack > tbody > tr > td[data-label] ~ td[data-label] { border-top: 1px solid var(--dds-border-light); }
  /* the label floats right at the top of its cell (::before, so a value of
     several inline pieces or several lines stays one flowing text beside it;
     a float is also spared the row's line-through) */
  .dds-table.dds-table-stack > tbody > tr > td[data-label] {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-label]::before {
    float: right;
    margin-left: 1rem;
    max-width: 45%;                                 /* a long label wraps, not the value */
    content: var(--dds-table-label, attr(data-label));   /* none: the head's markup is the label (10b) */
    font-size: 11px;
    font-weight: var(--dds-font-weight-normal);
    line-height: 24px;                              /* on the value's first line */
    letter-spacing: .02em;
    text-align: right;
    color: var(--dds-text-unimportant);             /* #aaa: the label steps back */
    overflow-wrap: normal;
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-label] > .dds-table-label { float: right; margin-left: 1rem; max-width: 45%; display: block; font-size: 11px; font-weight: var(--dds-font-weight-normal); line-height: 24px; letter-spacing: .02em; text-align: right; color: var(--dds-text-unimportant); overflow-wrap: normal; }
  /* the label is danceit's quiet caption, 12px/400 uppercase #999 (the
     page-link caption, danceit.css:12598-12611; spec 14 s6). The shipped
     API view's tables (.dds-api-table, .dds-api-errors) keep their
     mixed-case #6c757d labels: that view is frozen. */
  .dds-table.dds-table-stack:not(.dds-api-table, .dds-api-errors) > tbody > tr > td[data-label]::before { text-transform: uppercase; }
  .dds-table.dds-table-stack:not(.dds-api-table, .dds-api-errors) > tbody > tr > td[data-label] > .dds-table-label { text-transform: uppercase; }
  .dds-table.dds-table-stack > tbody > tr > td[data-label]::after { content: ""; display: table; clear: both; }
  .dds-table.dds-table-stack > tbody > tr > td:not([data-label]) { order: -1; }
  .dds-table.dds-table-stack > tbody > tr > td:not([data-label]) .dds-form-check { margin-top: 0; margin-bottom: 0; }
  .dds-table.dds-table-stack > tbody > tr > td:not([data-label]) ~ td:not([data-label]) { margin-left: auto; }
  /* a lone trailing accessory (a chevron, a row action - danceit's td.text-right)
     keeps the right edge it has on wide screens; a leading checkbox stays left */
  .dds-table.dds-table-stack > tbody > tr > td:not([data-label]):last-child:not(:first-child) { margin-left: auto; }
  /* ...and when it is the row's only accessory, holds one element (a
     chevron, one icon button) and the row opens with a labelled cell, it
     shares that first line (the name) instead of leading the card on a line
     of its own: the first line shrinks to make room. Several buttons keep
     their own leading line, so the name is not squeezed. A name that wraps
     keeps the accessory on its first line, beside the label. */
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label]:first-child {
    order: -2;
    flex: 1 1 0;
    width: auto;
  }
  .dds-table.dds-table-stack > tbody > tr:has(> td[data-label]:first-child):not(:has(> td:not([data-label]):not(:last-child))) > td:not([data-label]):last-child:has(> :only-child) { align-self: flex-start; }
  /* a lone leading accessory (the reveal eye, a status icon, one switch or
     checkbox: one element, no label) keeps the left edge it has on wide
     screens and shares the first labelled line instead of a line of its own;
     a lone one-element trailing accessory may join that line too. Two
     leading accessories (the bank's switch + start number) or a trailing
     cell of several buttons keep their own leading line. */
  .dds-table.dds-table-stack > tbody > tr:has(> td:first-child:not([data-label]) > :only-child):not(:has(> td:not([data-label]):not(:first-child):not(:last-child))):not(:has(> td:not([data-label]):not(:first-child):last-child > :nth-child(2))) > td:first-child:not([data-label]) + td[data-label] {
    order: -1;
    flex: 1 1 0;
    width: auto;
  }
  .dds-table.dds-table-stack > tbody > tr:has(> td:first-child:not([data-label]) > :only-child):has(> td:first-child + td[data-label]):not(:has(> td:not([data-label]):not(:first-child):not(:last-child))):not(:has(> td:not([data-label]):not(:first-child):last-child > :nth-child(2))) > td:not([data-label]) { align-self: flex-start; }
  .dds-table.dds-table-stack > tbody > tr > td.dds-datatables-empty {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  /* one element and no loose text (data-dds-atom, set by 14-tables.js): the
     value and its label are flex items, value left and label right as pkds
     (pk.css 1453-1468); a value too wide to share the line (a long status
     pill, a long code) takes its own line under the label, both left-aligned,
     instead of dropping below a line that holds only the label */
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-atom] {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-atom]::before {
    float: none;
    order: 1;
    margin-left: 0;
    flex-shrink: 0;
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-atom] > .dds-table-label { float: none; order: 1; margin-left: 0; flex-shrink: 0; }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-atom]::after { display: none; }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-atom] > * { min-width: 0; max-width: 100%; }
  /* a crossed-out card (8, tr.dds-row-crossed) strikes every value, never a
     label: a label is in the cell's flow (a block, a flex item) and would take
     the cell's line-through, so the line moves from the cells to their values
     (14-tables.js wraps each value of a crossed row in s.dds-crossed-value);
     the labels only take the row's pale ink */
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td,
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td[data-label][data-dds-lead] { text-decoration: none; }
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td > s.dds-crossed-value { text-decoration: line-through; text-decoration-color: var(--dds-row-crossed); }
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td[data-label]::before { color: var(--dds-row-crossed); }
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td[data-label] > .dds-table-label { color: var(--dds-row-crossed); }
  /* one layout per table: when any atom value is too wide to share its line
     with the label (14-tables.js measures it and sets data-dds-stack-top on
     the table), every labelled cell of that table puts its label on a line
     of its own above the value, left-aligned, so the labels never jump
     between right and top from card to card. An inline-block label is
     spared the row's line-through, as the float was. */
  .dds-table.dds-table-stack[data-dds-stack-top] > tbody > tr > td[data-label] { display: block; }
  .dds-table.dds-table-stack[data-dds-stack-top] > tbody > tr > td[data-label]::before {
    display: inline-block;
    float: none;
    width: 100%;
    max-width: none;
    margin-left: 0;
    line-height: 18px;
    text-align: left;
  }
  .dds-table.dds-table-stack[data-dds-stack-top] > tbody > tr > td[data-label] > .dds-table-label { display: inline-block; float: none; width: 100%; max-width: none; margin-left: 0; line-height: 18px; text-align: left; }
  .dds-table.dds-table-stack[data-dds-stack-top] > tbody > tr > td[data-label]::after { display: none; }
}
/* build.py: the rules above, for a table stacked because it overflows (14 §6i) */
.dds-table.dds-table-stack:where([data-dds-stacked]),
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody { display: block; }
.dds-table.dds-table-stack:where([data-dds-stacked]) { border: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > thead { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr { --dds-stack-gap: .75rem; --dds-stack-pad-y: 4px; --dds-stack-pad-x: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--dds-stack-gap); margin-bottom: 8px; padding: var(--dds-stack-pad-y) var(--dds-stack-pad-x); background: #fff; border: 1px solid var(--dds-table-line); border-radius: var(--dds-radius-card); transition: background-color var(--dds-duration-fast) var(--dds-ease-standard); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-hover > tbody > tr:hover,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-api-errors-selectable:hover,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-clickable:hover { background: #00000008; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-clickable:hover > td { background-color: transparent; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-highlight { background: var(--dds-row-highlight); border-color: color-mix(in srgb, var(--dds-primary) 22%, #fff); border-left-color: var(--dds-primary); border-radius: 0 var(--dds-radius-card) var(--dds-radius-card) 0; box-shadow: inset 2px 0 0 var(--dds-primary); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-highlight:hover { background: var(--dds-row-highlight-hover); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-highlight > td,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-highlight:hover > td { background-color: transparent; box-shadow: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-highlight > td[data-label] ~ td[data-label] { border-top-color: rgba(0, 94, 195, .1); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:last-child { margin-bottom: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > th { box-sizing: border-box; padding: 7px 0; border: 0; white-space: normal; text-align: left; font-weight: var(--dds-font-weight-medium); color: var(--dds-heading); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label] ~ td[data-label] { border-top: 1px solid var(--dds-border-light); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label] { display: block; width: 100%; min-width: 0; overflow-wrap: anywhere; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label]::before { float: right; margin-left: 1rem; max-width: 45%; content: var(--dds-table-label, attr(data-label)); font-size: 11px; font-weight: var(--dds-font-weight-normal); line-height: 24px; letter-spacing: .02em; text-align: right; color: var(--dds-text-unimportant); overflow-wrap: normal; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label] > .dds-table-label { float: right; margin-left: 1rem; max-width: 45%; display: block; font-size: 11px; font-weight: var(--dds-font-weight-normal); line-height: 24px; letter-spacing: .02em; text-align: right; color: var(--dds-text-unimportant); overflow-wrap: normal; }
.dds-table.dds-table-stack:where([data-dds-stacked]):not(.dds-api-table, .dds-api-errors) > tbody > tr > td[data-label]::before { text-transform: uppercase; }
.dds-table.dds-table-stack:where([data-dds-stacked]):not(.dds-api-table, .dds-api-errors) > tbody > tr > td[data-label] > .dds-table-label { text-transform: uppercase; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label]::after { content: ""; display: table; clear: both; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td:not([data-label]) { order: -1; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td:not([data-label]) .dds-form-check { margin-top: 0; margin-bottom: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td:not([data-label]) ~ td:not([data-label]) { margin-left: auto; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td:not([data-label]):last-child:not(:first-child) { margin-left: auto; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label]:first-child { order: -2; flex: 1 1 0; width: auto; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td[data-label]:first-child):not(:has(> td:not([data-label]):not(:last-child))) > td:not([data-label]):last-child:has(> :only-child) { align-self: flex-start; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:first-child:not([data-label]) > :only-child):not(:has(> td:not([data-label]):not(:first-child):not(:last-child))):not(:has(> td:not([data-label]):not(:first-child):last-child > :nth-child(2))) > td:first-child:not([data-label]) + td[data-label] { order: -1; flex: 1 1 0; width: auto; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:first-child:not([data-label]) > :only-child):has(> td:first-child + td[data-label]):not(:has(> td:not([data-label]):not(:first-child):not(:last-child))):not(:has(> td:not([data-label]):not(:first-child):last-child > :nth-child(2))) > td:not([data-label]) { align-self: flex-start; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td.dds-datatables-empty { width: 100%; margin-left: 0; text-align: center; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-atom] { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; column-gap: 1rem; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-atom]::before { float: none; order: 1; margin-left: 0; flex-shrink: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-atom] > .dds-table-label { float: none; order: 1; margin-left: 0; flex-shrink: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-atom]::after { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-atom] > * { min-width: 0; max-width: 100%; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td[data-label][data-dds-lead] { text-decoration: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td > s.dds-crossed-value { text-decoration: line-through; text-decoration-color: var(--dds-row-crossed); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td[data-label]::before { color: var(--dds-row-crossed); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td[data-label] > .dds-table-label { color: var(--dds-row-crossed); }
.dds-table.dds-table-stack:where([data-dds-stacked])[data-dds-stack-top] > tbody > tr > td[data-label] { display: block; }
.dds-table.dds-table-stack:where([data-dds-stacked])[data-dds-stack-top] > tbody > tr > td[data-label]::before { display: inline-block; float: none; width: 100%; max-width: none; margin-left: 0; line-height: 18px; text-align: left; }
.dds-table.dds-table-stack:where([data-dds-stacked])[data-dds-stack-top] > tbody > tr > td[data-label] > .dds-table-label { display: inline-block; float: none; width: 100%; max-width: none; margin-left: 0; line-height: 18px; text-align: left; }
.dds-table.dds-table-stack:where([data-dds-stacked])[data-dds-stack-top] > tbody > tr > td[data-label]::after { display: none; }

/* ---- 10a. .dds-table-stack-flow — a short card for a long list (< 640px) ------
   With .dds-table-stack: the first labelled cell is the card's title (its
   label hidden, a lone trailing accessory beside it, as above); every other
   labelled cell flows after it as a small label-over-value pair, wrapping as
   the width allows, so a seven-column row is a three-line card, not seven
   lines. For lists people scan on a phone: start lists, results. */
@media (max-width: 639.98px) {
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr { --dds-stack-gap: 18px; --dds-stack-pad-y: 10px; gap: 4px var(--dds-stack-gap); }
  /* the title line ends here: the pairs start on the next one */
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr::after { content: ""; flex-basis: 100%; height: 0; order: 0; }
  /* a pair with no value (a performance without a title) is left out, not shown as a bare label */
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label]:empty { display: none; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label] {
    order: 1;
    width: auto;
    padding: 0;
    border-top: 0;
    font-size: 14px;
    font-weight: var(--dds-font-weight-normal);
    color: var(--dds-text);
  }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label]::before {
    display: block;
    float: none;
    max-width: none;
    margin: 0;
    font-size: 10px;
    line-height: 16px;
    text-align: left;
    color: var(--dds-text-caption);                 /* #5a636d: legible at 10px caps, still a step back */
  }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label] > .dds-table-label { display: block; float: none; max-width: none; margin: 0; font-size: 10px; line-height: 16px; text-align: left; color: var(--dds-text-caption); }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-atom] { display: block; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label]::after { display: none; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not(td[data-label] ~ td)::before { display: none; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not(td[data-label] ~ td) > .dds-table-label { display: none; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not(td[data-label] ~ td) { padding: 0 0 2px; }
}
/* build.py: the rules above, for a table stacked because it overflows (14 §6i) */
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr { --dds-stack-gap: 18px; --dds-stack-pad-y: 10px; gap: 4px var(--dds-stack-gap); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr::after { content: ""; flex-basis: 100%; height: 0; order: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label]:empty { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label] { order: 1; width: auto; padding: 0; border-top: 0; font-size: 14px; font-weight: var(--dds-font-weight-normal); color: var(--dds-text); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label]::before { display: block; float: none; max-width: none; margin: 0; font-size: 10px; line-height: 16px; text-align: left; color: var(--dds-text-caption); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label] > .dds-table-label { display: block; float: none; max-width: none; margin: 0; font-size: 10px; line-height: 16px; text-align: left; color: var(--dds-text-caption); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-atom] { display: block; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label]::after { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not(td[data-label] ~ td)::before { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not(td[data-label] ~ td) > .dds-table-label { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not(td[data-label] ~ td) { padding: 0 0 2px; }

/* ---- 10f. Wrap groups (< 640px): th[data-dds-wrap-group="name"] (spec 14 §6l) ----
   Columns whose th carry the same data-dds-wrap-group value, side by side, wrap
   as one unit in a flowing card: a round's judges' marks go to the next line
   together instead of leaving the first two beside the school and the rest
   below. The group stays on its line while it fits there whole; once it does
   not, 14-tables.js puts a line break before it (data-dds-wrap-break on its
   first cell; the row's ::before is the break, the group and what follows move
   after it). A group wider than a whole line still wraps, within itself only,
   so its lines hold nothing but its own pairs. Nothing is drawn: no border, no
   gap, no label of its own. One break per card (the first group that needs it).
   At 640px and up, and in a card that does not flow, it changes nothing. */
@media (max-width: 639.98px) {
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr:has(> td[data-dds-wrap-break])::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-wrap-break],
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-dds-wrap-break] ~ td[data-label] { order: 3; }
}
/* build.py: the rules above, for a table stacked because it overflows (14 §6i) */
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr:has(> td[data-dds-wrap-break])::before { content: ""; flex-basis: 100%; height: 0; order: 2; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-wrap-break],
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-dds-wrap-break] ~ td[data-label] { order: 3; }

/* ---- 10b. A label with markup (< 640px): the head's own elements ------------------
   A card's label is td::before { content: attr(data-label) }: plain text, so a
   head of initials and their letter (ZB<sup>A</sup>) read "ZBA". When a th holds
   markup (sup, sub, b, strong, i, em, small, mark, s, u, abbr), 14-tables.js puts
   a copy of it at the start of each labelled cell of the column:
   span.dds-table-label[aria-hidden], its elements kept and its words in
   data-dds-text, drawn by CSS. The cell's own text (its sort, its search, its
   shimmer) is unchanged, and the cell gets data-dds-label-html, which turns the
   ::before's text off (--dds-table-label: none). build.py gives every label rule
   of this file (td[data-label]...::before, < 640px) a twin for the span, so the
   span floats, flows, tops and hides exactly as the ::before does. A group's one
   label (data-dds-group-label) stays text. */
.dds-table > tbody > tr > td > .dds-table-label { display: none; }
.dds-table > tbody > tr > td[data-dds-label-html] { --dds-table-label: none; }
.dds-table-label [data-dds-text]::before { content: attr(data-dds-text); }
.dds-table-label :is(sup, sub) { line-height: 0; }

/* ---- 10c. Card options (< 640px): joins, the lead column, the title ----------------
   Set on the th, copied to the column's cells by 14-tables.js (spec 14 §10c):
   - th[data-dds-join="space"]: the column joins the one before it on one
     line ("Jan" "Kowalski" -> "Jan Kowalski"), with one label for the group
     ("Name, Surname") hung at the top of it. A person's name and surname
     always come together: never the name as the title and the surname as a
     field.
   - th[data-dds-join="parts"]: the same for the parts of one name, where a
     name has more than two of them. As the title such a name is emphasised
     whole. In a flowing card's pairs each part keeps its own small label,
     which is not a concatenation, so those keep the row's gap.
   Both are an **exception**: a field long enough to wrap on its own belongs on
   a labelled line of its own, and the public bridge joins nothing but a name
   and its surname (pub_dds_card_columns, spec 14 §6b).
   - th[data-dds-lead]: the column is the card's start column (a start number):
     the card's full height at its start, the number centred in it with the
     same room on both sides, a rule after it; everything else in the card
     starts after it, at the title's edge. The title is the next labelled cell,
     or the column whose th carries data-dds-card-title: the title's line comes
     first (order 0), and the cells between the lead and it are pairs below it.
   A title that shares its line with a row action shows no label: a label
   between a value and a button it does not name reads as the button's.
   A group's values are joined by a word's space and nothing else — never a
   pipe, by either join — and they are joined into **one run of text**, so the
   value wraps where its words fall and never at the seam between two columns.
   Only the group's one *label* is a list, and that is joined by ", "
   (data-dds-group-label, 14-tables.js). 02-type's .dds-parts still pipes a name
   outside a table (a card's category line, a heading); inside a card the
   separator is the space.
   (Some selectors repeat a structural part only to outrank 10 and 10a.) */
@media (max-width: 639.98px) {
  /* A group is one value, so below 640px it is one cell: 14-tables.js moves every
     part's value into the group's head (joinValues), each inside its own
     span.dds-part-value, and leaves the cells it came from empty and hidden. The
     card then draws an ordinary labelled line — one rule the width of it, the one
     label floated at its top, the words wrapping where they fall — and the whole of
     that comes from 10 with nothing added. The group's label is the parts' labels
     as a list; the group's value is their values with a space between. */
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-joined] { display: none; }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-group-label]::before { content: attr(data-dds-group-label); }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-group-label] > .dds-table-label { display: none; }
  /* the title's cells carry no rule between them */
  .dds-table.dds-table-stack > tbody > tr > td[data-label] ~ td[data-label][data-dds-title],
  .dds-table.dds-table-stack > tbody > tr > td[data-label] ~ td[data-label][data-dds-lead] { border-top: 0; }

  /* the lead column: a start number takes the card's start, top to bottom,
     centred, no fill of its own, divided from the rest by the card's own rule.
     Its width is the table's longest lead (--dds-lead-ch, set on the table by
     14-tables.js; 3 by default) plus the card's side padding on both sides; the
     card's padding gives that room back, so every line (the title, the pairs)
     starts at the same edge, after the column. */
  .dds-table.dds-table-stack > tbody > tr:has(> td[data-dds-lead]) {
    --dds-lead-w: calc(var(--dds-lead-ch, 3) * 1ch + 2 * var(--dds-stack-pad-x));
    padding-left: calc(var(--dds-lead-w) + 1px + var(--dds-stack-pad-x));
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-lead],
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label][data-dds-lead]:not(td[data-label] ~ td),
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-lead] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--dds-lead-w) + 1px);         /* + its rule: the figure keeps its full room */
    margin: 0;
    padding: 0 var(--dds-stack-pad-x);
    white-space: nowrap;
    border: 0;
    border-right: 1px solid var(--dds-table-line);
    background: none;
    color: var(--dds-primary-dark);
    font-size: inherit;                             /* the card's: 1ch here is 1ch in the card's padding */
    font-weight: var(--dds-font-weight-medium);
    line-height: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .dds-table.dds-table-stack > tbody > tr.dds-row-highlight > td[data-label][data-dds-lead] { border-right-color: color-mix(in srgb, var(--dds-primary) 22%, #fff); }
  /* a crossed-out card's ink (8): each rule is the cell rule above it plus the
     row state, so the pale ink wins over the card's own (14-tables.js gives a
     .dds-cross-unimportant table's .dds-unimportant rows .dds-row-crossed) */
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td,
  .dds-table.dds-table-stack > tbody > tr.dds-row-crossed > td[data-label][data-dds-lead],
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label],
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label][data-dds-title],
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label][data-dds-lead],
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label][data-dds-lead]:not(td[data-label] ~ td),
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label]::before { color: var(--dds-row-crossed); }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label] > .dds-table-label { color: var(--dds-row-crossed); }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-lead]::before,
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-lead]::after { content: none; }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-lead] > .dds-table-label { display: none; }
  .dds-table.dds-table-stack > tbody > tr > td[data-label][data-dds-lead] + td[data-label][data-dds-title] { flex: 1 1 0; width: auto; }

  /* flow: the title's joins (and a title after the lead) are the title, not pairs */
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-title] {
    order: 0;
    padding: 0 0 2px;
    font-size: inherit;
    font-weight: var(--dds-font-weight-medium);
    color: var(--dds-heading);
  }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label][data-dds-title]::before { content: none; }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label][data-dds-title] > .dds-table-label { display: none; }
  /* flow pairs in a group keep their own small labels, so they read as pairs and
     keep the row's gap: the group only joins the title's values */
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-group]::before,
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-join]::before { content: var(--dds-table-label, attr(data-label)); }
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-group] > .dds-table-label,
  .dds-table.dds-table-stack.dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-join] > .dds-table-label { display: block; }

  /* a lone row action beside the title: no label in between (the halls'
     "Name" sat between the hall and its map button), and the title's
     group stays together before the action */
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label]:first-child::before,
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-title]::before { content: none; }
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label]:first-child > .dds-table-label,
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-title] > .dds-table-label { display: none; }
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-title],
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-lead] { order: -2; }
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-lead]:first-child { flex: 0 0 auto; width: calc(var(--dds-lead-w) + 1px); }   /* the lead column keeps its width (10c) */
  .dds-table.dds-table-stack > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-lead] + td[data-label][data-dds-title] { flex: 1 1 0; }
  /* ...and when that title is a group of parts that may wrap, the action takes a
     fixed gutter at the top right (a list's trailing icon): the parts wrap in
     the room left of it, and the action never drops to a line of its own */
  .dds-table.dds-table-stack > tbody > tr:has(> td[data-dds-title][data-dds-group]):has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) {
    position: relative;
    padding-right: 52px;
  }
  .dds-table.dds-table-stack > tbody > tr:has(> td[data-dds-title][data-dds-group]):has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td:not([data-label]):last-child {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
  }
  /* the actions cell (th[data-dds-actions]) holding one button is the card's
     top-right corner: a square flush to the top and
     end edges with the card's corner there, so its press tint fills the
     corner and never spills past the card */
  .dds-table.dds-table-stack > tbody > tr:has(> td[data-dds-actions]:last-child > :only-child) {
    --dds-stack-action: 40px;
    position: relative;
    padding-right: calc(var(--dds-stack-action) + 4px);
  }
  /* only the first line shares its top with the corner: the lines under it
     (each pair, its label at the far right) take the card's full width */
  .dds-table.dds-table-stack:not(.dds-table-stack-flow) > tbody > tr:has(> td[data-dds-actions]:last-child > :only-child) > td[data-label]:not(:first-child, [data-dds-title], [data-dds-lead]) {
    width: calc(100% + var(--dds-stack-action) + 4px - var(--dds-stack-pad-x));
    margin-right: calc(var(--dds-stack-pad-x) - var(--dds-stack-action) - 4px);
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-dds-actions]:last-child:has(> :only-child) {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  .dds-table.dds-table-stack > tbody > tr > td[data-dds-actions]:last-child > .dds-btn:only-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dds-stack-action);
    height: var(--dds-stack-action);
    margin: 0;
    padding: 0;
    border-radius: 0 calc(var(--dds-radius-card) - 1px) 0 6px;   /* inside the card's 1px rule */
  }
}
/* build.py: the rules above, for a table stacked because it overflows (14 §6i) */
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-joined] { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-group-label]::before { content: attr(data-dds-group-label); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-group-label] > .dds-table-label { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label] ~ td[data-label][data-dds-title],
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label] ~ td[data-label][data-dds-lead] { border-top: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td[data-dds-lead]) { --dds-lead-w: calc(var(--dds-lead-ch, 3) * 1ch + 2 * var(--dds-stack-pad-x)); padding-left: calc(var(--dds-lead-w) + 1px + var(--dds-stack-pad-x)); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-lead],
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label][data-dds-lead]:not(td[data-label] ~ td),
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-lead] { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; width: calc(var(--dds-lead-w) + 1px); margin: 0; padding: 0 var(--dds-stack-pad-x); white-space: nowrap; border: 0; border-right: 1px solid var(--dds-table-line); background: none; color: var(--dds-primary-dark); font-size: inherit; font-weight: var(--dds-font-weight-medium); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-highlight > td[data-label][data-dds-lead] { border-right-color: color-mix(in srgb, var(--dds-primary) 22%, #fff); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr.dds-row-crossed > td[data-label][data-dds-lead],
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label],
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label][data-dds-title],
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label][data-dds-lead],
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label][data-dds-lead]:not(td[data-label] ~ td),
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label]::before { color: var(--dds-row-crossed); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr.dds-row-crossed > td[data-label] ~ td[data-label] > .dds-table-label { color: var(--dds-row-crossed); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-lead]::before,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-lead]::after { content: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-lead] > .dds-table-label { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-label][data-dds-lead] + td[data-label][data-dds-title] { flex: 1 1 0; width: auto; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label] ~ td[data-label][data-dds-title] { order: 0; padding: 0 0 2px; font-size: inherit; font-weight: var(--dds-font-weight-medium); color: var(--dds-heading); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label][data-dds-title]::before { content: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label][data-dds-title] > .dds-table-label { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-group]::before,
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-join]::before { content: var(--dds-table-label, attr(data-label)); }
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-group] > .dds-table-label,
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-stack-flow > tbody > tr > td[data-label]:not([data-dds-title])[data-dds-join] > .dds-table-label { display: block; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label]:first-child::before,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-title]::before { content: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label]:first-child > .dds-table-label,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-title] > .dds-table-label { display: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-title],
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-lead] { order: -2; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-lead]:first-child { flex: 0 0 auto; width: calc(var(--dds-lead-w) + 1px); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td[data-label][data-dds-lead] + td[data-label][data-dds-title] { flex: 1 1 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td[data-dds-title][data-dds-group]):has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) { position: relative; padding-right: 52px; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td[data-dds-title][data-dds-group]):has(> td:not([data-label]):last-child > :only-child):not(:has(> td:not([data-label]):not(:last-child))) > td:not([data-label]):last-child { position: absolute; top: 0; right: 0; margin: 0; padding: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr:has(> td[data-dds-actions]:last-child > :only-child) { --dds-stack-action: 40px; position: relative; padding-right: calc(var(--dds-stack-action) + 4px); }
.dds-table.dds-table-stack:where([data-dds-stacked]):not(.dds-table-stack-flow) > tbody > tr:has(> td[data-dds-actions]:last-child > :only-child) > td[data-label]:not(:first-child, [data-dds-title], [data-dds-lead]) { width: calc(100% + var(--dds-stack-action) + 4px - var(--dds-stack-pad-x)); margin-right: calc(var(--dds-stack-pad-x) - var(--dds-stack-action) - 4px); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-dds-actions]:last-child:has(> :only-child) { position: absolute; top: 0; right: 0; margin: 0; padding: 0; line-height: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody > tr > td[data-dds-actions]:last-child > .dds-btn:only-child { display: inline-flex; align-items: center; justify-content: center; width: var(--dds-stack-action); height: var(--dds-stack-action); margin: 0; padding: 0; border-radius: 0 calc(var(--dds-radius-card) - 1px) 0 6px; }
/* ---- 10e. The table's footer: .dds-datatables-bottom (every width) -----------
   The footer is not a part of the table, so it draws no line of its own: a
   table closes itself (its last row's rule, as its first row's opens it), and
   a list of cards needs no close. Under it, 12px apart, the count is a small
   filled tally in the caption ink (no frame, nothing a card could be mistaken
   for), the pager at the line's end. With nothing to say (no rows, one page)
   the footer has no height; with one page there is no pager at all
   (dds.pager draws nothing). */
/* a table closes itself: everywhere it is a table (a stack is one from 640px; below, its cards close themselves) */
.dds-datatables-wrapper:has(> .dds-datatables-bottom) .dds-table:not(.dds-table-stack) > tbody > tr:last-child > td {
  border-bottom: 1px solid var(--dds-table-line);
}
@media (min-width: 640px) {
  .dds-datatables-wrapper:has(> .dds-datatables-bottom) .dds-table.dds-table-stack:not(:where([data-dds-stacked])) > tbody > tr:last-child > td { border-bottom: 1px solid var(--dds-table-line); }
}
.dds-datatables-wrapper > .dds-datatables-bottom {
  min-height: 32px;
  margin-top: 12px;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  color: var(--dds-text-caption);
  font-variant-numeric: tabular-nums;
}
.dds-datatables-wrapper > .dds-datatables-bottom .dds-datatables-info:not(:empty) {
  display: inline-block;
  padding: 2px 10px;
  font-weight: var(--dds-font-weight-medium);
  background: var(--dds-card-shade-1);
  border-radius: var(--dds-radius-sm);
}
.dds-datatables-wrapper > .dds-datatables-bottom:not(:has(.dds-datatables-info:not(:empty), .dds-pagination > *)) {
  min-height: 0;
  margin-top: 0;
}
.dds-datatables-paginate:not(:has(.dds-pagination > *)) { display: none; }

/* ---- 10d. .dds-table-group — row groups under one header (every width) ---------
   A table split into groups (a round's heats) stays one table: the header
   once, then one tbody.dds-table-group per group, opened by
   tr.dds-table-group-head > th[colspan][scope=colgroup]. The columns line up
   across every group. Inside the th: the group's name, .dds-table-group-name
   ("Heat 1"), then an optional .dds-table-group-meta (its share, "of 4") and
   an optional .dds-table-group-count (the rows in it, at the line's end).
   The group speaks the public date chip's grammar (27 .dds-pub-day): a 1px
   --dds-primary outline and --dds-primary-dark words, no fill.
   Wide: the heading row is that outline across the table (a ::before on the
   th, --dds-radius-sm: a collapsed table's cells take no radius), and every
   group after the first opens 20px below the one before (a white border on
   the th: the table stays one grid).
   Below 640px with .dds-table-stack: a group is a bundle. The tbody carries
   the outline (--dds-radius-card), its heading the bundle's first line in
   the blue words, its rows the white cards in it; 20px between groups.
   Striping and hover skip the heading row. */
.dds-table > tbody.dds-table-group > tr.dds-table-group-head > th {
  position: relative;                               /* holds the outline */
  padding: 8px 12px;
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--dds-font-weight-medium);
  color: var(--dds-primary-dark);
  background: transparent;
  border-top: 0;
  text-align: left;
}
.dds-table > tbody.dds-table-group > tr.dds-table-group-head > th::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--dds-primary);
  border-radius: var(--dds-radius-sm);
  pointer-events: none;
}
.dds-table > tbody.dds-table-group + tbody.dds-table-group > tr.dds-table-group-head > th { border-top: 20px solid var(--dds-card-bg); }
/* the outline is the line at both edges of the head: the header's rule above
   the first group and the rule over each group's first row would run beside it
   in grey, so they go (a table, not cards) */
@media (min-width: 640px) {
  .dds-table:not([data-dds-stacked]):has(> tbody.dds-table-group) > thead > tr > th { border-bottom: 0; }
  .dds-table:not([data-dds-stacked]) > tbody.dds-table-group > tr.dds-table-group-head + tr > td { border-top: 0; }
}
.dds-table-group-head .dds-table-group-meta { margin-left: 8px; font-weight: var(--dds-font-weight-normal); color: var(--dds-text-muted); }
.dds-table-group-head .dds-table-group-count {
  float: right;                                     /* the line's end, inside a colspan cell */
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 24px;
  font-weight: var(--dds-font-weight-medium);
  text-align: center;
  color: var(--dds-primary-dark);
  font-variant-numeric: tabular-nums;
}
.dds-table-striped > tbody.dds-table-group > tr.dds-table-group-head,
.dds-table-hover > tbody.dds-table-group > tr.dds-table-group-head:hover { background-color: transparent; }
@media (max-width: 639.98px) {
  .dds-table.dds-table-stack > tbody.dds-table-group {
    padding: 0 6px 6px;
    background: transparent;
    border: 1px solid var(--dds-primary);
    border-radius: var(--dds-radius-card);
  }
  .dds-table.dds-table-stack > tbody.dds-table-group + tbody.dds-table-group { margin-top: 20px; }
  .dds-table.dds-table-stack > tbody.dds-table-group > tr.dds-table-group-head,
  .dds-table.dds-table-stack.dds-table-hover > tbody.dds-table-group > tr.dds-table-group-head:hover {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
  .dds-table.dds-table-stack > tbody.dds-table-group > tr.dds-table-group-head::after,
  .dds-table.dds-table-stack > tbody.dds-table-group > tr.dds-table-group-head > th::before { content: none; }   /* the tbody is the outline */
  .dds-table.dds-table-stack > tbody.dds-table-group > tr.dds-table-group-head > th,
  .dds-table.dds-table-stack > tbody.dds-table-group + tbody.dds-table-group > tr.dds-table-group-head > th {
    display: block;
    padding: 8px 4px 8px 0;
    font-size: 15px;
    background: none;
    border: 0;
  }
  .dds-table.dds-table-stack > tbody.dds-table-group > tr:not(.dds-table-group-head) { margin-bottom: 6px; }
  .dds-table.dds-table-stack > tbody.dds-table-group > tr:last-child { margin-bottom: 0; }
}
/* build.py: the rules above, for a table stacked because it overflows (14 §6i) */
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group { padding: 0 6px 6px; background: transparent; border: 1px solid var(--dds-primary); border-radius: var(--dds-radius-card); }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group + tbody.dds-table-group { margin-top: 20px; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group > tr.dds-table-group-head,
.dds-table.dds-table-stack:where([data-dds-stacked]).dds-table-hover > tbody.dds-table-group > tr.dds-table-group-head:hover { display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group > tr.dds-table-group-head::after,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group > tr.dds-table-group-head > th::before { content: none; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group > tr.dds-table-group-head > th,
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group + tbody.dds-table-group > tr.dds-table-group-head > th { display: block; padding: 8px 4px 8px 0; font-size: 15px; background: none; border: 0; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group > tr:not(.dds-table-group-head) { margin-bottom: 6px; }
.dds-table.dds-table-stack:where([data-dds-stacked]) > tbody.dds-table-group > tr:last-child { margin-bottom: 0; }

/* ---- 11. Reduced motion: durations are 1ms (05-motion); stop the one-shot too ---- */
@media (prefers-reduced-motion: reduce) {
  .dds-checkbox-hide.dds-show { animation: none; }
}


/* ===== 15-navigation.css ================================================= */

/* ==========================================================================
   dds · 15-navigation — nav base, pills, tabs, tab panes, dropdowns,
   pagination
   --------------------------------------------------------------------------
   Owner: navigation. Every value is danceit's (danceit.css line numbers cited;
   Bootstrap 4 ≈2900–4400, Material Dashboard 2.1.1 ≈12590–14060, danceit's
   own rules ≈26600–28830), measured in spec/15-navigation.md.

   Markup (danceit vocabulary, dds- prefixed)
     ul.dds-nav > li.dds-nav-item > a.dds-nav-link(.dds-active|.dds-disabled)
       + .dds-nav-pills (-icons, -sm; no -primary: already #007bff)
       + .dds-nav-tabs  (white on a coloured card header; readable on white)
     div.dds-tab-content > div.dds-tab-pane(.dds-active)   [+ .dds-tab-space]
     div.dds-dropdown|dds-dropup > [data-dds-toggle=dropdown]
       + (ul|div).dds-dropdown-menu(.dds-dropdown-menu-right)(.dds-show)
           > a.dds-dropdown-item | li > a | h6.dds-dropdown-header
             | div.dds-dropdown-divider           (+ .dds-dropdown-with-icons)
     ul.dds-pagination > li.dds-page-item
       (.dds-active|.dds-disabled) > a.dds-page-link
     nav.dds-langs[data-dds-langs] > ul.dds-langs-list + .dds-dropup.dds-langs-menu
       the language switch: names in a row while they fit on one line, a
       menu when they do not (never a scroll, never a wrap) — 7 below
   The sidebar and navbar looks of .dds-nav are 04-layout's; .dds-select
   (11-forms) sits on .dds-dropdown-menu and positions it itself, so every
   geometry value of the menu box is zero-specificity (:where) and loses to it.

   Motion (CONVENTIONS 11)
     pills        colour + shadow 300ms (danceit: all .3s, 12704)
     tabs         the active wash arrives in 300ms and leaves in 150ms
                  (danceit: .3s .2s in / .3s out, 12918/12953 — so the old
                  tab fades first; dds keeps that order without the delay)
     tab panes    danceit snaps; dds fades the new pane in over 150ms
     dropdown     Material Dashboard's entrance, ported: scale 0 → 1 from the
                  toggle's corner in 300ms + opacity 200ms (13875, 13891);
                  it leaves with a plain 150ms fade. display:none +
                  allow-discrete + @starting-style — no showing/hiding classes.
     caret        turns over in 150ms linear (14011)
     pagination   colour + shadow 150ms (danceit: all .3s, 12598)
   Reduced motion: the duration tokens drop to 1ms (05-motion).
   ========================================================================== */

/* ---- 1. The generic nav (Bootstrap 4, danceit.css:3615–3641) -------------- */
.dds-nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.dds-nav-link {
  display: block;
  padding: .5rem 1rem;                                  /* 3623 */
}
.dds-nav-link:is(:hover, :focus) { text-decoration: none; }
:where(button.dds-nav-link) {                           /* a <button> tab looks like the <a> one */
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.dds-nav-link.dds-disabled,
.dds-nav-item.dds-disabled > .dds-nav-link,
.dds-nav-link:disabled {
  color: var(--dds-text-muted);                         /* 3637: #6c757d */
  pointer-events: none;
  cursor: default;
}

/* ---- 2. Pills (Material Dashboard, danceit.css:12691–12776) ---------------
   PKmodules/scr_printing.php: icon pills over tab panes; the homepage
   PLN / EUR switch: plain capsules. No .dds-nav-pills-primary class:
   danceit's active pill is already #007bff, so the rule-less
   danceit hook is dropped (markup that still carries it looks the same). The colour variants are left out
   (divergence 1). */
.dds-nav-pills {
  border: 0;
  border-radius: var(--dds-radius-sm);                  /* 12691: 3px */
  padding: 0 15px;
}
.dds-nav-pills .dds-nav-item + .dds-nav-item:not(:first-child) { margin-left: 5px; }   /* 12697 */
.dds-nav-pills.dds-flex-column .dds-nav-item + .dds-nav-item { margin-left: 0; margin-top: 5px; } /* 12701 */
.dds-nav-pills .dds-nav-item .dds-nav-link {            /* 12704 */
  min-width: 100px;
  padding: 10px 15px;
  font-size: var(--dds-font-size-pill);                 /* 12px */
  font-weight: var(--dds-font-weight-medium);
  line-height: 24px;
  color: var(--dds-navbar-text);                        /* #555 */
  text-align: center;
  text-transform: uppercase;
  border-radius: var(--dds-radius-btn);                 /* 12704's 30px capsule: dds's one button radius */
  transition-property: color, background-color, box-shadow;
  transition-duration: var(--dds-duration-slow);        /* danceit: all .3s */
  transition-timing-function: var(--dds-ease-decelerate); /* the new state shows at once, then settles */
}
.dds-nav-pills .dds-nav-item .dds-nav-link:hover {
  background-color: hsla(0, 0%, 78%, .2);               /* 12716 */
}
.dds-nav-pills .dds-nav-item .dds-nav-link:is(.dds-active, [aria-selected="true"]) {  /* 12720 (+ :focus, :hover) */
  color: var(--dds-text-on-primary);
  background-color: var(--dds-primary);
  box-shadow: var(--dds-shadow-chip);
}
.dds-nav-pills .dds-nav-item .dds-material-icons {      /* 12728 */
  display: block;
  font-size: 30px;
  padding: 15px 0;
}
.dds-nav-pills-icons .dds-nav-item .dds-nav-link { border-radius: var(--dds-radius-btn); }   /* 12774: 4px */
.dds-nav-pills .dds-nav-item .dds-nav-link:focus-visible { outline-offset: 2px; }

/* Small pills: no danceit screen has them. The API reference switches
   Response / Request / cURL with them on a white card body. Sized like
   danceit's .btn-sm row next to them (30px, the pagination's height too),
   with the blue button's own shadow in place of the chip glow. */
.dds-nav-pills.dds-nav-pills-sm { padding: 0; }
.dds-nav-pills.dds-nav-pills-sm .dds-nav-item .dds-nav-link {
  min-width: 0;
  padding: 3px 14px;
  line-height: 24px;
}
.dds-nav-pills.dds-nav-pills-sm .dds-nav-item .dds-nav-link:is(.dds-active, [aria-selected="true"]) {
  box-shadow: var(--dds-shadow-primary);                /* danceit.css:8319 .btn-primary */
}

/* ---- 3. Tabs (Material Dashboard, danceit.css:12912–12977) ----------------
   danceit's tabs live on a coloured card header (card-header-tabs): white
   links, a white wash on the active one. On a white surface danceit would draw
   them white-on-white (12936 !important); dds uses the look Material Dashboard
   meant there (12958–12977): #555 links, a 3px blue underline on the active. */
.dds-nav-tabs {
  border: 0;
  border-radius: var(--dds-radius-sm);                  /* 12912 */
  padding: 0 15px;
}
.dds-nav-tabs .dds-nav-item { margin-bottom: -1px; }   /* 3647 */
.dds-nav-tabs .dds-nav-item .dds-nav-link {             /* 12918, 12958 */
  position: relative;
  margin: 0;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: var(--dds-font-weight-medium);           /* 12936 */
  line-height: 24px;
  color: var(--dds-navbar-text);                        /* 12958: #555 */
  text-transform: uppercase;
  background-color: transparent;
  border: 0;
  border-bottom: .214rem solid transparent;             /* 12958 */
  border-radius: var(--dds-radius-sm);
  transition-property: background-color, color, border-color;
  transition-duration: var(--dds-duration-fast);        /* leaving: faster */
  transition-timing-function: var(--dds-ease-accelerate);
}
.dds-nav-tabs .dds-nav-item .dds-nav-link:is(.dds-active, [aria-selected="true"]) {
  color: var(--dds-text-card);                          /* 12962: #333 */
  border-color: var(--dds-primary);
  transition-duration: var(--dds-duration-slow);        /* 12953: .3s, arriving */
  transition-timing-function: var(--dds-ease-decelerate);
}
.dds-nav-tabs .dds-nav-item:is(.dds-disabled) .dds-nav-link,
.dds-nav-tabs .dds-nav-link.dds-disabled { color: var(--dds-muted); }   /* 12973: #999 */
.dds-nav-tabs .dds-nav-item .dds-material-icons { margin: -1px 5px 0 0; vertical-align: middle; } /* 12949 */

/* On a coloured header: danceit's own look (12918–12953) */
:is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger) .dds-nav-tabs .dds-nav-item .dds-nav-link {
  color: var(--dds-text-on-primary);                    /* 12936 */
  border-bottom: 0;
}
:is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger) .dds-nav-tabs .dds-nav-item .dds-nav-link:is(.dds-active, [aria-selected="true"]) {
  background-color: hsla(0, 0%, 100%, .2);              /* 12953 */
}
:is(.dds-card-header-primary, .dds-card-header-success, .dds-card-header-danger) .dds-nav-tabs .dds-nav-link:focus-visible { outline-color: var(--dds-white); }
.dds-card .dds-card-header .dds-nav-tabs { padding: 0; }                    /* 14592 */
.dds-card .dds-card-header.dds-card-header-tabs .dds-nav-tabs { background: transparent; padding: 0; } /* 14889 */
.dds-card-header-tabs .dds-nav-tabs-title {             /* 14894 */
  float: left;
  padding: 10px 10px 10px 0;
  line-height: 24px;
}
/* danceit's .nav-tabs-navigation / .nav-tabs-wrapper carry no CSS: dds drops both */

/* ---- 4. Tab panes (Bootstrap 4, danceit.css:3702–3706) -------------------- */
.dds-tab-content > .dds-tab-pane { display: none; }
.dds-tab-content > .dds-active {
  display: block;
  opacity: 1;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-decelerate);
}
@starting-style { .dds-tab-content > .dds-active { opacity: 0; } }
.dds-tab-space { padding: 20px 0 50px; }                                  /* 12778 */
.dds-card .dds-tab-content.dds-tab-space { padding: 20px 0 9px; }         /* 12782 */

/* ---- 5. Dropdowns (Bootstrap 4 2943–3112, Material Dashboard 13875–14058,
   danceit 26614–26641, 26728–26745, 28228, 28417, 28821–28826) --------------
   Positioned by CSS, not Popper: top 100% (+2px) under the toggle, aligned to
   its start edge, or its end edge with .dds-dropdown-menu-right; above it in
   a .dds-dropup. The JS writes data-dds-placement (bottom-start, bottom-end,
   top-start, top-end: danceit's x-placement), flips a menu that would
   leave the viewport above (or below) and slides one that would cross its
   boundary back 5px inside it, keeping its edge (Popper's flip and
   preventOverflow); the scale-in grows from that corner (13907–13921). */
.dds-dropdown,
.dds-dropup { position: relative; }                    /* 2943 */
.dds-btn-dropdown-outer { display: inline-block; }     /* 27343: a row action with a menu */

/* the box: geometry at zero specificity (11-forms places its menus itself) */
:where(.dds-dropdown-menu) {
  position: absolute;
  top: var(--dds-dropdown-top, 100%);                   /* the JS anchors it to the toggle, as Popper does */
  left: var(--dds-dropdown-left, 0);
  z-index: var(--dds-z-dropdown);                       /* 1000 */
  float: left;
  min-width: 10rem;                                     /* 2986: 160px */
  max-height: 50vh;                                     /* 26614, 26619 */
  padding: .3125rem 0;                                  /* 13875: 5px 0 */
  margin: .125rem 0 0;                                  /* 2986: 2px */
  overflow-y: auto;                                     /* 26614, 28228 */
  font-size: 1rem;
  color: var(--dds-text-dark);                          /* 2986: #212529 */
  text-align: left;
  list-style: none;
  background-color: var(--dds-card-bg);
  background-clip: padding-box;
  border: 0;                                            /* 13875 */
  border-radius: var(--dds-radius-dropdown);            /* 2986: 4px */
  box-shadow: var(--dds-shadow-dropdown);               /* 13875: 0 2px 5px .26 */
  transform-origin: 0 0;                                /* 13907 bottom-start */
}
:where(.dds-dropdown-menu-right) { right: var(--dds-dropdown-right, 0); left: auto; transform-origin: 100% 0; }   /* 3011, 13911 */
:where(.dds-dropdown-menu-left) { right: auto; left: 0; }                            /* 3007 */
:where(.dds-dropup) > :where(.dds-dropdown-menu),
:where(.dds-dropdown-menu[data-dds-placement^="top"]) {                            /* 3016 */
  top: auto;
  bottom: var(--dds-dropdown-bottom, 100%);
  margin: 0 0 .125rem;
  transform-origin: 0 100%;                             /* 13915 top-start */
}
:where(.dds-dropup) > :where(.dds-dropdown-menu-right),
:where(.dds-dropdown-menu-right[data-dds-placement^="top"]) { transform-origin: 100% 100%; } /* 13919 top-end */
:where(.dds-dropdown-menu[data-dds-placement^="bottom"]) { top: var(--dds-dropdown-top, 100%); bottom: auto; margin: .125rem 0 0; }
:where(.dds-dropdown-menu[data-dds-placement$="start"]) { right: auto; left: var(--dds-dropdown-left, 0); }
:where(.dds-dropdown-menu[data-dds-placement$="end"]) { right: var(--dds-dropdown-right, 0); left: auto; }
:where(.dds-dropdown-menu[data-dds-placement="bottom-start"]) { transform-origin: 0 0; }
:where(.dds-dropdown-menu[data-dds-placement="bottom-end"]) { transform-origin: 100% 0; }
:where(.dds-dropdown-menu[data-dds-placement="top-start"]) { transform-origin: 0 100%; }
:where(.dds-dropdown-menu[data-dds-placement="top-end"]) { transform-origin: 100% 100%; }

/* open and closed: Material Dashboard's entrance (13875, 13891, 13897, @keyframes d
   14058 scale 0 → 1), leaving with a plain fade. */
.dds-dropdown-menu {
  display: none;
  opacity: 0;
  transform: none;
  transition-property: opacity, display;
  transition-duration: var(--dds-duration-fast);
  transition-timing-function: var(--dds-ease-accelerate);
  transition-behavior: allow-discrete;
}
.dds-dropdown-menu.dds-show {
  display: block;
  opacity: 1;
  transform: scale(1);
  transition-property: transform, opacity, display;
  transition-duration: var(--dds-duration-slow), var(--dds-duration-base), var(--dds-duration-slow); /* 13883: .3s / .2s */
  transition-timing-function: var(--dds-ease-standard);                                              /* 13883 */
}
@starting-style {
  .dds-dropdown-menu.dds-show { opacity: 0; transform: scale(0); }
}

/* items: <a class="dds-dropdown-item"> or a plain ul > li > a (danceit's table
   actions, the most common menu) look the same (13950) */
.dds-dropdown-menu li { white-space: nowrap; }          /* 28417 */
.dds-dropdown-menu :is(.dds-dropdown-item, li > a) {
  position: relative;
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  width: auto;
  min-width: 7rem;                                      /* 112px */
  margin: 0 .3125rem;                                   /* 0 5px */
  padding: .625rem 1.25rem;                             /* 10px 20px */
  overflow: hidden;
  font-size: var(--dds-font-size-dropdown);             /* 13px */
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.428571;
  color: var(--dds-text-card);                          /* #333 */
  text-decoration: none;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: nowrap;
  background-color: transparent;
  border-radius: var(--dds-radius-item);                /* 2px */
  cursor: pointer;                                      /* 28826 */
  transition-property: color, background-color, box-shadow;
  transition-duration: var(--dds-duration-fast);        /* 13950: all .15s linear */
  transition-timing-function: linear;
}
:where(button.dds-dropdown-item) { border: 0; font-family: inherit; text-align: left; }
/* a <button> item (a form-submitting menu entry) shrinks to its label under
   width:auto; stretch it like a block <a> (100% minus the 0 5px margins), so its
   hover band reaches the menu edge as danceit's li > a > button does (28826) */
.dds-dropdown-menu button.dds-dropdown-item { width: calc(100% - .625rem); }
@media (min-width: 768px) {
  .dds-dropdown-menu :is(.dds-dropdown-item, li > a) { padding-right: 1.5rem; padding-left: 1.5rem; } /* 13972 */
}
.dds-dropdown-menu :is(.dds-dropdown-item, li > a):is(:hover, :focus, :active, .dds-active) {    /* 13980 */
  color: var(--dds-text-on-primary);
  background-color: var(--dds-primary);
  box-shadow: var(--dds-shadow-chip);
  outline: 0;                                           /* the blue fill is the focus mark */
}
.dds-dropdown-menu :is(.dds-dropdown-item.dds-disabled, .dds-disabled > a, .dds-dropdown-item:disabled),
.dds-dropdown-menu :is(.dds-dropdown-item.dds-disabled, .dds-disabled > a, .dds-dropdown-item:disabled):is(:hover, :focus) { /* 13925, 3102 */
  color: #777;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
  cursor: default;
}
.dds-dropdown-menu .dds-material-icons {                /* 28821 (beats 26641's 10px) */
  margin-right: .5rem;
  color: var(--dds-unimportant);                        /* #bbb, also on the blue hover */
}
.dds-dropdown-menu.dds-dropdown-with-icons .dds-dropdown-item {   /* 13930 */
  padding: .75rem 1.25rem .75rem .75rem;
  color: #222;
}
.dds-dropdown-menu.dds-dropdown-with-icons .dds-dropdown-item:is(:hover, :focus, :active, .dds-active) { color: var(--dds-text-on-primary); }
.dds-dropdown-with-icons .dds-dropdown-item .dds-material-icons {  /* 13934 */
  position: relative;
  top: 1px;
  margin-top: -4px;
  margin-right: 12px;
  font-size: 24px;
  vertical-align: middle;
  opacity: .5;
}
.dds-dropdown-header {                                  /* 3112, 14030 */
  display: block;
  margin: 0;
  padding: .625rem 1.25rem;                             /* 10px 20px */
  font-size: .75rem;                                    /* 12px */
  font-weight: inherit;
  line-height: 1.428571;
  color: #777;
  text-transform: none;
  white-space: nowrap;
}
.dds-dropdown-divider {                                 /* 3068 */
  height: 0;
  margin: .5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

/* danceit's footer rule (.footer ul li a, 13790) reaches into the language
   menu: its items are uppercase there */
.dds-footer .dds-dropdown-menu .dds-dropdown-item { text-transform: uppercase; }

/* PKdropdown() toolbar menus: each item is a submit <button> inside the <a>
   (danceit.css:26728–26745) */
.dds-pkdropdown .dds-dropdown-menu li > a { padding: 0; }           /* 26728 */
.dds-pkdropdown .dds-dropdown-menu li > a > button {                /* 26732 */
  min-width: 200px;
  margin: 0;
  padding: 10px 24px;
  font: inherit;
  color: var(--dds-text-card);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--dds-duration-fast) linear;
}
.dds-pkdropdown .dds-dropdown-menu li > a:is(:hover, :focus-within) > button { color: var(--dds-white); } /* 26745 */
.dds-pkdropdown .dds-dropdown-menu li > a > button:focus-visible { outline: 0; }
.dds-pkdropdown .dds-dropdown-menu li > a:focus-within {
  color: var(--dds-text-on-primary);
  background-color: var(--dds-primary);
  box-shadow: var(--dds-shadow-chip);
}

/* the open toggle's label: Bootstrap's .show > .btn-primary.dropdown-toggle
   paints it #fff on the #005abb fill, and at (0,4,0) that beats -link's blue.
   10-buttons draws the fill and shadow; the label colour is the dropdown's
   open state, so it lives here (danceit.css:8330-8337 color: #fff) */
.dds-show > .dds-btn.dds-btn-primary.dds-dropdown-toggle { color: var(--dds-text-on-primary); }

/* the caret on a non-button toggle (a link in a nav, the footer); on a
   .dds-btn it is 10-buttons', in the footer 04-layout's (both the same rule) */
a.dds-dropdown-toggle:not(.dds-btn)::after {            /* 2951, 14011 */
  content: "";
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  transition: transform var(--dds-duration-fast) linear;
}
.dds-dropup > a.dds-dropdown-toggle:not(.dds-btn)::after { border-top: 0; border-bottom: .3em solid; } /* 3024 */
.dds-show > a.dds-dropdown-toggle:not(.dds-btn)::after,
a.dds-dropdown-toggle:not(.dds-btn)[aria-expanded="true"]::after { transform: rotate(180deg); }  /* 14016 */

/* ---- 6. Pagination (Bootstrap 4 4362–4420, Material Dashboard 12598–12686) --
   One pagination everywhere, the table's: DataTables' spacing (12686: 0 5px,
   touching), which is what keeps nine items inside a 390px phone card, and
   danceit's round page numbers (12598), so the current page is a blue circle.
   Previous / next (.dds-page-step, dds.pager) keep dds's one button radius and
   turn into a chevron below 640px. dds.pager draws it; no JS here. */
.dds-pagination {
  display: flex;
  padding-left: 0;
  margin-top: 0;
  list-style: none;
  border-radius: var(--dds-radius-bs);                  /* 4362 */
}
.dds-pagination > .dds-page-item > .dds-page-link {     /* 4368, 12598 */
  position: relative;
  display: block;
  box-sizing: border-box;
  min-width: 30px;
  height: 30px;
  margin: 0;
  padding: 0 5px;
  font-size: 12px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 30px;
  color: var(--dds-muted);                              /* #999, also on hover (12615) */
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: transparent;
  border: 0;
  border-radius: var(--dds-radius-btn);                 /* previous / next: dds's one button radius */
  cursor: pointer;
  transition-property: color, background-color, box-shadow;
  transition-duration: var(--dds-duration-fast);
  transition-timing-function: var(--dds-ease-standard);
}
.dds-pagination > .dds-page-item.dds-active > .dds-page-link {   /* 12623 */
  color: var(--dds-text-on-primary);
  background-color: var(--dds-primary);
  box-shadow: 0 4px 5px 0 rgba(0, 123, 255, .14), 0 1px 10px 0 rgba(0, 123, 255, .12), 0 2px 4px -1px rgba(0, 123, 255, .2);
}
.dds-pagination > .dds-page-item.dds-disabled > .dds-page-link {  /* 4420: looks like the rest, does not react */
  pointer-events: none;
  cursor: auto;
}
.dds-pagination > .dds-page-item > .dds-page-link:focus-visible { z-index: 2; outline-offset: 0; }  /* 4387, divergence 7 */
/* the exception to the one button radius (10 §12a): page numbers are round (12598) */
.dds-pagination > .dds-page-item > .dds-page-link:not(.dds-page-step) { border-radius: var(--dds-radius-round); }
/* previous / next on phones: a chevron (the word is the link's aria-label) */
.dds-pagination .dds-page-step > .dds-material-icons {
  font-size: 20px;
  line-height: inherit;
  vertical-align: top;
}

/* ---- 7. The language switch ------------------------------------------------
   Every language by its own name, in lower case (the page's words, not a
   flag), the current one marked with aria-current. While the names fit on one
   line of the switch's width they stand in a row; when they do not, the row
   gives way to one quiet button (the translate glyph, the current name, a
   caret) that opens a .dds-dropup menu of the same links — never a scroll,
   never a second line. 15-navigation.js measures the row against the width
   (a ResizeObserver) and sets .dds-langs--menu; without JS the row stays.
   The switch takes the room its parent's flex line leaves (flex: 1 1 0).
     <nav class="dds-langs" data-dds-langs aria-label="Language">
       <ul class="dds-langs-list"><li><a href lang="pl" aria-current="true">polski</a></li>…</ul>
       <div class="dds-dropup dds-langs-menu">
         <button type="button" class="dds-langs-toggle" data-dds-toggle="dropdown">
           <i class="dds-material-icons">translate</i>polski</button>
         <div class="dds-dropdown-menu"><a class="dds-dropdown-item" href lang="pl" aria-current="true">polski</a>…</div>
       </div>
     </nav> */
.dds-langs {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}
.dds-langs-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
.dds-langs a { text-transform: lowercase; }
.dds-langs-list a[aria-current] { font-weight: var(--dds-font-weight-medium); color: var(--dds-text); }
.dds-langs-menu { display: none; }
/* menu mode: the row stays measurable but out of sight and out of the tree */
.dds-langs.dds-langs--menu > .dds-langs-list { position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }
.dds-langs.dds-langs--menu > .dds-langs-menu { display: inline-block; }
.dds-langs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: -8px;
  padding: 0 6px 0 8px;
  font: inherit;
  text-transform: lowercase;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--dds-radius-sm);
  cursor: pointer;
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-langs-toggle:hover,
.dds-langs-menu.dds-show > .dds-langs-toggle { background-color: rgba(0, 0, 0, .05); }
.dds-langs-toggle:focus-visible { outline: var(--dds-focus-ring); outline-offset: 0; }
.dds-langs-toggle > .dds-material-icons { font-size: 18px; color: var(--dds-label); }
.dds-langs-toggle::after {
  width: 0;
  height: 0;
  margin-left: 2px;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  transform: rotate(180deg);
  transition: transform var(--dds-duration-fast) linear;
}
.dds-langs-menu.dds-show > .dds-langs-toggle::after { transform: none; }
.dds-langs-menu .dds-dropdown-item[aria-current] { font-weight: var(--dds-font-weight-medium); }
.dds-langs-menu .dds-dropdown-item[aria-current]:not(:hover, :focus, :active) { color: var(--dds-primary-dark); }   /* on the blue fill every item is white, the current one too */


/* ===== 16-overlays.css =================================================== */

/* ==========================================================================
   dds · 16-overlays — the Bootstrap modal as danceit styles it, the
   backdrop, SweetAlert2-style dialogs (dds.alert), tooltips, popovers
   --------------------------------------------------------------------------
   Owner: overlays. Spec: spec/16-overlays.md. Numbers cite danceit.css.

   What danceit uses: every modal is .modal-dialog.modal-notice built by
   PK.js PKmodal() / PKofflineModal(); one .modal-footer (public filter).
   SweetAlert2 v7.24.1, tooltips and popovers are bundled in danceit.css but
   never shown — dds ports the bundled look (danceit.css:20017, 5171, 5292,
   13036-13123) because dds.alert() and the API console need them.

   Motion (CONVENTIONS 11). Closed overlays are display: none with
   transition-behavior: allow-discrete; arriving is described by
   @starting-style, so nothing needs a JS timer.
     modal      fade .15s linear + the dialog's translateY(-25%) → 0 in
                300ms decelerate (danceit.css:2911, 5052 — danceit's own
                entrance); leaving is a plain 150ms fade, the dialog stays put
     backdrop   fade .15s linear (danceit.css:5094)
     swal       popup scale .98 → 1 + fade 200ms decelerate; leaving a 150ms
                fade (SweetAlert's .7→1.05→.95→1 bounce is replaced: no
                overshoot); success check draws, error × fades in from .98 (≤ 300ms)
     tooltip    danceit: opacity instant, 5px slide 200ms (13042); dds adds a 150ms fade
     popover    fade .15s linear (danceit.css:2911)
   Under prefers-reduced-motion the duration tokens are 1ms (05-motion) and
   the keyframes below are switched off: everything appears in its end state.

   Loading inside a modal is a line (divergence 8): .dds-modal-loader is a
   short .dds-loader-line in the 25px slot danceit's loader.svg took.
   ========================================================================== */

/* ---- Body lock ---------------------------------------------------------- */
body.dds-modal-open { overflow: hidden; }                                 /* danceit.css:5024 */
body.dds-modal-open .dds-modal { overflow-x: hidden; overflow-y: auto; } /* danceit.css:5025 */

/* ---- Modal -------------------------------------------------------------- */
.dds-modal {                                                              /* danceit.css:5029-5043 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--dds-z-modal);
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  opacity: 0;
  /* leaving: a plain fade, then display: none */
  transition-property: opacity, display;
  transition-duration: var(--dds-duration-fast);
  transition-timing-function: var(--dds-ease-accelerate);
  transition-behavior: allow-discrete;
}
.dds-modal.dds-show {
  display: block;
  opacity: 1;
  transition-timing-function: linear;                                     /* danceit.css:2913 .fade .15s linear */
}
@starting-style {
  .dds-modal.dds-show { opacity: 0; }
}

.dds-modal-dialog {                                                       /* danceit.css:5045-5050, 13190 */
  position: relative;
  width: auto;
  margin: 100px .5rem .5rem;
  pointer-events: none;
}
.dds-modal.dds-show .dds-modal-dialog {                                   /* danceit.css:5052-5059 */
  transform: none;
  transition: transform var(--dds-duration-slow) var(--dds-ease-decelerate);
}
@starting-style {
  .dds-modal.dds-show .dds-modal-dialog { transform: translateY(-25%); }
}
@media (min-width: 576px) {
  .dds-modal-dialog { max-width: 500px; margin: 100px auto 1.75rem; }    /* danceit.css:5149-5152, 13190 */
}

.dds-modal-content {                                                      /* danceit.css:5067-5079, 13125 */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--dds-card-bg);
  background-clip: padding-box;
  border: none;
  border-radius: var(--dds-radius-card);
  outline: 0;
  box-shadow: var(--dds-shadow-modal);
}

.dds-modal-header {                                                       /* danceit.css:5099-5107, 13143 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;                                                             /* → 0px tall: the body starts at the top */
  border-bottom: none;
}

/* the × — only ever in a modal header in danceit */
.dds-close {                                                              /* danceit.css:4874-4900 */
  float: right;
  padding: 0;
  font-size: 1.5rem;
  font-weight: var(--dds-font-weight-medium);
  line-height: 1;
  color: var(--dds-muted);                                                /* danceit.css:13250 .modal .modal-header .close */
  text-shadow: 0 1px 0 #fff;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  opacity: .5;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity var(--dds-duration-fast) linear;                    /* dds: danceit snaps */
}
.dds-close:hover { opacity: 1; }                                          /* danceit.css:13254 (colour stays #999) */
.dds-close:focus { outline: none; }                                       /* danceit.css:13139 */
.dds-close:focus-visible { opacity: 1; outline: var(--dds-focus-ring); outline-offset: -12px; } /* divergence 7 */
.dds-modal-header .dds-close {                                            /* danceit.css:5109, 13153, 27646 */
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1;
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}
.dds-close .dds-material-icons { font-size: 16px; }                       /* danceit.css:13259 */

.dds-modal-title { margin: 0; line-height: 1.5; }                         /* danceit.css:5113 (danceit never uses it; for aria-labelledby) */
/* dds: a modal with a visible title. danceit's header is 0 tall (its modals
   open on the body); .dds-modal-header-titled gives the title the dialog's
   inset, clear of the corner and of the ×, and the body the same sides. */
.dds-modal-header.dds-modal-header-titled { align-items: center; padding: 22px 56px 6px 24px; }
.dds-modal-header.dds-modal-header-titled .dds-modal-title { font-size: 18px; font-weight: var(--dds-font-weight-medium); color: var(--dds-heading); }
.dds-modal-header.dds-modal-header-titled .dds-close { top: 13px; right: 14px; }
.dds-modal-header.dds-modal-header-titled ~ .dds-modal-body { padding: 12px 24px 18px; }

/* .modal-notice: the marker every danceit modal carries (PK.js:118, 146).
   danceit gives the dialog itself no rule; it only styles these descendants. */
.dds-modal-notice .dds-instruction { margin-bottom: 25px; }               /* danceit.css:13263 */
.dds-modal-notice .dds-picture { max-width: 150px; }                      /* danceit.css:13267 */
.dds-modal-notice .dds-modal-content .dds-btn-raised { margin-bottom: 15px; } /* danceit.css:13271 */

.dds-modal-body {                                                         /* danceit.css:5119 */
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.dds-modal-footer {                                                       /* danceit.css:5125-5139, 13159-13184 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px;
  border-top: none;
}
.dds-modal-body + .dds-modal-footer { padding-top: 0; }                   /* danceit.css:13184 */
.dds-modal-footer > :not(:first-child) { margin-left: .25rem; }
.dds-modal-footer > :not(:last-child) { margin-right: .25rem; }
.dds-modal-footer-center { justify-content: center; }                     /* pub_filters.php:49 inline justify-content:center */
.dds-modal-footer button,
.dds-modal-footer .dds-btn {                                              /* danceit.css:13168 */
  width: auto;
  margin: 0;
  padding-right: 16px;
  padding-left: 16px;
}

/* ---- Backdrop ------------------------------------------------------------ */
.dds-modal-backdrop {                                                     /* danceit.css:5081-5097, 13186 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--dds-z-modal-backdrop);
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .3);                                          /* the .3 is in the colour; opacity goes to 1 */
  opacity: 0;
  transition-property: opacity, display;
  transition-duration: var(--dds-duration-fast);
  transition-timing-function: linear;                                     /* danceit.css:2913 */
  transition-behavior: allow-discrete;
}
.dds-modal-backdrop.dds-show { display: block; opacity: 1; }
@starting-style {
  .dds-modal-backdrop.dds-show { opacity: 0; }
}

/* ---- Modal content (danceit's own vocabulary, danceit.css:27646-27690) ---
   .dds-strong, span.dds-small-pipe (02-type) and .dds-badge-margin
   (06-utilities) are the generic helpers danceit uses inside these. */
.dds-modal-performance-startnumber {                                      /* danceit.css:27656 */
  margin: .5em;
  font-size: 2em;
  font-weight: var(--dds-font-weight-bold);
  text-align: center;                                                     /* line-height stays the inherited 24px */
}
.dds-modal-performance-name {                                             /* danceit.css:27663 — the modal's title */
  margin-bottom: .5em;
  font-size: 1.5em;
  text-align: center;
}
.dds-modal-performance-team { text-align: center; }                       /* danceit.css:27669 */
.dds-modal-divider { margin: 1em 0; border-bottom: 1px solid var(--dds-border-light); } /* danceit.css:27673 */
.dds-modal-performance-attachement-img,
.dds-modal-performance-attachment-img { max-width: 100%; max-height: 20em; } /* danceit.css:28586 */

/* The loading state (PKmodal before its AJAX returns). danceit shows the 25px
   loader.svg (danceit.css:27650); dds shows a short line in the same slot
   (divergence 8). Markup:
   <div class="dds-loader-line dds-active dds-modal-loader" role="progressbar" aria-label="Loading"></div> */
.dds-loader-line.dds-modal-loader {
  width: 96px;
  max-width: 50%;
  margin: 11px auto;                                                      /* 11 + 3 + 11 = the 25px slot */
  border-radius: var(--dds-loader-lg);
}
/* inside the 24px title (the judge notice): the 1.5em slot + .2em gap */
.dds-modal-performance-name > .dds-loader-line.dds-modal-loader {
  margin: calc(.75em - 1.5px) auto calc(.95em - 1.5px);
}

/* The zoom range (PKajax/zoom.php, danceit.css:28643-28659) */
input.dds-slider {
  width: 100%;
  height: 25px;
  vertical-align: baseline;
  cursor: pointer;
  background: var(--dds-border-light);
  border-radius: 100px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input.dds-slider::-webkit-slider-thumb {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: var(--dds-primary);
  border: 0;
  border-radius: 100px;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--dds-duration-fast) linear;
}
input.dds-slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: var(--dds-primary);
  border: 0;
  border-radius: 100px;
}
/* divergence 7: the ring is on the thumb; the input itself gets a transparent
   outline - invisible, but it shows in forced-colors mode and lets a focus
   check see the change on the element */
input.dds-slider:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
input.dds-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dds-primary); } /* divergence 7 */
input.dds-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dds-primary); }

/* The command palette (PK.js:334-349): a dialog without modal-notice, 15vh
   from the top, no header, a flush body. */
.dds-modal-dialog.dds-modal-palette { max-width: 500px; margin-top: 15vh; }
.dds-modal-palette .dds-modal-body { padding: 0; }
/* the results list (#pk-command-results, PK.js:343) and its links
   (a.dropdown-item.pk-command-item, PK.js:375 — Bootstrap's bare .dropdown-item,
   danceit.css:3075-3100, outside any .dropdown-menu). The selected row
   (arrow keys) is danceit's inline #f8f9fa: .dds-selected. danceit snaps;
   dds gives the background 150ms. */
.dds-modal-palette-results { max-height: 300px; overflow-y: auto; border-top: 1px solid #eee; }
.dds-modal-palette-item {                                                 /* danceit.css:3075 */
  display: block;
  width: 100%;
  padding: .625rem 1.25rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  text-decoration: none;
  background-color: transparent;
  border: 0;
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard), color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-modal-palette-item:is(:hover, :focus, .dds-selected) { color: #16181b; text-decoration: none; background-color: #f8f9fa; } /* 3088 */
.dds-modal-palette-item.dds-selected:not(:hover, :focus) { color: #212529; } /* the inline style only sets the background */
.dds-modal-palette-item:active { color: #fff; background-color: #2196f3; } /* 3095 */
.dds-modal-palette-empty { padding: 16px; color: var(--dds-muted); text-align: center; } /* PK.js:367 "No matches found" */

/* ---- SweetAlert2-style dialogs (dds.alert) --------------------------------
   sweetalert2 v7.24.1 as bundled in danceit.css:20017-21300, configured the
   danceit way: buttonsStyling off, confirm .dds-btn.dds-btn-primary, cancel
   .dds-btn (10-buttons). Only the parts dds.alert() renders are ported (no
   inputs, progress steps, image, toast, close ×). */
body.dds-swal2-shown { overflow-y: hidden; }                              /* danceit.css:20484 */

.dds-swal2-container {                                                    /* danceit.css:20560-20575 */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--dds-z-swal);
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
  transition-behavior: allow-discrete;
}
/* swal2's position and animation modifiers, which dds.alert() always sets */
.dds-swal2-container.dds-swal2-center { align-items: center; }           /* danceit.css:20593 */
.dds-swal2-container.dds-swal2-fade {                                     /* danceit.css:20686 .swal2-fade .1s */
  transition-property: background-color, display;
  transition-duration: var(--dds-duration-fast);
  transition-timing-function: var(--dds-ease-accelerate);
}
.dds-swal2-container.dds-swal2-shown {
  display: flex;
  background-color: rgba(0, 0, 0, .4);                                    /* danceit.css:20690 (the modal backdrop is .3) */
  transition-timing-function: linear;
}
@starting-style {
  .dds-swal2-container.dds-swal2-shown { background-color: transparent; }
}

.dds-swal2-popup {                                                        /* danceit.css:20694-20711, 20675 */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  font-family: inherit;
  font-size: 1rem;
  background: var(--dds-card-bg);
  border-radius: var(--dds-radius-swal);
}
.dds-swal2-popup:focus { outline: none; }                                 /* danceit.css:20706 */
.dds-swal2-container > .dds-swal2-modal { margin: auto; }                 /* danceit.css:20675 (the non-toast popup) */
/* arriving: scale .98 → 1 with a fade (danceit's k keyframe overshoots to
   1.05 — dds does not bounce); leaving: a 150ms fade */
.dds-swal2-popup.dds-swal2-show { animation: dds-swal2-show var(--dds-duration-base) var(--dds-ease-decelerate); }
.dds-swal2-popup.dds-swal2-hide { animation: dds-swal2-hide var(--dds-duration-fast) var(--dds-ease-accelerate) forwards; }
@keyframes dds-swal2-show { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dds-swal2-hide { from { opacity: 1; } to { opacity: 0; } }

.dds-swal2-header { display: flex; flex-direction: column; align-items: center; } /* danceit.css:20717 */

.dds-swal2-title {                                                        /* danceit.css:20723-20735 */
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0 0 .4em;
  padding: 0;
  font-family: inherit;
  font-size: 1.875em;
  font-weight: 600;                                                       /* renders as 700: dds ships no 600 face, like danceit */
  line-height: 1.5em;                                                     /* danceit.css:12804 h2 */
  color: #595959;
  text-align: center;
  text-transform: none;
  overflow-wrap: break-word;
}
.dds-swal2-content {                                                      /* danceit.css:20878-20891 */
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  color: #545454;
  text-align: center;
  overflow-wrap: break-word;
}
.dds-swal2-actions {                                                      /* danceit.css:20737-20741 */
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 1.25em auto 0;
}

/* Icons: 80px circle with a 4px ring (danceit.css:21065-21202). Status
   colours next to a title word — allowed by divergence 1. */
.dds-swal2-icon {                                                         /* danceit.css:21065-21081 */
  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  line-height: 5em;
  cursor: default;
  border: .25em solid transparent;
  border-radius: 50%;
  -webkit-user-select: none;
  user-select: none;
}
.dds-swal2-icon-text { font-size: 3.75em; }                              /* danceit.css:21083 */
.dds-swal2-icon.dds-swal2-warning  { color: #f8bb86; border-color: #facea8; } /* danceit.css:21116 */
.dds-swal2-icon.dds-swal2-info     { color: #3fc3ee; border-color: #9de0f6; } /* danceit.css:21121 */
.dds-swal2-icon.dds-swal2-question { color: #87adbd; border-color: #c9dae1; } /* danceit.css:21126 */

.dds-swal2-icon.dds-swal2-error { border-color: #f27474; }                /* danceit.css:21087 */
.dds-swal2-x-mark { position: relative; flex-grow: 1; }                   /* danceit.css:21091 */
.dds-swal2-x-mark-line-left,
.dds-swal2-x-mark-line-right {                                            /* danceit.css:21095-21114 */
  position: absolute;
  top: 2.3125em;
  display: block;
  width: 2.9375em;
  height: .3125em;
  background-color: #f27474;
  border-radius: .125em;
}
.dds-swal2-x-mark-line-left  { left: 1.0625em; transform: rotate(45deg); }
.dds-swal2-x-mark-line-right { right: 1em; transform: rotate(-45deg); }

.dds-swal2-icon.dds-swal2-success { border-color: #a5dc86; }              /* danceit.css:21131 */
.dds-swal2-success-circular-line-left,
.dds-swal2-success-circular-line-right,
.dds-swal2-success-fix { background-color: var(--dds-card-bg); }        /* SweetAlert's JS paints these masks with the popup colour */
.dds-swal2-success-circular-line-left,
.dds-swal2-success-circular-line-right {                                  /* danceit.css:21135-21160 */
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  border-radius: 50%;
  transform: rotate(-45deg);
}
.dds-swal2-success-circular-line-left {
  top: -.4375em;
  left: -2.0635em;
  border-radius: 7.5em 0 0 7.5em;
  transform-origin: 3.75em 3.75em;
}
.dds-swal2-success-circular-line-right {
  top: -.6875em;
  left: 1.875em;
  border-radius: 0 7.5em 7.5em 0;
  transform-origin: 0 3.75em;
}
.dds-swal2-success-ring {                                                 /* danceit.css:21162-21172 */
  position: absolute;
  top: -.25em;
  left: -.25em;
  z-index: 2;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: .25em solid hsla(98, 55%, 69%, .3);
  border-radius: 50%;
}
.dds-swal2-success-fix {                                                  /* danceit.css:21174-21182 */
  position: absolute;
  top: .5em;
  left: 1.625em;
  z-index: 1;
  width: .4375em;
  height: 5.625em;
  transform: rotate(-45deg);
}
.dds-swal2-success-line-tip,
.dds-swal2-success-line-long {                                            /* danceit.css:21184-21202 */
  position: absolute;
  z-index: 2;
  display: block;
  height: .3125em;
  background-color: #a5dc86;
  border-radius: .125em;
}
.dds-swal2-success-line-tip  { top: 2.875em; left: .875em; width: 1.5625em; transform: rotate(45deg); }
.dds-swal2-success-line-long { top: 2.375em; right: .5em; width: 2.9375em; transform: rotate(-45deg); }

/* Icon motion. danceit: the check's two lines grow (m/n .75s, with an
   overshoot) and the × flips in (p/q .5s). dds: the tip then the long stroke
   draw in 300ms; the × fades in from scale .98 in 150ms, starting 150ms after the popup.
   warning / info / question do not animate (as in v7.24.1). */
.dds-swal2-animate-success-icon .dds-swal2-success-line-tip  { animation: dds-swal2-tip var(--dds-duration-slow) var(--dds-ease-standard) both; }
.dds-swal2-animate-success-icon .dds-swal2-success-line-long { animation: dds-swal2-long var(--dds-duration-slow) var(--dds-ease-decelerate) both; }
.dds-swal2-animate-error-icon .dds-swal2-x-mark { animation: dds-swal2-error-x var(--dds-duration-fast) var(--dds-ease-decelerate) var(--dds-duration-fast) both; /* 150 + 150 = 300ms, inside the 320 cap */ }
@keyframes dds-swal2-tip {                                                /* grows from its left end: translate · scaleX · translate */
  0%   { transform: rotate(45deg) translateX(-.78125em) scaleX(0) translateX(.78125em); }
  40%, 100% { transform: rotate(45deg) translateX(-.78125em) scaleX(1) translateX(.78125em); }
}
@keyframes dds-swal2-long {
  0%, 35% { transform: rotate(-45deg) translateX(-1.46875em) scaleX(0) translateX(1.46875em); }
  100% { transform: rotate(-45deg) translateX(-1.46875em) scaleX(1) translateX(1.46875em); }
}
@keyframes dds-swal2-error-x {
  from { opacity: 0; transform: scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* The buttons are 10-buttons' .dds-btn; flex makes them blocks (as in swal).
   .dds-swal2-confirm / .dds-swal2-cancel are swal2's button hooks (the
   buttonsStyling-off look is all .dds-btn, danceit.css:20803-20820 apply only
   with .swal2-styled); a custom confirmButtonClass without .dds-btn keeps them. */
.dds-swal2-actions > :is(.dds-btn, .dds-swal2-confirm, .dds-swal2-cancel) { flex: 0 0 auto; }

/* ---- Tooltip (Bootstrap 4 + Material Dashboard, danceit.css:5171-5290,
   13036-13085) --------------------------------------------------------------
   Placed by dds.tooltip()/[data-dds-toggle="tooltip"] (16-overlays.js) with
   inline top/left, like Popper does. Motion: danceit slides 5px up in 200ms
   with an instant opacity (13042); dds keeps the slide and gives the opacity
   150ms (the smallest fade); it leaves with a plain 150ms fade. Closed = display: none. */
.dds-tooltip {                                                            /* danceit.css:5171-5191 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--dds-z-tooltip);
  display: none;
  margin: 0;
  font-family: var(--dds-font);
  font-size: .875rem;
  font-style: normal;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.5em;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 5px, 0);                                      /* danceit.css:13044 */
  /* leaving: a plain fade (150ms accelerate); the 5px offset is restored
     only once the tip is invisible, and display flips at the same moment */
  transition-property: opacity, transform, display;
  transition-duration: var(--dds-duration-fast), 0s, 0s;
  transition-delay: 0s, var(--dds-duration-fast), var(--dds-duration-fast);
  transition-timing-function: var(--dds-ease-accelerate), linear, linear;
  transition-behavior: allow-discrete;
}
.dds-tooltip.dds-show {                                                   /* danceit.css:13040 (opacity 1, not BS's .9) */
  display: block;
  opacity: 1;
  transform: none;
  /* arriving: danceit's 5px rise over .2s (13042, `ease` there; dds uses the
     decelerate token) plus a 150ms fade */
  transition-duration: var(--dds-duration-fast), var(--dds-duration-base), 0s;
  transition-delay: 0s;
  transition-timing-function: var(--dds-ease-decelerate), var(--dds-ease-decelerate), linear;
}
@starting-style {
  .dds-tooltip.dds-show { opacity: 0; transform: translate3d(0, 5px, 0); }
}
.dds-tooltip .dds-arrow {                                                 /* danceit.css:5197-5209 */
  position: absolute;
  display: block;
  width: .8rem;
  height: .4rem;
}
.dds-tooltip .dds-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}
.dds-bs-tooltip-top,
.dds-bs-tooltip-bottom { padding: .4rem 0; }                              /* danceit.css:5211, 5241 */
.dds-bs-tooltip-right,
.dds-bs-tooltip-left { padding: 0 .4rem; }                                /* danceit.css:5226, 5256 */
.dds-bs-tooltip-top .dds-arrow { bottom: 0; }
.dds-bs-tooltip-top .dds-arrow::before { top: 0; border-width: .4rem .4rem 0; border-top-color: #fff; } /* 13052 */
.dds-bs-tooltip-right .dds-arrow { left: 0; width: .4rem; height: .8rem; }
.dds-bs-tooltip-right .dds-arrow::before { right: 0; border-width: .4rem .4rem .4rem 0; border-right-color: #fff; }
.dds-bs-tooltip-bottom .dds-arrow { top: 0; }
.dds-bs-tooltip-bottom .dds-arrow::before { bottom: 0; border-width: 0 .4rem .4rem; border-bottom-color: #fff; }
.dds-bs-tooltip-left .dds-arrow { right: 0; width: .4rem; height: .8rem; }
.dds-bs-tooltip-left .dds-arrow::before { left: 0; border-width: .4rem 0 .4rem .4rem; border-left-color: #fff; }
.dds-tooltip-inner {                                                      /* danceit.css:5283, 13072-13085 */
  min-width: 130px;
  max-width: 200px;
  padding: 10px 15px;
  line-height: 1.5em;
  color: var(--dds-navbar-text);
  text-align: center;
  background: #fff;
  border: none;
  border-radius: var(--dds-radius-sm);
  box-shadow: var(--dds-shadow-tooltip);
}

/* ---- Popover (danceit.css:5292-5495, 13077-13123) ------------------------- */
.dds-popover {                                                            /* danceit.css:5292-5323 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--dds-z-popover);
  display: none;
  max-width: 276px;
  padding: 0;
  font-family: var(--dds-font);
  font-size: .875rem;
  font-style: normal;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1.5em;
  color: var(--dds-navbar-text);
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: break-word;
  background: #fff;
  background-clip: padding-box;
  border: none;
  border-radius: var(--dds-radius-sm);
  box-shadow: var(--dds-shadow-popover);
  opacity: 0;
  transition-property: opacity, display;                                  /* danceit.css:2911 .fade .15s linear */
  transition-duration: var(--dds-duration-fast);
  transition-timing-function: linear;
  transition-behavior: allow-discrete;
}
.dds-popover.dds-show { display: block; opacity: 1; }
@starting-style {
  .dds-popover.dds-show { opacity: 0; }
}
.dds-popover .dds-arrow {                                                 /* danceit.css:5326-5330 */
  position: absolute;
  display: block;
  width: 1rem;
  height: .5rem;
  margin: 0 .3rem;
}
.dds-popover .dds-arrow::after {                                          /* ::before is zeroed (13099): only the white nub */
  content: "";
  position: absolute;
  display: block;
  border-color: transparent;
  border-style: solid;
}
.dds-bs-popover-top { margin-bottom: .5rem; }
.dds-bs-popover-top .dds-arrow { bottom: calc((.5rem + 1px) * -1); }
.dds-bs-popover-top .dds-arrow::after { bottom: 1px; border-width: .5rem .5rem 0; border-top-color: #fff; }
.dds-bs-popover-right { margin-left: .5rem; }
.dds-bs-popover-right .dds-arrow { left: calc((.5rem + 1px) * -1); width: .5rem; height: 1rem; margin: .3rem 0; }
.dds-bs-popover-right .dds-arrow::after { left: 1px; border-width: .5rem .5rem .5rem 0; border-right-color: #fff; }
.dds-bs-popover-bottom { margin-top: .5rem; }
.dds-bs-popover-bottom .dds-arrow { top: calc((.5rem + 1px) * -1); }
.dds-bs-popover-bottom .dds-arrow::after { top: 1px; border-width: 0 .5rem .5rem .5rem; border-bottom-color: #fff; }
.dds-bs-popover-bottom .dds-popover-header::before {                     /* danceit.css:5431-5441 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1rem;
  margin-left: -.5rem;
  border-bottom: 1px solid #f7f7f7;
}
.dds-bs-popover-left { margin-right: .5rem; }
.dds-bs-popover-left .dds-arrow { right: calc((.5rem + 1px) * -1); width: .5rem; height: 1rem; margin: .3rem 0; }
.dds-bs-popover-left .dds-arrow::after { right: 1px; border-width: .5rem 0 .5rem .5rem; border-left-color: #fff; }
.dds-popover-header {                                                     /* danceit.css:5475-5488, 13110-13117 */
  margin: 0;
  padding: 15px 15px 5px;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 300;                                                       /* h3, danceit.css:12828 */
  line-height: 1.4em;
  color: var(--dds-navbar-text);
  background-color: #fff;
  border: none;
  border-top-left-radius: calc(.3rem - 1px);
  border-top-right-radius: calc(.3rem - 1px);
}
.dds-popover-header:empty { display: none; }
.dds-popover-body {                                                       /* danceit.css:5490-5493, 13119 */
  padding: 10px 15px 15px;
  line-height: 1.4;
  color: var(--dds-navbar-text);
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dds-modal,
  .dds-modal.dds-show .dds-modal-dialog,
  .dds-modal-backdrop,
  .dds-swal2-container,
  .dds-tooltip,
  .dds-popover,
  .dds-close { transition-duration: 1ms; }
  .dds-swal2-popup.dds-swal2-show,
  .dds-swal2-animate-success-icon .dds-swal2-success-line-tip,
  .dds-swal2-animate-success-icon .dds-swal2-success-line-long,
  .dds-swal2-animate-error-icon .dds-swal2-x-mark { animation: none; }
  .dds-swal2-popup.dds-swal2-hide { animation-duration: 1ms; }
}


/* ===== 21-schedule.css =================================================== */

/* ==========================================================================
   dds · 21-schedule — schedule rows, dancefloors, the day/hall picker
   --------------------------------------------------------------------------
   Owner: schedule. Port of danceit's PKschedule (PKassets/php/schedule.php) as
   mod_schedule, j_schedule and pub_schedule print it, and of the day x hall
   option list of c_schedule_allocate. Values: danceit.css lines cited, checked
   against renders of ref/twins/21-schedule--*.html (spec/21-schedule.md).

   Owned here
     .dds-list-group                 the flex column the banks sit in       4660
     .dds-schedule                   the schedule list (+ .dds-filter-active, a hook)
       .dds-schedule--timeline       dds: a white bar per bank, gapped (public pages)
     .dds-header-buttons             the swap button row over the title     27376
     .dds-card.dds-list-item         geometry is 12-cards'; here: the day
       > a > h3                      picker card title, .dds-past, .dds-active
     .dds-schedule-time / -delay     time cell and the delay under it       27221, 28580
     .dds-PKitem (.dds-custom)       one round or custom item              27157, 27161
       .dds-PKitem-label             dds: the text before the badge (div. 6)
       .dds-field                    dds: one field + its pipe (div. 6)  
       .dds-description(.dds-small)  sequence number / floor label          28134, 12879
       .dds-round-color              the round chip, colour data-dds-color  27214
     .dds-dancefloors                dds: the items of one bank (divergence 6)
       .dds-dancefloors-named > .dds-dancefloor > .dds-dancefloor-name(--inline)   dds: one group per named floor
     .dds-PKitem.dds-row-highlight   public filter: the matching rounds (14 §8; danceit dims, 29082)
     .dds-schedule-head              dds: the timeline's day and hall, sticky (an option)
       > .dds-schedule-head-bar > .dds-schedule-head-date + h3.dds-schedule-head-title
         (> .dds-schedule-head-day + .dds-schedule-head-hall) + .dds-schedule-head-change

   Used, owned elsewhere: .dds-card (12-cards), .dds-badge (13-feedback),
   .dds-btn (10-buttons), .dds-title / .dds-title-description / .dds-gray /
   .dds-small-pipe (02-type), .dds-normal / .dds-unimportant / .dds-nonselectable /
   .dds-capitalize (06-utilities), .dds-main-panel .dds-header (22-results).

   Motion. danceit fades a finished bank to .5 in .5s ease-in-out (27271) and
   pulses the active border to white every 3s (PKactiveBorder, 27231; declared
   on the twins as a CONVENTIONS 11 difference). dds keeps
   the fade at the 300ms token. In the panels' cards the current bank's border
   arrives as a 150ms colour change and then stays #007bff; in the timeline the
   bank on the floor is on now instead (13-feedback .dds-ongoing, the one loop
   besides the loader lines: an ongoing state, as tr.dds-active in 14): its
   text goes bold and the primary band sweeps through the whole bank.
   Reduced motion: the duration tokens drop to 1ms and the bank is bold, still.
   ========================================================================== */

/* ---- The list ---------------------------------------------------------------
   Bootstrap's .list-group is a flex column (danceit.css:4660), so the 7px
   margins of the banks do not collapse: 14px between banks. */
.dds-list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}

/* ---- Header: swap button row and title ------------------------------------
   <div class="dds-header dds-text-center"><div class="dds-header-buttons">
   <a href="…"><button class="dds-btn dds-btn-primary dds-btn-link dds-btn-sm">…
   </a></div><h3 class="dds-title dds-capitalize">Saturday 13/06 Main Hall</h3></div>
   The button row pulls the title up by 2em (-32px) so it overlaps the title's
   20px top padding. */
.dds-header-buttons { margin-bottom: -2em; }                    /* danceit.css:27376 */
/* danceit snaps the swap link's hover colour (#007bff -> #0056b3, transition 0s);
   dds adds the 150ms colour transition section 11 allows. */
.dds-header-buttons > a { transition: color var(--dds-duration-fast) var(--dds-ease-standard); }
/* Divergence 5 on touch: the 30px small link button gets an invisible 9px
   reach above and below (.dds-btn is already position: relative), so the
   hit area is 48px tall. Nothing is painted; the title stays where it is. */
@media (pointer: coarse) {
  .dds-header-buttons .dds-btn { position: relative; }
  .dds-header-buttons .dds-btn::before { content: ""; position: absolute; inset: -9px 0; }
}

/* ---- Day and hall picker (schedule.php:77-117) -----------------------------
   .dds-card.dds-list-item[.dds-past] > a > h3.dds-capitalize: a 25px link-blue
   title with 20px above and below it; not in a list-group, so the 7px margins
   collapse (110px pitch). */
.dds-card.dds-list-item > a > h3 {
  margin: 0;                                                    /* measured */
  padding: 20px 0;                                              /* measured: 103px card */
  /* The title inherits a:hover #0056b3; danceit snaps it (0s), dds eases it (section 11). */
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-card.dds-list-item > a { text-decoration: none; }
.dds-card.dds-list-item > a:focus-visible {
  outline: 2px solid var(--dds-primary);                        /* divergence 7 */
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---- States: finished (.dds-past) and current (.dds-active) ---------------- */
.dds-schedule .dds-list-item.dds-past,
.dds-card.dds-list-item.dds-past { opacity: .5; }               /* danceit.css:27227 */
.dds-schedule .dds-list-item {
  border-color: transparent;           /* so the active border arrives as a colour */
  transition:
    opacity var(--dds-duration-slow) var(--dds-ease-standard),  /* danceit .5s ease-in-out, 27271 */
    border-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-schedule .dds-list-item.dds-active {                                     /* danceit.css:27236, 28710 */
  border: 2px solid var(--dds-primary);                         /* inside the box: +4px, content 2px in */
}

/* ---- The bank row: .dds-card.dds-list-item[data-dds-bank-id] ---------------
   [a.dds-normal] > table > tr > td (time) + td (items). The anchors of a linked
   bank or round are blocks in dds (danceit leaves them inline around a block,
   which fragments their focus ring); nothing visible changes. */
.dds-schedule a.dds-normal { display: block; text-decoration: none; }
.dds-schedule a.dds-normal:focus-visible {
  outline: 2px solid var(--dds-primary);                        /* divergence 7 */
  outline-offset: 2px;
  border-radius: 2px;
}
/* Touch (divergence 5): a row's link takes taps on the whole row, not only on
   its 26px text line. A transparent ::before against the card (.dds-card is
   position: relative; the anchor stays static so the delay keeps the card as
   its box) fills the row when the link is the bank's only one; several links in
   one bank each widen into the card padding next to them. Nothing is painted. */
@media (pointer: coarse) {
  .dds-schedule .dds-list-item > a.dds-normal::before,
  .dds-schedule .dds-dancefloors > a.dds-normal:only-child::before,
  .dds-schedule .dds-dancefloors > a.dds-normal:not(:only-child)::before {
    content: "";
    position: absolute;
    inset: 0;
  }
  .dds-schedule .dds-dancefloors > a.dds-normal:not(:only-child) { position: relative; }
  .dds-schedule .dds-dancefloors > a.dds-normal:not(:only-child):first-child::before { top: -1em; }  /* the card's 14px padding */
  .dds-schedule .dds-dancefloors > a.dds-normal:not(:only-child):last-child::before { bottom: -1em; }
}
@media (pointer: coarse) and (min-width: 992px) {
  .dds-schedule .dds-dancefloors:has(> :nth-child(2):last-child) > a.dds-normal::before { top: -1em; bottom: -1em; }  /* side by side */
}
.dds-schedule .dds-list-item table { width: 100%; }             /* danceit.css:27190 */
.dds-schedule .dds-list-item td {
  padding: 1px;                        /* the UA default danceit keeps: 42px time column, 56px bank */
  vertical-align: middle;
}
.dds-schedule .dds-list-item td:nth-child(2) { width: 100%; }   /* danceit.css:27194 */

/* Time and delay. The delay is absolute against the card (.dds-card is
   position: relative), so it sits in the card's bottom padding, under the time.
   <div class="dds-schedule-time">09:00<div class="dds-schedule-delay">
   <span class="dds-unimportant">+7'</span></div></div> */
.dds-schedule-time {                                            /* danceit.css:27221 */
  width: 40px;
  color: var(--dds-primary);
  font-weight: var(--dds-font-weight-normal);
  --dds-ongoing-color: var(--dds-ongoing-color-on-primary);   /* blue text: a light band (13 on now) */
}
.dds-schedule-delay {                                           /* danceit.css:28580 */
  position: absolute;
  bottom: .1em;
  font-size: .8em;
}

/* ---- One item: .dds-PKitem > p (a round) or .dds-PKitem.dds-custom (a break) */
.dds-schedule .dds-PKitem {                                     /* danceit.css:27157 */
  font-weight: 500;
  color: var(--dds-text-card);
}
.dds-schedule .dds-PKitem > p { margin: 0; }                    /* danceit.css:26824 */
.dds-PKitem.dds-custom {                                        /* danceit.css:27161 */
  width: 100%;
  border: none;
  color: var(--dds-primary);
  font-weight: 700;
}
.dds-schedule .dds-PKitem.dds-custom { color: var(--dds-primary); }
/* the sequence number: 11.2px #ccc, 1px up (grows the line box 24 -> 26px) */
.dds-PKitem .dds-description.dds-small {                        /* danceit.css:28134 */
  position: relative;
  top: -.1em;
  font-size: .8em;
}
/* the judge's gavel / check in front of the sequence number: 12px (.5em of 24px) */
.dds-schedule .dds-PKitem i.dds-material-icons {                /* danceit.css:27610 */
  margin-right: .5em;
  color: var(--dds-gray);
  vertical-align: middle;
}
/* the round of a multi-round category: a chip in the category's PKcolor
   (PK.php:2736). danceit writes it inline; dds takes it from data-dds-color,
   which dds.js (21-schedule.js) sets as the background on init:
   <span class="dds-round-color" data-dds-color="#fff8ab88">1/2 final</span>
   The rule's own #007bff never shows in danceit, so dds has no default. */
.dds-round-color {                                              /* danceit.css:27214 */
  padding: .2em .3em;
  border-radius: 4px;
  color: var(--dds-black);
  white-space: nowrap;                 /* dds: the chip never splits (divergence 6) */
}

/* ---- Clean wrapping (divergence 6) ------------------------------------------
   <p><span class="dds-PKitem-label">…fields…</span><span class="dds-badge …">16</span></p>
   The badge floats right after the text as in danceit (.right, 26828), so a
   row is danceit's at every width, with three corrections:
   - the <p> contains its float (flow-root): a badge with no room on the last
     line drops under it inside its own item, instead of hanging into the next
     floor's line and piling up there (two-floors at 390/834);
   - .5em of air on the badge's left, so the text's tail never touches it;
   - each field carries its pipe, held to the field's last word by a no-break
     space, so no line starts with a pipe:
     <span class="dds-field">Salsa&nbsp;<span class="dds-small-pipe dds-nonselectable">|</span></span>
   Fields stay inline and break between words where danceit's do (an
   inline-block field wider than the line broke inside and then pushed the
   next field down, leaving a lone "Jazz |" line). The round chip never
   splits (.dds-round-color above). */
.dds-schedule .dds-PKitem > p { display: flow-root; }
/* The same name in parts (02-type .dds-parts, the public pages' bridge) is the
   form to use: the pipes are the layout's, so none starts or ends a line, and no
   no-break space is needed. The <p> becomes one flex line: what leads (the
   sequence number, an icon), the parts, then the count badge pushed right. */
.dds-schedule .dds-PKitem > p:has(> .dds-parts) { display: flex; align-items: baseline; column-gap: .5em; }
.dds-schedule .dds-PKitem > p > .dds-parts { flex: 1 1 auto; }
.dds-schedule .dds-PKitem > p:has(> .dds-parts) > .dds-badge { float: none; margin-left: auto; }
.dds-PKitem > p > .dds-badge {
  float: right;                                                 /* danceit.css:26828 */
  margin-left: .5em;                                            /* dds: never on the text's tail */
}
.dds-PKitem-label,                  /* dds: the text before the float badge (div. 6); danceit has no wrapper inside .PKitem p, 27157 */
.dds-field { display: inline; }

/* ---- Dancefloors: the items of one bank (divergence 6) ---------------------
   <td><div class="dds-dancefloors">item A, item B</div></td>, each item with its
   <span class="dds-description">A:</span> label (#ccc, 12879). Stacked as in
   danceit; exactly two floors sit side by side 50/50 from 992px, the second
   behind the sequence editor's 1px #eee rule (27151). Three or more stack.
   The label keeps danceit's #ccc (1.61:1 on white): an accepted danceit value,
   not part of divergence 6 unless the user widens it (#858585, the pipe grey). */
@media (min-width: 992px) {
  .dds-dancefloors:has(> :nth-child(2):last-child) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2em;                   /* 1em either side of the rule, the card padding */
    align-items: center;
  }
  .dds-dancefloors:has(> :nth-child(2):last-child)::before {  /* the rule, full height of the bank */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--dds-border-light);             /* #eee, danceit.css:27151 */
  }
}

/* ---- Named dancefloors (dds; the public pages) ------------------------------
   <div class="dds-dancefloors dds-dancefloors-named">
     <div class="dds-dancefloor" role="group" aria-label="Dancefloor A">
       <span class="dds-dancefloor-name">Dancefloor A</span> …its items…
     </div> …the second floor…
   </div> …the bank's items on no floor, full width…
   A bank on named floors names each floor once instead of an "A:" before every
   item; the floors are the distinct names, so A,B,B,B is two floors with B's
   three rounds (danced at the same time) one under another on its side. The
   name leads the floor's first round as the first of its parts (02-type):
   <span class="dds-part"><span class="dds-dancefloor-name dds-dancefloor-name--inline">A</span></span>
   so "A | Disco Dance | …" wraps like any name, its second line starting
   under the A. The floors stack, the second behind nothing but the line break,
   until the schedule itself is 560px wide; from there they sit side by side,
   50/50 behind the rule. The schedule's width decides, not the window's (a
   container query on .dds-schedule--timeline), so the same markup works in a
   narrow column. Only exactly two floors go side by side; three or more stack. */
.dds-dancefloors.dds-dancefloors-named { display: flex; flex-direction: column; }
.dds-dancefloor { min-width: 0; }
/* stacked floors are different places in the hall, but the line break says so
   on its own: no rule between them, which would read as the break between two
   banks (the timeline's gap) and make the two breaks one. Only the gap
   divides them: 8px, twice the 4px between the rounds of one floor and well
   under a bank's own 10px either side. Half a margin and half a padding, so a
   highlighted round's slot fills exactly its half (21 Highlighted items). */
.dds-dancefloor + .dds-dancefloor { margin-top: 4px; padding-top: 4px; }
.dds-dancefloor-name {
  display: block;
  font-size: 12px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 18px;
  color: var(--dds-label);
}
/* .dds-dancefloor-name--inline: the floor's name as the first part of its
   first round, "A | Disco Dance | Solo …", in the heading ink (the bare name:
   no "Dancefloor" before it); the parts draw the pipe after it. The floor's
   other rounds start at the same x, under the A. */
.dds-dancefloor-name.dds-dancefloor-name--inline {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--dds-font-weight-bold);
  color: var(--dds-heading);
}
/* the rounds held at once on one floor (A,B,B,B: B's three) keep a breath apart when they wrap */
.dds-dancefloor > * + * { margin-top: 4px; }
.dds-dancefloors-named + .dds-PKitem,
.dds-dancefloors-named + a.dds-normal { margin-top: 8px; }
@container dds-schedule (min-width: 560px) {
  .dds-dancefloors.dds-dancefloors-named:has(> .dds-dancefloor:nth-child(2):last-child) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2em;
    align-items: start;
  }
  .dds-dancefloors.dds-dancefloors-named:has(> .dds-dancefloor:nth-child(2):last-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--dds-card-shade-line);
  }
  /* side by side only: the 50% rule divides them, so the stacked gap goes. Three or
     more floors still stack, and keep their 8px. */
  .dds-dancefloors-named:has(> .dds-dancefloor:nth-child(2):last-child) > .dds-dancefloor + .dds-dancefloor { margin-top: 0; padding-top: 0; }
}

/* ---- Highlighted items (the public filter; PKpubfilters.js) ---------------
   .dds-PKitem.dds-row-highlight is the table's row state (14 §8) on a round:
   the primary tint and a straight 3px edge, reaching a few px past the text
   so the edge never touches it. Nothing else dims. In the timeline the
   highlight fills the space it stands for (below). */
.dds-schedule .dds-PKitem.dds-row-highlight {
  margin: -2px -8px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--dds-primary) 7%, #fff);
  border-radius: 0 var(--dds-radius-sm) var(--dds-radius-sm) 0;
  box-shadow: inset 3px 0 0 var(--dds-primary);
}

/* ---- Timeline: .dds-schedule.dds-schedule--timeline --------------------------
   A bank per bar: no sequence column and no card header, the time in its own
   column with the delay beside it, a custom item telling itself apart by its ink
   alone, and the bank dancing now as a primary edge on the left instead of the
   2px frame. The bars do not touch — the page shows between them, as it does
   between danceit's own bank cards (14px there, 4px here: enough to read as a
   break, not as a list of cards) — so each bar carries a small radius of its
   own, and every bar is the same distance from the next: one gap, no
   exceptions.
   No shadow on a bar: the gap is 4px and two shadows meeting in it would grey
   the page out of its own gap. The box-shadow is the highlight's (below).
   Put it on the page (or in a .dds-card-plain), not inside a white card. The
   public pages use it (27-public-pages); the panels keep the cards.
   <div class="dds-list-group dds-schedule dds-schedule--timeline"> … banks … */
.dds-schedule--timeline {
  --dds-schedule-gap: 4px;                 /* the page between two banks */
  container: dds-schedule / inline-size;   /* the named dancefloors measure it */
  row-gap: var(--dds-schedule-gap);
}
.dds-schedule--timeline > .dds-card.dds-list-item {
  /* the row's measures, which a highlighted round's slot reaches out by (below) */
  --dds-schedule-pad-y: 10px;
  --dds-schedule-pad-x: 14px;
  --dds-schedule-time-w: 58px;
  margin: 0;
  padding: var(--dds-schedule-pad-y) var(--dds-schedule-pad-x);
  overflow: hidden;                 /* a highlighted round's slot stops at the corner */
  background: var(--dds-card-bg);   /* white, not a nested card's shade 1: only a break is tinted */
  border: 0;
  border-radius: var(--dds-radius-sm);
  box-shadow: none;
  transition:
    opacity var(--dds-duration-slow) var(--dds-ease-standard),
    background-color var(--dds-duration-fast) var(--dds-ease-standard),
    box-shadow var(--dds-duration-fast) var(--dds-ease-standard);
}
/* Every bank is the same bank: the same size, the same white, the same radius, the
   same one gap from its neighbours. A bank that opens a new time slot used to take a
   wider gap (the firmer hairline before it) and a custom item used to be tinted and
   then outlined; none of it survived. A custom item (a note, a break, the awards) is a
   round's bank in every way but **the colour of its words** — nothing else marks it,
   and nothing else needs to. A fill is what the page's own grey already is, so two
   tinted things met and neither read; an outline then drew a second box inside a box
   that was already a box. The ink is enough. */
/* the bank on the floor is on now (13-feedback .dds-ongoing: a step bolder, the band
   sweeps through every text of the bank in its own colour). No tint and no
   edge: those are the reader's own rounds (the highlight below), a different
   thing. */
.dds-schedule--timeline > .dds-card.dds-list-item.dds-active { border: 0; }
/* ---- An empty bank: a divider ------------------------------------------------
   A custom item with no words in it (an organizer's blank line between blocks)
   has nothing to print, so the bank is not a bar at all: it is the rule it was
   put there to be. One hairline the timeline's full width, 1px in --dds-primary,
   and the same air above it as below it: 16px, four gaps, of which the list
   contributes one on each side and the divider's own margin the other three.
   That is twice a bank's own breathing room either way, which is what a block
   divider has to be — at 8px it read as a bank that had lost its words.
   Nothing for a screen reader to read (pub_dds_bridge() hides it). */
.dds-schedule--timeline > .dds-card.dds-list-item.dds-schedule-divider {
  padding: 0;
  margin: calc(3 * var(--dds-schedule-gap)) 0;
  background: none;
  border-radius: 0;
}
.dds-schedule--timeline > .dds-card.dds-list-item.dds-schedule-divider > table { display: none; }
.dds-schedule--timeline > .dds-card.dds-list-item.dds-schedule-divider::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--dds-primary);
}
/* the reader's rounds (the filter) fill the space they stand for, so the tint
   reads as the row's, not as a label stuck on its words:
   - a bank of one round: the whole row, edge to edge and top to bottom, the
     3px edge at the row's own left, before the time;
   - a round among others (several rounds, named floors): its whole slot,
     straight cornered, the full width of the row, its 3px edge at the same
     row's left as a bank of one round's (before the time column), so a
     bank of one round, one floor or two stacked floors highlight alike on a
     phone. Vertically it reaches the row's edge where it is the bank's first
     or last round, and 4px into the gap otherwise — half of the 8px between
     two stacked floors, all of the 4px between the rounds of one floor.
     Floors side by side: each from or to
     the rule between them. The reach is --dds-slot-top/-bottom/-left/-right,
     set on the round's slot (the floor's or the cell's child). */
.dds-schedule--timeline > .dds-list-item:has(.dds-PKitem.dds-row-highlight):not(:has(.dds-dancefloors, .dds-PKitem ~ .dds-PKitem, a.dds-normal ~ a.dds-normal)) {
  background: color-mix(in srgb, var(--dds-primary) 7%, #fff);
  box-shadow: inset 3px 0 0 var(--dds-primary);
}
.dds-schedule--timeline > .dds-list-item:not(:has(.dds-dancefloors, .dds-PKitem ~ .dds-PKitem, a.dds-normal ~ a.dds-normal)) .dds-PKitem.dds-row-highlight {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.dds-schedule--timeline > .dds-list-item:has(.dds-dancefloors, .dds-PKitem ~ .dds-PKitem, a.dds-normal ~ a.dds-normal) .dds-PKitem.dds-row-highlight {
  --dds-slot-x: calc(var(--dds-schedule-pad-x) + var(--dds-schedule-time-w) + 3px);  /* the cells' 1px paddings */
  margin: calc(-1 * var(--dds-slot-top, 4px)) calc(-1 * var(--dds-slot-right, var(--dds-schedule-pad-x))) calc(-1 * var(--dds-slot-bottom, 4px)) calc(-1 * var(--dds-slot-left, var(--dds-slot-x)));
  padding: var(--dds-slot-top, 4px) var(--dds-slot-right, var(--dds-schedule-pad-x)) var(--dds-slot-bottom, 4px) var(--dds-slot-left, var(--dds-slot-x));
  border-radius: 0;
}
.dds-schedule--timeline .dds-list-item td > :not(.dds-dancefloors):first-child,
.dds-schedule--timeline .dds-dancefloors-named > .dds-dancefloor:first-child > :first-child { --dds-slot-top: var(--dds-schedule-pad-y); }
.dds-schedule--timeline .dds-list-item td > :not(.dds-dancefloors):last-child,
.dds-schedule--timeline .dds-dancefloors-named:last-child > .dds-dancefloor:last-child > :last-child { --dds-slot-bottom: var(--dds-schedule-pad-y); }
/* a stacked floor's own half of the 8px between the floors is the default 4px
   reach, so there is nothing to set here: a round at a floor boundary fills
   its half exactly, as a round between two rounds of one floor does. */
@container dds-schedule (min-width: 560px) {
  /* side by side: the rounds reach the row's top and bottom, and the rule between the floors, not past it */
  .dds-schedule--timeline .dds-dancefloors-named:has(> .dds-dancefloor:nth-child(2):last-child) > .dds-dancefloor > :first-child { --dds-slot-top: var(--dds-schedule-pad-y); }
  .dds-schedule--timeline .dds-dancefloors-named:last-child:has(> .dds-dancefloor:nth-child(2):last-child) > .dds-dancefloor > :last-child { --dds-slot-bottom: var(--dds-schedule-pad-y); }
  .dds-schedule--timeline .dds-dancefloors-named:has(> .dds-dancefloor:nth-child(2):last-child) > .dds-dancefloor:first-child > * { --dds-slot-right: 1em; }
  .dds-schedule--timeline .dds-dancefloors-named:has(> .dds-dancefloor:nth-child(2):last-child) > .dds-dancefloor:last-child > * { --dds-slot-left: 1em; }
}
.dds-schedule--timeline > .dds-list-item.dds-past { opacity: .55; }
.dds-schedule--timeline .dds-list-item td { vertical-align: baseline; }   /* the time on the item's first line */
.dds-schedule--timeline .dds-schedule-time {
  position: relative;
  z-index: 1;                       /* above a round's slot, which reaches back under the time column */
  width: var(--dds-schedule-time-w);
  color: var(--dds-primary-dark);
  font-weight: var(--dds-font-weight-medium);
  font-variant-numeric: tabular-nums;
}
.dds-schedule--timeline .dds-schedule-time { white-space: nowrap; }
/* the delay is the time's subscript: <sub class="dds-schedule-delay">+12′</sub>
   ends where the time ends and hangs just under its baseline, in the row's
   bottom padding. It is absolute (its static place, pulled back by its own
   width), so it adds no width to the time column and no height to the row;
   a schedule with delays lines up exactly like one without. */
.dds-schedule--timeline .dds-schedule-time > .dds-schedule-delay {
  position: absolute;
  bottom: auto;
  margin-top: 20px;
  font-size: 10.5px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  color: var(--dds-text-caption);
  transform: translateX(-100%);
  pointer-events: none;
}
/* the count: a small filled tally at the line's end, the table footer's count
   (14 §10e): a gentle fill, the caption ink, a small radius. The fill is a
   translucent primary rather than shade 1, since a break row is shade 1
   itself: it reads the same on a white row, a break, a tint. Its side is
   one schedule line (24px), so the tally is a square for one or two digits
   and grows into a rectangle for three. On a name that wraps it stands in the
   middle of the lines' height (the <p> is the flex line, the tally centred
   in it). The reader's own rounds (highlighted): white on their tint, the
   dark primary ink. */
.dds-schedule--timeline .dds-PKitem > p:has(> .dds-parts) > .dds-parts { flex: 1 1 auto; }
.dds-schedule--timeline .dds-PKitem > p:has(> .dds-parts) > .dds-badge {
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  margin-left: 12px;
  padding: 0 5px;
  font-size: 12px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 24px;
  text-align: center;
  color: var(--dds-text-caption);
  background: color-mix(in srgb, var(--dds-primary-dark) 7%, transparent);
  border-radius: var(--dds-radius-sm);
  font-variant-numeric: tabular-nums;
}
.dds-schedule--timeline .dds-PKitem.dds-row-highlight > p > .dds-badge { color: var(--dds-primary-dark); background: var(--dds-card-bg); }
.dds-schedule--timeline .dds-PKitem { font-weight: var(--dds-font-weight-normal); }
/* a custom item is a round's twin in every measure — the same 14px over a 24px line,
   which is the height a round's count badge sets — and differs in **one** property,
   its ink. (It was 13px and medium, which made a note's bank shorter than a round's
   and gave the difference a second channel it did not need.) */
.dds-schedule--timeline .dds-PKitem.dds-custom {
  color: var(--dds-primary-dark);
  font-size: 14px;
  line-height: 24px;
  font-weight: var(--dds-font-weight-normal);
}
@media (max-width: 639.98px) {
  .dds-schedule--timeline > .dds-card.dds-list-item { --dds-schedule-pad-x: 10px; --dds-schedule-time-w: 46px; }
}

/* ---- The day head: .dds-schedule-head (dds; the public pages) ----------------
   What the timeline below shows, as the timeline's heading: the date in the time
   column, as a calendar leaf (the day's figure over its month), then the
   weekday and the hall, and the way to another day or hall at the end. It is
   12-cards' primary header band (the gradient, white words, the chip's
   shadow) across the timeline's full width, all four corners rounded, a gap
   above the first bank. It lines up with the rows under
   it (the leaf over the times, the words over the rounds) and is set a step
   larger than they are (16px against 14px), so it reads as their heading
   without changing voice.
   <section>
     <header class="dds-schedule-head">
       <div class="dds-schedule-head-bar">
         <time class="dds-schedule-head-date" datetime="2026-10-03"><span>3</span><span>Oct</span></time>
         <h3 class="dds-schedule-head-title"><span class="dds-schedule-head-day">Saturday</span>
           <span class="dds-schedule-head-hall">Main Hall</span></h3>
         <a class="dds-btn dds-btn-quiet dds-schedule-head-change" href="…" title="…">
           <i class="dds-material-icons">swap_horiz</i><span class="dds-text-wide">change date and hall</span></a>
       </div>
     </header>
     <div class="dds-list-group dds-schedule dds-schedule--timeline">…</div>
   </section>
   Sticky by default: while the day is scrolled it stays at the top of the
   window, the rows passing under it; it lets go where its section ends.
   data-dds-sticky="false" keeps it in flow. A corner is rounded while it has
   nothing to sit against and square while it does, so standing on the page the
   band is rounded all round, and stuck to the top edge of the window it keeps
   its bottom corners and drops its top two — the edge it is cut off by is the
   only straight one (a scroll-state container query; without it the head only
   stays put). Only the head sticks: a card header above the section scrolls away.
   The change is a quiet button in the band's white, no ring (the ring is
   the toolbar's "highlight my school"; not .dds-btn-primary, blue on
   blue). Below 640px it is a 40px square, its icon only (its name is its
   title and aria-label); the weekday and the hall take a line each. */
.dds-schedule-head {
  position: sticky;
  top: 0;
  z-index: var(--dds-z-sticky);
  container-type: scroll-state;
}
.dds-schedule-head[data-dds-sticky="false"] { position: static; }
/* phones: the body stops being a scroll container (01-reset), so the head can stick */
body.dds-scope:has(.dds-schedule-head:not([data-dds-sticky="false"])) { overflow-x: clip; }
.dds-schedule-head-bar {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;   /* the time column: 58px + its cell's 1px either side */
  align-items: center;
  min-height: 56px;
  padding: 8px 10px 8px 15px;                        /* the row's 14px + its cell's 1px: the leaf starts where the times do */
  color: var(--dds-text-on-primary);
  background: var(--dds-hero-gradient);              /* 12-cards .dds-card-header-primary */
  border-radius: var(--dds-radius);
  box-shadow: var(--dds-shadow-chip);
  transition: border-radius var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-schedule-head-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
}
.dds-schedule-head-date > :first-child { font-size: 22px; font-weight: var(--dds-font-weight-medium); line-height: 24px; }
.dds-schedule-head-date > :last-child { font-size: 12px; font-weight: var(--dds-font-weight-medium); line-height: 14px; }
.dds-schedule-head-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 22px;
  color: inherit;
}
.dds-schedule-head-day { font-weight: var(--dds-font-weight-medium); }
.dds-schedule-head-hall { min-width: 0; overflow-wrap: anywhere; }
.dds-schedule-head-change { margin-left: 12px; }
.dds-schedule-head + .dds-schedule--timeline { margin-top: var(--dds-schedule-gap); }
/* stuck to the top edge of the window: only the two corners that edge cuts off go square */
@container scroll-state(stuck: top) {
  .dds-schedule-head-bar { border-radius: 0 0 var(--dds-radius) var(--dds-radius); }
}
@media (max-width: 639.98px) {
  .dds-schedule-head-bar { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 8px 8px 8px 11px; }
  .dds-schedule-head-title { flex-direction: column; align-items: flex-start; }
  .dds-schedule-head-change { width: 40px; height: 40px; justify-content: center; padding: 0; }
}


/* ===== 22-results.css ==================================================== */

/* ==========================================================================
   dds · 22-results — results tables, marks, the matrix, the podium and the
   award ceremony. Owner: results. Spec: spec/22-results.md.
   --------------------------------------------------------------------------
   Results composes other parts and adds only what is its own:
     tables   .dds-table* .dds-datatable .dds-datatables-* .dds-table-stack
              .dds-toolbar, tr.dds-unimportant (row state)
     cards    .dds-card .dds-card-header-primary.dds-card-header-icon
     buttons  .dds-btn* .dds-page-toolbar-static .dds-page-footer-static
              .dds-shakeit (a single nudge in dds, not danceit's loop)
     type     .dds-title .dds-pipe .dds-small-pipe .dds-strong .dds-bold
              i.dds-table-icon
     utils    .dds-unimportant .dds-hidden .dds-blur .dds-nonselectable
   Owned here
     .dds-header (panel margins)            danceit.css:17067-17073
     ceremony: [data-dds-ceremony], button[data-dds-visibility-btn],
               a[data-dds-display-mode], hooks .dds-ceremony-start/-stop/
               -reveal-all/-end (no own look)                       28212
     marks:    span.dds-judge-initials[title] + sup.dds-unimportant,
               span.dds-judge-mark[title], p.dds-judges-legend, span.dds-place-count
     matrix:   .dds-results-matrix-body, table.dds-results-matrix,
               .dds-x-border .dds-no-border .dds-round-start tr.dds-group-start
                                                             28634-28640 + inline
     podium:   .dds-podium .dds-place-wrapper .dds-place(.dds-fst/-snd/-trd)
               .dds-number .dds-logo-flag .dds-performance-name
               .dds-judges-rates-under-podium                 28232-28292
   ========================================================================== */

/* ---- Panel header: title between the toolbar and the card ------------------
   danceit gives .header its margins only inside .main-panel; a public page
   keeps .title's own 0 0 25px (26-public). */
.dds-main-panel .dds-header { margin-bottom: 30px; }                 /* danceit.css:17067 */
.dds-main-panel .dds-header .dds-title { margin-top: 10px; margin-bottom: 10px; } /* 17071 */

/* ---- Award ceremony -------------------------------------------------------
   <div data-dds-ceremony> wraps the toolbar, the title, reveal-all, the card and
   the two footers. The blurred spans carry .dds-blur + .dds-animate-blur, both
   utilities (danceit.css:28212-28218; dds clamps danceit's .5s filter fade to
   --dds-duration-max). */

/* A row whose reveal is on its way to the server greys out (tr.dds-unimportant,
   tables' row state, JS 160). danceit snaps; dds lets the colour follow in
   150ms so the moderator sees the row settle rather than blink. */
[data-dds-ceremony] .dds-table tbody td,
[data-dds-ceremony] .dds-table tbody td .dds-material-icons {
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
/* The row that failed keeps its title ("Failed to reveal result … Click to
   retry") and is clickable, as in danceit (JS 168-190). */
[data-dds-ceremony] tr.dds-ceremony-failed { cursor: pointer; }

/* Reveal all fades out once pressed (danceit: jQuery fadeOut(3000)); dds leaves
   with a plain 300ms fade - the motion cap (CONVENTIONS 11, <= 320ms) is the
   one declared difference. JS adds .dds-hidden when it ends; like danceit,
   STOP does not bring it back. */
[data-dds-ceremony] .dds-ceremony-reveal-all {
  transition: opacity var(--dds-duration-slow) var(--dds-ease-accelerate),
              box-shadow var(--dds-duration-base) var(--dds-ease-standard),
              background-color var(--dds-duration-base) var(--dds-ease-standard);
}
[data-dds-ceremony] .dds-ceremony-reveal-all.dds-ceremony-leaving { opacity: 0; pointer-events: none; }

/* START, STOP, FINISH and the TABLE / INDIVIDUAL / PODIUM buttons swap by
   .dds-hidden (danceit: jQuery show/hide, a snap). dds lets the button that
   appears arrive with a 150ms fade; the one that leaves goes at once, so the
   two never share the spot. Only once the JS is ready (data-dds-ready), so
   nothing fades in on page load. The button's own .2s shadow/background pair
   (10-buttons, danceit.css:8301) is kept. */
[data-dds-ceremony][data-dds-ready~="ceremony"] :is(.dds-ceremony-start, .dds-ceremony-stop,
  .dds-ceremony-end, [data-dds-display-mode]) {
  transition: var(--dds-transition-btn), color var(--dds-duration-fast) var(--dds-ease-standard),
              opacity var(--dds-duration-fast) var(--dds-ease-decelerate);
}
@starting-style {
  [data-dds-ceremony][data-dds-ready~="ceremony"] :is(.dds-ceremony-start, .dds-ceremony-stop,
    .dds-ceremony-end, [data-dds-display-mode]) { opacity: 0; }
}

/* ---- Judges in the header, marks in the cells ------------------------------
   th > span.dds-judge-initials[title="Anna Kowalczyk"] AK + sup.dds-unimportant A
   (summarize.php:157). The sup is the UA 75% at top -.5em; #bbb from the
   utility. td > span.dds-judge-mark[title="T"] X (a cross) or a judge's place. Judge
   columns stay left-aligned and sortable, as danceit's public results. */
.dds-judge-initials { white-space: nowrap; }
span.dds-judge-mark { white-space: nowrap; }
/* The legend under a marks table: p.dds-judges-legend.dds-text-center.dds-mb-5,
   entries joined by span.dds-pipe (summarize.php:161). */
p.dds-judges-legend { text-align: center; margin-bottom: 3rem; }    /* .text-center .mb-5 */
/* "place of N": 1<span class="dds-place-count">/14</span> (pub_school_results) */
.dds-place-count { color: var(--dds-unimportant); }                 /* danceit.css:26868 */

/* ---- Category marks matrix (basic_category_results_show.php:115-240) -------
   div.dds-card-body.dds-results-matrix-body > table.dds-table.dds-results-matrix
   danceit writes the body's overflow and pull-up inline; the matrix scrolls
   inside the card at every width where it does not fit. It never stacks:
   a matrix read as a pile of cards loses its columns (divergence 2 applies to
   lists, not to matrices). */
.dds-card-body.dds-results-matrix-body {
  overflow-x: auto;                    /* inline overflow-y:auto forces both axes */
  overflow-y: auto;
  margin-top: -2.5em;                  /* inline; -35px under the icon chip */
}
/* No thead in danceit's matrix, so its th are the UA bold 14px, not the
   17px/300 PKtable heading (render, T7). */
table.dds-results-matrix th {
  font-size: .875rem;
  font-weight: bold;
  line-height: 24px;
  vertical-align: middle;
}
table.dds-results-matrix th .dds-unimportant { font-weight: bold; }
td.dds-x-border, th.dds-x-border {                                   /* danceit.css:28634 */
  border-left: 1px solid var(--dds-border);                          /* renders #ddd (14304) */
  border-right: 1px solid var(--dds-border);
}
/* Scoped to the matrix so it outranks 14-tables' `.dds-table > tbody > tr > th`
   border-top (0,1,3); in danceit the specificity ties and no-border wins by order. */
.dds-results-matrix th.dds-no-border,
.dds-results-matrix td.dds-no-border { border: none; }               /* danceit.css:28639 */
/* The first judge of every later round, and the first performance of every
   lower highest-round group: danceit's inline 2px #aaa. */
td.dds-round-start, th.dds-round-start { border-left: 2px solid #aaa; }
table.dds-results-matrix tr.dds-group-start > td { border-top: 2px solid #aaa; }

/* ---- Podium (award_ceremony_common.php "SHOW PODIUM") ----------------------
   Inside display's shell. DOM order 2, 1, 3; the box's border takes the text
   colour of the display theme (#3c4858 by default).
   design §5: one connected podium, not three boxes. The steps touch, the first
   place's walls are its neighbours' inner walls (2 has no right border, 3 no left),
   and the first is lifted over them, so the outline is one stepped shape and no
   joint is drawn twice. The steps stand on one line whatever sits above them (a
   tall logo, a name on two lines): the row aligns to the bottom and the judges'
   places hang below the step, out of the flow. The number is centred in its step
   at line-height 1, so it never crosses the top edge. Narrower than the podium's
   natural 54em, the steps, borders and numbers scale with the podium's width (cqi);
   names and logos keep a readable floor. */
.dds-podium {                                                         /* danceit.css:28254 */
  container-type: inline-size;
  margin-top: 2em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1em min(1em, 2cqi) 2.5em;                                  /* room for the judges' places */
}
.dds-podium .dds-place-wrapper {                                      /* 28286 */
  position: relative;
  display: flex;
  flex: 0 1 18em;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}
.dds-podium .dds-place {                                              /* 28232 */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
  width: 100%;
  border: min(7px, 1.4cqi) solid;
  background: var(--dds-white, #fff);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 14%);
  box-sizing: border-box;
}
.dds-podium .dds-place.dds-fst { height: min(11em, 22cqi); z-index: 1; }  /* 28240; over its neighbours' shadows */
.dds-podium .dds-place.dds-snd { height: min(8em, 16cqi); border-right-width: 0; }   /* 28245 */
.dds-podium .dds-place.dds-trd { height: min(6em, 12cqi); border-left-width: 0; }    /* 28250 */
.dds-podium .dds-place .dds-number {                                  /* 28261 */
  font-size: min(4.4em, 8cqi);
  font-weight: bold;
  line-height: 1;
}
.dds-podium .dds-logo-flag {                                          /* 28266 */
  margin: auto min(2em, 6cqi) 1em;
  object-fit: contain;
  max-height: max(4em, min(10em, 20cqi));
}
.dds-podium .dds-logo-flag img { max-width: 100%; }
.dds-podium .dds-logo-flag-small { width: 3em; margin: 0 auto .2em; } /* 28275 */
.dds-podium .dds-place-wrapper .dds-performance-name {                /* 28282 (!important there: beats the display's 4em) */
  padding: 0 .2em;
  font-size: max(.7em, min(1.5em, 4.5cqi));
  line-height: 1.3;
  overflow-wrap: break-word;                                          /* a word breaks only when it cannot fit */
}
.dds-podium .dds-judges-rates-under-podium {                          /* inline in danceit */
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: auto;
  min-height: 1em;
  margin-top: .5em;
  padding: 0 .2em;
  font-size: min(1em, 3.4cqi);
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* ---- Reduced motion: every reveal is instant ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-dds-ceremony] .dds-table tbody td,
  [data-dds-ceremony] .dds-table tbody td .dds-material-icons,
  [data-dds-ceremony] .dds-ceremony-reveal-all,
  [data-dds-ceremony][data-dds-ready~="ceremony"] :is(.dds-ceremony-start, .dds-ceremony-stop,
    .dds-ceremony-end, [data-dds-display-mode]) { transition: none; }
}

/* ---- Print (danceit.css:28975-29066) --------------------------------------
   The generic print rules (buttons, bold th, #000 unimportant) belong to
   buttons, tables and utilities. Results adds: the matrix prints whole. */
@media print {
  .dds-card-body.dds-results-matrix-body { overflow: visible; }
  [data-dds-ceremony] .dds-page-toolbar-static { margin: 0; }
}


/* ===== 27-public-pages.css =============================================== */

/* ==========================================================================
   dds · 27-public-pages — the public competition pages
   --------------------------------------------------------------------------
   Owner: public. Spec: spec/27-public-pages.md. Views: views/public-*.html.
   Consumer: public.php when it renders through dds (PKassets/php/pub_dds.php).

   26-public is the legacy twin of these pages. This part gives them the API
   reference's grammar (30-api): a blue rail on the #eee floor, one white card
   per page with 12-cards' floating gradient header, and lists as shade-1 bars.
   What is public-only: the competition's identity in the rail (its logo on a
   white plate, never a disc), and dates written as chips the way the API
   writes HTTP methods (outlined ahead, filled while it is on).

     body.dds-scope.dds-pub
     .dds-pub-shell                     rail + main: a grid from 1200px, a column below
       .dds-pub-rail(--inline)          the blue rail (a band on phones); --inline inside content
         .dds-pub-bar                   .dds-pub-back + .dds-pub-brand (a list: .dds-pub-brand + .dds-pub-back--end)
         .dds-pub-identity(--logo)      .dds-pub-plate > img, .dds-pub-name (h1),
                                        .dds-pub-when, .dds-pub-where > .dds-pub-city +
                                        .dds-pub-flag--now|soon|past (now: + .dds-ongoing)
         .dds-pub-nav > a[aria-current="page"], .dds-pub-nav-sep
       .dds-pub-main
         .dds-pub-content > .dds-card.dds-pub-card(.dds-card-plain: a content that is its own card)
           > .dds-card-header.dds-card-header-primary > .dds-card-title + .dds-card-category
           > .dds-card-body
             .dds-pub-modes             sub-tabs (results modes, heats)
             .dds-pub-section > h3      one table or list per section, hairlines between
             .dds-pub-section-action    a link at the end of a plain section heading (an option)
             .dds-pub-section-name      the heading's words after its chips (an option)
             .dds-pub-context > .dds-pub-context-action + .dds-pub-context-part(--lead|--date|--grow)
                                        a heading that says what the section shows (a ticket < 640px)
             .dds-pub-month             a month heading inside a list
             .dds-pub-section-head      a section heading with a tool at its end (a search)
             .dds-pub-rows(--grid) > li > .dds-pub-row(--past|--static)(.dds-ongoing: on now)
               .dds-pub-day(--past|--weekday)   the date chip (the weekday's, or "Today")
               .dds-pub-row-icon(--quiet)   the icon chip
               .dds-pub-row-main(--stack) > strong + .dds-pub-row-text | .dds-pub-row-label
                 .dds-pub-row-marks > img   the organizations' logos: the row's postmark (behind, tilted, cut)
               .dds-pub-row-go          chevron (or open_in_new)
               .dds-pub-copy            a copy button ([data-dds-pub-copy])
             [data-dds-rows-page-length]   a paged row list (js §5): [data-dds-page-out],
                                        .dds-pub-rows-pages > .dds-pagination (dds.pager)
             .dds-pub-status--now|--soon|--past   the status words in a row
             .dds-pub-total, .dds-pub-empty
             .dds-pub-filter, .dds-pub-chip, .dds-pub-heats   (the filter's set: 10 .dds-btn-set)
         .dds-pub-footer > .dds-pub-footer-inner   the white floor: .dds-pub-sponsors, .dds-langs
                                        (15-navigation §7), .dds-pub-version, .dds-pub-mark

   Loops only through .dds-ongoing (13-feedback), for "on now". Reduced motion drops every transition.
   ========================================================================== */

/* the part's tokens, on every dds scope so its pieces also work outside a .dds-pub page */
.dds-scope {
  /* the primary, darkened only as far as white small text needs (4.8:1 → 6.1:1) */
  --dds-pub-rail-bg: linear-gradient(165deg, var(--dds-primary-hover), var(--dds-sidebar-bg) 70%);
  --dds-pub-rail-width: 300px;
  --dds-pub-line: var(--dds-border-light);
  --dds-pub-gutter: 30px;
}
.dds-pub {
  background: var(--dds-body-bg);
  color: var(--dds-text);
  min-height: 100vh;
}
@media (max-width: 639.98px) {
  .dds-pub { --dds-pub-gutter: 12px; }
}

/* ---- Shell ------------------------------------------------------------------ */
.dds-pub-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@media (min-width: 1200px) {
  /* the route bar (05) starts where the rail ends: it runs over the content only */
  .dds-pub:has(> .dds-pub-shell > .dds-pub-rail) { --dds-route-bar-inset: var(--dds-pub-rail-width); }
  .dds-pub-shell {
    display: grid;
    grid-template-columns: var(--dds-pub-rail-width) minmax(0, 1fr);
    align-items: start;
  }
}

/* ---- Rail ------------------------------------------------------------------- */
.dds-pub-rail {
  --dds-surface: dark;                              /* the route bar over the band is white (05) */
  background: var(--dds-pub-rail-bg);
  color: var(--dds-sidebar-text);
  padding: 12px 20px 0;
}
.dds-pub-rail a { color: inherit; text-decoration: none; }
.dds-pub-rail :focus-visible { outline: 2px solid var(--dds-white); outline-offset: 2px; }
@media (max-width: 639.98px) {
  .dds-pub-rail { padding: 10px 12px 0; }
}
@media (min-width: 1200px) {
  .dds-pub-rail {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px 0 24px;
    overflow-y: auto;
    box-shadow: var(--dds-shadow-big);
  }
  /* a rail taller than the viewport scrolls; its pieces never squeeze into each other */
  .dds-pub-rail > * { flex-shrink: 0; }
}
/* --inline: a rail placed inside content rather than beside the page (no sticking, its own height) */
/* The page's own scrollbar beside the band (< 1200px). A desktop browser draws it in a
   gutter outside every element, on a transparent track (01-reset), and fills that gutter
   with the root's background colour (never its image): the page's grey, a pale strip
   down the blue band. So the track carries the band: the rail's own gradient, the rail's
   size, placed where the rail is now (--dds-pub-rail-top/-w/-h, measured by
   27-public-pages.js 7 and kept on scroll), right-aligned, so the gutter shows the band's
   last column beside the band and nothing below it: only the thumb shows. Chrome styles
   the page's scrollbar from body's ::-webkit-scrollbar rules when body has them (body is
   .dds-scope), so the rule is on body. Overlay scrollbars (phones) have no gutter. */
@media (max-width: 1199.98px) {
  body.dds-pub::-webkit-scrollbar-track {
    background: var(--dds-pub-rail-bg) right 0 top var(--dds-pub-rail-top, 0px) / var(--dds-pub-rail-w, 0px) var(--dds-pub-rail-h, 0px) no-repeat;
  }
}
.dds-pub-rail--inline { position: static; height: auto; padding-bottom: 12px; border-radius: var(--dds-radius); overflow: hidden; }
@media (min-width: 1200px) {
  .dds-pub-rail--inline { max-width: var(--dds-pub-rail-width); box-shadow: none; }
}

/* The top line: the way back as a soft pill first, the brand at the end (a list
   page has no way back: the brand leads, its action — sign in — goes to the end).
   From 1200px every line in the rail is the same: a .16 white hairline edge to
   edge, under this line, above the nav and between the nav's groups
   (.dds-pub-nav-sep). */
.dds-pub-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}
@media (min-width: 1200px) {
  .dds-pub-bar { margin: 0; padding: 0 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
}
.dds-pub-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 6px 0;
  border-radius: var(--dds-radius-sm);
  opacity: .92;
  transition: opacity var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-brand:hover { opacity: 1; }
.dds-pub-brand img { display: block; width: auto; height: 22px; }
.dds-pub-back:not(.dds-pub-back--end) + .dds-pub-brand img { height: 20px; }
.dds-pub-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  height: 32px;
  padding: 0 12px 0 6px;
  font-size: 14px;
  font-weight: var(--dds-font-weight-normal);           /* the quiet setting's type (10-buttons .dds-btn-framed): 14/20 normal */
  line-height: 20px;
  color: var(--dds-white);
  white-space: nowrap;
  background: rgba(255, 255, 255, .12);                 /* a gentle fill in its ring's place */
  border-radius: var(--dds-radius-btn);
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-back > span { overflow: hidden; text-overflow: ellipsis; }
.dds-pub-back:hover { background: rgba(255, 255, 255, .22); }
.dds-pub-back:active { background: rgba(255, 255, 255, .28); }
.dds-pub-back .dds-material-icons { flex: none; font-size: 20px; }
.dds-pub-back.dds-pub-back--end { gap: 6px; padding: 0 12px 0 10px; }
.dds-pub-back.dds-pub-back--end .dds-material-icons { font-size: 18px; }
.dds-pub-rail .dds-pub-back:focus-visible { outline-offset: 1px; }

/* The competition: its logo on a white plate in its own proportions, the name, when, where */
.dds-pub-identity { margin-top: 12px; min-width: 0; }
.dds-pub-identity--logo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
}
.dds-pub-identity--logo .dds-pub-plate { grid-row: span 3; }
.dds-pub-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 6px 8px;
  background: var(--dds-white);
  border-radius: var(--dds-radius);
  box-shadow: 0 4px 14px -6px rgba(0, 30, 80, .45);
}
.dds-pub-plate img { display: block; width: auto; height: auto; max-width: 88px; max-height: 44px; }
.dds-pub-name {
  margin: 0;
  padding: 0;
  font-size: 22px;
  font-weight: var(--dds-font-weight-light);
  line-height: 1.2;
  color: var(--dds-white);
  overflow-wrap: anywhere;
}
.dds-pub-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--dds-white);
}
.dds-pub-where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: var(--dds-font-weight-light);
  color: rgba(255, 255, 255, .9);
}
.dds-pub-city { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.dds-pub-where .dds-material-icons { font-size: 16px; color: var(--dds-sidebar-icon); }
/* the status ends the city's line, at the right edge; it wraps only when the line is full */
.dds-pub-where > .dds-pub-flag { margin-left: auto; }
.dds-pub-identity--logo :is(.dds-pub-when, .dds-pub-where) { margin-top: 0; }
@media (min-width: 640px) {
  .dds-pub-name { font-size: 26px; }
  .dds-pub-plate img { max-width: 140px; max-height: 56px; }
}
@media (min-width: 1200px) {
  .dds-pub-identity { margin-top: 26px; padding: 0 25px; }
  .dds-pub-identity--logo { display: block; }
  .dds-pub-plate { margin-bottom: 18px; padding: 10px 12px; }
  .dds-pub-plate img { max-width: 226px; max-height: 76px; }
  .dds-pub-identity--logo .dds-pub-when,
  .dds-pub-when { margin-top: 12px; }
  .dds-pub-identity--logo .dds-pub-where,
  .dds-pub-where { margin-top: 4px; }
}

/* Today / tomorrow / in N days / finished, on the rail */
.dds-pub-flag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--dds-radius-sm);
  font: var(--dds-font-weight-medium) 12px/1 var(--dds-font);
  color: var(--dds-white);
  white-space: nowrap;
}
.dds-pub-flag--now { background: var(--dds-white); border-color: var(--dds-white); color: var(--dds-primary-dark); --dds-ongoing-color: var(--dds-ongoing-color-on-primary); }   /* + .dds-ongoing */
.dds-pub-flag--past { background: rgba(255, 255, 255, .14); border-color: transparent; }

/* The competition's pages: tabs on a phone, the sidebar's rows from 1200px */
.dds-pub-nav {
  display: flex;
  gap: 2px;
  margin: 12px -20px 0;
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dds-pub-nav::-webkit-scrollbar { display: none; }
@media (max-width: 639.98px) {
  .dds-pub-nav { margin: 10px -12px 0; padding: 0 6px; }
}
.dds-pub-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 9px;
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
  border-bottom: 3px solid transparent;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard),
              background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-nav a:hover { color: var(--dds-white); }
.dds-pub-nav a[aria-current="page"] { color: var(--dds-white); border-bottom-color: var(--dds-white); font-weight: var(--dds-font-weight-medium); }
.dds-pub-nav a:focus-visible { outline-offset: -2px; }
.dds-pub-nav .dds-material-icons { font-size: 18px; color: var(--dds-sidebar-icon); }
.dds-pub-nav a[aria-current="page"] .dds-material-icons { color: var(--dds-white); }
.dds-pub-nav-sep { flex: none; width: 1px; margin: 12px 6px; background: rgba(255, 255, 255, .22); }
@media (min-width: 1200px) {
  .dds-pub-nav {
    flex-direction: column;
    margin: 28px 0 0;
    padding: 16px 0 0;
    overflow: visible;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .dds-pub-nav a {
    gap: 12px;
    min-height: 42px;
    margin: 0 15px;
    padding: 8px 10px;
    font-weight: var(--dds-font-weight-light);
    border-bottom: 0;
    border-radius: var(--dds-radius-sm);
  }
  .dds-pub-nav a:hover { background-color: var(--dds-sidebar-hover-bg); }
  .dds-pub-nav a[aria-current="page"] { background-color: rgba(255, 255, 255, .16); font-weight: var(--dds-font-weight-normal); }
  .dds-pub-nav .dds-material-icons { font-size: 20px; }
  .dds-pub-nav-sep { align-self: stretch; width: auto; height: 1px; margin: 10px 0; background: rgba(255, 255, 255, .16); }   /* the regions' own line, edge to edge */
  /* a list page has no identity between: the bar's hairline is the only one */
  .dds-pub-bar + .dds-pub-nav { margin-top: 0; border-top: 0; }
}

/* ---- Main and the page card ------------------------------------------------- */
.dds-pub-main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
}
@media (min-width: 1200px) {
  .dds-pub-main { min-height: 100vh; }
}
.dds-pub-content {
  flex: 1 0 auto;                                   /* a short page: the grey takes the rest, the footer stays its own height */
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px var(--dds-pub-gutter) 0;
}
@media (min-width: 1200px) {
  .dds-pub-content { padding-top: 48px; }
}
.dds-card.dds-pub-card { margin: 0 0 24px; }
.dds-pub-card > .dds-card-header .dds-card-title {
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: var(--dds-font-weight-light);
  line-height: 1.3;
}
.dds-pub-card > .dds-card-header .dds-card-category { margin: 3px 0 0; font-size: 14px; line-height: 1.4; }
.dds-pub-card > .dds-card-body { padding: 20px 14px 20px; }
@media (min-width: 640px) {
  .dds-pub-card > .dds-card-header .dds-card-title { font-size: 25px; }
  .dds-pub-card > .dds-card-body { padding: 24px 24px 28px; }
}
/* a page whose content is a card of its own (the schedule's timeline, 21) stands
   on the page: the page card is 12-cards' .dds-card-plain (no white, no shadow,
   the header the full width) and its body gives the content every pixel across */
.dds-pub-card.dds-card-plain > .dds-card-body { padding: 24px 0 0; }
/* the joined head: a plain card whose body opens with the schedule's day head
   (21 .dds-schedule-head) and no filter chips is one band in two lines. The
   header gives up its bottom corners for the rail's own hairline, white .16 edge
   to edge; the head gives up its top two for the same line, and keeps its bottom
   two — the band is rounded all round, the seam between its halves straight.
   Only the lower half sticks: the header and its line scroll away, the head stays
   (21), and its corners do not change when it does — the two it has always had
   square are the two the window's top edge cuts off. */
.dds-pub-card.dds-card-plain:has(> .dds-card-body > .dds-pub-section:first-of-type > .dds-schedule-head:first-child):not(:has(.dds-pub-chip)) > .dds-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--dds-radius) var(--dds-radius) 0 0;
}
.dds-pub-card.dds-card-plain:has(> .dds-card-body > .dds-pub-section:first-of-type > .dds-schedule-head:first-child):not(:has(.dds-pub-chip)) > .dds-card-body { padding-top: 0; }
.dds-pub-card.dds-card-plain:not(:has(.dds-pub-chip)) > .dds-card-body > .dds-pub-section:first-of-type > .dds-schedule-head:first-child .dds-schedule-head-bar {
  border-radius: 0 0 var(--dds-radius) var(--dds-radius);
}

/* Sub-tabs in the card: results by rounds / categories / schools / dancers, heats */
.dds-pub-modes {
  display: flex;
  gap: 2px;
  margin: -4px 0 20px;
  border-bottom: 1px solid var(--dds-pub-line);
  overflow-x: auto;
  scrollbar-width: none;
}
.dds-pub-modes::-webkit-scrollbar { display: none; }
.dds-pub-modes a,
.dds-pub-modes button {
  flex: none;
  appearance: none;
  margin-bottom: -1px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: var(--dds-font-weight-medium);
  color: var(--dds-text-muted);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
}
.dds-pub-modes :is(a, button):not([aria-current="page"], [aria-pressed="true"]):hover { color: var(--dds-text); }
.dds-pub-modes [aria-current="page"],
.dds-pub-modes [aria-pressed="true"] { color: var(--dds-primary-dark); border-bottom-color: var(--dds-primary); }
.dds-pub-modes :focus-visible { outline: var(--dds-focus-ring); outline-offset: -2px; }

/* One table or one list per section, under the API's hairlines */
.dds-pub-section + .dds-pub-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--dds-pub-line); }
.dds-pub-section > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 12px;
  padding: 0;
  font-size: 20px;
  font-weight: var(--dds-font-weight-light);
  line-height: 1.4;
  color: var(--dds-heading);
}
.dds-pub-section > p { color: var(--dds-text-muted); }
/* a heading with a tool at its end (a search): one line, the tool right-aligned */
.dds-pub-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0 0 12px;
}
.dds-pub-section-head > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 20px;
  font-weight: var(--dds-font-weight-light);
  line-height: 1.4;
  color: var(--dds-heading);
}
.dds-pub-section-head + * > [data-dds-search-group]:first-child > .dds-pub-month { margin-top: 4px; }
.dds-pub-empty.dds-pub-empty--inline { padding: 16px 8px; font-size: 14px; }
.dds-pub-month {
  margin: 20px 0 8px;
  padding: 0;
  font-size: 14px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 20px;
  color: var(--dds-primary-dark);
}
.dds-pub-section > h3 + .dds-pub-month { margin-top: 4px; }
.dds-pub-section > h3 .dds-pub-day { font-size: 13px; }
.dds-pub-section-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 6px;
  font-size: 14px;
  font-weight: var(--dds-font-weight-medium);
  color: var(--dds-primary-dark);
  border-radius: var(--dds-radius-sm);
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-section-action:hover { color: var(--dds-primary-dark); background: rgba(0, 123, 255, .08); }
.dds-pub-section-action:focus-visible { outline: none; box-shadow: var(--dds-focus-ring); }
.dds-pub-section-action .dds-material-icons { font-size: 18px; }
/* a section heading's name after its chips: wraps whole to its own line when tight */
.dds-pub-section-name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
/* .dds-pub-context: what a section shows, as one bordered bar of parts with
   its switch first ("⇄ | Monday | 21 Sep | Boris Trajkovski SC - Main Stage").
   The switch is icon only, named by its title and aria-label. The lead part
   (the weekday) carries the tint; dates never break (--date); the --grow part
   (a hall's name) is the one that may wrap inside itself. Below 640px the bar
   is a two-row ticket: the switch down the left, the lead and the date on top,
   the --grow part across the bottom. Never a scroll, never a part split
   across rows. */
.dds-pub-context {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--dds-font-weight-normal);
  line-height: 18px;
  color: var(--dds-heading);
  vertical-align: middle;
  border: 1px solid var(--dds-primary);
  border-radius: var(--dds-radius-sm);
}
.dds-pub-context-part {
  display: flex;
  align-items: center;
  padding: 3px 10px;
  white-space: nowrap;
}
.dds-pub-context > * + * { border-left: 1px solid color-mix(in srgb, var(--dds-primary) 35%, #fff); }
.dds-pub-context-part--lead {
  font-weight: var(--dds-font-weight-medium);
  color: var(--dds-primary-dark);
  background: color-mix(in srgb, var(--dds-primary) 8%, #fff);
}
.dds-pub-context-part--date { font-variant-numeric: tabular-nums; }
.dds-pub-context-part--grow { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.dds-pub-context-action {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-weight: var(--dds-font-weight-medium);
  white-space: nowrap;
  color: var(--dds-primary-dark);
  transition: background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-context-action:hover { color: var(--dds-primary-dark); background: color-mix(in srgb, var(--dds-primary) 10%, #fff); }
.dds-pub-context-action:focus-visible { outline: none; box-shadow: inset var(--dds-focus-ring); }
.dds-pub-context-action .dds-material-icons { font-size: 18px; }
@media (max-width: 639.98px) {
  .dds-pub-context:has(> .dds-pub-context-part--lead ~ .dds-pub-context-part--grow) {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    width: 100%;
    box-sizing: border-box;
  }
  .dds-pub-context:has(> .dds-pub-context-part--lead ~ .dds-pub-context-part--grow):not(:has(> .dds-pub-context-action)) {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .dds-pub-context:has(> .dds-pub-context-part--lead) > .dds-pub-context-action { grid-row: 1 / span 2; }
  .dds-pub-context:has(> .dds-pub-context-part--lead) > .dds-pub-context-part--grow {
    grid-column: -1 / 1;
    grid-row: 2;
    border-top: 1px solid color-mix(in srgb, var(--dds-primary) 35%, #fff);
  }
  .dds-pub-context:has(> .dds-pub-context-action) > .dds-pub-context-part--grow { grid-column: 2 / -1; }
  .dds-pub-context:not(:has(> .dds-pub-context-action)) > .dds-pub-context-part--grow { border-left: 0; }
  .dds-pub-context > .dds-pub-context-action { justify-content: center; padding: 3px 8px; }
}
.dds-pub-card .dds-table { margin-bottom: 0; }
.dds-pub-card .dds-table-responsive { overflow-x: auto; }

/* ---- Rows: the API's endpoint bars ---------------------------------------------- */
.dds-pub-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .dds-pub-rows--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dds-pub-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 52px;
  padding: 10px 44px 10px 14px;
  --dds-pub-row-bg: var(--dds-card-shade-1);
  color: var(--dds-text);
  text-decoration: none;
  background: var(--dds-pub-row-bg);
  border: 1px solid transparent;
  border-radius: var(--dds-radius);
  transition: border-color var(--dds-duration-fast) var(--dds-ease-standard),
              background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-row--static { padding-right: 8px; }
a.dds-pub-row:hover { color: var(--dds-text); text-decoration: none; border-color: rgba(0, 123, 255, .3); }
a.dds-pub-row:active { --dds-pub-row-bg: var(--dds-card-shade-2); }
a.dds-pub-row:focus-visible { outline: 2px solid var(--dds-primary); outline-offset: -2px; }
/* the name and its line share a centre, not a baseline: when the line (dates, place)
   wraps to two lines beside a one-line name, the name sits in the middle of them
   instead of on top of an empty second line (one line each: the same, within half a pixel) */
.dds-pub-row-main {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  min-width: 0;
}
.dds-pub-row-main > strong {
  min-width: 0;
  font-size: 15px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 22px;
  overflow-wrap: anywhere;
}
.dds-pub-row-text {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--dds-font-weight-light);
  line-height: 20px;
  color: var(--dds-text-muted);
}
.dds-pub-row-text .dds-pub-status { margin-left: 8px; }
.dds-pub-row-main--stack { flex-direction: column; align-items: flex-start; gap: 0; }
.dds-pub-row-label { font-size: 13px; line-height: 18px; color: var(--dds-text-muted); }
.dds-pub-row-main--stack > a {
  font-size: 16px;
  font-weight: var(--dds-font-weight-medium);
  line-height: 24px;
  color: var(--dds-primary-dark);
  overflow-wrap: anywhere;
}
.dds-pub-row-main--stack > span:not(.dds-pub-row-label) { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
/* the chevron stands on the logos (the marks below) with a 2px outline in the row's own
   colour, so a thin gap of tile parts it from the stamp under it */
.dds-pub-row-go {
  --dds-pub-go-ring: var(--dds-pub-row-bg, var(--dds-card-shade-1));
  position: absolute;
  top: 50%;
  right: 12px;
  font-size: 20px;
  color: var(--dds-text-muted);
  text-shadow:
    2px 0 0 var(--dds-pub-go-ring), -2px 0 0 var(--dds-pub-go-ring), 0 2px 0 var(--dds-pub-go-ring), 0 -2px 0 var(--dds-pub-go-ring),
    1.5px 1.5px 0 var(--dds-pub-go-ring), -1.5px 1.5px 0 var(--dds-pub-go-ring), 1.5px -1.5px 0 var(--dds-pub-go-ring), -1.5px -1.5px 0 var(--dds-pub-go-ring);
  translate: 0 -50%;
  transition: color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-row-go.dds-pub-row-go--out { font-size: 18px; }
a.dds-pub-row:hover .dds-pub-row-go { color: var(--dds-primary-dark); }
/* .dds-pub-row-marks: the organizations' logos (the files are black), grey.
   In a row they are its postmark: the way a sanctioning body's rubber stamp
   lands on a letter, larger than the text, tilted, ink-faded and cut by the
   row's right edge, behind the chevron and the words. One stamp, the first
   organization assigned (pub_dds_marks): a second one is not stamped. The mark is
   pure background: they take no room, never catch a click, and stay faint
   enough (.065) that the chevron and the text keep their full contrast. On
   hover the ink deepens a little, with the row's border. The whole stamp
   shows at once, its far corner cut by the tile's edge. Its size follows the
   row: a phone's two-line card is the model (a 70px stamp in a card about
   90px tall, cut only at the tilted corners), and a one-line row from 640px
   takes a stamp scaled to its own height a little fuller (92% of it, up to 96px
   wide): the same right edge, only a sliver more cut at the top and the bottom. */
.dds-pub-row-marks {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.dds-pub-row-marks > img {
  display: block;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
}
.dds-pub-row:has(.dds-pub-row-marks) { overflow: hidden; isolation: isolate; }
.dds-pub-row .dds-pub-row-marks {
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  z-index: -1;
  gap: 0;
  pointer-events: none;
  rotate: -9deg;
}
.dds-pub-row .dds-pub-row-marks > img {
  max-width: 96px;
  height: 92%;
  opacity: .065;
  mix-blend-mode: multiply;                         /* the ink sinks into the tile, the live tint included */
  transition: opacity var(--dds-duration-fast) var(--dds-ease-standard);
}
a.dds-pub-row:hover .dds-pub-row-marks > img { opacity: .1; }
/* a paged list (27-public-pages.js §5): the rows of the other pages, and a group left empty */
.dds-pub-rows > li[data-dds-page-out],
[data-dds-search-group][data-dds-page-out] { display: none; }
.dds-pub-rows-pages { display: flex; justify-content: flex-end; margin-top: 14px; }
.dds-pub-rows-pages[hidden] { display: none; }
/* a day that is over (the schedule's day picker): still a link, quieter */
.dds-pub-row--past .dds-pub-row-main > strong { font-weight: var(--dds-font-weight-normal); color: var(--dds-text-muted); }
@media (max-width: 639.98px) {
  .dds-pub-row { gap: 10px; padding-left: 10px; padding-right: 36px; }
  .dds-pub-row--static { padding-right: 4px; }
  .dds-pub-row-go { right: 8px; }
  .dds-pub-row-text { flex-basis: 100%; }
}
/* a phone: a dated card becomes a grid, the date at the left, centred on the card's
   height, the name and its line beside it (the logos are the row's postmark, out of the
   grid). A weekday chip (the day-and-hall picker) stays a flex row: the chip centred on
   the hall and its date beside it. */
@media (max-width: 639.98px) {
  .dds-pub-row:has(> .dds-pub-day:not(.dds-pub-day--weekday)) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;                  /* the name, then its line: the chip spans both */
    align-items: start;
    gap: 2px 10px;
  }
  .dds-pub-row:has(> .dds-pub-day:not(.dds-pub-day--weekday)) > .dds-pub-day { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .dds-pub-row:has(> .dds-pub-day:not(.dds-pub-day--weekday)) > .dds-pub-row-main { display: contents; }
  .dds-pub-row:has(> .dds-pub-day:not(.dds-pub-day--weekday)) .dds-pub-row-main > :not(.dds-pub-row-marks) { grid-column: 2; }
  .dds-pub-row .dds-pub-row-marks { right: -8px; }
  .dds-pub-row .dds-pub-row-marks > img { max-width: 124px; height: 70px; }
}

/* The date chip: the method chip's grammar for a date */
.dds-pub-day {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 24px;
  min-width: 82px;
  padding: 0 8px;
  font: var(--dds-font-weight-medium) 12px/1 var(--dds-font);
  font-variant-numeric: tabular-nums;
  color: var(--dds-primary-dark);
  white-space: nowrap;
  --dds-ongoing-color: var(--dds-ongoing-color-on-primary);   /* blue text: a light band (13 on now) */
  background: transparent;
  border: 1px solid var(--dds-primary);
  border-radius: var(--dds-radius-sm);
}
.dds-pub-day--past { color: var(--dds-text-muted); border-color: #c4ccd6; }
/* on now (.dds-pub-row.dds-ongoing): the chip says "Today" in the same outline as any date,
   and the row's words carry the state (13-feedback): no tint, no solid tile */
/* --weekday: a name, not a number; it takes the longest weekday's room, so the
   halls after a column of chips line up */
.dds-pub-day.dds-pub-day--weekday { min-width: 94px; font-variant-numeric: normal; }
@media (max-width: 639.98px) {
  .dds-pub-day { min-width: 72px; padding: 0 6px; }
  .dds-pub-day.dds-pub-day--weekday { min-width: 88px; }
}

/* The icon chip: the card header's gradient chip, row-sized; --quiet is a tint */
.dds-pub-row-icon.dds-material-icons {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  color: var(--dds-white);
  background: var(--dds-hero-gradient);
  border-radius: var(--dds-radius-sm);
  box-shadow: var(--dds-shadow-chip);
}
.dds-pub-row-icon--quiet.dds-material-icons {
  width: 32px;
  height: 32px;
  color: var(--dds-primary-dark);
  background: rgba(0, 123, 255, .1);
  box-shadow: none;
}

/* Copy (the contact page's socials, phone and mail) */
.dds-pub-copy {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--dds-text-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--dds-radius-sm);
  transition: color var(--dds-duration-fast) var(--dds-ease-standard),
              background-color var(--dds-duration-fast) var(--dds-ease-standard);
}
.dds-pub-copy:hover { color: var(--dds-primary-dark); background: rgba(0, 123, 255, .08); }
.dds-pub-copy:focus-visible { outline: var(--dds-focus-ring); outline-offset: -2px; }
.dds-pub-copy .dds-material-icons { font-size: 20px; }
.dds-pub-copy.dds-pub-copied { color: var(--dds-primary-dark); }

/* ---- Status words in a row ------------------------------------------------------ */
.dds-pub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--dds-font-weight-medium);
  white-space: nowrap;
  color: var(--dds-text-muted);
}
.dds-pub-status::before {
  width: 7px;
  height: 7px;
  content: "";
  background: currentColor;
  border-radius: 50%;
}
.dds-pub-status--now { color: var(--dds-primary-dark); }
.dds-pub-status--soon { color: var(--dds-primary-dark); }
.dds-pub-status--soon::before { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* ---- Small blocks ------------------------------------------------------------- */
/* An answer with nothing to show yet (PKnoData) */
.dds-pub-empty { padding: 36px 8px; text-align: center; color: var(--dds-text-muted); }
.dds-pub-empty .dds-material-icons { display: block; margin: 0 auto 8px; font-size: 40px; color: #c4d3e6; }
.dds-pub-empty p { margin: 0; font-size: 16px; }

/* A total under a table (a league class's history) */
.dds-pub-total {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 15px;
  text-align: right;
  background: var(--dds-card-shade-1);
  border-radius: var(--dds-radius);
}
.dds-pub-total strong { font-weight: var(--dds-font-weight-medium); color: var(--dds-primary-dark); }

/* ---- Filter --------------------------------------------------------------------- */
.dds-pub-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
/* the button is a quiet one (10-buttons) in the card's header line; the bar
   in the body keeps the chips, and takes no room while there are none */
.dds-pub-filter:not(:has(.dds-pub-filter-btn, .dds-pub-chip)) { display: none; }
.dds-pub-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  min-height: 32px;
  padding: 3px 3px 3px 12px;
  font-size: 14px;
  font-weight: var(--dds-font-weight-medium);
  color: var(--dds-white);
  background: var(--dds-primary-hover);
  border-radius: var(--dds-radius-sm);
}
.dds-pub-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dds-pub-chip button {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--dds-radius-sm);
}
.dds-pub-chip button:hover { background: rgba(255, 255, 255, .18); }
.dds-pub-chip button:focus-visible { outline: 2px solid var(--dds-white); outline-offset: -2px; }
.dds-pub-chip .dds-material-icons { font-size: 16px; }

/* The filter dialog's lists */
.dds-pub-filter-list {
  max-height: min(48vh, 360px);
  margin: 8px 0 0;
  padding: 4px 0;
  overflow-y: auto;
  border: 1px solid var(--dds-pub-line);
  border-radius: var(--dds-radius);
}
.dds-pub-filter-list .dds-form-check { margin: 0; padding: 2px 12px; }
/* no hover fill on a row: the checkbox is the whole state */
.dds-pub-filter-list [hidden] { display: none; }
.dds-pub-filter-empty { margin: 0; padding: 6px 12px; font-size: 14px; color: var(--dds-text-muted); }
.dds-pub-filter-step + .dds-pub-filter-step { margin-top: 20px; }
/* each step's line: its title, and the list's small search at the end (.dds-search-line, 11-forms) */
.dds-pub-filter-title { font-size: 14px; font-weight: var(--dds-font-weight-medium); line-height: 1.42857; color: var(--dds-text); text-transform: none; }
.dds-pub-filter-hint { margin: 2px 0 0; font-size: 12px; color: var(--dds-text-muted); }

/* Highlighted rows: the row state .dds-row-highlight (14 §8, 21); nothing else dims */

/* ---- Heats (a start list grouped into heats in the browser) ---------------------
   The chosen division is one table in .dds-pub-heats with a row group per
   heat (14-tables §10d), so nothing here: the heading rows are the table's. */

/* ---- Footer ---------------------------------------------------------------------
   A white floor under the page card, across the main column, as tall as its
   content: on a page shorter than the screen the grey behind the card takes
   the extra room, so the footer sits at the bottom and never grows. The
   sponsors' logos stand on it as drawn (for a white page), then
   one line with the language switch (15-navigation §7) and, at its end, the
   mark and the version. On a phone that line is two: the languages, then the
   mark at the left and the version at the right. */
.dds-pub-footer {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 12px;
  font-size: 14px;
  color: var(--dds-text-muted);
  background: var(--dds-white);
}
.dds-pub-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px var(--dds-pub-gutter) 28px;
}
.dds-pub-footer-row {
  display: flex;
  align-items: center;
  gap: 12px 24px;
}
.dds-pub-sponsors + .dds-pub-footer-row { padding-top: 20px; border-top: 1px solid var(--dds-pub-line); }
.dds-pub-footer a { color: #555; text-decoration: none; }   /* the navbar ink: 7.5:1 on white */
.dds-pub-footer a:hover { color: var(--dds-primary-dark); }
.dds-pub-footer a:focus-visible { outline: var(--dds-focus-ring); outline-offset: 2px; border-radius: var(--dds-radius-sm); }
.dds-pub-footer .dds-langs-list a[aria-current] { color: var(--dds-text); }
.dds-pub-footer .dds-langs-menu .dds-dropdown-item:not([aria-current], :hover, :focus, :active) { color: var(--dds-text); }   /* hovered: 15's white on the blue fill */
.dds-pub-mark { display: block; width: auto; height: 18px; opacity: .75; }
.dds-pub-version { font-size: 12px; }
.dds-pub-footer-end { display: flex; flex: none; align-items: center; gap: 16px; margin-left: auto; }
.dds-pub-footer-end > .dds-pub-version { order: -1; }
@media (max-width: 639.98px) {
  .dds-pub-footer-inner { padding-top: 20px; }
  .dds-pub-footer-row { flex-wrap: wrap; }
  .dds-pub-footer-row > .dds-langs { flex-basis: 100%; }
  .dds-pub-footer-end { width: 100%; justify-content: space-between; margin-left: 0; }
  .dds-pub-footer-end > .dds-pub-version { order: 0; }
}
.dds-pub-sponsors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
  margin: 0 0 20px;
}
.dds-pub-sponsors img { width: auto; height: auto; max-width: 160px; max-height: 56px; }

@media (prefers-reduced-motion: reduce) {
  .dds-pub-back,
  .dds-pub-nav a,
  .dds-pub-row,
  .dds-pub-row-go,
  .dds-pub-copy,
  .dds-pub-filter-btn { transition: none; }
}