/* FOLD - BASE STYLES */
/* ===================================================================================


   GLOBAL STYLES
   
   
   =================================================================================== */
:root {
  --wk-darkpurple: #4b2a83;
  --wk-lightpurple: #c4a6e0;
  --wk-darkgray: #606060;
  --wk-gold: #ffdf5c;
}

body {
background: #fff;
color: #000;
}

html {
  scroll-behavior: smooth;
}

p {
  font-size: 16pt;
  line-height: 1.2em;
}

h1 {
font-size: 30pt;
color: var(--wk-darkpurple);
font-weight: 900;
line-height: 1;
}

a {
  color: #3b82f6; /* “link blue” – standard hex value */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------------

   BUTTONS
   
   ------------------------------------------------------------------------ */
   
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1.5px solid var(--wk-gold);
  font-size: 12pt;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s ease, letter-spacing 0.25s ease, padding 0.25s ease;
}

.btn-primary {
  background-color: var(--wk-darkpurple);
  color: #fff;
}

.btn-secondary {
  background: #fff;
  color: var(--wk-darkpurple);
  border: 1.5px solid var(--wk-darkpurple);
}

.btn-secondary:hover {
  background: #f3eefb;
  text-decoration: none;
}

.btn-grow-right {
  position: relative;
  padding-right: 44px; /* room for the chevron */
  transition: padding-right .25s ease;
}

/* Chevron */
.btn-grow-right::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;                   
  width: 11px;                   
  height: 11px;
  border-right: 2px solid var(--wk-gold);
  border-top: 2px solid var(--wk-gold);
  transform: translateY(-50%) rotate(45deg);  /* » */
  transition: right .25s ease, transform .25s ease;
  pointer-events: none;
}

.btn-grow-right:hover {
  padding-right: 58px; /* expand right */
}

.btn-grow-right:hover::after {
  right: 28px; /* gentle slide */
  transform: translateY(-50%) rotate(45deg);
}

/* Single Event page: prevent CTA links from stretching full-width in flex-col */
.wk-participant-page-title ~ a.btn {
  align-self: flex-start;  /* opt out of flex stretch */
  width: auto;             /* ensure it sizes to content */
}

/* ------------------------------------------------------------------------

   ALERTS
   
   ------------------------------------------------------------------------ */

.reg-card [data-flux-error],
.login-card-bg [data-flux-error] {
  display: none !important;
}

.alert {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid red;
  font-size: 12pt;
  line-height: 1.35;
  display: flex;
  gap: 3px;
  align-items: flex-start;
  margin-top: 10px;
}

.alert::before {
  content: "!";
  font-weight: 900;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12pt;
  background: red;
  color: inherit;
}

.alert-danger {
  background: white;       
  color: red;             
}

.alert-danger::before {
  background: #ef4444;    
  color: #fff;
}

.alert ul {
  margin: 0;
  padding-left: 8px;
}

.alert li {
  margin: 2px;
}

/* ------------------------------------------------------------------------

   HEADERS AND TOPBAR STYLES
   
   ------------------------------------------------------------------------ */
   
/* ------------------ REGISTRATION HEADER / TOPBAR ------------------  */

html, body { margin: 0; padding: 0; }

.hero-image-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}

.topbgimage {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.page-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Align topnav and topbar with same max width */
.topbar {
  display: flex;
  max-width: 1440px;
  height: 40px;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  background: #fff;
  margin: 0 auto;
  padding-left: 50px;
  box-sizing: border-box;
}

.topbar-logo {
  width: 35px;
  height: 35px;
  object-fit: contain;
  display: block;
}

.topbar-line {
  width: 1px;
  height: 25px;
  background-color: var(--wk-darkpurple);
}

.topbar-title {
  font-size: 15px;
  font-weight: 900;
  color: var(--wk-darkpurple);
  margin: 0;
  padding: 0;
  letter-spacing: -0.3px;
 margin-right: auto; /* push hamburger far right */
}

.topnavbar {
display: flex;
align-items: center;
  width: 100%;
  background: var(--wk-darkpurple);
  height: 40px;
}

/* Inner container for the links */
.topnavbar-inner {
  max-width: 1440px;
  width: 100%;
  height: 100%;
  margin: 0 auto;         /* centers 1440px container */
  display: flex;
  align-items: center;    
  justify-content: flex-start; 
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  box-sizing: border-box;
  gap: 20px;
  padding-left: 50px;
}

/* ------------------------------------------------------------------------

   LINK STYLES
   
   ------------------------------------------------------------------------ */

.topnavbar a {
  color: #fff;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.topnavbar a:hover {
  opacity: 0.65;
}

.topnav-secondary-mobile {
  display: none;
}

.mobile-menu-toggle {
  display: none; /* hidden on larger screens */
  background: var(--wk-darkpurple);
  border: none;
  height: 50px;            /* same as .topbar height */
  padding: 0 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
}

.mobile-menu-toggle span {
  display: block;
  width: 36px;
  height: 3px;
  background: #ffffff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* When menu is open (aria-expanded="true"), morph to an X */
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ------------------------------------------------------------------------

   FORM LABELING ADJUSTMENTS / LOGIN AND REGISTRATION
   
   ------------------------------------------------------------------------ */
   
/* ------------------ REG FORMS LABELING ------------------  */
   
.reg-card [data-flux-label],
.reg-card label {
  color: #3f3f46 !important;  /* approx Tailwind zinc-700 */
}

/* Helper / description text */
.reg-card .ui-description,
.reg-card ui-description,
.reg-card .text-zinc-500,
.reg-card .text-zinc-600 {
  color: #52525b !important;  
}

/* Badge styling inside reg-card */
.reg-card span.ml-1\.5[aria-hidden="true"] {
  background-color: #e5e5e5 !important;  
  color: #52525b !important;            
  border-radius: 999px !important;       
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== LOGIN FORMS LABELING ===== */

.login-card-bg [data-flux-label],
.login-card-bg label {
  color: #3f3f46 !important;  /* approx Tailwind zinc-700 */
}

/* Helper / description text */
.login-card-bg .ui-description,
.login-card-bg ui-description,
.login-card-bg .text-zinc-500,
.login-card-bg .text-zinc-600 {
  color: #52525b !important;  /* mid zinc gray */
}

/* REQUIRED badge styling inside login card */
.login-card-bg span.ml-1\.5[aria-hidden="true"] {
  background-color: #e5e5e5 !important;  /* light gray pill */
  color: #52525b !important;             /* dark gray text */
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-size: 8.25pt !important;          /* 11px → 8.25pt */
  font-weight: 500 !important;
  border: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== FORM INPUT TEXT FIX (MOBILE) ===== */

/* Input text color */
.reg-card input,
.reg-card textarea,
.login-card-bg input,
.login-card-bg textarea {
  color: #3f3f46 !important;
}

/* Placeholder color */
.reg-card input::placeholder,
.reg-card textarea::placeholder,
.login-card-bg input::placeholder,
.login-card-bg textarea::placeholder {
  color: #52525b !important;
  opacity: 1 !important; 
}

/* Autofill (iOS Safari + Chrome mobile) */
.reg-card input:-webkit-autofill,
.login-card-bg input:-webkit-autofill {
  -webkit-text-fill-color: #3f3f46 !important;
  transition: background-color 5000s ease-in-out 0s; /* suppress yellow bg */
}


/* FOLD - LANDING PAGE / LOGIN FORM / ABOUT INFO */
/* ===================================================================================


    LANDING PAGE / LOGIN FORM / ABOUT INFO
   
   
   =================================================================================== */

.login-center {
  width: 950px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.login-card {
  margin: -64px auto 60px;
  padding: 50px 75px;
  height: auto;
  min-height: unset;
  display: block;
  border-radius: 0;
   background: linear-gradient(var(--wk-darkpurple) 0 64px, #f5f5f5 64px 100%);
}

.login-card-bg {
  background: #ffffff;
  padding: 50px 75px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
  width: 600px;
  margin: 10px auto 0;
}

.login-title {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  margin:0;
  line-height: 64px;
  transform: translateY(-50px);
  font-weight: 900;
  font-size: 30pt; 
}

/* Welcome page overrides */
.login-card-bg form flux\:input,
.login-card-bg form input[type="email"],
.login-card-bg form input[type="password"] {
    width: 450px;
    height: 50px;
}

.login-card p {
color: var(--wk-darkpurple);
/* transform: translateY(-40px); */
/* margin-top: 50px; */
}


.register-text {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40px;
text-align: center;
font-size: 16px;
color: #333;
}

/* ------------------------------------------------------------------------

   ABOUT WALK KANSAS SECTION
   
   ------------------------------------------------------------------------ */
   
#about {
scroll-margin-top: 80px;
}

.wk-about {
text-align: center;
}

.about-callouts-mobile {
display: none;
}

.about-callouts {
display: flex;
gap: 30px;
justify-content: center;
margin-bottom: 40px;
margin-top: -10px;
}

.about-card {
  width: 225px;
  height: 125px;
  background: var(--wk-darkpurple);
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;   
}

.about-card h2 {
font-size: 28pt;
color: #fff;
font-weight: 900;
letter-spacing: 2px;
margin: 0;
padding: 0;
line-height: 1;
}

.about-card p {
font-size: 14pt;
color: var(--wk-gold);
margin: 0;
padding: 0;
line-height: 1;
}

/* ===== ABOUT PROGRAM BLURBS ===== */

.about-info {
  width: 100%;
  margin: 25px auto 0;
  box-sizing: border-box;
  display: flex;
  padding: 15px 0;
  text-align: left;
}

.about-info.reverse {
  flex-direction: row-reverse;
  text-align: right;
  margin-top: 40px;
}

.about-info:last-child {
margin: 40px auto 80px;
}

.about-info-content a,
.about-info-content.reverse a {
text-decoration: none;
}

.about-info-image {
flex: 0 0 45%;
}

.about-info-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* Content column – remaining width */
.about-info-content {
flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  align-content: center;
  justify-content: center;
}

.about-info-content.reverse {
  margin-right: 20px;
  margin-left: 0;
}

/* Header + body copy */
.about-info-content h3 {
  margin: 0 0 4px;
  padding-top: 20px;
  font-size: 20pt;
  font-weight: 500;
  color: var(--wk-darkpurple);
  border-top: 8px solid var(--wk-darkpurple);
}

.about-info-content p {
  margin: 0;
  line-height: 1.3em;
  font-size: 12pt;
  color: #000;
}

/* Icon + text row at the bottom */
.about-info-link {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 25px;
  border-bottom: 1.25px solid var(--wk-lightpurple);
  padding-bottom: 20px;
  cursor: pointer;          
}

/* Icon container */
.about-info-icon {
  background: transparent;
  border: 2px solid var(--wk-gold);
  width: 40px;
  height: 40px;
  padding:20px;             
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .5s ease;
  box-sizing: content-box;   /* makes width/height refer only to icon itself */
}

/* Circle hover */
.about-info-link:hover .about-info-icon {
  background: transparent;
  border-color: var(--wk-darkpurple);
}

.about-info-icon img {
  width: 40px;
  height: 40px;
  display: block;
}

.about-info-link span {
  font-size: 13pt;
  font-weight: 500;
  color: var(--wk-darkpurple);
  position: relative;
  display: inline-block;
  transition: color .5s ease;
}

/* Single underline bar */
.about-info-link span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--wk-gold);
  transition: background-color .5s ease;  /* <— smooth color change */
}

.about-info-link:hover span::before {
  background: var(--wk-darkpurple);
}


/* FOLD - REGISTRATION PAGES */
/* ===================================================================================


    REGISTRATION PAGES
   
   
   =================================================================================== */
   
/* ------------------------------------------------------------------------

   ABOUT YOU / SETUP ACCOUNT
   
   ------------------------------------------------------------------------ */

.reg-center {
  width: 600px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.reg-card {
  width: 600px;
  margin: -64px auto 100px;
  padding: 50px 75px;
  height: auto;
  min-height: unset;
  display: block;
  border-radius: 0;
   background: linear-gradient(var(--wk-darkpurple) 0 64px, #f5f5f5 64px 100%);
}

.reg-title {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  margin:0;
  line-height: 64px;
  transform: translateY(-50px);
  font-weight: 900; 
  font-size: 30pt; 
}

.reg-card p {
color: var(--wk-darkpurple);
/* transform: translateY(-40px); */
/* margin-top: 50px; */
}

form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;               /* fill the 750px panel */
  margin: 0 auto 0;
}

form flux\:input,
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
.group-select {
  width: 450px;
  height: 50px;
  border-radius: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--wk-darkpurple);
  margin: 0 0 20px 0;
}

form input[type="password"], 
.group-select {
	margin: 0;
}

/* Form buttons row */
.form-buttons {
  display: flex;
  gap: 20px;
  margin: 40px 0 0 0;
}

.form-divider-topbtm {
  width: 100%;
  border: 0;
  height: 1.25px;
  background-color: var(--wk-lightpurple);
  margin: 40px 0;
}

.form-divider-top {
  width: 100%;
  border: 0;
  height: 1.25px;
  background-color: var(--wk-lightpurple);
  margin: 40px 0 0 0;
}

.form-divider-section {
  width: 450px;
  border: 0;
  height: 1.25px;
  background-color: var(--wk-lightpurple);
  margin: 0 0 15px 0;
}

.form-divider-table {
  width: 100%;
  border: 0;
  height: 1.25px;
  border-top: 1px dashed var(--wk-lightpurple);
  margin: 20px 0 20px 0;
}

/* Login text under the divider */
.login-text {
  text-align: center;
  font-size: 12pt;
  color: #333;
}

.login-text a {
  text-decoration: none;
}

.login-text a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------------

   SETUP PROGRAM AND TEAM
   
   ------------------------------------------------------------------------ */

    .reg-card .wk-label {
    display: block;
    font-size: 11.25pt;
    line-height: 1.2;
    font-weight: 500;
    color: #404040;
    margin: 0 0 7px;
    text-align: left;
  }
  
.showifgroupselected {
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
}

.showifprogramselected {
  margin-top: 40px;
  padding: 0;
  border-top: 0;
}

.showifindivid {
  margin-top: 40px;
  padding: 0;
  border-top: 0;
}

#groupid {
margin: 0;
}

/* ===== PROGRAM SELECT ROWS ===== */

#progbuttons{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;          
  margin-top: 14px;
}

/* Each program = 2-row grid */
#progbuttons .progsel{
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 90px 1fr auto;  /* logo | content | price */
  grid-template-rows: auto auto;         /* row1: name+price, row2: desc */
  column-gap: 10px;
  row-gap: 10px;
  align-items: center;
  overflow: hidden; /* keeps selected bg clean */
  text-align: left;
  transition: opacity .2s ease, background-color .2s ease, border-color .2s ease, transform .05s ease;
}

/* Make nested name/desc behave like direct grid children */
#progbuttons .progsel .progtext{
  display: contents;
}

/* Logo cell */
#progbuttons .progsel .proglogo{
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  margin: 0;
  padding: 8px 0 8px 0;
  background: transparent;
}

/* Program logos */
.proglogo {
  content: url("/images/wk-icon-program-across.png");
}
.progsel[data-progid="2"] .proglogo {
  content: url("/images/wk-icon-program-around.png");
}
.progsel[data-progid="3"] .proglogo {
  content: url("/images/wk-icon-program-crosscountry.png");
  }
.progsel[data-progid="4"] .proglogo {
  content: url("/images/wk-icon-program-8wonders.png");
}

/* Name = row 1, col 2 */
#progbuttons .progsel .progname{
  grid-column: 2;
  grid-row: 1;
  font-weight: 900;
  font-size: 16pt;
  line-height: 1;
  color: var(--wk-darkpurple);
  padding-top: 14px;
}

/* Price = row 1, col 3 */
#progbuttons .progsel .progprice{
  grid-column: 3;
  grid-row: 1;
  font-weight: 900;
  font-size: 14pt;
  line-height: 1;
  color: var(--wk-darkpurple);
  white-space: nowrap;
  text-align: right;
  padding: 14px 12px 0 0;
  margin: 0;
}

/* Desc = row 2 spanning col 2-3 (under BOTH name + price) */
#progbuttons .progsel .progdesc{
  grid-column: 2 / 4;
  grid-row: 2;
  margin: 0;
  padding: 0 12px 14px 0;
  font-size: 11.25pt;
  line-height: 1;
}

/* remove global p padding/margins inside cards */
#progbuttons .progsel p{
  margin: 0;
  padding: 0;
}

#progbuttons .progsel:hover{
  opacity: .65;
}

#progbuttons .progsel:active{
  transform: translateY(1px);
}

/* Selected state (JS adds .selected) */
#progbuttons .progsel.selected{
  background: var(--wk-lightpurple);
}

/* container */
.segmented-control {
    display: flex;
    padding: 0;
    margin: 0;
    overflow: hidden;
    gap: 50px;
}

.segmented-control__item {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* hide native radio */
.segmented-control__input {
    position: absolute;
    opacity: 0;
}

/* label = whole clickable area */
.segmented-control__label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;                 
    padding: 0;
    font-size: 12pt;
    font-weight: 500;
    background: none;
    color: var(--wk-darkpurple);
}

/* radio icon (unselected) */
.segmented-control__label::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--wk-darkpurple);
    box-sizing: border-box;
    background: transparent;
    transition: background-color .2s ease, border-color .2s ease;
}

/* selected radio fill */
.segmented-control__input:checked + .segmented-control__label::before {
    background: radial-gradient(
        circle,
        var(--wk-lightpurple) 0 45%,     
        transparent 61% 100%      
    );
    border-color: var(--wk-darkpurple);
}

 #teamtojoin ui-description {
   font-size: 11.25pt;
    line-height: 1.2;
    font-weight: 500;
    color: #404040;
    margin: 24px 0 2px;
    text-align: left;
}

/* ------------------------------------------------------------------------

   POPULATE TEAM
   
   ------------------------------------------------------------------------ */

#teamtable {
  width: 100%;
  max-width: 450px;
  margin-top: 24px;
  border-collapse: collapse;
}

.team-row {
    display: flex;
  flex-direction: column;
  gap: 7px; 
}

.team-row-label {
    display: block;
    font-size: 11.25pt;
    line-height: 1.2;
    font-weight: 500;
    color: #404040;
    margin: 0 0 7px;
    text-align: left;
  }

/* Name + Email + Remove in one row */
.team-row-fields {
  display: flex;
  gap: 10px;           
  align-items: center;
}

/* Inside teamtable: kill the fixed 450px and let inputs flex */
#teamtable input[type="text"],
#teamtable input[type="email"],
#teamtable flux\:input {
  width: 100% !important;
  margin: 0;
  height: 50px;
  box-sizing: border-box;
}

/* Wrappers/flux inputs inside the row share width */
.team-row-fields .w-full,
.team-row-fields flux\:input {
  flex: 1 1 0;
  min-width: 0;
}

/* Remove button — overrides Flux styles */
#teamtable .team-row-fields .delrow {
  all: unset; /* wipes all Flux/utility defaults */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  padding: 3px 10px;
  background: var(--wk-lightpurple);
  color: var(--wk-darkpurple);
  font-size: 10px;
  font-weight: 900;
  border-radius: 15px;
  flex: 0 0 auto;
  white-space: nowrap;
}

#teamtable .team-row-fields .delrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-image: url('/images/wk-buttonicon-delete.png');
  background-size: cover;    
  margin-right: 4px;       
}

#teamtable .team-row-fields .delrow:hover {
  opacity: 0.65;
}

#addrow {
all: unset; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 15px;
  padding: 3px 10px;
  background: var(--wk-lightpurple);
  color: var(--wk-darkpurple);
  font-size: 7.5pt;
  font-weight: 900;
  border-radius: 15px;
  flex: 0 0 auto;
  white-space: nowrap;
  margin-top: 25px;
}

#addrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-image: url('/images/wk-buttonicon-add.png');
  background-size: cover;     
  margin-right: 4px;         
}

#addrow:hover {
  opacity: 0.65;
}

/* ------------------------------------------------------------------------

   CHECKOUT AND PAY
   
   ------------------------------------------------------------------------ */

.checkout-summary {
  width: 100%;
}

.checkout-table thead th {
  padding: 0 15px 10px 0;
  font-size: 10pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
}

.checkout-table {
  width: 100%;
  border-collapse: collapse;
  padding-right: 50px;    
  text-align: left;
}

.checkout-total-amount {
text-align: center;
}

.checkout-total-row {
  font-size: 10pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
}

.checkout-total-amount {
  font-size: 10pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
  background: var(--wk-lightpurple);
  }

/* Discount row (after code applied) */
.discrow td {
  font-size: 10pt;
  font-weight: 700;
}

/* Discount area */
.checkout-discount-text {
  font-size: 10pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
  margin-bottom: 7px;
}

.checkout-discount-inputs {
  display: flex;
  align-items: center;
}

.checkout-input {
   width: 225px;
  height: 50px;
  border-radius: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--wk-darkpurple);
  background: #fff;
  outline: none;
}

#disccode {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-zinc-700);
  padding: 0.45rem 0.6rem;
  width: 200px;
  outline: none;
}

/* Buttons */
.checkout-actions {
margin: 0;
}

.checkout-buttons,
#freecheck {
  margin: 40px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.checkout-button {
  border-radius: 999px;
  border: 2px solid var(--wk-darkpurple);
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
  background-color: transparent;
  color: var(--wk-darkpurple);
}

.checkout-button:hover {
  opacity: 0.65;
}

.checkoutbutt.is-active {
  background: var(--wk-gold);
  color: var(--wk-darkpurple);
}

.checkout-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;       
  background: var(--wk-lightpurple);
  color: var(--wk-darkpurple);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 15px;
  cursor: pointer;
  margin-left: 20px;
  border: none;
}

.checkout-button-secondary::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-image: url('/images/wk-buttonicon-apply.png'); /* or a new apply icon */
  background-size: cover;
  margin-right: 4px;
}

.checkout-button-secondary:hover {
  opacity: 0.65;
}

.checkout-dynamic {
margin-top: 0;
}

.checkout-dynamic br {
  display: none;
}

.checkout-dynamic form {
margin: 0;
}

.checkout-dynamic p {
    font-size: 16pt;
  line-height: 1.2em;
}

.checkout-dynamic p:first-of-type {
margin-top: 40px;
}

.checkout-dynamic p:nth-of-type(2) {
  margin-top: 18px;
}

/* FOLD - PARTICIPANT DASHBOARD */
/* ===================================================================================


    PARTICIPANT DASHBOARD
   
   
   =================================================================================== */
   
/* ------------------------------------------------------------------------

   TOPBAR LINKS / SECONDARY
   
   ------------------------------------------------------------------------ */

.topbar-dash {
padding-right: 50px;
}

.topbar-link {
  cursor: pointer;
  font-size: 15px;
  color: var(--wk-darkpurple);
  text-decoration: none;
  padding: 2px 4px;            
}

.topbar-link:hover {
  text-decoration: none;
  opacity: .65;
}

/* ------------------------------------------------------------------------

   TOPBAR LINKS / PRIMARY
   
   ------------------------------------------------------------------------ */
.topnavbar-inner-dash{
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
  flex-wrap: nowrap;           
}

.topnav-left,
.topnav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topnav-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;                         
  flex-wrap: nowrap;
  white-space: nowrap;            /* keeps “Your Account” on one line */
}

.topnav-right .topnavlink{
  white-space: nowrap;
  display: inline-block;
}

.topnav-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;           /* matches left spacing */
  white-space: nowrap;
}

.topnav-logout-form {
  display: inline-flex;   /* keeps it inline + aligns like a link */
  margin: 0;
}

.topnav-logout-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;         /* stays white like other links */
  cursor: pointer;
  text-decoration: none;
}

.topnavlink.topnav-logout-button:hover {
text-decoration: none;
}

.topnavlink.is-active {
  font-weight: 900;
  opacity: 1;
  text-decoration: none; 
  color: var(--wk-gold);
}

.topnavbar .topnavlink.is-active {
  opacity: 1;
}


/* ------------------------------------------------------------------------

   ABOVE BENTO HEADER / CHALLENGE & YOUR TEAM
   
   ------------------------------------------------------------------------ */

.wk-dash-toprow{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 50px;
  margin: 60px 0 0;
}

/* Make both columns stack identically */
.wk-dash-challenges,
.wk-dash-myteam{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* Match heading styling + ensure identical box behavior */
.wk-dash-challenges h1,
.wk-dash-myteam h1{
  margin: 0;
  padding: 0;
  font-size: 20pt;
  font-weight: 900;
  line-height: 1.1;
  color: var(--wk-darkpurple);
  display: block;
}

.wk-dash-challenges p,
.wk-dash-team-link{
  margin: 6px 0 0;
  font-size: 12pt;
  line-height: 1.2;
}

/* Challenge value should not inherit global p spacing */
.wk-dash-challenges p{
  display: block;
}

/* Team name link: must be non-inline so margin-top works */
.wk-dash-team-link{
  display: inline-block;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  cursor: pointer;
}

/* Match dash module chevrons */
.wk-dash-team-link::after{
  content: " >";
  font-size: 12pt;
  line-height: 1;
}

.wk-dash-team-link:hover{
  opacity: 0.65;
  text-decoration: none;
}

/* ------------------------------------------------------------------------

   PARTICIPANT DASH BENTO MODULES
   
   ------------------------------------------------------------------------ */

.page-wrapper {
  padding-left: 50px;
  padding-right: 50px;
  box-sizing: border-box;
}

.wk-dash-grid {
  display: grid;
  gap: 26px;
   grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "log notifications notifications"
    "log map            map"
    "log map       map"
    "badges resources      leaderboard"
    "events-cal events-list events-list";
    margin-bottom: 80px;
}

/* Base tile look (wireframe-level) */
.wk-dash-tile {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 16px 20px;
  background: #f8f8f8;
}

/* Area assignments */
.wk-dash-log-cta      { grid-area: log; }
.wk-dash-notifications{ grid-area: notifications; }
.wk-dash-totals       { grid-area: unset; }
.wk-dash-map          { grid-area: map; }
/* .wk-dash-waypoint     { grid-area: waypoint; } */
.wk-dash-badges       { grid-area: badges; }
.wk-dash-resources    { grid-area: resources; }
.wk-dash-leaderboard  { grid-area: leaderboard; }

/* Notifications tile + internal scroll */
.wk-dash-notifications {
  max-height: 250px;
  overflow: hidden; /* tile frame does not scroll */
  position: relative;
}

.wk-dash-notifications-inner {
  max-height: 200px;   /* inner scrollable region */
  overflow-y: auto;
  padding-right: 6px;  /* space so scrollbar doesn't overlap text */
}

.wk-dash-unreads-title {
  margin: 8px 0 4px;
  font-size: 11pt;
  font-weight: 600;
}

/* ------------------------------------------------------------------------

   BENTO MODULES STANDARDS

   ------------------------------------------------------------------------ */

.wk-dash-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.wk-dash-container-name {
  font-size: 11pt;
  font-weight: 600;
  color: var(--wk-darkpurple);
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* Standard dash "link button" */
.wk-dash-link,
.wk-dash-badges #allbadgediv a {
  font-size: 11pt;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  white-space: nowrap;
}

.wk-dash-link:hover,
.wk-dash-badges #allbadgediv a:hover {
  opacity: 0.65;
  text-decoration: none;
}

.wk-dash-link::after,
.wk-dash-badges #allbadgediv a::after {
  content: " >";
}

/* ------------------------------------------------------------------------

   DASH LOGGING MODULE

   ------------------------------------------------------------------------ */
   
   .logboxhead {
   display: none;
   }
   
   .wk-dash-log-empty {
  margin-bottom: 32px;
  color: #fff;
}

/* ------------------ LOGGING SELECTOR ------------------  */

.wk-dash-log-cta {
background-color: var(--wk-darkpurple);
}

.wk-dash-log-cta .wk-dash-container-name {
color: #fff;
margin-top: -10px;
}

.wk-dash-log-cta .wk-dash-container-name:nth-of-type(2) {
color: #fff;
margin: 0;
padding: 0;
}

.wk-dash-log-cta #logbox .logboxrow {
display: block;
font-size: 11pt;
font-weight: 600;
color: #fff;
  justify-content: center;
  align-items: center;   /* this is correct */
}

.wk-dash-log-cta #logbox .logboxrow:has(#logfor),
.wk-dash-log-cta #logbox .logboxrow:has(#logboxdate){
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

#logfor,
#logboxdate {
min-width: 160px;
border: 1px solid var(--wk-lightpurple);	
}

.wk-dash-log-cta #logbox .logboxrow:has(#logboxdate){
  margin-top: 10px;
}

.wk-dash-log-cta #logbox .logboxrow.logtyperow {
  display: grid;
  grid-template-columns: repeat(4, 90px); /* 👈 fixed tracks */
  justify-content: space-between;         /* or center (see note) */
  column-gap: 0;
  gap: 0;
  padding: 20px 0;
  justify-items: center;
  align-items: start;
  margin: 20px auto 0;
  border-top: 1px solid var(--wk-lightpurple);
width: min(420px, 100%);
}

.wk-dash-log-cta #logbox .logtypeitem {
  width: 90px;
  height: 140px;                 /* key: fixed tile height so centering is real */
  padding-left: 0;
  padding-right: 0;
  display: flex;                 /* center stack reliably */
  flex-direction: column;
  justify-content: center;        /* vertical centering */
  align-items: center;            /* horizontal centering */
  gap: 6px;                       /* replaces the negative margin hack */
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  color: #fff;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.wk-dash-log-cta #logbox .logtypeitem:hover {
  opacity: 0.65;
}

/* Selected tile (centered behind the circle because the element IS the tile) */
.wk-dash-log-cta #logbox .logtypeitem.selected {
  background: #fff;
  opacity: 1;
  color: var(--wk-darkpurple);
}

/* Hide inline SVG icons */
.wk-dash-log-cta #logbox .logtypeitem svg {
  display: none;
}

/* Icon circle + PNG */
.wk-dash-log-cta #logbox .logtypeitem::before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* Label text (generated) */
.wk-dash-log-cta #logbox .logtypeitem::after {
  content: ""; /* set per type below */
    white-space: pre-line; /* allows \A line breaks */
  display: block;
  font-size: 11pt;
  font-weight: 600;
  line-height: 1.2;
}

/* Labels by type */
.wk-dash-log-cta #logbox .logtypeitem[data-type="activity"]::after { content: "Daily\A Walking"; }
.wk-dash-log-cta #logbox .logtypeitem[data-type="water"]::after    { content: "Glasses of\A Water"; }
.wk-dash-log-cta #logbox .logtypeitem[data-type="fruit"]::after    { content: "Fruits and\A Veggies"; }
.wk-dash-log-cta #logbox .logtypeitem[data-type="strength"]::after { content: "Strength\A Training"; }

/* Icon hooks – transparent PNGs */
.wk-dash-log-cta #logbox .logtypeitem[data-type="activity"]::before { background-image: url("/images/wk-icon-walking.png"); }
.wk-dash-log-cta #logbox .logtypeitem[data-type="water"]::before    { background-image: url("/images/wk-icon-water.png"); }
.wk-dash-log-cta #logbox .logtypeitem[data-type="fruit"]::before    { background-image: url("/images/wk-icon-fruitveg.png"); }
.wk-dash-log-cta #logbox .logtypeitem[data-type="strength"]::before { background-image: url("/images/wk-icon-strength.png"); }

/* ------------------ LOGGING SELECTOR - ACTIVITY CONTROLS ------------------  */

/* Units (minutes / steps) */
.wk-dash-log-cta #logbox #units {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
  font-size: 11pt;
  font-weight: 600;
  color: #fff;
}

.wk-dash-log-cta #logbox #units input[type="radio"] {
  transform: scale(1.25);
}

#lognum {
padding: 0;
margin: 0;
}

/* Numeric input */
.wk-dash-log-cta #logbox #lognum {
  display: flex;
    align-items: center;
  justify-content: center;
  text-align: center;
   padding: 0 0 0 34px;
  width: min(420px, 100%);
  margin: 0 auto;
  border-radius: 5px;
  line-height: 0;
  height: auto;
  font-size: 45pt;
  font-weight: 900;
  color: var(--wk-darkpurple);
  background: #fff;
  box-sizing: border-box;
}

/* Strength training row: keep checkbox + label on one line */
.wk-dash-log-cta #logbox .logboxrow #didstrength {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;
  transform: scale(1.25);
}

/* Submit row */
.wk-dash-log-cta #logbox .logboxrow.submitrow {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* Update button */
.logboxsubbutt {
   display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;       
  background: var(--wk-lightpurple);
  color: var(--wk-darkpurple);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 15px;
  cursor: pointer;
  margin-left: 20px;
  border: none;
}

.logboxsubbutt::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background-image: url('/images/wk-buttonicon-apply.png'); /* or a new apply icon */
  background-size: cover;
  margin-right: 4px;
}

.logboxsubbutt:hover {
  opacity: 0.65;
}

.wk-dash-log-cta #logbox .logboxrow.submitrow {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--wk-lightpurple);
}

/* ------------------ ACTIVITY TRACKER ------------------  */

#progressbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0; 
}

/* Default: each progressrow takes one column */
#progressbox .progressrow {
  margin: 0; /* neutralize any legacy row spacing */
  padding: 0;
}

/* Force “twoacross rows” to span both columns (stay stacked) */
#progressbox .progressrow:has(.progresstwoacross) {
display: grid;
  grid-column: 1 / -1;
}

/* Force “twoacross rows” to span both columns (stay stacked) */
#progressbox .progressrow:has(.progressoneacross) {
  border-bottom: 1px dashed var(--wk-lightpurple);
}

.progressoneacross {
display: flex;
  align-items: center;
  align-content: flex-start;
  gap: 0;
   padding: 8px 0 6px 0;
}

/* Two-across rows (averages) */
.progresstwoacross {
  display: flex;
  align-items: center;
  padding: 8px 0 8px 0;
  border-bottom: 1px dashed var(--wk-lightpurple);
  
}

#progressbox .progressrow:last-child .progresstwoacross:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Big headline numbers (Team Miles / Your Miles) */
.progressoneacross .teamnum,
.progressoneacross .mynum {
  display: block;
  font-size: 45pt;
  font-weight: 900;
  line-height: 1;
  color: var(--wk-lightpurple);
}

.mynum {
  display: block;
  font-size: 22pt;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.bigdesc {
color: var(--wk-lightpurple);
line-height: 1;
padding-left: 5px;
}

.progresstwoacross .bigdesc {
color: #fff;
}

/* FOLD PARTICIPANT DASH - NOTIFICAITONS, MAP, BADGES, RESOURCES, LEADERBOARD, CALENDAR, EVENTS */
/* ------------------------------------------------------------------------

   NOTIFICATIONS

   ------------------------------------------------------------------------ */

/* Make the tile title match other tiles */
.wk-dash-notifications > .wk-dash-tile-header {
  margin-bottom: 10px; /* matches your other tiles */
}

/* Keep existing fixed-height + inner scroll approach */
.wk-dash-notifications {
  max-height: 220px;
  overflow: hidden;
    background: transparent;
  border: 0;
  border-left: 1px solid #e0e0e0;;
  border-radius: 0;
  padding-left: 16px; /* replaces visual padding lost by border removal */
}

.wk-dash-notifications .wk-dash-link {
  color: #3b82f6;
}

.wk-dash-notifications-inner {
  max-height: 180px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Link wrapper for the Message Wall row */
.wk-dash-notif-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* “Message Wall” row – keep as your header row, but make it feel clickable */
.wk-dash-notifications-header {
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Unread count bubble */
.unreadbubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10pt;
  font-weight: 700;
  line-height: 1;
  background: var(--wk-darkpurple);
  color: #fff;
}

/* Notification list */
.wk-dash-notif-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Each notification item */
.wk-dash-notif-item {
  border: 1.5px solid #e5e5e5;
  border-radius: 5px;
  background: #fff;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1fr;
}

/* Unread emphasis (subtle) */
.wk-dash-notif-item.is-unread {
  background: #f3f1ff; /* close to your light purple family without adding tokens */
  border-color: #d9d3ff;
}

/* Title + body */
.wk-dash-notif-title {
  font-size: 11pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
  line-height: 1.2;
  margin-bottom: 4px;
}

.wk-dash-notif-message {
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.25;
  color: var(--wk-darkgray);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Timestamp / meta */
.wk-dash-notif-meta {
  margin-top: 6px;
  font-size: 9pt;
  font-weight: 600;
  color: var(--wk-darkgray);
}

/* Type accents (minimal; border-left only) */
.wk-dash-notif-item.wk-dash-notif-info    { border-left: 6px solid #3b82f6; }
.wk-dash-notif-item.wk-dash-notif-success { border-left: 6px solid #22c55e; }
.wk-dash-notif-item.wk-dash-notif-warning { border-left: 6px solid #f59e0b; }
.wk-dash-notif-item.wk-dash-notif-error   { border-left: 6px solid #ef4444; }

/* Empty state */
.wk-dash-notif-empty {
  margin: 0;
  font-size: 11pt;
}

/* ===========================
   DASH: Notifications responsive
   =========================== */

@media (max-width: 1024px) {
  .wk-dash-notifications { max-height: 240px; }
  .wk-dash-notifications-inner { max-height: 200px; }
}

@media (max-width: 768px) {
  .wk-dash-notifications { max-height: 260px; }
  .wk-dash-notifications-inner { max-height: 220px; }
}

@media (max-width: 600px) {
  .wk-dash-notifications { max-height: 280px; }
  .wk-dash-notifications-inner { max-height: 240px; }

  .wk-dash-notif-item {
    padding: 10px 10px;
  }

  .wk-dash-notifications-header {
    margin-bottom: 8px;
  }
}

/* ===========================

   DASH: Map + Waypoint tile (CLEAN FULL)
   
   =========================== */

/* Fallback if header wrapper isn't present for any reason */
.wk-dash-map > h2 {
  margin: 0 0 10px;
  font-size: 11pt;
  font-weight: 600;
  color: var(--wk-darkpurple);
  line-height: 1.2;
}

/* Neutralize any legacy layout that can create “ghost space” */
.wk-dash-map #progholder {
  display: block !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.wk-dash-map #progholderright {
  position: static !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: both !important;
}

/* Full-width map */
.wk-dash-map #map {
  width: 100%;
  height: 360px;
  border-radius: 5px;
  overflow: hidden;
  background: #eaeaea;
}

/* Waypoint block sits 30px under the map */
.wk-dash-map #progholderright.wk-map-waypoint {
  margin-top: 30px !important;
}

/* ===========================
   Waypoint: 2x2 grid layout
   Row 1: head (L) | subhead (R)
   Row 2: image (L) | desc (R)
   =========================== */

.wk-dash-map #progholderright.wk-map-waypoint {
  display: grid !important;

  /* Key: image column has a floor + ceiling to prevent overlap */
  grid-template-columns: minmax(180px, 35%) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "head  sub"
    "image desc";
  column-gap: 20px;
  row-gap: 10px;
  align-items: start;
}

/* Typography */
.wk-dash-map #curpointhead {
  grid-area: head;
  font-size: 13pt;
  font-weight: 600;
  color: var(--wk-darkpurple);
  line-height: 1.2;
  margin: 0;
  min-width: 0; /* allow wrapping if needed */
}

.wk-dash-map #curpointsubhead {
  grid-area: sub;
  font-size: 10pt;
  font-weight: 600;
  color: var(--wk-darkgray);
  line-height: 1.2;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* Image cell */
.wk-dash-map #curpointimage {
  grid-area: image;
  margin: 0;
  min-width: 0;
}

.wk-dash-map #curpointimage img {
  width: 100%;
  height: auto;
  max-width: 350px;     /* “bigger image” cap */
  object-fit: contain;
  display: block;
}

/* Description cell */
.wk-dash-map #curpointdesc {
  grid-area: desc;
  font-size: 11pt;
  line-height: 1.25;
  margin: 0;

  /* Key: prevents overflow/overlap when narrow */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* Neutralize any legacy clears/floats */
  clear: none !important;
  float: none !important;
}


/* ===========================
   DASH: Recent Badges (match Resources)
   =========================== */

.wk-dash-badges{
  position: relative;
}

.wk-dash-badges #allbadgediv{
  position: absolute;
  top: 12px;
  right: 16px;
}

.wk-dash-badges .recent_badges{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.wk-dash-badges .recent_badge{
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: min-content min-content;
  column-gap: 12px;
  row-gap: 8px;              /* <-- your final spacing */
  padding: 12px 0 15px 0;
  align-items: start;
  border-bottom: 1px dashed #e0e0e0;
}

.wk-dash-badges .recent_badge + .recent_badge{
  border-bottom: none;
  padding: 15px 0 12px 0; 
}

.wk-dash-badges .recent_badge .badgeimage{
  width: 100px;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 100px;
  object-fit: contain;
  display: block;
  margin: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}

.wk-dash-badges .recent_badge .badgename{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.15;
  color: #000;
  align-self: end;           /* title bottom of row */
}

.wk-dash-badges .recent_badge .badgedesc{
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  padding: 0;
  font-size: 11pt;
  line-height: 1.2;
  align-self: start;         /* desc top of row */
}

/* --- DASH: Badges encouragement footer --- */
/* Decided to hide this but keeping for reinstatement if needed - JK */
/* .wk-dash-badges-footer{
  margin: 8px 0 0;
  padding-top: 18px;
  border-top: 1px dashed #e0e0e0;

  text-align: center;
  font-size: 11pt;
  font-weight: 500;
  line-height: 1.3;
} */


/* ===========================

   DASH: Resources tile (match Badges header + link behavior)
   
   =========================== */

.wk-dash-resources {
position: relative;
}

.wk-dash-resources .catswitcherp {
position: absolute; 
 top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  /* border-top: 1px dashed #e0e0e0; */
  gap: 5px;
  font-size: 11pt;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;
}

.wk-dash-resources select#catswitcher{
	max-width: 140px;
  border: 1px solid var(--wk-lightpurple);
  border-radius: 5px;
  background: #fff;
  font-size: 11pt;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}



/* ---------------------------------------------------
   Mobile behavior
--------------------------------------------------- */

@media (max-width: 768px){
  .wk-dash-resources .catswitcherp{
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .wk-dash-resources select#catswitcher{
    width: 100%;
    max-width: 260px; /* keeps it from going full-stretch wild */
  }
}

@media (max-width: 600px){
  .wk-dash-resources .catswitcherp{
    margin-top: 14px; /* tiny bump for thumb-friendly spacing */
  }
}

.rsrclistitem {
  display: grid;
  grid-template-columns: 100px 1fr;  /* we can bump to 100px next */
  column-gap: 12px;
  align-items: center;              /* prevents baseline/stretch quirks */
}

.rsrcimg img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
}

.rsrccontent {
  display: flex;
  flex-direction: column;
  gap: 6px;                        /* <-- consistent distance every time */
  min-width: 0;
}

.rsrctitle {
  font-size: 13pt;
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  color: #000;
}

.rsrcexcerpt {
  font-size: 11pt;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.wk-dash-resource-link {
  display: block;
  text-decoration: none;
  color: inherit;
   padding: 12px 0 15px 0;
}

.wk-dash-resource-link + .wk-dash-resource-link {
  border-top: 1px dashed #e0e0e0;
  padding: 15px 0 12px 0;
}

.wk-dash-resources > p {
  font-size: 11pt;
  line-height: 1.25;
  margin: 0;
}

.page-wrapper .regslot > .flex.flex-col {
  margin-bottom: 80px;
}



/* ===========================
   DASH: Leaderboard tile baseline (match Badges/Resources)
   =========================== */

/* Turn the existing "Open Leaderboard" button into a dash-link style CTA */
.wk-dash-leaderboard .btn.btn-secondary {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  font-size: 11pt;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  white-space: nowrap;
}

.wk-dash-leaderboard .btn.btn-secondary:hover {
  opacity: 0.65;
  text-decoration: none;
}

/* Add the same arrow affordance as wk-dash-link */
.wk-dash-leaderboard .btn.btn-secondary::after {
  content: " >";
}

/* A11y: visible keyboard focus without changing tokens */
.wk-dash-leaderboard .btn.btn-secondary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* ===========================

   DASH: Leaderboard snapshot table
   
   =========================== */

.wk-dash-leaderboard #leaderboardtable{
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px; /* matches .wk-dash-leaderboard-snapshot spacing */
}

/* Header row (TEAM / TRAIL PROGRESS) */
.wk-dash-leaderboard #leaderboardtable thead th{
  font-size: 13pt;
  font-weight: 900;
  line-height: 1.2;
  color: #000;
  text-transform: uppercase;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #e0e0e0; /* same as your snapshot divider vibe */
}

.wk-dash-leaderboard #leaderboardtable th:first-child,
.wk-dash-leaderboard #leaderboardtable td:first-child{
  text-align: left;
  width: 100%;
} 

.wk-dash-leaderboard #leaderboardtable th:last-child,
.wk-dash-leaderboard #leaderboardtable td:last-child{
  text-align: right;
  white-space: nowrap;
}

/* Body rows */
.wk-dash-leaderboard #leaderboardtable tbody td{
  font-size: 13pt;
  font-weight: 500;
  line-height: 1.2;
  padding: 10px 0;
  border-top: 1px dashed #e0e0e0; /* matches .wk-dash-leaderboard-row */
  vertical-align: top;
}

/* First row: no dashed line above */
.wk-dash-leaderboard #leaderboardtable tbody tr:first-child td{
  border-top: 0;
  padding-top: 16px;
}

/* Right-align the progress/metric column */
.wk-dash-leaderboard #leaderboardtable tbody td:last-child{
  text-align: right;
  white-space: nowrap;
}

/* Safety: keep long team names from breaking layout */
.wk-dash-leaderboard #leaderboardtable td:first-child{
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 16px;
}


/* ==========================================================
   DASH: EVENTS (calendar + upcoming) — CONSOLIDATED OVERWRITE
   ========================================================== */

/* Ensure Events row is Calendar (col 1) + Upcoming (cols 2–3) */
.wk-dash-grid {
  grid-template-areas:
    "log notifications notifications"
    "log map            map"
    "log map            map"
    "badges resources   leaderboard"
    "events-cal events-list events-list";
}

.wk-dash-events-cal  { grid-area: events-cal; }
.wk-dash-events-list { grid-area: events-list; }

/* ===========================
   Calendar (calhtml)
   Markup: .moname + table.mocal + tr.moweek + td.moday(.inmonthhasevents) + .eventmarker
   =========================== */

/* Month label: align with Upcoming first row (“Moon Dance”) */
.wk-dash-events-cal .moname {
  margin: 0;                 /* remove extra vertical offset */
  padding: 12px 0;           /* match .listrow vertical rhythm */
  min-height: 34px;          /* match .listdate height */
  display: flex;
  align-items: center;       /* vertical align with Moon Dance line */
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.2;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Calendar surface */
.wk-dash-events-cal table.mocal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;       /* “tile day” look */
  background: transparent;
}

.wk-dash-events-cal tr.moweek {
  background: transparent;
}

/* Day cells */
.wk-dash-events-cal td.moday {
  position: relative;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  text-align: center;
  vertical-align: middle;
  padding: 10px 0;
  min-width: 34px;
  font-size: 10pt;
  font-weight: 700;
  line-height: 1;

  user-select: none;
}

/* Days in current month */
.wk-dash-events-cal td.moday.inmonth {
  color: #000;
}

/* If a day is linked, make the anchor fill the cell */
.wk-dash-events-cal td.moday a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  margin: -10px 0;
  color: inherit;
  text-decoration: none;
}

/* Event days: highlight the entire cell (no dot) */
.wk-dash-events-cal td.moday.inmonthhasevents {
  background: rgba(196, 166, 224, 0.18); /* wk-lightpurple tint */
  border-color: var(--wk-lightpurple);
}

/* Kill the marker completely (removes purple + lingering black dot) */
.wk-dash-events-cal td.moday.inmonthhasevents .eventmarker,
.wk-dash-events-cal td.moday.inmonthhasevents .eventmarker::before {
  display: none !important;
  content: none !important;
}



/* Optional today hook */
.wk-dash-events-cal td.moday.is-today,
.wk-dash-events-cal td.moday.today {
  border-color: var(--wk-darkpurple);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wk-gold);
}

/* ===========================
   Upcoming list (listhtml)
   Markup: .listrow > .listdate + a > .listtitle
   =========================== */

.wk-dash-events-list .listrow {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 12px 0;
}

.wk-dash-events-list .listrow + .listrow {
  border-top: 1px dashed #e0e0e0;
}

/* Date chip */
.wk-dash-events-list .listdate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #e0e0e0;

  font-size: 11pt;
  font-weight: 900;
  line-height: 1;
  color: var(--wk-darkpurple);
}

/* Anchor fills the title cell */
.wk-dash-events-list .listrow > a {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Title */
.wk-dash-events-list .listtitle {
  margin: 0;
  padding: 0;
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.2;
  color: #3b82f6;
}

.wk-dash-events-list .listtitle::after {
  content: " ›";
  font-weight: 700;
  margin-left: 4px;
}

/* Subtle motion parity with other small links */
.wk-dash-events-list .listrow > a:hover .listtitle::after {
  transform: translateX(2px);
}

.wk-dash-events-list .listrow > a:hover .listtitle {
  opacity: 0.65;
}

.wk-dash-events-list .listrow > a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 5px;
}

/* ===========================
   Responsive (600px)
   =========================== */

@media (max-width: 600px) {
  .wk-dash-events-cal table.mocal {
    border-spacing: 5px;
  }

  .wk-dash-events-cal td.moday,
  .wk-dash-events-cal td.moday a {
    padding: 9px 0;
  }

  .wk-dash-events-cal td.moday {
    font-size: 9pt;
  }

  .wk-dash-events-cal .moname {
    font-size: 12pt;
    min-height: 32px;
    padding: 10px 0;
  }

  .wk-dash-events-list .listrow {
    grid-template-columns: 40px 1fr;
    column-gap: 10px;
    padding: 10px 0;
  }

  .wk-dash-events-list .listdate {
    width: 40px;
    height: 32px;
    font-size: 10pt;
  }

  .wk-dash-events-list .listtitle {
    font-size: 12pt;
  }
}


/* FOLD - DASH MODALS AND POPUPS STYLING */
/* ------------------------------------------------------------------------

   MODALS AND POPUPS

   ------------------------------------------------------------------------ */

/* ==========================================================
   DASH: New Badge popup (jQuery UI dialog)
   - Styled to match Flux modals
   - Scoped to the dialog that contains #newbadge-dialog
   - Badges display as a wrapping flex grid
   ========================================================== */

/* --------------------------
   Backdrop (match Flux)
   -------------------------- */
.ui-widget-overlay{
  background: #000 !important;
  opacity: 0.65 !important;
  z-index: 9998 !important;
}

/* --------------------------
   Modal shell (match Flux)
   -------------------------- */
.ui-dialog:has(#newbadge-dialog){
  z-index: 9999 !important;

  width: min(560px, calc(100vw - 48px)) !important;
  max-width: 560px !important;

  border: none !important;
  border-radius: 5px !important;
  overflow: hidden !important;

  background: linear-gradient(
    to bottom,
    var(--wk-darkpurple) 0,
    var(--wk-darkpurple) 64px,
    #ffffff 64px,
    #ffffff 100%
  ) !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25) !important;
}

/* --------------------------
   Titlebar (purple band)
   -------------------------- */
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar{
  background: transparent !important;
  border: 0 !important;
  padding: 18px 18px 0 !important;
  margin: 0 !important;
  height: 64px !important;
  box-sizing: border-box;
}

.ui-dialog:has(#newbadge-dialog) .ui-dialog-title{
  color: #fff !important;
  font-size: 13pt !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

/* --------------------------
   Close button (white outline + white X)
   -------------------------- */
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close{
  top: 14px !important;
  right: 14px !important;

  width: 35px !important;
  height: 35px !important;
  margin: 0 !important;
  padding: 0 !important;

  position: absolute !important; /* anchor ::before */
  border-radius: 5px !important;
  border: 2px solid #fff !important;
  background: transparent !important;
  cursor: pointer !important;

  /* ✅ KILL jQuery UI “double border” chrome */
  box-shadow: none !important;
  background-image: none !important;
  outline: none !important;

  /* ✅ Hide the literal "Close" text without affecting ::before */
  text-indent: -9999px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Kill any built-in icon/spacer so only our X shows */
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close .ui-icon,
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close .ui-button-icon-space{
  display: none !important;
}

/* Some jQuery UI themes add pseudo chrome */
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close::after{
  content: none !important;
  box-shadow: none !important;
  background: none !important;
  border: 0 !important;
}

/* Our X */
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close::before{
  content: "×" !important;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff !important;
  font-size: 18pt !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  pointer-events: none;
}

.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close:hover{
  background: var(--wk-lightpurple) !important;
}

.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close:focus-visible{
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close.ui-button,
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close.ui-state-default,
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close.ui-state-hover,
.ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar-close.ui-state-active{
  box-shadow: none !important;
  background-image: none !important;
}


/* --------------------------
   Body/content area
   -------------------------- */
.ui-dialog:has(#newbadge-dialog) .ui-dialog-content#newbadge-dialog{
  background: transparent !important;
  border: 0 !important;
  padding: 18px !important;
  box-sizing: border-box;
  overflow: auto !important;
  max-height: calc(100vh - 200px) !important;
}

/* Hide the internal “You've Earned Some Badges!” head */
.ui-dialog:has(#newbadge-dialog) #newbadge-dialog .newbadgehead{
  display: none !important;
}

/* --------------------------
   Badge grid
   -------------------------- */
.ui-dialog:has(#newbadge-dialog) #newbadge-dialog .newbadgelist{
  display: flex;
  flex-wrap: wrap;              /* wraps to multiple rows */
  gap: 20px;
  align-items: flex-start;

  /* FIX #2: center the grid */
  justify-content: center;

  margin: 0;
}

/* Each badge = centered mini-card */
.ui-dialog:has(#newbadge-dialog) #newbadge-dialog .newbadge{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 125px;
  margin: 0;
}

/* Image ~50% size */
.ui-dialog:has(#newbadge-dialog) #newbadge-dialog .newbadgeimage{
  width: 125px;
  height: 125px;
  object-fit: contain;
  display: block;
}

/* Name centered, bold, padded */
.ui-dialog:has(#newbadge-dialog) #newbadge-dialog .newbadgename{
  display: block;
  text-align: center;
  font-weight: 900;
  font-size: 12pt;
  line-height: 1.15;
  padding-top: 10px;
}

/* --------------------------
   Mobile fit
   -------------------------- */
@media (max-width: 600px){
  .ui-dialog:has(#newbadge-dialog){
    width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 40px) !important;
  }

  .ui-dialog:has(#newbadge-dialog) .ui-dialog-titlebar{
    padding: 16px 14px 0 !important;
  }

  .ui-dialog:has(#newbadge-dialog) .ui-dialog-content#newbadge-dialog{
    padding: 14px !important;
    max-height: calc(100vh - 210px) !important;
  }
}
/* ==========================================================
   DASH: Modal Styling
   ========================================================== */

/* ----------------------------------------------------------
   Backdrop
   ---------------------------------------------------------- */
ui-modal[data-flux-modal] dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

/* ----------------------------------------------------------
   Base modal shell (ALL Flux dialogs)
   ---------------------------------------------------------- */
ui-modal[data-flux-modal] dialog[data-modal] {
  width: min(560px, calc(100vw - 48px));
  max-width: 560px;
  max-height: calc(100vh - 80px);
  overflow: hidden;

  padding: 0 0 10px;
  border: none;
  border-radius: 5px;

  background: linear-gradient(
    to bottom,
    var(--wk-darkpurple) 0,
    var(--wk-darkpurple) 64px,
    #ffffff 64px,
    #ffffff 100%
  );
}

/* ----------------------------------------------------------
   Header area
   Structure: dialog > div > heading/subheading
   ---------------------------------------------------------- */
ui-modal[data-flux-modal] dialog[data-modal] > div {
  padding: 18px 18px 0;
}

/* Modal title (white, purple band) */
ui-modal[data-flux-modal] dialog[data-modal] [data-flux-heading] {
  color: #fff;
  font-size: 13pt;
  font-weight: 700;
  padding-top: 2px;
  position: relative;
}

/* Optional subheading */
ui-modal[data-flux-modal] dialog[data-modal] [data-flux-subheading] {
  color: var(--wk-darkpurple);
  font-size: 12pt;
  font-weight: 600;
  padding-top: 30px;
}

/* ----------------------------------------------------------
   Close button
   ---------------------------------------------------------- */
ui-modal[data-flux-modal] dialog[data-modal] div.absolute.top-0.right-0 {
  margin: 0;
  transform: translateY(-4px);
}

ui-modal[data-flux-modal] dialog[data-modal] [data-flux-modal-close] button {
  width: 35px;
  height: 35px;
  border-radius: 5px;

  background: transparent;
  color: #fff;
  outline: 2px solid #fff;
}

ui-modal[data-flux-modal] dialog[data-modal] [data-flux-modal-close] button:hover {
  background: var(--wk-lightpurple);
}

/* Force “X” icon to render white */
ui-modal[data-flux-modal] dialog[data-modal]
  [data-flux-modal-close] button svg {
  stroke: #fff !important;
  color: #fff;
}

/* ----------------------------------------------------------
   Body typography (text-heavy modals)
   ---------------------------------------------------------- */
ui-modal[data-flux-modal] dialog[data-modal] p {
  font-size: 12pt;
  line-height: 1.2;
  margin: 0 18px 16px;
}

ui-modal[data-flux-modal] dialog[data-modal] b,
ui-modal[data-flux-modal] dialog[data-modal] strong {
  font-weight: 700;
  color: var(--wk-darkpurple);
}

/* If there is NO subheading, push body content down
   to visually match modals that do have one */
ui-modal[data-flux-modal] dialog[data-modal]
  > div:not(:has([data-flux-subheading]))
  + p,
ui-modal[data-flux-modal] dialog[data-modal]
  > div:not(:has([data-flux-subheading]))
  + b,
ui-modal[data-flux-modal] dialog[data-modal]
  > div:not(:has([data-flux-subheading]))
  + strong {
  margin-top: 40px;
}

/* ----------------------------------------------------------
   Leaderboard table (scoped)
   ---------------------------------------------------------- */
ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow: auto;
  max-height: calc(100vh - 200px);

  padding: 8px 18px 18px;
  box-sizing: border-box;
}

ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable thead,
ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable tbody,
ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable th,
ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable td {
  text-align: left;
  padding: 10px;
  line-height: 1.25;
  vertical-align: top;
}

ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable th {
  font-size: 11pt;
  font-weight: 700;
  color: var(--wk-darkpurple);

  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;

  position: sticky;
  top: 0;
  z-index: 1;
}

ui-modal[data-flux-modal] dialog[data-modal] #leaderboardtable td {
  font-size: 10pt;
  color: var(--wk-darkgray);
  border-bottom: 1px solid #f0f0f0;
}

/* Arrow affordance between waypoint number → location */
ui-modal[data-flux-modal] dialog[data-modal]
  #leaderboardtable td:nth-child(2)::after {
  content: " →";
  margin-right: 2px;
  font-size: 8pt;
  font-weight: 900;
}

/* ----------------------------------------------------------
   Buttons & focus behavior
   ---------------------------------------------------------- */

/* Add breathing room above CTA buttons */
ui-modal[data-flux-modal] dialog[data-modal] .btn {
  margin-top: 20px;
}

/* Never underline buttons (they are links semantically) */
ui-modal[data-flux-modal] dialog[data-modal] a.btn:hover,
ui-modal[data-flux-modal] dialog[data-modal] a.btn:active,
ui-modal[data-flux-modal] dialog[data-modal] a.btn:focus {
  text-decoration: none;
}

/* Suppress browser auto-focus ring on open (retain a11y) */
ui-modal[data-flux-modal] dialog[data-modal] :focus {
  outline: none;
}

/* ==========================================================
   DASH MODAL — Demographics (CLEAN OVERWRITE)
   ========================================================== */

/* ===========================
   Shell + header
   =========================== */

ui-modal[data-flux-modal] > dialog[data-modal="demographics"]{
  width: min(560px, calc(100vw - 48px)) !important;
  max-width: 560px !important;
  max-height: calc(100vh - 32px) !important; /* taller */

  padding: 0 !important;
  border: none !important;
  border-radius: 5px !important;
  overflow: hidden !important;

  background: linear-gradient(
    to bottom,
    var(--wk-darkpurple) 0,
    var(--wk-darkpurple) 64px,
    #ffffff 64px,
    #ffffff 100%
  ) !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > div:first-child{
  padding: 18px 18px 0 !important;
  margin: 0 !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] [data-flux-heading]{
  color: #fff !important;
  font-size: 13pt !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > p{
  margin: 44px 18px 16px !important;
  font-size: 12pt !important;
  line-height: 1.2 !important;
  color: #000 !important;
}

/* ===========================
   Form layout
   =========================== */

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform{
  margin: 0 !important;
  padding: 0 18px 18px !important;
  box-sizing: border-box !important;

  overflow: auto !important;
  max-height: calc(100vh - 180px) !important; /* more room */

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 26px !important;
  row-gap: 16px !important;
  align-items: start !important;
}

/* Race/Ethnicity spans full width */
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform > fieldset,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform > [data-flux-fieldset],
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform > ui-fieldset{
  grid-column: 1 / -1 !important;
}

/* Actions span full width */
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform .wk-modal-actions{
  grid-column: 1 / -1 !important;
}

/* ===========================
   Labels + descriptions
   =========================== */

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] [data-flux-label]{
  color: #3f3f46 !important;
}

/* Section headers (field labels + legend) */
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] ui-field > ui-label[data-flux-label],
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] [data-flux-field] > [data-flux-label],
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] fieldset > legend,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] [data-flux-legend]{
  color: var(--wk-darkpurple) !important;
  font-size: 11.25pt !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] [data-flux-description]{
  color: #52525b !important;
  font-size: 11.25pt !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

/* ===========================
   Selects (compact)
   =========================== */

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform > ui-field,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform > [data-flux-field]{
  min-width: 0 !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform select{
  height: 25px !important;
  min-height: 25px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
  border-radius: 5px !important;

  width: 100% !important;       /* fill grid col */
  max-width: 260px !important;  /* avoid “huge” look */
}

/* ===========================
   Checkboxes (spacing only)
   =========================== */

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  margin-top: 2px !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform fieldset .grid{
  gap: 10px !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform fieldset .grid > div[style*="display: flex"]{
  align-items: flex-start !important;
  gap: 12px !important;
}

/* ===========================
   Actions + buttons
   Use WK .btn classes on the Flux buttons in markup:
   - Ask Later: class="btn btn-secondary btn-grow-right"
   - Save:      class="btn btn-primary btn-grow-right"
   =========================== */

ui-modal[data-flux-modal] > dialog[data-modal="demographics"] .wk-modal-actions{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}

/* Ensure Flux IDs do NOT force pill buttons (let .btn win) */
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #democxlbutt.btn,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #submitdemobutt.btn{
  border-radius: 0 !important;
  width: auto !important;
}

/* Ensure chevron spacing matches FG exactly */
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #democxlbutt.btn.btn-grow-right,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #submitdemobutt.btn.btn-grow-right{
  padding-right: 44px !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #democxlbutt.btn.btn-grow-right::after,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #submitdemobutt.btn.btn-grow-right::after{
  right: 24px !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #democxlbutt.btn.btn-grow-right:hover,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #submitdemobutt.btn.btn-grow-right:hover{
  padding-right: 58px !important;
}

ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #democxlbutt.btn.btn-grow-right:hover::after,
ui-modal[data-flux-modal] > dialog[data-modal="demographics"]
  .wk-modal-actions #submitdemobutt.btn.btn-grow-right:hover::after{
  right: 28px !important;
}

/* ===========================
   Mobile <= 600px
   =========================== */

@media (max-width: 600px){
  ui-modal[data-flux-modal] > dialog[data-modal="demographics"]{
    width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 40px) !important;
  }

  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > div:first-child{
    padding: 16px 14px 0 !important;
  }

  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > p{
    margin: 30px 14px 14px !important;
  }

  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform{
    padding: 0 14px 14px !important;
    max-height: calc(100vh - 210px) !important;

    grid-template-columns: 1fr !important;
    row-gap: 14px !important;
  }

  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] > form#demoform select{
    max-width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
  }

  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] .wk-modal-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 16px !important;
    margin-bottom: 25px !important;
  }

  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] .wk-modal-actions #democxlbutt,
  ui-modal[data-flux-modal] > dialog[data-modal="demographics"] .wk-modal-actions #submitdemobutt{
    width: 100% !important;
  }
}

/* ==========================================================
   Modal CTA normalization (FG link button)
   Bring the <a.btn> height in line with Flux <button>.btn
   ========================================================== */
ui-modal[data-flux-modal] dialog[data-modal] a.btn.btn-primary.btn-grow-right{
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1;
}


/* FOLD - DASH SUBPAGES */
/* =================================================================================


   DASH - SUBPAGES - standards
   
   
   ================================================================================= */

.wk-participant-page-title {
  margin: 60px 0 0;
  padding: 0;
  font-size: 20pt;
  font-weight: 900;
  line-height: 1.1;
  color: var(--wk-darkpurple);
}

.wk-participant-page-title-res {
  margin: 600px 0 0;
  padding: 0;
  font-size: 20pt;
  font-weight: 900;
  line-height: 1.1;
  color: var(--wk-darkpurple);
}



/* FOLD - LOG HISTORY PAGE */
/* =================================================================================


   LOG HISTORY PAGE
   
   
   ================================================================================= */

#loghistorytable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden; /* keeps rounded corners clean */
  margin: 0 0 80px;
}

#loghistorytable thead th {
  text-align: left;
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wk-darkpurple);
  background: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 12px;
  white-space: nowrap;
}

#loghistorytable tbody td {
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.25;
  padding: 6px 12px;
  border-bottom: 0;
  vertical-align: top;
}

/* Zebra striping for readability */
#loghistorytable tbody tr:nth-child(even) td {
  background: #f8f8f8;
}

#loghistorytable tbody tr:last-child td {
  border-bottom: 0;
}

/* FOLD - TEAM WALL PAGE */
/* =================================================================================


   TEAM WALL PAGE
   
   
   ================================================================================= */

/* --- Primary content surface: match #loghistorytable --- */
#postbox {
  width: 100%;
  margin: 0;
  padding: 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  overflow-y: auto;
  height: 60vh;
  box-sizing: border-box;
}

/* --- Row baseline (replace float-based layout with modern flex) --- */
.postrow {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  float: none !important;
  margin-bottom: 12px;
}

/* left/right alignment (no floats) */
.postrow.leftside { justify-content: flex-start; text-align: left; }
.postrow.rightside { justify-content: flex-end; text-align: left; }

/* Parent vs reply indentation (keep your existing intent) */
.postrow.reply.leftside  { padding-left: 18px; }
.postrow.reply.rightside { padding-right: 18px; }

/* --- Main message body container --- */
.postmain {
  max-width: 72%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Message “bubble” styled to match Log History body cells */
.postcontent {
  font-size: 11pt;
  font-weight: 400;
  line-height: 1.2;
  padding: 10px 12px;
  border-radius: 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.postrow.rightside .postcontent {
  border-color: var(--wk-lightpurple);
  background: rgba(196, 166, 224, 0.25);
}

.postrow.reply .postcontent {
  background: #f8f8f8;
}

/* Meta: use your established smaller meta scale */
.postmeta {
  font-size: 9pt;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wk-darkgray);
}

/* Unread/read: subtle emphasis (don’t rely on bold+opacity swings) */
.postrow.unread .postcontent {
  border-color: var(--wk-darkpurple);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wk-gold);
}

.postrow.read {
  opacity: 1;
}

/* Reply button column */
.postside {
  width: 30px;
  min-width: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  overflow: visible;
}

.replybutt { cursor: pointer; }

/* --- Composer row: match the subpage “control row” vibe --- */
#replybar {
  width: 85%;
  display: flex;
  gap: 10px;
  padding: 20px;
  border-radius: 5px;
  border: 0;
  background: #f8f8f8;
  box-sizing: border-box;
  margin: 30px auto 80px;
}

#replybar #contentbox {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 5px;
   border: 1px solid #e0e0e0;
}

#trigger {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20pt;
  line-height: 1;
}

#trigger:hover { opacity: 0.65; }

/* ==========================================================
   Responsive: 1024 / 768 / 600 (match your project breakpoints)
   ========================================================== */

@media (max-width: 1024px) {
  #postbox {
    height: calc(70vh - 50px);
  }

  .postmain { max-width: 78%; }
}

@media (max-width: 768px) {
  #postbox {
    padding: 10px;
    height: calc(65vh - 50px);
  }

  .postmain { max-width: 86%; }

  .postcontent {
    padding: 10px 10px;
  }

  #trigger {
    width: 40px;
    height: 40px;
    font-size: 13pt;
  }
}

@media (max-width: 600px) {
  #postbox {
    padding: 10px;
    height: calc(62vh - 50px);
  }

  /* Give messages more room on small screens */
  .postmain { max-width: 92%; }

  /* Reduce indentation so replies don’t feel squeezed */
  .postrow.reply.leftside  { padding-left: 12px; }
  .postrow.reply.rightside { padding-right: 12px; }

  /* Composer stacks cleanly if needed */
  #replybar {
    gap: 8px;
    padding: 10px;
  }

  #trigger {
    width: 42px;
    height: 42px;
    font-size: 14pt;
  }
}


/* FOLD - BADGES PAGE */
/* =================================================================================


   BADGES CENTRAL PAGE
   
   
   ================================================================================= */
/* Outer wrapper */
.all_badges{
  width: 100%;
  margin: 0 0 80px;
  box-sizing: border-box;
}

/* Each section (Achieved / Still Ahead) */
.completed_badges,
.remaining_badges{
  margin: 0 0 26px;
}

/* Section header */
.badge_header{
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wk-darkpurple);
  background: #f8f8f8;
  border-radius: 5px;
  padding: 12px 12px;
  margin: 0 0 12px;
}

/* Grid the badge tiles (6-up desktop) */
.completed_badges,
.remaining_badges{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* Make the header span the whole grid */
.completed_badges > .badge_header,
.remaining_badges > .badge_header{
  grid-column: 1 / -1;
}

/* Badge tile */
.completed_badge{
  background: #fff;
  border-radius: 5px;
  padding: 12px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;

  text-align: center;
}

/* Badge image */
.badgeimage{
  width: 100%;
  max-width: 110px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Badge name */
.badgename{
  font-size: 10pt;
  font-weight: 600;
  line-height: 1.2;
}

/* Optional: visually “muted” remaining badges without changing markup */
.remaining_badges .completed_badge{
  background: #fff;
  opacity: 0.85;
}

/* -----------------------------------
   Responsive breakpoints
   ----------------------------------- */

@media (max-width: 1024px){
  .completed_badges,
  .remaining_badges{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .badgeimage{ max-width: 115px; }
}

@media (max-width: 768px){
  .completed_badges,
  .remaining_badges{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .badge_header{ padding: 10px 10px; }
  .completed_badge{ padding: 10px; }
}

@media (max-width: 600px){
  .completed_badges,
  .remaining_badges{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .badgeimage{ max-width: 95px; }
  .badgename{ font-size: 9pt; }
}

/* =================================================================================


   RESOURCES PAGES - SHOW CATEGORY, SHOW SINGLE RESOURCE
   
   
================================================================================= */

/* =========================================
   RESOURCES: Category page catswitcher
   Match reg_regdetails dropdown
   ========================================= */

.wk-resource-switcher,
.wk-resource-switcher .catswitcherp{
  width: 100%;
  margin-bottom: 10px;
  }

/* Force the *actual* select to a plain white surface */
.wk-resource-switcher .catswitcherp select#catswitcher{
  width: 450px;
  max-width: 100%;
  height: 50px;
  border-radius: 0;
  box-sizing: border-box;
  border: 1.25px solid var(--wk-darkpurple);
padding: 0 20px;
  background-color: #fff;
  background-image: none;
  box-shadow: none;
  font-size: 13pt;
  font-weight: 500;

  /* Kill native/UA styling that can look “gradienty” on some browsers */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Keep a visible dropdown arrow while appearance is none */
.wk-resource-switcher .catswitcherp{
  position: relative;
  max-width: 450px;
}

.wk-resource-switcher .catswitcherp::after{
  content: "▼";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10pt;
  color: var(--wk-darkpurple);
  pointer-events: none;
}

/* Focus parity */
.wk-resource-switcher .catswitcherp select#catswitcher:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Hide the duplicate category name heading immediately under the switcher */
.wk-resource-switcher + [data-flux-heading]{
  display: none !important;
}

/* Resource list full width + dividers */
.rsrclist{
  width: 100%;
  max-width: 100%;
}

.rsrclist .resource{
  width: 100%;
  padding: 25px 0;
  border-bottom: 1.25px solid var(--wk-lightpurple);
}

.rsrclist .resource:first-child{
  border-top: 1.25px solid var(--wk-lightpurple);
}

.rsrclist .resource:last-child{
  border-bottom: none;
}

/* Breakpoints (match reg column behavior) */
@media (max-width: 768px){
  .wk-resource-switcher .catswitcherp{ max-width: 430px; }
  .wk-resource-switcher .catswitcherp select#catswitcher{ width: 420px; }
}

@media (max-width: 600px){
  .wk-resource-switcher .catswitcherp{ max-width: 100%; }
  .wk-resource-switcher .catswitcherp select#catswitcher{
    width: 100%;
    height: 46px;
    padding: 0 20px;
  }
}


.wk-resource-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 500px;
  column-gap: 65px;
  align-items: start;
}

/* Main content */
.wk-resource-main{
  min-width: 0;
  padding: 0;
}

/* Sidebar */
.wk-resource-sidebar{
  min-width: 0;
   border-left: 1px solid var(--wk-lightpurple);
  padding-left: 65px;
}

/* Keep sidebar visually distinct but calm */
.wk-resource-sidebar .wk-participant-page-title{
  margin-top: 0;
}

.sidebar{
}

.sidebar .wk-otherrsrc-title{
  font-size: 18pt;
  line-height: 1.15;
  margin: 0 0 14px 0;
  color: var(--wk-darkpurple); /* or whatever your title color var is */
  font-weight: 500;
}

/* Container that wraps the echoed excerpt rows */
.sidebar .wk-otherrsrc{
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 14px;
}

/* Each resource row */
.sidebar .wk-otherrsrc .excerptrow{
  display: grid;

  /* Image column responds; defaults to 150px but can shrink a bit */
  grid-template-columns: minmax(150px, 150px) minmax(0, 1fr);

  column-gap: 18px;
  align-items: start;

  padding: 16px 0;
}

.sidebar .wk-otherrsrc .excerptrow + .excerptrow{
  border-top: 1px dashed #e0e0e0;
}

/* Image */
.sidebar .wk-otherrsrc .excerptimage img{
  width: 150px;
  height: 105px;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}

/* Content column: THIS is the magic */
.sidebar .wk-otherrsrc .excerptcontent{
  display: flex;
  flex-direction: column;
  gap: 6px;                 /* ← adjust this for title/excerpt spacing */
  min-width: 0;
  padding-top: 2px;         /* tiny optical alignment with image */
}

/* Title */
.sidebar .wk-otherrsrc .excerpttitle{
  margin: 0;
  padding: 0;
}

.sidebar .wk-otherrsrc .excerpttitle a{
  display: inline-block;
  font-size: 13pt;
  font-weight: 600;
  line-height: 1.2;
  color: #3b82f6;
  text-decoration: none;
}

.sidebar .wk-otherrsrc .excerpttitle a::after{
  content: " >";
}

.sidebar .wk-otherrsrc .excerpttitle a:hover{
  opacity: 0.65;
  text-decoration: none;
}

/* Excerpt (note: your excerpt is inside an <a>) */
.sidebar .wk-otherrsrc .excerptexcerpt{
  margin: 0;
  padding: 0;
}

.sidebar .wk-otherrsrc .excerptexcerpt a{
  display: block;
  font-size: 11pt;
  line-height: 1.25;
  color: var(--wk-darkgray);
  text-decoration: none;

  /* safety for long strings */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sidebar .wk-otherrsrc .excerptexcerpt a:hover{
  opacity: 0.75;
  text-decoration: none;
}




/** PARTICIPANT DASH - NEWS/MESSAGES **/
.msgitem { cursor: pointer; }
.msgitem .msginfo { font-weight: 300; font-size: 11pt; color: #333; }
.msgitem.unread .contentbox { font-weight: bold; }
.msgitem .contentbox { width: 70%; overflow: hidden; white-space: nowrap; text-overflow: "More..."; }
.msgitem.bigger .contentbox { z-index: 100; width: auto; }

/** PARTICIPANT DASH - TEAM PROGRESS (MAP/WAYPOINT) **/
#progholder { width: 100%; height: 500px; display: flex; gap: 10px;}
#map { width: 100%; height: 100%; }
#progholderright { width: 400px; }


/* FOLD - ADMIN PAGES */
/* =================================================================================


   ADMIN PAGES
  
   
   ================================================================================= */
   /* Base admin module */
.wk-module {
  background-color: #f8f8f8;
  padding: 20px 20px 10px;
}

/* KPI modules: content-driven */
.wk-module--kpi {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Media modules: fixed aspect */
/* Media modules (tables, charts, reports) */
.wk-module--media {
  aspect-ratio: auto;      /* tables should not be locked */
  overflow: auto;          /* allow scroll if needed */
  padding: 12pt;           /* light internal breathing room */
  background-color: #f8f8f8;
}


/* Big KPI number */
.bignum {
  font-size: 60pt;
  font-weight: 600;
  color: var(--wk-darkpurple);
  padding: 0;
  margin: 0;
  line-height: 0.95;
}

/* Supporting label */
.numdescriptor {
  font-size: 11pt;
  font-weight: 400;
  text-transform: none;
  line-height: 1.15;
  margin-bottom: 20px;
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

/* Base table reset inside media modules */
.wk-module--media table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 11pt;
}

.wk-module--media thead th {
  text-align: left;
  font-weight: 600;
  font-size: 11pt;
  padding: 6pt 8pt;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  color: var(--wk-darkpurple);
}

.wk-module--media tbody td {
  padding: 6pt 8pt;
  font-size: 11pt;
  line-height: 1.25;
}

.wk-admin flux\:main,
.wk-admin [data-flux-main] {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 60px 50px 60px 50px;
  box-sizing: border-box;
}

/* Base heading rhythm in admin */
.wk-admin [data-flux-heading] {
  font-size: 20pt;
  font-weight: 900;
  line-height: 1.1;
}

/* Page titles (xl headings + fallback h1) */
.wk-admin ui-heading[size="xl"],
.wk-admin [data-flux-heading][size="xl"],
.wk-admin h1 {
  font-size: 20pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
  margin: 0 0 20px 0;
  line-height: 1.15;
}

/* Remove manual <br> used after headings */
.wk-admin ui-heading[size="xl"] + br,
.wk-admin [data-flux-heading][size="xl"] + br,
.wk-admin h1 + br {
  display: none;
}

/* Alerts: breathing room under titles */
.wk-admin .alert {
  margin-top: 10px;
}

/* ==========================================================
   CANON: Flux buttons should never underline on hover/focus
   (prevents underline on icon/::before too)
   ========================================================== */

.wk-admin flux\:button,
.wk-admin [data-flux-button],
.wk-admin flux\:button a,
.wk-admin [data-flux-button] a {
  text-decoration: none !important;
}

.wk-admin flux\:button:hover,
.wk-admin [data-flux-button]:hover,
.wk-admin flux\:button:focus,
.wk-admin [data-flux-button]:focus,
.wk-admin flux\:button:focus-visible,
.wk-admin [data-flux-button]:focus-visible,
.wk-admin flux\:button a:hover,
.wk-admin [data-flux-button] a:hover,
.wk-admin flux\:button a:focus,
.wk-admin [data-flux-button] a:focus,
.wk-admin flux\:button a:focus-visible,
.wk-admin [data-flux-button] a:focus-visible {
  text-decoration: none !important;
}

/* ==========================================================
   PAGE TITLE ROWS: Manage Users / Teams patterns
   ========================================================== */

/* Make title row flex + allow inline button groups */
.wk-admin [data-flux-heading] {
  color: var(--wk-darkpurple) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wk-admin [data-flux-heading] flux\:button\.group,
.wk-admin [data-flux-heading] [data-flux-button-group] {
  display: inline-flex !important;
  gap: 10px;
  flex-wrap: wrap;
}

/* Secondary toolbar (CSV buttons group) */
.wk-admin flux\:button\.group:not(:first-child),
.wk-admin [data-flux-button-group]:not(:first-child) {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}

/* Kill random <br> after secondary groups */
.wk-admin flux\:button\.group + br,
.wk-admin [data-flux-button-group] + br {
  display: none;
}

/* ==========================================================
   FORMS: baseline spacing + action row
   ========================================================== */

.wk-admin form {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Flux fields usually live in ui-field */
.wk-admin form ui-field,
.wk-admin form [data-flux-field] {
  margin: 0 0 16px 0;
}

/* Backup: if controls are direct children */
.wk-admin form ui-input,
.wk-admin form ui-select,
.wk-admin form ui-textarea,
.wk-admin form [data-flux-control] {
  margin: 0 0 16px 0;
}

/* Separators breathe consistently */
.wk-admin ui-separator,
.wk-admin [data-flux-separator] {
  margin: 18px 0 14px;
}

/* Kill legacy spacing hacks if present */
.wk-admin div.w-full {
  margin: 0 !important;
}

/* Save/Cancel action row (submit + direct anchor) */
.wk-admin form > button[type="submit"],
.wk-admin form > a {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
}

.wk-admin form > button[type="submit"] {
  margin-right: 12px;
}

.wk-admin form > a {
  text-decoration: none;
}

@media (max-width: 600px) {
  .wk-admin form > button[type="submit"],
  .wk-admin form > a {
    margin-top: 14px;
  }
}

/* ==========================================================
   PANELS: grid-responsive-2 + grid-responsive
   ========================================================== */

/* Mobile-first: stacked */
.wk-admin .grid-responsive-2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

/* Desktop: two columns */
@media (min-width: 768px) {
  .wk-admin .grid-responsive-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 24px;
  }
}

/* Single column panel container */
.wk-admin .grid-responsive {
  display: block;
  padding: 0;
}

/* Panel surface */
.wk-admin .grid-responsive-2 > .relative,
.wk-admin .grid-responsive > .relative {
  background: #f8f8f8;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  box-sizing: border-box;
}

/* Dark mode safety */
.dark .wk-admin .grid-responsive-2 > .relative,
.dark .wk-admin .grid-responsive > .relative {
  background: rgb(39 39 42);
  border-color: rgb(82 82 91);
}

/* ==========================================================
   CHECKBOX + LABEL ALIGNMENT
   ========================================================== */

.wk-admin input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  transform: translateY(1px);
}

.wk-admin ui-label[data-flux-label],
.wk-admin [data-flux-label] {
  line-height: 1.25;
}

/* Inline checkbox rows wrap cleanly */
.wk-admin .grid-responsive-2 > .relative div[style*="display: flex"] {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* ------------------------------------------------------------------------

   ADMIN - USERS

   ------------------------------------------------------------------------ */

/* ------------------ ADD/EDIT USER ------------------  */

.wk-admin .wk-userlog{
  margin-top: 20px;
}

/* Smaller heading for the “Log for Activity…” line */
.wk-admin .wk-userlog [data-flux-heading],
.wk-admin .wk-userlog flux\:heading{
  font-size: 12pt;
  font-weight: 500;
  line-height: 1.2;
  color: var(--wk-darkpurple);
  margin: 10px 0;
}

.wk-admin .wk-userlog > div[style*="display:flex"]{
  align-items: center !important;
}

.wk-userlog #logtype,
.wk-userlog #logdate{
  margin-top: 14px;
}

.wk-admin .wk-admin-actions{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.wk-admin .wk-admin-actions a{
  text-decoration: none;
}

.wk-admin .wk-user-message-trigger{
  display: inline-flex;
  width: auto;
  max-width: max-content;
  align-self: flex-start; /* prevents stretching in the parent flex column */
}

/* If Flux applies w-full to the inner button in this context, neutralize it */
.wk-admin .wk-user-message-trigger [data-flux-button],
.wk-admin .wk-user-message-trigger flux\:button{
  width: auto !important;
}


@media (max-width: 600px){
  .wk-admin .wk-admin-actions{
    margin-top: 14px;
  }
}


/* ==========================================================
   ADD/EDIT USER AND EDIT TEAM — Modal
   ========================================================== */

.wk-admin .wk-userlog-row{
  display: flex;
  align-items: center;     /* the key */
  gap: 10px;
}

.wk-admin .wk-userlog-cell{
  display: flex;           /* centers the component inside the cell */
  align-items: center;
}

.wk-admin #isdash + ui-label,
.wk-admin input[name="issms"] + ui-label{
  margin-top: 35px;
  display: inline-block;
}

.wk-admin ui-modal [data-flux-heading],
.wk-admin [data-flux-modal] [data-flux-heading]{
  color: #ffffff !important;
}

.wk-user-message-modal .flex.gap-2 ui-close button[data-flux-button]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  padding: 8px 40px !important;
  min-height: 36px !important;

  font-weight: 500;
  color: var(--wk-darkpurple) !important;

  background: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;

  box-shadow: none !important;
  text-decoration: none !important;
}

/* Primary Send button */
.wk-user-message-modal .flex.gap-2 #sendmessage{
  background: var(--wk-darkpurple) !important;
  border-color: var(--wk-darkpurple) !important;
  color: #ffffff !important;
}

/* Hover parity */
.wk-user-message-modal .flex.gap-2 ui-close button[data-flux-button]:hover{
  opacity: 0.85;
}






/* ==========================================================
   DATATABLES CANON (Users / Teams / Floaters / Events)
   FULL OVERWRITE — cleaned + de-duped
   ========================================================== */

/* Ensure DT containers don’t shrink-wrap */
.wk-admin .dataTables_wrapper,
.wk-admin .dataTables_wrapper .dt-container,
.wk-admin .dataTables_wrapper .dt-layout-row,
.wk-admin .dataTables_wrapper .dt-layout-cell{
  width: 100% !important;
  max-width: 100% !important;
}

/* Wrapper spacing so controls don’t feel glued */
.wk-admin .dataTables_wrapper{
  margin-top: 10px;
}

/* Top control row */
.wk-admin .dt-layout-row{
  gap: 12px;
}

/* Table surface */
.wk-admin table.dataTable{
  width: 100% !important;
  min-width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

/* Header cells */
.wk-admin table.dataTable thead th{
  background: #f8f8f8;
  border-bottom: 0.75px solid #e0e0e0;
  text-align: left;
  padding: 12px 12px;
  font-size: 11pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
  white-space: nowrap;
}

/* Body cells */
.wk-admin table.dataTable tbody td{
  padding: 10px 12px;
  font-size: 11pt;
  line-height: 1.2;
  border-bottom: 0.75px solid #e0e0e0;
  vertical-align: middle;
  text-align: left;
}

/* Zebra striping */
.wk-admin table.dataTable tbody tr:nth-child(even) td{
  background: #f8f8f8;
}

.wk-admin table.dataTable tbody tr:last-child td{
  border-bottom: 0;
}

/* Links in tables */
.wk-admin table.dataTable a{
  color: #3b82f6;
  text-decoration: none;
}
.wk-admin table.dataTable a:hover{
  text-decoration: underline;
}

/* Search input (DT1 + DT2 markup) */
.wk-admin .dataTables_filter input[type="search"],
.wk-admin .dt-search input[type="search"],
.wk-admin .dt-search input{
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 11pt;
  outline: none;
}

.wk-admin .dataTables_filter input[type="search"]:focus-visible,
.wk-admin .dt-search input:focus-visible{
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
}

/* Export buttons */
.wk-admin .dt-buttons .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 10.5pt;
  font-weight: 700;
  border: 0.75px solid #e0e0e0;
  background: #f8f8f8;
  color: var(--wk-darkpurple);
  cursor: pointer;
  margin-right: 8px;
}
.wk-admin .dt-buttons .btn:hover{
  opacity: 0.75;
}

/* Pagination */
.wk-admin .dataTables_paginate .paginate_button{
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 10.5pt;
  border: 0.75px solid transparent;
}
.wk-admin .dataTables_paginate .paginate_button.current{
  background: #f8f8f8 !important;
  border: 0.75px solid #e0e0e0 !important;
  color: var(--wk-darkpurple) !important;
}

/* No sorting affordance on action/noexport columns (DT v1 + v2) */
.wk-admin table.dataTable thead th.noexport{
  cursor: default !important;
}

/* DT v1 sort icons */
.wk-admin table.dataTable thead th.noexport::before,
.wk-admin table.dataTable thead th.noexport::after{
  display: none !important;
  content: none !important;
}

/* DT v2 sort span */
.wk-admin table.dataTable thead th.noexport .dt-column-order,
.wk-admin table.dataTable thead th.noexport span.dt-column-order{
  display: none !important;
}

/* ----------------------------------------------------------
   TABLE-SPECIFIC TWEAKS (minimal)
   ---------------------------------------------------------- */

/* Teams: status column stays compact */
.wk-admin #teamtable thead th:nth-child(3),
.wk-admin #teamtable tbody td:nth-child(3){
  white-space: nowrap;
}

/* Users/Teams: action column tight */
.wk-admin #usertable th.noexport,
.wk-admin #usertable td:last-child,
.wk-admin #teamtable th.noexport,
.wk-admin #teamtable td:last-child{
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Floaters: action column tight + spacing between links */
.wk-admin #floatertable td.actioncell,
.wk-admin #floatertable td:last-child{
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.wk-admin #floatertable td.actioncell a + a{
  margin-left: 8px;
}

/* Floaters: last header never shows sort affordance */
.wk-admin #floatertable thead th:last-child{
  cursor: default !important;
}
.wk-admin #floatertable thead th:last-child::before,
.wk-admin #floatertable thead th:last-child::after,
.wk-admin #floatertable thead th:last-child .dt-column-order,
.wk-admin #floatertable thead th:last-child span.dt-column-order{
  display: none !important;
  content: none !important;
}

/* ----------------------------------------------------------
   EVENTS: structural widths + button spacing
   ---------------------------------------------------------- */

.wk-admin #eventtable.dataTable{
  table-layout: auto;
  width: 100% !important;
  min-width: 100% !important;
}

/* Start / End: slightly compact but readable */
.wk-admin #eventtable.dataTable thead th:nth-child(1),
.wk-admin #eventtable.dataTable tbody td:nth-child(1),
.wk-admin #eventtable.dataTable thead th:nth-child(2),
.wk-admin #eventtable.dataTable tbody td:nth-child(2){
  width: 130px;
  white-space: nowrap;
}

/* Name: flex column */
.wk-admin #eventtable.dataTable thead th:nth-child(3),
.wk-admin #eventtable.dataTable tbody td:nth-child(3){
  width: auto;
  min-width: 340px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Actions: tight, right aligned */
.wk-admin #eventtable.dataTable thead th:nth-child(4),
.wk-admin #eventtable.dataTable tbody td:nth-child(4){
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* Buttons spacing parity */
.wk-admin #eventtable.dataTable tbody td:nth-child(4) a{
  text-decoration: none;
}
.wk-admin #eventtable.dataTable tbody td:nth-child(4) a + flux\:button,
.wk-admin #eventtable.dataTable tbody td:nth-child(4) flux\:button + a,
.wk-admin #eventtable.dataTable tbody td:nth-child(4) flux\:button + flux\:button{
  margin-left: 8px;
}

/* ----------------------------------------------------------
   EVENTS: sort arrow consistency (DT v2)
   Fixes “arrows show before text” when cols are narrow.
   ---------------------------------------------------------- */

/* Give sortable headers a little reserved space on the right for the arrow */
.wk-admin #eventtable.dataTable thead th:not(.noexport){
  padding-right: 22px;
}

/* Ensure DT v2 order glyph sits to the right of the header label */
.wk-admin #eventtable.dataTable thead th .dt-column-order,
.wk-admin #eventtable.dataTable thead th span.dt-column-order{
  float: right;
  margin-left: 6px;
}

/* ==========================================================
   EVENTS: DT v2 header sort icons — force AFTER title
   (fix dt-type-numeric columns rendering differently)
   ========================================================== */

.wk-admin #eventtable.dataTable thead th .dt-column-header{
  display: inline-flex;        /* keep DT’s flex, don’t touch <th> */
  flex-direction: row;         /* prevent any row-reverse behavior */
  justify-content: space-between; /* title then icon */
  align-items: center;
  gap: 6px;
}

/* Make sure title stays first and arrow control stays after */
.wk-admin #eventtable.dataTable thead th .dt-column-title{
  order: 0;
}

.wk-admin #eventtable.dataTable thead th .dt-column-order{
  order: 1;
}

/* If DT’s numeric styling is flipping things, neutralize it here */
.wk-admin #eventtable.dataTable thead th.dt-type-numeric .dt-column-header{
  flex-direction: row;
}

/* ==========================================================
   EVENTS: DT v2 header — title left, sort arrows far right
   ========================================================== */

.wk-admin #eventtable.dataTable thead th .dt-column-header{
  display: flex;              /* use DT's wrapper, not <th> */
  width: 100%;                /* fill the whole header cell */
  align-items: center;
}

/* keep title on the left */
.wk-admin #eventtable.dataTable thead th .dt-column-title{
  flex: 0 1 auto;
}

/* push the arrow control all the way to the right */
.wk-admin #eventtable.dataTable thead th .dt-column-order{
  margin-left: auto;
  padding-left: 8px;          /* optional */
}





/* =================================================================================
   ADD/EDIT TEAM (extends canon)
   ================================================================================= */

/* Kill extra <br> spacing inside panels */
.wk-admin .grid-responsive-2 br {
  display: none;
}

/* Ensure panel children have consistent rhythm even if markup uses <br> */
.wk-admin .grid-responsive-2 > .relative {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Team Members heading inside the panel */
.wk-admin #teamform .grid-responsive-2 flux\:heading,
.wk-admin #teamform .grid-responsive-2 [data-flux-heading] {
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.2;
  margin: 10px 0 0;
  color: var(--wk-darkpurple);
}

/* Inline “Add Team Member” button group */
.wk-admin #teamform flux\:heading flux\:button\.group {
  margin-left: 10px;
}

/* Add-member row (autocomplete area) */
.wk-admin #adduserrow {
  background: #fff;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  padding: 12px 12px;
}

.wk-admin #adduserrow p {
  margin: 0;
  font-size: 11pt;
  line-height: 1.2;
}

/* Autocomplete input styling */
.wk-admin #useraddcell {
  height: 34px;
  padding: 0 10px;
  border: 0.75px solid #e0e0e0 !important;
  border-radius: 5px !important;
  font-size: 11pt;
  box-sizing: border-box;
}

/* Helper text */
.wk-admin #teamform em {
  display: inline-block;
  font-size: 10pt;
  color: var(--wk-darkgray);
  margin: 0;
}

.wk-admin #nomem {
  margin: 0;
  font-size: 11pt;
  color: var(--wk-darkgray);
}

/* Team members table (non-DataTables, keep existing look) */
.wk-admin #teamusertable {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.wk-admin #teamusertable thead th {
  text-align: left;
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wk-darkpurple);
  background: #f8f8f8;
  border-bottom: 0.75px solid #e0e0e0;
  padding: 12px 12px;
  white-space: nowrap;
}

.wk-admin #teamusertable tbody td {
  font-size: 11pt;
  line-height: 1.25;
  padding: 10px 12px;
  border-bottom: 0.75px solid #f0f0f0;
  vertical-align: middle;
}

.wk-admin #teamusertable tbody tr:nth-child(even) td {
  background: #f8f8f8;
}

.wk-admin #teamusertable tbody tr:last-child td {
  border-bottom: 0;
}

.wk-admin #teamusertable td.rolecell,
.wk-admin #teamusertable td.paidcell {
  user-select: none;
}

.wk-admin #teamusertable tr td[style*="line-through"] {
  opacity: 0.65;
}

.wk-admin #teamusertable thead th:last-child,
.wk-admin #teamusertable tbody td:last-child {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 768px) {
  .wk-admin #teamusertable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================
   POST MESSAGE (/postmsg)
   ========================================================== */

.wk-admin form[action="/postmsg"] .grid-responsive-2 > .relative {
  display: block !important;
  overflow: visible !important;
}

.wk-admin form[action="/postmsg"] .grid-responsive-2 > .relative > br {
  display: none !important;
}

.wk-admin form[action="/postmsg"] ui-label[data-flux-label],
.wk-admin form[action="/postmsg"] [data-flux-label] {
  display: block;
  margin: 0 0 6px 0;
}

/* Checkbox + label inline */
.wk-admin form[action="/postmsg"] div[style*="justify-content:space-between"] > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wk-admin form[action="/postmsg"] div[style*="justify-content:space-between"] > div ui-label,
.wk-admin form[action="/postmsg"] div[style*="justify-content:space-between"] > div [data-flux-label] {
  display: inline !important;
  margin: 0 !important;
}

/* Send To radio group */
.wk-admin form[action="/postmsg"] div[style*="margin-left: 15px"] {
  margin-left: 0 !important;
  margin-top: 6px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding-right: 12px;
}

.wk-admin form[action="/postmsg"] div[style*="margin-left: 15px"] > br {
  display: none !important;
}

.wk-admin form[action="/postmsg"] div[style*="margin-left: 15px"] input[type="radio"] {
  margin: 0 8px 0 0;
}

.wk-admin form[action="/postmsg"] div[style*="margin-left: 15px"] ui-label {
  display: inline-block;
  margin: 0;
}

.wk-admin form[action="/postmsg"] div[style*="margin-left: 15px"] ui-label.text-zinc-600,
.wk-admin form[action="/postmsg"] div[style*="margin-left: 15px"] ui-label[class*="text-zinc-600"] {
  flex-basis: 100%;
  margin-top: 6px;
}

/* Checkbox row sizing */
.wk-admin form[action="/postmsg"] div[style*="justify-content:space-between"][style*="width: 450px"] {
  width: 100% !important;
  max-width: 720px;
  margin: 10px 0 14px 0 !important;
  display: flex !important;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.wk-admin form[action="/postmsg"] .showifdash {
  margin: 6px 0 14px 0;
}

.wk-admin form[action="/postmsg"] #content,
.wk-admin form[action="/postmsg"] textarea,
.wk-admin form[action="/postmsg"] ui-textarea,
.wk-admin form[action="/postmsg"] [data-flux-control] {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Actions (Cancel + Send) */
.wk-admin form[action="/postmsg"] a[href="/dashboard"] {
  display: inline-flex !important;
  width: auto !important;
  text-decoration: none;
  margin-right: 12px;
}

.wk-admin form[action="/postmsg"] #subbutt,
.wk-admin form[action="/postmsg"] button#subbutt,
.wk-admin form[action="/postmsg"] [id="subbutt"] {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  align-self: flex-start !important;
  min-width: 140px;
}

.wk-admin form[action="/postmsg"] #subbutt.w-full,
.wk-admin form[action="/postmsg"] [id="subbutt"].w-full {
  width: auto !important;
}

/* ==========================================================
   SEND E-MAIL (/postmail)
   ========================================================== */

.wk-admin form[action="/postmail"] {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.wk-admin form[action="/postmail"] br {
  display: none;
}

/* Allow Send Email module to be full-width */
.wk-admin form[action="/postmail"] .grid-responsive,
.wk-admin form[action="/postmail"] .grid-responsive > .relative {
  width: 100% !important;
  max-width: none !important;
}

.wk-admin form[action="/postmail"] ui-field,
.wk-admin form[action="/postmail"] [data-flux-field],
.wk-admin form[action="/postmail"] ui-control,
.wk-admin form[action="/postmail"] [data-flux-control],
.wk-admin form[action="/postmail"] ui-textarea,
.wk-admin form[action="/postmail"] [data-flux-textarea] {
  width: 100% !important;
  max-width: none !important;
}

/* Radio spacing */
.wk-admin form[action="/postmail"] input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  transform: translateY(2px);
}

.wk-admin form[action="/postmail"] div[style*="margin-left: 15px"] {
  margin-left: 2px !important;
  margin-top: 6px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
}

.wk-admin form[action="/postmail"] div[style*="margin-left: 15px"] > br {
  display: none !important;
}

/* TinyMCE */
.wk-admin .tox {
  border-radius: 5px !important;
  border: 0.75px solid #e0e0e0 !important;
  overflow: hidden;
}

.wk-admin .tox .tox-editor-header,
.wk-admin .tox .tox-statusbar {
  background: #ffffff !important;
}

.wk-admin .tox .tox-edit-area__iframe {
  background: #ffffff !important;
}

.dark .wk-admin .tox {
  border-color: rgb(82 82 91) !important;
}
.dark .wk-admin .tox .tox-editor-header,
.dark .wk-admin .tox .tox-statusbar {
  background: rgb(24 24 27) !important;
}
.dark .wk-admin .tox .tox-edit-area__iframe {
  background: rgb(24 24 27) !important;
}

.wk-admin .tox-promotion {
  display: none !important;
}

/* TinyMCE spacing */
.wk-admin form[action="/postmail"] .tox.tox-tinymce,
.wk-admin form[action="/postmail"] .tox-tinymce {
  margin: 10px 0 16px 0 !important;
}

/* File input */
.wk-admin form[action="/postmail"] input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 6px;
}

/* Actions */
.wk-admin form[action="/postmail"] a[href="/dashboard"] {
  display: inline-flex !important;
  width: auto !important;
  margin-right: 12px;
  text-decoration: none;
  margin-top: 14px;
}

.wk-admin form[action="/postmail"] #subbutt,
.wk-admin form[action="/postmail"] button#subbutt,
.wk-admin form[action="/postmail"] [id="subbutt"] {
  display: inline-flex !important;
  width: auto !important;
  min-width: 140px;
  margin-top: 14px;
}

.wk-admin form[action="/postmail"] #subbutt.w-full,
.wk-admin form[action="/postmail"] a[href="/dashboard"] .w-full {
  width: auto !important;
}

/* ==========================================================
   RESPONSIVE: admin padding + DataTables + type scaling
   ========================================================== */

@media (max-width: 1024px) {
  .wk-admin flux\:main,
  .wk-admin [data-flux-main] {
    padding: 20px 24px;
  }

  .wk-admin table.dataTable thead th,
  .wk-admin table.dataTable tbody td {
    padding: 10px 10px;
  }
}

@media (max-width: 768px) {
  .wk-admin flux\:main,
  .wk-admin [data-flux-main] {
    padding: 18px 18px;
  }

  .wk-admin [data-flux-heading] {
    align-items: flex-start;
  }

  .wk-admin table.dataTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wk-admin .grid-responsive > .relative {
    padding: 14px;
  }
}

@media (max-width: 600px) {
  .wk-admin flux\:main,
  .wk-admin [data-flux-main] {
    padding: 14px 14px;
  }

  .wk-admin .grid-responsive-2 > .relative,
  .wk-admin .grid-responsive > .relative {
    padding: 14px;
    border-radius: 5px;
  }

  .wk-admin table.dataTable thead th,
  .wk-admin table.dataTable tbody td {
    font-size: 10pt;
  }

  .wk-admin .dt-buttons .btn {
    font-size: 10pt;
    padding: 8px 10px;
    margin-right: 6px;
  }
}

/* ==========================================================
   MANAGE RESOURCES (/resources) — overwrite (current)
   ========================================================== */

/* --- Categories/Weekly column width (page sidebar) --- */
.wk-admin flux\:sidebar,
.wk-admin [data-flux-sidebar] {
  width: 300px;
  min-width: 300px;
  flex: 0 0 300px;
}

/* Ensure the page’s content column flexes */
.wk-admin flux\:main,
.wk-admin [data-flux-main] {
  flex: 1 1 auto;
}

/* --- Align “Manage Resources” with Categories header --- */
/* Remove the extra top padding from admin canon and then nudge heading down */
.wk-admin flux\:sidebar + flux\:main,
.wk-admin [data-flux-sidebar] + [data-flux-main] {
  padding-top: 18px !important;
}

/* --- Sidebar headings: keep +Add button on same line --- */
.wk-admin flux\:sidebar flux\:heading[size="lg"],
.wk-admin flux\:sidebar [data-flux-heading][size="lg"] {
  font-size: 12pt;
  font-weight: 800;
  color: var(--wk-darkpurple);
  margin: 0 0 10px 0;
  line-height: 1.15;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}

.wk-admin flux\:sidebar flux\:heading[size="lg"] flux\:button\.group,
.wk-admin flux\:sidebar [data-flux-heading][size="lg"] [data-flux-button-group] {
  display: inline-flex !important;
  gap: 10px;
  flex-wrap: nowrap;
  margin: 0;
}

/* Lists scroll containers */
.wk-admin #catlist,
.wk-admin #weeklist {
  margin-top: 10px;
  padding-right: 6px;
}

/* Add 50px top & bottom padding around the separator between cats and weekly */
.wk-admin flux\:sidebar flux\:separator,
.wk-admin flux\:sidebar [data-flux-separator] {
  margin: 50px 0 !important;
}

/* List rows */
.wk-admin .catdiv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 0;
  border-radius: 5px;
  cursor: pointer;
}

.wk-admin .catdiv:hover {
  background: #ffffff;
}

/* Category names: black, no indent */
.wk-admin .catdiv .catlistname {
  font-size: 12pt;
  line-height: 1.2;
  color: #000000;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

/* Pencil icon spacing consistency */
.wk-admin .catdiv .editcatbutt,
.wk-admin .catdiv .editweekbutt {
  flex: none;
  color: var(--wk-darkpurple);
  opacity: 0.8;
}

.wk-admin .catdiv .editcatbutt:hover,
.wk-admin .catdiv .editweekbutt:hover {
  opacity: 1;
}

/* Optional active state if JS adds .is-active */
.wk-admin .catdiv.is-active {
  background: #ffffff;
  border: 0.75px solid #e0e0e0;
  padding-left: 10px;
  padding-right: 10px;
}

/* --- Main: empty state + resource list header --- */
.wk-admin .noselection,
.wk-admin .noresults {
  margin-top: 10px;
  font-size: 11pt;
  line-height: 1.3;
  color: var(--wk-darkgray);
}

.wk-admin #rsrctablediv h3 {
  margin: 30px 0 14px 0;
  font-size: 12pt;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Make “Add Resource” match the +Add buttons (light surface + blue icon/text) */
.wk-admin #rsrctablediv h3 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 10.5pt;
  font-weight: 200;
  background: #f8f8f8;
  color: #3b82f6;
  cursor: pointer;
  text-decoration: none;
}

.wk-admin #rsrctablediv h3 .button::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #3b82f6;
  color: #ffffff;
font-weight: 100;
  font-size: 13pt;
  line-height: 1;
  transform: translateY(-0.5px);
}

.wk-admin #rsrctablediv h3 .button:hover {
  background: #f0f0f0;
}

/* --- Resources list table (non-DataTables) — canon look, tighter padding --- */
.wk-admin #rsrclisttable {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.wk-admin #rsrclisttable tbody td {
  padding: 0 10px; /* reduced padding */
  font-size: 11pt;
  line-height: 1.2;
  border-bottom: 0.75px solid #e0e0e0;
  vertical-align: middle;
}

.wk-admin #rsrclisttable tbody tr:nth-child(even) td {
  background: #f8f8f8;
}

.wk-admin #rsrclisttable tbody tr:last-child td {
  border-bottom: 0;
}

.wk-admin #rsrclisttable .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 18pt;
  line-height: 1;
  cursor: pointer;
}

.wk-admin #rsrclisttable .arrow:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* --- Arrow column: fixed width + no extra padding --- */
.wk-admin #rsrclisttable td.rsrclistarrows {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 0;              /* overrides tbody td padding */
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

/* Keep arrows centered and prevent layout jitter */
.wk-admin #rsrclisttable td.rsrclistarrows .arrow {
  margin: 0 2px;
}

/* Remove gap between arrows and image columns */
.wk-admin #rsrclisttable td.rsrclistarrows,
.wk-admin #rsrclisttable td.rsrclistimg {
  padding-left: 0;
  padding-right: 0;
  border-right: 1px solid #e0e0e0;
}

/* Lock the thumbnail column so it can’t balloon and look like an extra column */
.wk-admin #rsrclisttable td.rsrclistimg {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  padding: 0;              /* keep the gap fix */
}

/* (Optional) ensure the cell doesn’t try to distribute extra space */
.wk-admin #rsrclisttable td.rsrclistimg {
  white-space: nowrap;
}




.wk-admin #rsrclisttable .rsrclistimg img {
  display: block;
  width: 80px;
  height: 50px;
   object-fit: cover;
  object-position: 50% 20%;;
}

/* Title column */
.wk-admin #rsrclisttable .rsrclisttitle {
font-size: 12pt;
  font-weight: 500;
}

/* Buttons column + canon button styles */
.wk-admin #rsrclisttable .rsrclistbutts {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.wk-admin #rsrclisttable .rsrclistbutts .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 7px;
  font-size: 9pt;
  font-weight: 500;
  line-height: 1;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  color: #000;
}

/* Hover for neutral buttons (Edit-style) */
.wk-admin #rsrclisttable .rsrclistbutts .button:hover {
  background: #f4f4f5;
}

/* DELETE — solid red, like Floaters */
.wk-admin #rsrclisttable .rsrclistbutts .button.danger,
.wk-admin #rsrclisttable .rsrclistbutts .danger.button {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

/* Delete hover */
.wk-admin #rsrclisttable .rsrclistbutts .button.danger:hover,
.wk-admin #rsrclisttable .rsrclistbutts .danger.button:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* Spacing between Edit / Delete */
.wk-admin #rsrclisttable .rsrclistbutts .button + a,
.wk-admin #rsrclisttable .rsrclistbutts a + .button,
.wk-admin #rsrclisttable .rsrclistbutts .button + .button {
  margin-left: 10px;
}

.wk-admin #rsrclisttable .rsrclistbutts a {
  text-decoration: none;
}

/* --- jQuery UI dialog (Add/Edit Category) --- */
.wk-admin .ui-dialog {
  border-radius: 5px;
  border: 0.75px solid #e0e0e0;
  overflow: hidden;
}

.wk-admin .ui-dialog .ui-dialog-titlebar {
  background: #f8f8f8;
  border: 0;
  border-bottom: 0.75px solid #e0e0e0;
  color: var(--wk-darkpurple);
  font-weight: 800;
  font-size: 11pt;
}

.wk-admin .ui-dialog .ui-dialog-content {
  padding: 14px 14px;
  font-size: 11pt;
  line-height: 1.3;
}

.wk-admin .ui-dialog label {
  display: block;
  margin: 0 0 6px 0;
  font-size: 10.5pt;
  font-weight: 700;
  color: var(--wk-darkpurple);
}

.wk-admin .ui-dialog input[type="text"],
.wk-admin .ui-dialog input[type="number"],
.wk-admin .ui-dialog select {
  width: 100%;
  max-width: 100%;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 11pt;
  box-sizing: border-box;
  background: #fff;
}

.wk-admin .ui-dialog input:focus-visible,
.wk-admin .ui-dialog select:focus-visible {
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
}

.wk-admin .ui-dialog .ui-dialog-buttonpane {
  border: 0;
  border-top: 0.75px solid #e0e0e0;
  background: #ffffff;
  padding: 10px 14px;
}

.wk-admin .ui-dialog .ui-dialog-buttonset button {
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 10.5pt;
  font-weight: 700;
  border: 0.75px solid #e0e0e0;
  background: #f8f8f8;
  color: var(--wk-darkpurple);
  cursor: pointer;
}

.wk-admin .ui-dialog .ui-dialog-buttonset button:hover {
  opacity: 0.75;
}

.wk-admin #dialog-addeditcat #delcatbutt {
  margin-top: 12px;
}

/* --- Dark mode safety --- */
.dark .wk-admin flux\:sidebar,
.dark .wk-admin [data-flux-sidebar] {
  background: rgb(39 39 42);
}

.dark .wk-admin .catdiv:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dark .wk-admin .catdiv.is-active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgb(82 82 91);
}

.dark .wk-admin .catdiv .catlistname {
  color: #ffffff;
}

.dark .wk-admin #rsrclisttable {
  background: rgb(24 24 27);
  border-color: rgb(82 82 91);
}

.dark .wk-admin #rsrclisttable tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.06);
}

.dark .wk-admin #rsrclisttable tbody td {
  border-bottom-color: rgb(82 82 91);
}

.dark .wk-admin #rsrclisttable .rsrclistimg img {
  border-color: rgb(82 82 91);
}

/* Center Add Resource vertically with “Manage Resources” */
.wk-admin #rsrctablediv h3 {
  align-items: center;
}

/* Ensure button doesn’t sit lower due to line-height */
.wk-admin #rsrctablediv h3 .button {
  line-height: 1;
}


/* --- Responsive --- */
@media (max-width: 1024px) {
  .wk-admin flux\:sidebar,
  .wk-admin [data-flux-sidebar] {
    width: 320px;
    min-width: 320px;
    flex-basis: 320px;
  }

  .wk-admin #rsrctablediv h3 {
    font-size: 12pt;
  }
}

@media (max-width: 768px) {
  .wk-admin flux\:sidebar,
  .wk-admin [data-flux-sidebar] {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  .wk-admin #rsrclisttable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wk-admin #rsrclisttable tbody td {
    padding: 8px 10px;
  }

  .wk-admin #rsrclisttable .rsrclistimg img {
    width: 76px;
    height: 50px;
  }
}

@media (max-width: 600px) {
  .wk-admin #rsrctablediv h3 {
    font-size: 12.5pt;
  }

  .wk-admin #rsrclisttable tbody td {
    font-size: 10pt;
  }

  .wk-admin #rsrclisttable .arrow {
    width: 30px;
    height: 30px;
    font-size: 16pt;
  }

  .wk-admin #rsrctablediv h3 .button,
  .wk-admin #rsrclisttable .rsrclistbutts .button {
    font-size: 10pt;
    padding: 8px 10px;
  }

  .wk-admin #rsrctablediv h3 .button::before {
    width: 16px;
    height: 16px;
    font-size: 10.5pt;
  }
}

/* ==========================================================
   ADD / EDIT EVENT — canon alignment with ADD / EDIT USER
   Scoped: #eventform only
   ========================================================== */

#eventform{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

/* Panels: match admin canon surface (your admin canon already does this,
   but Event markup uses p-2; this makes it match visually) */
#eventform .grid-responsive-2 > .relative{
  background: #f8f8f8;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px !important; /* override p-2 */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Simple label style for non-Flux “row labels” */
#eventform .wk-admin-rowlabel{
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wk-darkpurple);
  margin: 0;
}

/* Date/time row */
#eventform .wk-admin-datetime{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Native date/time inputs: match DataTables/search input vibe */
#eventform input[type="date"],
#eventform input[type="time"]{
  height: 50px;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fff;
  border: 0.75px solid #e0e0e0;
  padding: 0 10px;
  font-size: 11pt;
}

/* Inline checkbox row parity */
#eventform .wk-admin-inlinecheck{
  margin: 0;
}

#eventform .wk-admin-inlinecheck input[type="checkbox"]{
  width: 16px;
  height: 16px;
  transform: translateY(1px);
}

/* Actions row (Save/Cancel) */
#eventform .wk-admin-actions{
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

#eventform .wk-admin-actions a{
  text-decoration: none;
}

/* Focus visibility */
#eventform input[type="date"]:focus-visible,
#eventform input[type="time"]:focus-visible{
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px){
  #eventform .grid-responsive-2 > .relative{
    padding: 18px !important;
  }
}

@media (max-width: 768px){
  #eventform .wk-admin-datetime{
    flex-direction: column;
    align-items: stretch;
  }
  #eventform input[type="date"],
  #eventform input[type="time"]{
    width: 100%;
  }
}

@media (max-width: 600px){
  #eventform .grid-responsive-2 > .relative{
    padding: 14px !important;
  }
}

/* Event form: clickable All-day label */
#eventform .wk-admin-inlinecheck{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

#eventform .wk-admin-inlinecheck input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(1px);
}

#eventform .wk-admin-inlinecheck-label{
  font-size: 11pt;
  font-weight: 600;
  line-height: 1.25;
  color: #3f3f46; /* matches your label tone in admin */
  cursor: pointer;
  user-select: none;
}

#eventform .wk-admin-inlinecheck input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
}

/* Event form: date/time rows */
#eventform .wk-event-datetime-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px 0;
}

#eventform .wk-event-datetime-sep{
  font-size: 11pt;
  font-weight: 600;
  color: var(--wk-darkgray);
}

#eventform .wk-event-allday{
  margin-top: 6px;
}

/* ==========================================================
   ADD/EDIT PROGRAMS — OVERWRITE
   Stacked rows + zebra striping + top-right Edit button
   ========================================================== */

/* Section headers */
.wk-admin .progtablehead{
  display: block;
  margin: 26px 0 10px 0;
  font-size: 13pt;
  font-weight: 900;
  line-height: 1.2;
  color: var(--wk-darkpurple);
}

/* Table surface (tbody contains divs) */
.wk-admin table.progtable{
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.wk-admin table.progtable thead{ display: none; }
.wk-admin table.progtable tbody{ display: block; }

/* Each program row */
.wk-admin .progentry{
  position: relative;
  display: block;
  padding: 12px 120px 12px 14px; /* reserve right space for Edit */
  border-bottom: 0.75px solid #e0e0e0;
  background: #fff;
}

.wk-admin table.progtable tbody .progentry:nth-child(even){
  background: #f8f8f8;
}

.wk-admin table.progtable tbody .progentry:last-child{
  border-bottom: 0;
}

/* Name */
.wk-admin .progentry .progname{
  margin: 0 0 4px 0;
  font-size: 13pt;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Detail rows */
.wk-admin .progentry .daterow,
.wk-admin .progentry .sendmailrow{
  margin: 0;
  font-size: 11pt;
  line-height: 1.3;
  color: var(--wk-darkgray);
}

.wk-admin .progentry .daterow b,
.wk-admin .progentry .sendmailrow b{
  font-weight: 700;
  color: var(--wk-darkpurple);
  margin-right: 5px;
}

/* Top-right Edit button */
.wk-admin .progentry .editlink{
  position: absolute;
  top: 12px;
  right: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 5px;
  border: 0.75px solid #d4d4d8;
  background: #fff;

  font-size: 9pt;
  font-weight: 600;
  line-height: 1.2;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

.wk-admin .progentry .editlink::after{ content: ""; }

.wk-admin .progentry .editlink:hover{
  background: #f4f4f5;
  text-decoration: none;
}

.wk-admin .progentry .editlink:focus-visible{
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
  border-radius: 5px;
}

/* Responsive */
@media (max-width: 1024px){
  .wk-admin .progentry{ padding: 10px 116px 10px 12px; }
  .wk-admin .progentry .editlink{ top: 10px; right: 12px; }
}

@media (max-width: 768px){
  .wk-admin .progentry{ padding: 10px 112px 10px 12px; }
}

@media (max-width: 600px){
  .wk-admin .progtablehead{ font-size: 12pt; }
  .wk-admin .progentry{ padding: 10px 108px 10px 12px; }
  .wk-admin .progentry .progname{ font-size: 12pt; }

  .wk-admin .progentry .daterow,
  .wk-admin .progentry .sendmailrow{
    font-size: 10pt;
  }

  .wk-admin .progentry .editlink{
    font-size: 10pt;
    padding: 4px 9px;
  }
}


/* ==========================================================
   ADD/EDIT PROGRAM — width control (final)
  ========================================================== */

/* Name */
.wk-admin .progentry .progname{
  margin: 0 0 4px 0;
  font-size: 13pt;
  font-weight: 500;
  line-height: 1.25;
  color: #000;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Detail rows */
.wk-admin .progentry .daterow,
.wk-admin .progentry .sendmailrow{
  margin: 0;
  font-size: 11pt;
  line-height: 1.8;
}

.wk-admin .progentry .daterow b,
.wk-admin .progentry .sendmailrow b{
  font-weight: 600;
  margin-right: 5px;
}

/* Top-right Edit button */
.wk-admin .progentry .editlink{
  position: absolute;
  top: 12px;
  right: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 4px 10px;
  border-radius: 5px;
  border: .75px solid #e0e0e0;
  background: #fff;

  font-size: 9pt;
  font-weight: 400;
  color: #000;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* No chevron for button look */
.wk-admin .progentry .editlink::after{ content: ""; }

.wk-admin .progentry .editlink:hover{
  background: #f8f8f8;
  text-decoration: none;
}

.wk-admin .progentry .editlink:focus-visible{
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
  border-radius: 5px;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1024px){
  .wk-admin .progentry{
    padding: 10px 116px 10px 12px;
  }
  .wk-admin .progentry .editlink{
    top: 10px;
    right: 12px;
  }
}

@media (max-width: 768px){
  .wk-admin .progentry{
    padding: 10px 112px 10px 12px;
  }
}

@media (max-width: 600px){
  .wk-admin .progtablehead{ font-size: 12pt; }

  .wk-admin .progentry{
    padding: 10px 108px 10px 12px;
  }

  .wk-admin .progentry .progname{ font-size: 12pt; }

  .wk-admin .progentry .daterow,
  .wk-admin .progentry .sendmailrow,
  .wk-admin .progentry .editlink{
    font-size: 10pt;
  }

  .wk-admin .progentry .editlink{
    padding: 4px 9px;
  }
}

/* ==========================================================
   ADD/EDIT PROGRAM — match Add/Edit Team form width + panel feel
   Scoped to: /savegroupprog
   ========================================================== */

.wk-admin form[action="/savegroupprog"]{
  width: 100%;
  max-width: 720px;         /* matches the “team form” visual width */
  margin: 0;                /* keep consistent with admin flow */
}

/* Center the single-panel form so it doesn’t feel overly wide */
.wk-admin form[action="/savegroupprog"] .grid-responsive-2{
  max-width: 720px;
  margin: 0 auto;
}

/* Ensure the panel matches the Team panel surface (and defeats p-2) */
.wk-admin form[action="/savegroupprog"] .grid-responsive-2 > .relative{
  background: #f8f8f8;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px !important;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Your inline <style> hits div.w-full globally — neutralize inside this form */
.wk-admin form[action="/savegroupprog"] div.w-full{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Mobile breathing room parity */
@media (max-width: 600px){
  .wk-admin form[action="/savegroupprog"] .grid-responsive-2 > .relative{
    padding: 14px !important;
  }
}

/* ==========================================================
   ADD/EDIT PROGRAM — widen form, no centering
   ========================================================== */

/* Let the form grow wider like Add/Edit Team */
.wk-admin form[action="/savegroupprog"]{
  max-width: 980px;   /* wider than Team, but still controlled */
}

/* Remove centering behavior */
.wk-admin form[action="/savegroupprog"] .grid-responsive-2{
  max-width: 100%;
  margin: 0;
}

/* ==========================================================
   ADD/EDIT PROGRAM — actually increase usable width
   ========================================================== */

.wk-admin form[action="/savegroupprog"] .grid-responsive-2{
  max-width: 1100px;   /* wider than Team */
}

/* ==========================================================
   ADD/EDIT PROGRAM — width control (no .wk-admin dependency)
   ========================================================== */

form[action="/savegroupprog"]{
  width: 100%;
  max-width: 1100px;
  margin-left: 0;
  margin-right: 0;
}

/* Ensure the form panel fills that width */
form[action="/savegroupprog"] .grid-responsive-2{
  width: 100%;
  max-width: 100%;
}


/* ==========================================================
   MANAGE PAYMENT GATEWAYS — table styling
   Canon: Manage Teams
   ========================================================== */

/* Table surface */
#wrapper #gatewaytable,
#gatewaytable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 0.75px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

/* Header */
#gatewaytable thead th{
  padding: 10px 12px;
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  color: var(--wk-darkpurple);
  background: #f4f4f5;
  border-bottom: 0.75px solid #e0e0e0;
}

#gatewaytable thead th:last-child,
#gatewaytable thead th:nth-last-child(2){
  text-align: right;
}

/* Body rows */
#gatewaytable tbody tr{
  background: #fff;
}

#gatewaytable tbody tr:nth-child(even){
  background: #f8f8f8;
}

#gatewaytable tbody td{
  padding: 20px 12px;
  font-size: 11pt;
  line-height: 1.2;
  vertical-align: top;
  border-bottom: 0.75px solid #e0e0e0;
  margin: 0;
}

/* Remove bottom border on last row */
#gatewaytable tbody tr:last-child td{
  border-bottom: 0;
}

/* Name / description cell */
#gatewaytable tbody td:first-child b{
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

/* Active cell */
#gatewaytable .activecell{
  font-weight: 600;
  white-space: nowrap;
}

/* Action cells */
#gatewaytable .actioncell{
  text-align: right;
  white-space: nowrap;
}

/* Tighten Flux buttons in tables (matches Teams) */
#gatewaytable .actioncell flux\\:button,
#gatewaytable .actioncell .flux-button{
  font-size: 9pt;
  padding: 4px 8px;
}

/* Remove anchor styling around Edit button */
#gatewaytable .editbutt{
  text-decoration: none;
}

/* ==========================================================
   PAYMENT GATEWAYS — tighten name/description spacing
   Applies to ALL gateway row types
   ========================================================== */

.PaymentGateway .activecell {
color: red;
}

/* Target any gateway row by class name pattern */
#gatewaytable tr[class*="Gateway"] td{
  line-height: 1.3;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Control spacing created by <br> */
#gatewaytable tr[class*="Gateway"] td br{
  display: block;
  margin: 2px 0 0;
  content: "";
}

/* Keep gateway name compact */
#gatewaytable tr[class*="Gateway"] td > b{
  display: inline-block;
  margin: 0;
  line-height: 1.15;
}



/* =========================================
   Responsive
   ========================================= */

@media (max-width: 768px){
  #gatewaytable thead{
    display: none;
  }

  #gatewaytable tbody tr{
    display: block;
    padding: 10px 12px;
  }

  #gatewaytable tbody td{
    display: block;
    padding: 4px 0;
    border: 0;
  }

  #gatewaytable .actioncell{
    margin-top: 6px;
    text-align: left;
  }
}

/* ==========================================================
   MANAGE DISCOUNT CODES — overwrite (match admin table canon)
   Targets: #disccodetable + .editrow + inline inputs
   ========================================================== */

/* Defeat the inline <style> block on this page */
.wk-admin #disccodetable{
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
  border: 0.75px solid #e0e0e0 !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  margin-top: 50px;
}

/* Header */
.wk-admin #disccodetable thead th{
  text-align: left !important;
  background: #f8f8f8;
  border-bottom: 0.75px solid #e0e0e0 !important;
  padding: 12px 12px;
  font-size: 11pt;
  font-weight: 700;
  line-height: 1.2;
  color: var(--wk-darkpurple);
  white-space: nowrap;
}

/* Body cells */
.wk-admin #disccodetable tbody td{
  padding: 10px 12px !important;         /* beats inline td padding */
  font-size: 11pt;
  line-height: 1.25;
  border-bottom: 0.75px solid #e0e0e0;
  vertical-align: top;
  background: #fff;
}

/* Remove forced fixed row height from inline CSS */
.wk-admin #disccodetable tbody tr{
  height: auto !important;
}

/* Zebra striping (non-edit rows only) */
.wk-admin #disccodetable tbody tr:not(.editrow):nth-child(even) td{
  background: #f8f8f8;
}

.wk-admin #disccodetable tbody tr:last-child td{
  border-bottom: 0;
}

/* First column: code */
.wk-admin #disccodetable tbody td:first-child b{
  display: inline-block;
  font-size: 12pt;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
}

/* Active column: compact + centered vibe */
.wk-admin #disccodetable td.isactivecell{
  white-space: nowrap;
  font-weight: 300;
}

/* Description cell */
.wk-admin #disccodetable td.desccell{
  color: var(--wk-darkgray);
  font-weight: 500;
  white-space: nowrap;
}

/* Action columns: tight + right aligned */
.wk-admin #disccodetable td.actioncell{
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

/* Keep action buttons from looking underlined */
.wk-admin #disccodetable td.actioncell a{
  text-decoration: none;
}
.wk-admin #disccodetable td.actioncell a:hover{
  text-decoration: none;
}

/* ==========================================================
   Edit row (the expandable row)
   ========================================================== */

.wk-admin #disccodetable tbody tr.editrow td{
  background: #f8f8f8 !important;         /* beats inline .editrow td bg */
  border-bottom: 0.75px solid #e0e0e0 !important;
  vertical-align: middle;
}

/* Inputs inside edit row (defeat inline .amtoffbox/.codebox) */
.wk-admin #disccodetable .amtoffbox,
.wk-admin #disccodetable .codebox{
  background: #fff !important;
  border: 0.75px solid #e0e0e0 !important;
  border-radius: 5px;
  height: 34px;
  padding: 0 10px;
  font-size: 11pt;
  box-sizing: border-box;
  width: 140px !important;               /* beats inline 100px */
}

/* Make the code box a bit wider than amount */
.wk-admin #disccodetable .codebox{
  width: 170px !important;
}

.wk-admin #disccodetable .amtoffbox:focus-visible,
.wk-admin #disccodetable .codebox:focus-visible{
  outline: 2px solid var(--wk-darkpurple);
  outline-offset: 2px;
}

/* Checkbox + radios: consistent sizing */
.wk-admin #disccodetable input[type="checkbox"],
.wk-admin #disccodetable input[type="radio"]{
  width: 16px;
  height: 16px;
  transform: translateY(2px);
  margin-right: 8px;
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 1024px){
  .wk-admin #disccodetable thead th,
  .wk-admin #disccodetable tbody td{
    padding: 10px 10px !important;
  }
}

@media (max-width: 768px){
  .wk-admin #disccodetable{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wk-admin #disccodetable td.desccell{
    white-space: normal;
  }
}

@media (max-width: 600px){
  .wk-admin #disccodetable thead th,
  .wk-admin #disccodetable tbody td{
    font-size: 10pt;
  }

  .wk-admin #disccodetable tbody td:first-child b{
    font-size: 11pt;
  }

  .wk-admin #disccodetable .amtoffbox,
  .wk-admin #disccodetable .codebox{
    height: 32px;
    font-size: 10pt;
  }
}







/* FOLD - MOBILE @1024 */
/* ===================================================================================


    MOBILE STYLING / LOGGING MODULE ONLY @1185
    This was due to needing a break sooner for the logging and progress module
   
   
   =================================================================================== */
   
   @media (max-width: 1185px) {
   
    .wk-dash-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "log"
      "notifications"
      "map"
      "badges"
      "resources"
      "leaderboard"
      "events-cal"
      "events-list";
  }

   
/* ------------------ TOP ROW - CHALLENGE/TEAM ------------------  */

  .wk-dash-toprow{
    flex-wrap: wrap;
    gap: 40px;
    margin: 40px 0 0;
  }

 /* ------------------ LOGGING MODULE ------------------  */

  /* --- LOG TILE LAYOUT --- */
  .wk-dash-log-cta{
    display: grid;

    /* Fixed tracks so the group centers deterministically */
    grid-template-columns: 490px 480px;
    justify-content: center;

    /* titles | content | footer */
    grid-template-rows: auto 1fr auto;
    column-gap: 26px;
    row-gap: 12px;
    align-items: start;
  }

  /* Let header children (title) participate cleanly in grid */
  .wk-dash-log-cta .wk-dash-tile-header{
    display: contents;
  }

  /* "Log Activity" title (from header) */
  .wk-dash-log-cta .wk-dash-tile-header .wk-dash-container-name{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: start;
  }

  /* "Activity Tracker" title (hook added in markup) */
  .wk-dash-log-cta .wk-dash-activity-title{
    grid-column: 2;
    grid-row: 1;
    margin: 1px 0 0; /* tweak as needed */
    align-self: start;
  }
  
  .logboxrow #logfor,
  .logboxrow #logboxdate {
  padding: 0 5px;
  }

  /* Make both columns fill their tracks */
  .wk-dash-log-cta #logbox,
  .wk-dash-log-cta #progressbox{
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    align-self: start;
  }

  /* Left column: selector + divider (extends further down visually) */
  .wk-dash-log-cta #logbox{
    grid-column: 1;
    padding-right: 60px;
    border-right: 1px solid var(--wk-lightpurple);
  }

  /* Right column: tracker + symmetric padding */
  .wk-dash-log-cta #progressbox{
    grid-column: 2;
    border-left: 0;
  }

  /* Left-align the selector rows */
  .wk-dash-log-cta #logbox .logboxrow:has(#logfor),
  .wk-dash-log-cta #logbox .logboxrow:has(#logboxdate){
    justify-content: flex-start;
  }

  .wk-dash-log-cta #logbox .logboxrow{
    justify-content: flex-start;
  }

  /* Footer link (your markup: <a class="wk-dash-link wk-dash-tile-footer">...) */
  .wk-dash-log-cta .wk-dash-tile-footer{
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    margin-top: 10px;
    text-align: center;
  }

  /* Remove the selector divider that looks odd in 2-col mode */
  .wk-dash-log-cta #logbox .logboxrow.submitrow{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* --- DASH MISC @1024 --- */

  #loghistorytable{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Notifications: don’t trap the tile height on narrower widths */
  .wk-dash-notifications{
    max-height: none;
  }
}

/* FOLD - MOBILE @1024 */
/* ===================================================================================


    MOBILE STYLING @1024
   
   
   =================================================================================== */

   @media (max-width: 1024px) {
   
/* ------------------------------------------------------------------------

   STANDARDS @1024
   
   ------------------------------------------------------------------------ */
   	
  form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;     /* <— centers all the inputs */
    margin: 0 auto;
  }

  form flux\:input,
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="tel"],
  .group-select {
    width: 450px;           /* keep your desktop width */
    max-width: 100%;        /* shrink gracefully if needed */
    margin-left: auto;
    margin-right: auto;     /* <— ensures true centering */
    background: white;
  }

  /* Center the divider too */
  .form-divider-topbtm,
  .form-divider-top,
  .form-divider-section {
    margin-left: auto;
    margin-right: auto;
  }

  /* Buttons stay horizontal at 1024, but centered */
  .form-buttons {
    justify-content: center;
  }

/* ------------------------------------------------------------------------

   LANDING/LOGIN & REGISTRATION @1024
   
   ------------------------------------------------------------------------ */
   
/* ------------------ LANDING/LOGIN PAGE ------------------  */

  .login-center {
    width: 100%;
    max-width: 900px;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .login-card {
    margin: -60px auto 40px;
    background: linear-gradient(var(--wk-darkpurple) 0 60px, #f5f5f5 60px 100%);
  }

  .login-title {
    font-size: 28pt;
    transform: translateY(-52px);
  }

  .login-card-bg {
    width: 560px;
    max-width: 100%;
    padding: 40px 40px;
  }

  .about-callouts {
    flex-wrap: wrap;
    gap: 20px;
    margin: -20px 0 40px;
  }

  .about-card {
    width: 200px;
    height: 120px;
  }

 .wk-about h1 {
  font-size: 28pt;
  }

  /* About info: keep two columns at 1024, just reduce image height a touch */
  .about-info-image img {
    height: 220px;
  }

/* ------------------ REGISTRATION P.1 - ABOUT YOU ------------------  */

  .reg-center {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .reg-card {
    width: 100%;
    margin: -64px auto 80px;
    padding: 48px 40px 56px;
  }

  .reg-title {
    font-size: 28pt;
    transform: translateY(-48px);
  }

  .reg-card p {
    font-size: 16pt;
    line-height: 1.35;
    text-align: center;
  }

  /* Center the “Already have an account” text */
  .login-text {
    text-align: center;
  }
  
/* ------------------ REGISTRATION P.2 - SETUP PROGRAM/TEAM ------------------  */
  
  /* Keep labels + conditional sections aligned with the form column */
  .reg-card .wk-label,
  .showifgroupselected,
  .showifprogramselected,
  .showifindivid {
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Program cards column */
  #progbuttons {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
  }

  /* Team / individual segmented control column */
  .segmented-control {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    gap: 32px; /* slightly tighter than base 50px */
  }
  
/* ------------------ REGISTRATION P.3 - POPULATE TEAM ------------------  */
  
    #teamtable {
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
  }
  
  
/* ------------------ REGISTRATION P.4 - CHECKOUT ------------------  */

    .checkout-section {
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Remove extra right padding so it doesn’t cause side-scroll */
  .checkout-table {
    padding-right: 0;
  }

  /* Allow horizontal scroll if 4 columns get tight */
  .checkout-summary {
    overflow-x: auto;
  }

/* ------------------------------------------------------------------------

   PARTICIPANT DASHBOARD @1024

   ------------------------------------------------------------------------ */

/* ------------------ STANDARDS & GRID ------------------  */

  /* Match your mobile canon side padding rhythm */
  .page-wrapper{
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }
  
   /* DASH GRID: go single-column stack */
  .wk-dash-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "log"
      "notifications"
      "map"
      "badges"
      "resources"
      "leaderboard"
      "events-cal"
      "events-list";
  }

/* ------------------ TOP ROW - CHALLENGE/TEAM ------------------  */

  .wk-dash-toprow{
    flex-wrap: wrap;
    gap: 40px;
    margin: 40px 0 0;
  }

 /* ------------------ LOGGING MODULE ------------------  */

  /* --- LOG TILE LAYOUT --- */
  .wk-dash-log-cta{
    display: grid;

    /* Fixed tracks so the group centers deterministically */
    grid-template-columns: 435px 405px;
    justify-content: center;

    /* titles | content | footer */
    grid-template-rows: auto 1fr auto;
    column-gap: 26px;
    row-gap: 12px;
    align-items: start;
  }

  /* Let header children (title) participate cleanly in grid */
  .wk-dash-log-cta .wk-dash-tile-header{
    display: contents;
  }

  /* "Log Activity" title (from header) */
  .wk-dash-log-cta .wk-dash-tile-header .wk-dash-container-name{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: start;
  }

  /* "Activity Tracker" title (hook added in markup) */
  .wk-dash-log-cta .wk-dash-activity-title{
    grid-column: 2;
    grid-row: 1;
    margin: 1px 0 0; /* tweak as needed */
    align-self: start;
  }
  
  .logboxrow #logfor,
  .logboxrow #logboxdate {
  padding: 0 5px;
  }

  /* Make both columns fill their tracks */
  .wk-dash-log-cta #logbox,
  .wk-dash-log-cta #progressbox{
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    align-self: start;
  }

  /* Left column: selector + divider (extends further down visually) */
  .wk-dash-log-cta #logbox{
    grid-column: 1;
    padding-right: 20px;
    border-right: 1px solid var(--wk-lightpurple);
  }

  /* Right column: tracker + symmetric padding */
  .wk-dash-log-cta #progressbox{
    grid-column: 2;
    border-left: 0;
  }

  /* Left-align the selector rows */
  .wk-dash-log-cta #logbox .logboxrow:has(#logfor),
  .wk-dash-log-cta #logbox .logboxrow:has(#logboxdate){
    justify-content: flex-start;
  }

  .wk-dash-log-cta #logbox .logboxrow{
    justify-content: flex-start;
  }

  /* Footer link (your markup: <a class="wk-dash-link wk-dash-tile-footer">...) */
  .wk-dash-log-cta .wk-dash-tile-footer{
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    margin-top: 10px;
    text-align: center;
  }

  /* Remove the selector divider that looks odd in 2-col mode */
  .wk-dash-log-cta #logbox .logboxrow.submitrow{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* --- DASH MISC @1024 --- */

  #loghistorytable{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Notifications: don’t trap the tile height on narrower widths */
  .wk-dash-notifications{
    max-height: none;
  }
}


/* FOLD MOBILE @768PX */
/* ===================================================================================


    MOBILE @768
   
   
   =================================================================================== */

@media (max-width: 768px) {

/* ------------------------------------------------------------------------

   STANDARDS @768

   ------------------------------------------------------------------------ */

  /* Form stays centered but tightens width */
  form {
    align-items: center;
    width: 100%;
  }

  form flux\:input,
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="tel"],
  .group-select {
    width: 420px;          /* a bit narrower than 450 for tablet comfort */
    max-width: 100%;
    margin: 0 auto 16px;
  }

  /* Dividers also shrink */
  .form-divider-topbtm,
  .form-divider-top {
    width: 100%;
    max-width: 430px;
    margin: 24px auto;
  }

  .form-divider-section {
    width: 100%;
    max-width: 430px;
    margin: 6px auto 18px;
  }
  
	.topbgimage {
  display: block;
  width: 100%;
  height: 375px;
  object-fit: cover;
}

  /* Buttons: still horizontal at 768, but tighten spacing and center fully */
  .form-buttons {
    width: 100%;
    max-width: 430px;
    margin: 28px auto 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .login-text {
    margin-top: 16px;
    font-size: 15px;
    text-align: center;
  }

/* ------------------------------------------------------------------------

   LANDING/LOGIN & REGISTRATION @768

   ------------------------------------------------------------------------ */

  /* ---------- WELCOME PAGE @768 ---------- */

  .login-center {
    max-width: 720px;
    padding: 0 16px;
  }

  .login-card {
    margin: -56px auto 48px;
    background: linear-gradient(var(--wk-darkpurple) 0 56px, #f5f5f5 56px 100%);
  }

  .login-title {
    font-size: 24pt;
    transform: translateY(-54px);
    text-align: center;
  }

  .login-card-bg {
    width: 520px;
    max-width: 100%;
    padding: 32px 28px;
  }

  .about-callouts {
    justify-content: center;
    gap: 14px;
  }

  .about-card {
    width: calc(50% - 8px);
    min-width: 220px;
    height: 110px;
  }

  /* About info: stack vertically for readability on tablet */
   .wk-about h1 {
  font-size: 24pt;
  margin-top: 10px;
  }
  
  .about-info,
  .about-info.reverse {
    flex-direction: column;
    text-align: left;
    width: 75%;
  }

  .about-info-content,
  .about-info-content.reverse {
    margin: 16px 0 0 0;
  }

  .about-info-content h3,
  .about-info-content.reverse h3 {
    border-top: none;
    padding: 0;
  }

  .about-info-image img {
    height: auto;
  }

  /* Center the single login button row */
  .login-card-bg .form-buttons {
    justify-content: center;
  }

  /* ---------- REGISTRATION P.1 - ABOUT YOU @768 ---------- */

  .reg-center {
    width: 100%;
    max-width: 600px;
    padding: 0 16px;
  }

  .reg-card {
    margin: -56px auto 80px;
    padding: 40px 24px 48px;
    background: linear-gradient(var(--wk-darkpurple) 0 56px, #f5f5f5 56px 100%);
  }

  .reg-title {
    font-size: 24pt;
    line-height: 1.2;
    transform: translateY(-30px);
    text-align: center;
  }

  .reg-card p {
    font-size: 15pt;            /* slightly smaller than desktop/tablet */
    line-height: 1.4;
    text-align: center;
    margin-top: 8px;
  }
  
  /* ---------- REGISTRATION P.2 - SETUP PROGRAM AND TEAM @768 ---------- */
  .reg-card form {
    align-items: stretch;
  }

  /* Use the same 420px column as the inputs */
  .reg-card .wk-label,
  .showifgroupselected,
  .showifprogramselected,
  .showifindivid,
  #progbuttons,
  .segmented-control {
    width: 100%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  .segmented-control__item {
    flex: 1 1 0;
  }

  .segmented-control__label {
    width: 100%;
    justify-content: flex-start;
  }
  
  .reg-card form > div > .relative {
    width: 100%;
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Let the select fill that 420px column instead of its old desktop width */
  .reg-card .group-select {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ---------- REGISTRATION P.3 - POPULATE TEAM @768 ---------- */
  
    #teamtable {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Make registration flux:inputs (Team Name, etc.) use the same centered column */
  .reg-card form input[name="teamname"] {
    width: 100%;
    max-width: 430px;
    margin: 0 auto 16px auto !important;
    display: block;
  }
  
   .reg-card [data-flux-label] {
    display: block;
    width: 100%;
    max-width: 430px;
    margin: 0 auto 4px auto;
    text-align: left; /* keeps text left within the centered column */
  }

  /* Keep ADD TEAM MEMBER as a chip, not full-width */
  #addrow {
    align-self: center;   /* avoid flex "stretch" width */
    width: auto;
  }
  
   /* ---------- REGISTRATION P.4 - CHECKOUT @768 ---------- */
   .checkout-section {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Slightly tighter table padding for tablet */
  .checkout-table thead th,
  .checkout-table td {
    padding-right: 8px;
  }

  /* Buttons area follows the same centered column */
  .checkout-buttons,
  #freecheck {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Dynamic payment copy: match About You text scale */
  .checkout-dynamic p {
    font-size: 15pt;
    line-height: 1.35;
  }
  
    #checkouthtml form button[type="submit"].btn {
    width: auto !important;         /* revert from full-width */
    align-self: center !important;  /* keep nicely centered */
    display: inline-flex !important;
    margin-top: 15px;
  }

/* ------------------------------------------------------------------------

   PARTICIPANT DASHBOARD @768

   ------------------------------------------------------------------------ */

  /* TOP ROW: keep Challenge + Team on one row */
  .wk-dash-toprow{
    flex-direction: row;     /* undo stacking */
    align-items: flex-start;
    gap: 32px;               /* slightly tighter than desktop/1024 */
    margin: 40px 0 0;
  }

  /* Optional: prevent either column from getting too wide */
  .wk-dash-challenges,
  .wk-dash-myteam{
    flex: 0 0 auto;
  }

  /* LOG TILE: stacked layout */
  .wk-dash-log-cta{
    display: block;
  }

  /* Restore the header wrapper (undo display: contents) */
  .wk-dash-log-cta .wk-dash-tile-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  /* Link: keep in header/top-right at 768 */
  .wk-dash-log-cta .wk-dash-tile-footer{
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-top: 0;
    text-align: inherit;
  }

  /* Logging icons row */
  .wk-dash-log-cta #logbox .logboxrow.logtyperow{
    width: min(620px, 100%);
    column-gap: 65px;
    justify-content: center;
  }

  /* Make the selectable tiles larger so the white state feels substantial */
  .wk-dash-log-cta #logbox .logtypeitem{
    width: 155px;
    height: 155px;
  }

  /* Give the icon + label a bit more internal air */
  .wk-dash-log-cta #logbox .logtypeitem::before{
    width: 65px;
    height: 65px;
  }

  .wk-dash-log-cta #logbox .logtypeitem::after{
    margin-top: 4px;
  }

  /* Big number input width */
  .wk-dash-log-cta #logbox #lognum{
    width: min(620px, 100%);
  }

  /* Optional: widen the selects a bit too (still capped) */
  #logfor,
  #logboxdate{
    min-width: 220px;
  }

  /* Remove the 1024 column divider styling */
  .wk-dash-log-cta #logbox{
    padding-right: 0;
    border-right: 0;
  }

  /* Progressbox padding + spacing */
  .wk-dash-log-cta #progressbox{
    padding: 0 24px 0;
    border-top: 0;
    border-left: 0;
    margin: 0 0 10px 0;
  }

  /* Activity Tracker title spacing */
  .wk-dash-log-cta .wk-dash-activity-title{
    margin: 18px 0 10px;
  }

  /* Divider ABOVE Activity Tracker title (inset line) */
  .wk-dash-log-cta h2.wk-dash-container-name.wk-dash-activity-title{
    position: relative;
    margin-top: 24px;
    padding-top: 18px;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
    border-top: 0; /* move border to ::before */
  }

  .wk-dash-log-cta h2.wk-dash-container-name.wk-dash-activity-title::before{
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: var(--wk-lightpurple);
  }

  /* Submit row: keep divider off in stacked mode */
  .wk-dash-log-cta #logbox .logboxrow.submitrow{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Log history table padding at 768 */
  #loghistorytable thead th,
  #loghistorytable tbody td{
    padding: 10px 10px;
  }
}


/* FOLD MOBILE @600PX */
/* ===================================================================================


    SECTION HEADER
   
   
   =================================================================================== */
   
@media (max-width: 600px) {

/* ------------------------------------------------------------------------

   STANDARDS @600

   ------------------------------------------------------------------------ */

  /* Keep your stacked mobile layout for form buttons */
  .form-buttons {
    width: 60%;
    max-width: 100%;
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  
    .form-divider-topbtm,
  .form-divider-top {
    width: 100%;
    max-width: 100%;
    margin: 30px auto;
  }
  
  .form-divider-section {
  margin: 4px auto 16px;
  }

  /* Mobile button: no grow-right behavior, just a normal button */
  .btn-grow-right,
  .btn-grow-right:hover {
    padding: 12px 28px;  /* same as .btn */
    transition: background-color 0.25s ease,
                letter-spacing 0.25s ease; /* drop padding/right transitions */
  }

  /* Chevron behaves like an inline icon */
  .btn-grow-right::after,
  .btn-grow-right:hover::after {
    position: static;           /* no absolute positioning */
    display: inline-block;
    margin-left: 0;             /* (kept as you last had it) */
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--wk-gold);
    border-top: 2px solid var(--wk-gold);
    transform: rotate(45deg);   /* » */
    top: auto;
    right: auto;
    transition: none;           /* no sliding animation on mobile */
  }
  
 /* ------------------------------------------------------------------------

   HAMBURGER MENU @600

   ------------------------------------------------------------------------ */

 /* --- Topbar + hamburger --- */
  .mobile-menu-toggle { display: flex; }

  .topbar {
    padding-left: 25px;
    height: 50px;
    gap: 15px;
  }

  .topbar-logo {
    width: 40px;
    height: 40px;
  }

  .topbar-title { font-size: 17px; }
  
  /* Dash only */
  .topbar.topbar-dash {
    padding-right: 0;
    background: var(--wk-lightpurple);
  }

  .topbar.topbar-dash .mobile-menu-toggle {
    margin-left: auto;
    padding: 0;
    width: 90px;
    height: 50px;   /* matches your mobile topbar height */
    border-radius: 0;
  }
  
  /* --- Drawer shell --- */
  .topnavbar {
    position: fixed;
    top: 65px;                 /* keep your current offset */
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    background: var(--wk-darkpurple);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translateX(100%);
    transition: none;          /* no animation on initial paint */
    z-index: 1000;
  }

  .topnavbar.anim-ready { transition: transform 0.3s ease; }
  .topnavbar.is-open { transform: translateX(0); }

  body.mobile-menu-open { overflow: hidden; }

  /* --- Drawer inner (landing + dash) --- */
  .topnavbar-inner,
  .topnavbar-inner-dash {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 20px;
    font-size: 0;              /* hides literal " | " text nodes */
    width: 100%;
  }

  /* Base drawer row style (applies to <a> and the Sign Out button) */
  .topnavlink {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1.25px solid var(--wk-lightpurple);
    display: block;
    font-size: 16px;
  }

  /* Landing: remove last divider */
  .topnavbar-inner .topnavlink:last-of-type { border-bottom: none; }

  /* --- DASH: stack left + right groups like landing --- */
  .topnavbar-inner-dash .topnav-left,
  .topnavbar-inner-dash .topnav-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* fill width */
    gap: 0;
    margin-left: 0;            /* kills desktop auto-push */
  }

  /* Hide dash separator span */
  .topnavbar-inner-dash .topnav-sep { display: none; }

  /* Divider before right group (Your Account / Sign Out section) */
  .topnavbar-inner-dash .topnav-right {
    border-top: 1.25px solid var(--wk-lightpurple);
  }

  /* Divider BETWEEN Your Account and Sign Out (avoid double borders) */
  .topnavbar-inner-dash .topnav-right .topnavlink { border-bottom: none; }
  .topnavbar-inner-dash .topnav-right .topnavlink:first-child {
    border-bottom: 1.25px solid var(--wk-lightpurple);
  }

  /* Make Sign Out behave like a full-width link row */
  .topnavbar-inner-dash .topnav-logout-form {
    width: 100%;
    display: block;
    margin: 0;
  }

  .topnavbar-inner-dash .topnav-logout-button {
    width: 100%;
    text-align: left;
    display: block;
  }

  /* Hover/focus parity for the button (since .topnavbar a:hover won’t hit <button>) */
  .topnavbar-inner-dash .topnav-logout-button:hover,
  .topnavbar-inner-dash .topnav-logout-button:focus-visible {
    opacity: 0.65;
    text-decoration: none;
  }
  
   .topbar-dash .topbar-utils {
    display: none;
  }

  /* Show secondary links inside the drawer */
  .topnav-secondary-mobile,
  .topnav-secondary-mobile .topnavlink {
    display: block;
    width: 100%;
  }

.topnav-secondary-mobile .topnavlink {
border-top: 1.25px solid var(--wk-lightpurple);
}

.topnav-secondary-mobile .topnavlink:hover {
opacity: 0.65;
cursor: pointer;
}
   
   /* ------------------------------------------------------------------------

   LOGIN/LANDING & REGISTRATION @600

   ------------------------------------------------------------------------ */
   
  /* ---------- WELCOME PAGE @600 ---------- */

.page-wrapper {
  padding: 0;
}

  .login-center {
    width: 100%;
    padding: 0;
  }

  .login-card {
    width: 100%;
    margin: -52px auto 20px;
    padding: 40px 0;
    background: linear-gradient(var(--wk-darkpurple) 0 52px, #f5f5f5 52px 100%);
  }

  .login-title {
    font-size: 20pt;
    transform: translateY(-46px);
    text-align: center;
  }

  .login-card-bg {
    width: 85%;
    padding: 24px 20px;
    box-sizing: border-box;
    margin: 10px auto;
  }

  .login-card-bg form flux\:input,
  .login-card-bg form input[type="email"],
  .login-card-bg form input[type="password"] {
    width: 250px;
    max-width: 100%;
    height: 46px;
    margin: 0 0 18px 0;
    padding: 0 10px;
  }

  .login-card p {
    text-align: center;
  }

  .register-text {
    width: 75%;
    margin: 40px auto 0;
  }

/* ========================================

   ABOUT-CALLOUTS → MOBILE SWIPE CAROUSEL
   (force horizontal layout)
   
   ======================================== */
   .about-callouts {
   display: none;
   }
   
  .about-callouts-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 10px 0 20px;
    margin: -20px 0 28px;
justify-content: center;
    scrollbar-width: none;    /* Firefox */
    scroll-behavior: smooth;
scroll-snap-stop: always;
  }

  .about-callouts-mobile::-webkit-scrollbar {
    display: none;            /* iOS / WebKit */
  }

  .about-card-mobile {
  display: flex;
  flex-direction: column;
    flex: 0 0 80% !important;  /* show peeking neighbors */
    max-width: 80% !important;
  height: 125px;
  background: var(--wk-darkpurple);
  justify-content: center;  /* centers vertically */
  align-items: center;       /* centers horizontally */
    scroll-snap-align: center;
    margin: 0 auto;
  }
  
  .about-card-mobile h2,
  .about-card-mobile p {
  margin: 0;
  padding: 0;
  line-height: 1.1;
  } 
  
  .about-card-mobile h2 { 
  font-size: 28pt;
  color: #fff;
font-weight: 900;
 }
 
  .about-card-mobile p  { 
  font-size: 14pt;
  color: var(--wk-gold);
 }

 .wk-about {
  width: 100%;
  }
  
  .wk-about h1 {
  font-size: 20pt;
  margin-top: 10px;
  padding: 0 20px;
  }

  .about-info,
  .about-info.reverse {
    flex-direction: column;
    padding: 10px 0;
    text-align: left;
  }

  .about-info-image { flex: none; }

  .about-info-image img {
    height: 180px;
  }

  .about-info-content,
  .about-info-content.reverse {
    margin: 12px 0 0 0;
  }

  /* Make the CTA row comfy for touch */
  .about-info-link {
    padding-bottom: 16px;
  }

  .about-info-icon {
    width: 36px;
    height: 36px;
    padding: 14px;
  }

  /* Keep the login/register CTAs centered and stacked */
  .register-text .form-buttons,
  .login-card-bg .form-buttons {
    width: 100%;
    max-width: 100%;
    margin: 16px auto 0;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

/* ------------------------------------------------------------------------

  REGISTRATION @600PPX

   ------------------------------------------------------------------------ */

  .hero-image-wrapper-register { 
  display: none; 
  }

  .reg-center {
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
    background-image: url('/images/wk-reg-map.png') ;
    background-position: center top;
    background-size: 200% auto;
    background-repeat: no-repeat;
  }
  
  .reg-card {
    width: 100%;
    margin: 40px auto 80px;
    padding: 40px 25px;
    background: linear-gradient(var(--wk-darkpurple) 0 52px, #f5f5f5 52px 100%);
  }

  .reg-title {
    font-size: 20pt;
    line-height: 1.25;
    transform: translateY(-30px);
    text-align: center;
  }

  .reg-card p {
    font-size: 13pt;
    line-height: 1.2;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 0;
  }

  /* Form: full-width, centered column */
  form {
    width: 100%;
    align-items: center;
    background: transparent;
  }

  form flux\:input,
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="tel"],
  .group-select {
    width: 100%;
    max-width: 100%;
    height: 46px;
    margin: 0 0 18px 0;
    padding: 0 20px;
  }

  form input[type="password"] {
    margin-bottom: 8px;
  }

  .login-text {
    font-size: 10pt;
    text-align: center;
    margin: 0;
  }

  /* Alerts: readable on small screens */
  .alert {
    width: 100%;
    max-width: 100%;
    font-size: 10pt;
    padding: 10px 10px;
    box-sizing: border-box;
  }
  
    /* ---------- REGISTRATION P.2 - SETUP PROGRAM AND TEAM @600 ---------- */
   /* Labels + conditional sections follow full-width mobile form */
  .reg-card .wk-label,
  .showifgroupselected,
  .showifprogramselected,
  .showifindivid,
  #progbuttons,
  .segmented-control,
  #teamtojoin {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Soften vertical spacing a bit vs. desktop 40px */
  .showifgroupselected,
  .showifprogramselected,
  .showifindivid {
    margin-top: 28px;
  }

   #progbuttons .progsel{
    grid-template-columns: 70px 1fr;
    grid-template-rows: auto auto auto;
    align-items: top;
  }

#progbuttons .progsel .progname{
    padding-left: 8px;
  }

  #progbuttons .progsel .proglogo{
    width: 90px;
    height: 90px;
    grid-row: 1 / span 3;
  }

  #progbuttons .progsel .progprice{
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    padding: 0 16px 0 8px;
  }

  #progbuttons .progsel .progdesc{
    grid-column: 2;
    grid-row: 3;
    padding: 0 0 14px 8px;
    text-align: left;
  }
  
  /* Segmented controls (Team/Individual + Yes/No) stacked for touch */
  .segmented-control {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .segmented-control__item {
    width: 100%;
  }

  .segmented-control__label {
    justify-content: flex-start;
  }
  
  /* ---------- REGISTRATION P.3 - POPULATE TEAM @600 ---------- */
  
/* Flux labels (e.g., Team Name "Required") full-width in mobile column */
  .reg-card [data-flux-label] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 6px auto;
    text-align: left;
  }

  /* Team Name input full-width */
  .reg-card form input[name="teamname"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 20px;
    display: block;
  }

  /* Team table full-width */
  #teamtable {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }

  .team-row-label {
    font-size: 11.25pt;
    margin: 12px 0 6px;
    text-align: left;
  }

  /* Stack name/email/remove vertically */
  .team-row-fields {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  #teamtable input[type="text"],
  #teamtable input[type="email"],
  #teamtable flux\:input {
    width: 100% !important;
  }

  /* REMOVE button thumb-friendly */
  #teamtable .team-row-fields .delrow {
    height: auto;
    padding: 6px 14px;
    font-size: 8.25pt;
    border-radius: 999px;
    align-self: flex-start;
  }

  /* ADD TEAM MEMBER chip */
  #addrow {
    margin-top: 20px;
    padding: 6px 14px;
    font-size: 8.25pt;
    border-radius: 999px;
    width: auto;
    align-self: flex-start;
  }
  
   /* ---------- REGISTRATION P.4 - CHECKOUT @600 ---------- */
    .checkout-section {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .checkout-summary {
    margin-top: 8px;
    overflow-x: auto; /* keep in case cols overflow */
  }

  .checkout-table {
    padding-right: 0;
  }

  .checkout-table thead th {
    font-size: 9pt;
  }

  /* Discount input + Apply button stack vertically on small screens */
  .checkout-discount-inputs {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .checkout-input,
  #disccode {
    width: 100%;
    max-width: 100%;
  }

  .checkout-button-secondary {
    align-self: flex-start;
  }

  /* Checkout buttons stack like .form-buttons on About You */
  .checkout-buttons,
  #freecheck {
    width: 100%;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  /* Dynamic payment form text: match reg-card p scale */
  .checkout-dynamic {
    margin-top: 24px;
  }

  .checkout-dynamic p {
    font-size: 13pt;
    line-height: 1.2;
  }
  
   #checkouthtml form button[type="submit"].btn {
    width: auto !important;         
    align-self: center !important;  
  }

 /* ------------------------------------------------------------------------

  PARTICIPANT DASHBOARD @600

   ------------------------------------------------------------------------ */
  
  .page-wrapper{
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  
  .wk-dash-toprow{
    display: flex;
    gap: 16px;
    margin: 32px 0 0;
  }

  /* DASH GRID: single-column stack (if not already handled elsewhere) */
  .wk-dash-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "log"
      "notifications"
      "map"
      "badges"
      "resources"
      "leaderboard"
      "events-cal"
      "events-list";
  }

  /* LOG TILE: keep stacked */
  .wk-dash-log-cta{
    display: block;
  }

  /* Header stays standard; link remains top-right (your current intent) */
  .wk-dash-log-cta .wk-dash-tile-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  /* Neutralize any footer positioning class on the link */
  .wk-dash-log-cta .wk-dash-tile-footer{
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-top: 0;
    text-align: inherit;
  }

  /* LOGGING ICONS: 2x2 grid to fit small screens cleanly */
  .wk-dash-log-cta #logbox .logboxrow.logtyperow{
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    column-gap: 14px;
    row-gap: 14px;
    padding: 14px 0;
  }

  /* Make tiles comfy for thumbs, but not oversized */
  .wk-dash-log-cta #logbox .logtypeitem{
    width: 150px;
    height: 140px;
  }

  .wk-dash-log-cta #logbox .logtypeitem::before{
    width: 60px;
    height: 60px;
    
  }

  /* Keep label readable but compact */
  .wk-dash-log-cta #logbox .logtypeitem::after{
    margin-top: 4px;
  }

  /* Units row: reduce horizontal sprawl */
  .wk-dash-log-cta #logbox #units{
    gap: 8px;
    margin-top: 12px;
  }

  /* Big number input: full-width inside tile */
  .wk-dash-log-cta #logbox #lognum{
    width: 100%;
    max-width: 100%;
    padding-left: 28px; /* keep your existing visual centering */
    font-size: 40pt;    /* slightly smaller for 600 */
  }

  /* Tracker: match padding system */
  .wk-dash-log-cta #progressbox{
    padding: 0;
    margin: 0 0 10px 0;
    border-top: 0;
    border-left: 0;
  }

  /* Activity Tracker title + inset divider */
  .wk-dash-log-cta h2.wk-dash-container-name.wk-dash-activity-title{
    position: relative;
    margin-top: 22px;
    padding-top: 16px;
    box-sizing: border-box;
    border-top: 1px solid var(--wk-lightpurple);
    padding-left: 0;
  }

  .wk-dash-log-cta h2.wk-dash-container-name.wk-dash-activity-title::before{
    display: none;
  }

  .progressoneacross .mynum{
    margin-left: 20px;     /* push number to the far right */
  }

 .progresstwoacross .bigdesc{
    padding-left: 10px;
  }

  /* Tracker row padding slightly tighter */
  .progressoneacross,
  .progresstwoacross{
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* Log history table already has @600 font sizing; keep scroll behavior */
  #loghistorytable{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
    #loghistorytable thead th {
    font-size: 10pt;
  }

  #loghistorytable tbody td {
    font-size: 10pt;
  }
}







/* FOLD - DASH MOBILE STYLING */
/* =========================================
DASH - INITIAL MOBILE STYLES
=========================================*/


/* --- Breakpoints --- */
@media (max-width: 1024px) {
  .wk-dash-map #map { height: 320px; }
}
}

@media (max-width: 768px) {
  .wk-dash-map #map { height: 300px; }

  /* tighten column gap + keep layout stable */
  .wk-dash-map #progholderright.wk-map-waypoint {
    column-gap: 16px;
    grid-template-columns: minmax(160px, 38%) minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .wk-dash-map #map { height: 260px; }

  /* Stack waypoint content */
  .wk-dash-map #progholderright.wk-map-waypoint {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "sub"
      "image"
      "desc";
    row-gap: 14px;
  }

  .wk-dash-map #curpointsubhead {
    text-align: left;
    white-space: normal;
  }

  .wk-dash-map #curpointimage img {
    width: 60%;
    max-width: none;
  }
}

/* FOLD - MANAGE USERS / ADMIN */
/** MANAGE USERS **/
.md-text-right {
	text-align: left;
}
@media (min-width: 768px) {
	.md-text-right { text-align: right; }
}

@media (min-width: 768px) {
	.grid-responsive-2 {
		display: grid;
		padding: 5px;
		column-gap: 20px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Header bar above form */
.form-header {
  background-color: #1770fe; /* Walk Kansas blue */
  color: #fff;
  width: 100%;
  max-width: 600px;
  text-align: center;
  padding: 15px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.form-header h1 {
  font-size: 26pt;
  font-weight: 600;
  margin: 0;
}

/* Gray form wrapper */
.form-wrapper {
  background-color: #e4e4e4;
  width: 100%;
  max-width: 600px;
  padding: 30px 40px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Buttons section [JK commented out on 12.5 due to name overlap]
.form-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  margin-top: 40px;
} */

/* Adjust responsiveness */
@media (max-width: 600px) {
  .form-wrapper {
    padding: 20px;
  }

  .form-header,
  .form-wrapper {
    max-width: 90%;
  }

  .form-header h1 {
    font-size: 18pt;
  }
}