@charset "UTF-8";
/* ============================================================================
   Turing Tracker – Global Stylesheet  (v2 – variable-driven)
   ----------------------------------------------------------------------------
   • Brand + semantic colour tokens in :root for quick theming
   • Major-third modular type-scale (≈1.25) based on 14 px body
   • All previous selectors kept intact (added any you said were missing)
============================================================================ */

/* ---------------------------------------------------------------------------
   0) DESIGN TOKENS – CSS CUSTOM PROPERTIES
   --------------------------------------------------------------------------- */
:root {
  /* Breakpoints & layout --------------------------------------------------- */
  --bp-wide:   1440px;    /* ≥ 4K / large desktop */
  --bp-laptop: 1024px;    /* laptop / small desktop */
  --bp-tablet: 768px;     /* tablets / phablets */
  --nav-w:     150px;     /* left-nav width (desktop) */

  /* Brand palette (raw hues) ---------------------------------------------- */
  --blue-300:  #5FA8F8;
  --blue-500:  #3F6DD8;
  --blue-600:  #2A4FA9;
  --blue-700:  #1C3571;
  --purple:    #7F00FF;

  /* Greys & base surfaces -------------------------------------------------- */
  --grey-900:  #1E1E1E;
  --grey-800:  #2E2F38;
  --grey-700:  #3B3B3B;
  --grey-600:  #5C5C5C;
  --grey-500:  #757575;
  --white:     #FFFFFF;

  /* Semantic *surface* tokens --------------------------------------------- */
  --surface-bg:        #000000;   /* main page bg */
  /* --surface-panel: linear-gradient(
                      to bottom,
                      rgba(45, 45, 45, 0.4) 0%,
                      rgba(45, 45, 45, 0.1) 100%
                    ); */
  --surface-panel: rgba(45, 45, 45, 0.3);
  --surface-panel-hover: rgba(45, 45, 45, 0.4);

   /* cards / panels */
  --surface-modal:     #000000bd;   /* cards / panels */
  --surface-item: var(--grey-300);
  --surface-overlay:   rgba(0,0,0,0.2);   /* modal backdrop */
  --surface-scrollbar: rgba(100,100,100,0.5);

  --alternating-table-clr-1: transparent;
  --alternating-table-clr-2: #12141D;

  /* Semantic text tokens --------------------------------------------------- */
  --text-primary:  var(--white);
  --text-muted:    #8A8A8A;
  --text-link:     var(--blue-300);

  --bold: 600;
  --regular: 300;
  --light: 100;

  /* Message / state colours (bg & border) --------------------------------- */
  --state-success-bg:   #1D5F1F;
  --state-success-bd:   #C3F5C2;
  --state-error-bg:     #5F1F1F;
  --state-error-bd:     #F5C2C7;
  --state-warning-bg:   #5F4F1F;
  --state-warning-bd:   #F5E0C2;
  --state-info-bg:      #1F3F5F;
  --state-info-bd:      #C2D7F5;

  /* Button colours -------------------------------------------------------- */
  --btn-primary-bg:     var(--grey-400);
  --btn-primary-hover-bg:     var(--grey-600);
  --btn-secondary-bg:   #616161;
  --btn-success-bg:     #2E7D32;
  --btn-danger-bg:      #C62828;
  --btn-warning-bg:     #F9A825;
  --btn-info-bg:        #0288D1;
  --btn-ghost-bd:       var(--grey-400);
  --btn-ghost-hover-bg: var(--grey-400);
  --text-ghost: var(--grey-400);

  --btn-border-radius: 4px;

  --form-input-primary: rgb(200 200 200 / 20%);
  --form-input-border-primary: rgb(107 186 255 / 40%);
  --form-input-shadow-primary: rgba(0,0,0,0.2);

  /* Button colours -------------------------------------------------------- */
  --btn-primary-bg: var(--blue-500);
  --btn-primary-hover-bg: var(--blue-600);

  --btn-secondary-bg: var(--white);
  --btn-secondary-hover-bg: var(--grey-200);

  --btn-success-bg:     #2E7D32;
  --btn-danger-bg:      #C62828;
  --btn-warning-bg:     #F9A825;
  --btn-info-bg:        #0288D1;

  --btn-ghost-bd:       white;
  --btn-ghost-hover-bg: white;
  --text-ghost: white;


  /* Timer colours ---------------------------------------------------------- */
  --timer-border:       var(--blue-500);
  --timer-warning:      var(--btn-warning-bg);

  /* Font family ------------------------------------------------------------ */
  --font-body: "Poppins", sans-serif;
  --font-form: "Menlo", "Consolas", "Monaco", monospace;

  /* Modular type-scale – major-third (≈1.25) ------------------------------ */
  --step--1: 0.75rem;   /* captions */
  --step-0:  0.875rem;  /* body */
  --step-1:  1rem;      /* h6 / buttons */
  --step-2:  1.25rem;   /* h5 */
  --step-3:  1.5rem;    /* h4 / .heading-label */
  --step-4:  1.875rem;  /* h3 */
  --step-5:  2.25rem;   /* h2 */
  --step-6:  3rem;      /* h1 */

  /* -------------  EXTENDED PALETTE – spare hues for future themes -------- */

  /* Reds */
  --red-50:   #FFEBEE;
  --red-100:  #FFCDD2;
  --red-200:  #EF9A9A;
  --red-300:  #E57373;
  --red-400:  #EF5350;
  --red-500:  #F44336;
  --red-600:  #E53935;
  --red-700:  #D32F2F;
  --red-800:  #C62828;
  --red-900:  #B71C1C;

  /* Pinks / Roses */
  --pink-50:  #FCE4EC;
  --pink-100: #F8BBD0;
  --pink-200: #F48FB1;
  --pink-300: #F06292;
  --pink-400: #EC407A;
  --pink-500: #E91E63;
  --pink-600: #D81B60;
  --pink-700: #C2185B;
  --pink-800: #AD1457;
  --pink-900: #880E4F;
  --rose-500: #FF007F;

  /* Purples */
  --purple-50:  #F3E5F5;
  --purple-100: #E1BEE7;
  --purple-200: #CE93D8;
  --purple-300: #BA68C8;
  --purple-400: #AB47BC;
  --purple-500: #9C27B0;
  --purple-600: #8E24AA;
  --purple-700: #7B1FA2;
  --purple-800: #6A1B9A;
  --purple-900: #4A148C;
  --deep-purple-300: #9575CD;
  --deep-purple-500: #673AB7;
  --deep-purple-700: #512DA8;

  /* Violets / Lavenders */
  --violet-500:   #8F00FF;
  --lavender-500: #B57EDC;

  /* Indigos & Blues */
  --indigo-50:  #E8EAF6;
  --indigo-100: #C5CAE9;
  --indigo-200: #9FA8DA;
  --indigo-300: #7986CB;
  --indigo-400: #5C6BC0;
  --indigo-500: #3F51B5;
  --indigo-600: #3949AB;
  --indigo-700: #303F9F;
  --indigo-800: #283593;
  --indigo-900: #1A237E;
  --blue-50:    #E3F2FD;
  --blue-100:   #BBDEFB;
  --blue-200:   #90CAF9;
  /* --blue-300:   #64B5F6;   duplicate, keep first brand value */
  --blue-400:   #42A5F5;
  /* --blue-500:   #2196F3;   duplicate */
  /* --blue-600:   #1E88E5;   duplicate */
  /* --blue-700:   #1976D2;   duplicate */
  --blue-800:   #1565C0;
  --blue-900:   #0D47A1;
  --lt-blue-300:#64B5F6;
  --lt-blue-500:#03A9F4;
  --lt-blue-700:#0288D1;

  /* Cyans & Teals */
  --cyan-50:   #E0F7FA;
  --cyan-100:  #B2EBF2;
  --cyan-200:  #80DEEA;
  --cyan-300:  #4DD0E1;
  --cyan-400:  #26C6DA;
  --cyan-500:  #00BCD4;
  --cyan-600:  #00ACC1;
  --cyan-700:  #00838F;
  --cyan-800:  #006064;
  --cyan-900:  #004D40;
  --teal-50:   #E0F2F1;
  --teal-100:  #B2DFDB;
  --teal-200:  #80CBC4;
  --teal-300:  #4DB6AC;
  --teal-400:  #26A69A;
  --teal-500:  #009688;
  --teal-600:  #00897B;
  --teal-700:  #00796B;
  --teal-800:  #00695C;
  --teal-900:  #004D40;

  /* Greens */
  --green-50:   #E8F5E9;
  --green-100:  #C8E6C9;
  --green-200:  #A5D6A7;
  --green-300:  #81C784;
  --green-400:  #66BB6A;
  --green-500:  #4CAF50;
  --green-600:  #43A047;
  --green-700:  #388E3C;
  --green-800:  #2E7D32;
  --green-900:  #1B5E20;
  --emerald-500:#2ECC71;

  /* Light-Greens / Limes */
  --light-green-300: #AED581;
  --light-green-500: #8BC34A;
  --light-green-700: #689F38;
  --lime-300:        #DCE775;
  --lime-500:        #CDDC39;
  --lime-700:        #AFB42B;

  /* Yellows & Ambers */
  --yellow-300: #FFF176;
  --yellow-500: #FFEB3B;
  --yellow-700: #FBC02D;
  --amber-300:  #FFD54F;
  --amber-500:  #FFC107;
  --amber-700:  #FFA000;

  /* Oranges & Deep-Oranges */
  --orange-300:     #FFB74D;
  --orange-500:     #FF9800;
  --orange-700:     #F57C00;
  --deep-orange-300:#FF8A65;
  --deep-orange-500:#FF5722;
  --deep-orange-700:#E64A19;

  /* Browns & Earth tones */
  --brown-50:  #EFEBE9;
  --brown-100: #D7CCC8;
  --brown-200: #BCAAA4;
  --brown-300: #A1887F;
  --brown-400: #8D6E63;
  --brown-500: #795548;
  --brown-600: #6D4C41;
  --brown-700: #5D4037;
  --brown-800: #4E342E;
  --brown-900: #3E2723;
  --sepia-500: #704214;
  --olive-500: #808000;

  /* Blue-Greys / additional Greys */
  --blue-grey-50:  #ECEFF1;
  --blue-grey-100: #CFD8DC;
  --blue-grey-200: #B0BEC5;
  --blue-grey-300: #90A4AE;
  --blue-grey-400: #78909C;
  --blue-grey-500: #607D8B;
  --blue-grey-600: #546E7A;
  --blue-grey-700: #455A64;
  --blue-grey-800: #37474F;
  --blue-grey-900: #263238;
  --grey-50:   #FAFAFA;
  --grey-100:  #F5F5F5;
  --grey-200:  #EEEEEE;
  --grey-300:  #E0E0E0;
  --grey-400:  #BDBDBD;
  /* --grey-500:  #9E9E9E;   duplicate */
  /* --grey-600:  #757575;   duplicate (same token value) */
  /* --grey-700:  #616161;   duplicate */
  /* --grey-800:  #424242;   duplicate */
  /* --grey-900:  #212121;   duplicate */

  /* Metallics & Neutrals */
  --silver-500: #C0C0C0;
  --gold-500:   #FFD700;
  --bronze-500: #CD7F32;
  --platinum-500:#E5E4E2;

  /* Additional accents */
  --magenta-500:  #FF00FF;
  --turquoise-500:#40E0D0;
  --aqua-500:     #00FFFF;
  --navy-700:     #001F54;
  --charcoal-700: #36454F;
  --ivory-50:     #FFFFF0;
}

/* ============================================================================
   1) RESET & BASE ELEMENTS
   ============================================================================ */
*{margin:0;padding:0;box-sizing:border-box;transition:all .2s ease-out;}
html{scrollbar-width:thin;scrollbar-color:var(--surface-scrollbar) transparent;}
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{
  background:var(--surface-scrollbar);
  border-radius:4px;border:2px solid transparent;}
*::-webkit-scrollbar-thumb:hover{background:rgba(100,100,100,0.7);}
*::-webkit-scrollbar-button{display:block;width:8px;height:8px;background:transparent;}
*::-webkit-scrollbar-button:vertical:decrement{border-top:4px solid rgba(100,100,100,0.7);}
*::-webkit-scrollbar-button:vertical:increment{border-bottom:4px solid rgba(100,100,100,0.7);}
*::-webkit-scrollbar-button:horizontal:decrement{border-left:4px solid rgba(100,100,100,0.7);}
*::-webkit-scrollbar-button:horizontal:increment{border-right:4px solid rgba(100,100,100,0.7);}

body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--step-0);
  line-height:1.5;
  color:var(--text-primary);
  background:var(--surface-bg);
}

.hidden{display:none!important;}

.reset-button {
  all: unset;                /* wipe every built-in property */
  display: inline;           /* like <a>/<p> text-flow */
  font: inherit;             /* keep surrounding font family/size */
  color: inherit;            /* inherit text colour */
  cursor: pointer;           /* still shows a hand on hover */
  line-height: inherit;
}

/* Optional: underline on hover to mimic links */
.reset-button:hover {
  text-decoration: underline;
}

.full-width {width: 100%;}

/* ============================================================================
   2) TYPOGRAPHY
   ============================================================================ */
h1,h2,h3,h4,h5,h6,strong,b,th,dt{font-weight:500;font-family:var(--font-body);}
h1{font-size:var(--step-6);line-height:1.15;}
h2{font-size:var(--step-5);line-height:1.2;}
h3{font-size:var(--step-4);line-height:1.25;}
h4{font-size:var(--step-3);line-height:1.3;}
h5{font-size:var(--step-2);line-height:1.35;}
h6{font-size:var(--step-1);line-height:1.4;}

.text-sm{font-size:var(--step--1);}
.text-md{font-size:var(--step-0);}
.text-lg{font-size:var(--step-1);}
.text-xl{font-size:var(--step-2);}
.font-light{font-weight:100;}
.font-regular{font-weight:200;}

.warning {
  color: var(--red-900);
}

.heading-label{font-size:var(--step-3); color: var(--text-primary); text-decoration: none;}

.page-heading {
  font-size:var(--step-4);
  font-weight:600;
  margin-bottom: 0.5rem;
}

/* ============================================================================
   3) PAGE LAYOUT
   ============================================================================ */

:root{
  --content-max: 100vw;   /* shrinks until first breakpoint */
  --pad-x: 50px;          /* the 50-px gutter you use */
  --pad-top: 100px;       /* main’s top padding  */
  --layout-nav-w: var(--nav-w);
}

:root{
  /* live rail width (JS updates this; fallback = collapsed width) */
  --layout-nav-w: var(--nav-w);

  /* smallest left gutter so content never hugs the rail */
  --pad-x-min: 8px;

  /* dynamic left gutter = pad-x minus the rail growth (clamped) */
  --left-gutter: clamp(
    var(--pad-x-min),
    calc(var(--pad-x) - max(0px, calc(var(--layout-nav-w) - var(--nav-w)))),
    var(--pad-x)
  );
}

:root{
  /* live rail width (JS sets this; fallback = collapsed width) */
  --layout-nav-w: var(--nav-w);

  /* remaining width after rail + inside paddings */
  --_rem-after-rail: calc(100vw - var(--layout-nav-w) - 2*var(--pad-x));

  /* how much “centering slack” we have beyond the content max */
  --_center-gap: max(0px, calc(var(--_rem-after-rail) - var(--content-max)));

  /* auto-centering margin on each side (outside the container) */
  --center-margin: calc(var(--_center-gap) / 2);
}

/* same media queries you already have for <main> */
@media (min-width: 640px){ :root{ --content-max: 640px; } }
@media (min-width: 768px){ :root{ --content-max: 768px; } }
@media (min-width:1024px){ :root{ --content-max:1024px; } }
@media (min-width:1280px){ :root{ --content-max:1280px; } }
@media (min-width:1400px){ :root{ --content-max:1400px; } }
@media (min-width:1600px){ :root{ --content-max:1600px; } }


main{
  /* container queries based on <main>'s inline size (i.e., usable width) */
  container-type: inline-size;
  container-name: page;

  /* Recompute centering using the (inherited/overridden) --content-max */
  --_rem-after-rail: calc(100vw - var(--layout-nav-w) - 2 * var(--pad-x));
  --_center-gap: max(0px, calc(var(--_rem-after-rail) - var(--content-max)));
  --center-margin: calc(var(--_center-gap) / 2);
}

/* Center and hard-cap the in-flow content without markup changes */
main{
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--content-max)) 1fr;

  padding-top: var(--nav-h);
}

/* Put all immediate children (except the fixed navbar) into the capped column */
main > :not(.navbar){
  grid-column: 2;
}

/* Default before any container step matches (mobile-ish) */
@container page (max-width: 639.98px) {
  main { --content-max: 100vw; }
}

/* Step caps based on usable width (the container’s inline size) */
@supports not (container-type: inline-size) {
  @media (min-width: 640px){ :root{ --content-max: 640px; } }
  @media (min-width: 768px){ :root{ --content-max: 768px; } }
  @media (min-width:1024px){ :root{ --content-max:1024px; } }
  @media (min-width:1280px){ :root{ --content-max:1280px; } }
  @media (min-width:1400px){ :root{ --content-max:1400px; } }
  @media (min-width:1600px){ :root{ --content-max:1600px; } }
}
/* ============================================================================
   4) COMPONENTS & UTILITIES
   ============================================================================ */
/* Panels / cards */
.panel {
  /* existing styles */
  background: var(--surface-panel);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  overflow: auto;

  width: 100%;

  /* new frosted-glass effect */
  /* backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px); */

  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
/* Highlight nested panels with a background */
.panel .panel {
  background: rgba(50, 50, 50, 0.1);
}
  
.panel.wide{grid-column:span 2;}

/* Spacing */
.spacer{margin-top:25px;}

/* Flash messages ----------------------------------------------------------- */
/* ─── flash / toast messages ────────────────────────────────────────── */
.messages-container{
  position:fixed;
  top:1.2rem;
  right:1.2rem;
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  z-index:10000;
}

.message{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:0.9rem 1.25rem 0.9rem 0.9rem;     /* extra left room for border */
  border-radius:var(--radius-lg);
  font-size:0.9rem;
  line-height:1.35;
  color:var(--white);

  /* GLASS base ------------------------------------------------------- */
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 4px 32px var(--glass-shadow);

  /* smooth fade-in & auto-fade-out */
  opacity:0;
  transform:translateY(-8px);
  animation: flash-in 220ms forwards,
             flash-out 320ms forwards 4s;
}

@keyframes flash-in  { to { opacity:1; transform:translateY(0); } }
@keyframes flash-out { to { opacity:0; transform:translateY(-8px); } }

/* left-hand accent bar per message type ------------------------------ */
.message::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  border-radius:6px 0 0 6px;
  opacity:0;
  transform:translateY(-8px);
  animation: flash-in 220ms forwards;
}

.message.auto-close{
  animation: flash-in 220ms forwards,
             flash-out 320ms forwards 5s;   /* 5-second delay */
}

.message.success::before{ background:var(--state-success-bd); }
.message.error  ::before{ background:var(--state-error-bd);   }
.message.warning::before{ background:var(--state-warning-bd); }
.message.info   ::before{ background:var(--state-info-bd);    }

/* optional close “×” button ----------------------------------------- */
.message-close{
  background:none;
  border:none;
  font-size:1.1rem;
  line-height:1;
  color:inherit;
  cursor:pointer;
  opacity:.85;
}
.message-close:hover{ opacity:.55; }


/* Buttons ------------------------------------------------------------------ */
.turing-button{
  appearance:none;                 /* strip OS chrome on <button>            */
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* NEW → make both elements calculate height the same way */
  box-sizing:border-box;           /* UA default differs between tags        */
  line-height:1.25;                /* fixes anchor’s taller baseline box     */
  vertical-align:middle;           /* keeps them aligned in a flex row       */

  border:none;
  border-radius:6px;
  padding:.6rem 1.5rem;
  cursor:pointer;
  text-decoration:none;

  background:var(--btn-primary-bg);
  color:var(--text-primary);

  font-weight:500;
  font-size:var(--step-0);
  text-align:center;
  transition:background-color .2s;
}
.turing-button:hover{background:var(--btn-primary-hover-bg);}

.turing-button.primary{background:var(--btn-primary-bg);}
.turing-button.secondary{background:var(--btn-secondary-bg);}
.turing-button.success{background:var(--btn-success-bg);}
.turing-button.danger{background:var(--btn-danger-bg);}
.turing-button.warning{background:var(--btn-warning-bg);color:#222;}
.turing-button.info{background:var(--btn-info-bg);}
.turing-button.primary:hover,
.turing-button.success:hover,
.turing-button.danger:hover,
.turing-button.info:hover{filter:brightness(1.1);}
.turing-button.secondary:hover{background:#424242;}
.turing-button.warning:hover{background:color-mix(in srgb,var(--btn-warning-bg),#000 15%);}

/* Ghost outline */
.turing-button.ghost{
  background:transparent;color:var(--text-ghost);border:2px solid var(--btn-ghost-bd);}
.turing-button.ghost:hover{
  background:var(--btn-ghost-hover-bg);color:var(--surface-bg);border-color:var(--btn-ghost-hover-bg);}

/* ────────────────────────────────────────────────────────────────
   Glass-morphism flavour ▸  <button class="turing-button glass">…
   ──────────────────────────────────────────────────────────────── */
.turing-button.glass{
  /* 1. translucent frosted surface */
  background: rgba(255,255,255,0.12);                /* fallback */
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);

  /* 2. subtle edge + inner shadow for “pane of glass” feel */
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06),
              0 4px 10px rgba(0,0,0,0.15);

  /* 3. keep text readable on a lightened surface */
  color: var(--text-primary);
}

.turing-button.glass:hover{
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1),
              0 6px 14px rgba(0,0,0,0.18);
}

.turing-button.glass:active{
  transform: translateY(1px);
}

.turing-button.glass:disabled,
.turing-button.glass[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Primary and secondary variants for Turing buttons */
.turing-button.primary {
  background: var(--btn-primary-bg);
  color: var(--white);
}
.turing-button.primary:hover {
  background: var(--btn-primary-hover-bg);
}

.turing-button.secondary {
  background: var(--btn-secondary-bg);
  color: var(--grey-900);
}
.turing-button.secondary:hover {
  background: var(--btn-secondary-hover-bg);
}

/* Glass variant remains as-is */

:root {
  --blue-gradient-subtle: linear-gradient(
    90deg,
    color-mix(in srgb, var(--blue-600) 80%, transparent) 0%,
    color-mix(in srgb, var(--blue-400) 80%, transparent) 100%
  );
}

/* — example: primary button now uses gradient — */
.turing-button.primary {
  background-image: var(--blue-gradient-subtle);
  /* if you still need a fallback for older browsers: */
  background-color: var(--blue-600);
}

/* on hover, shift to a slightly stronger gradient */
.turing-button.primary:hover {
  background-image: linear-gradient(
    90deg,
    var(--blue-600) 0%,
    var(--blue-400) 100%
  );
}
  
/* Links -------------------------------------------------------------------- */
a.link-primary{color:var(--text-link);text-decoration:none; cursor:pointer;}
a.link-primary:hover{text-decoration:underline;}
a.link-secondary{color:#CCC; cursor:pointer;}
a.link-secondary:hover{color:var(--text-link);}
a.link-accent{color:var(--purple);font-weight:600;}
a.link-accent:hover{text-decoration:underline;}
.link-muted{color:var(--text-muted);text-decoration:none;}
.link-muted:hover{color:#B3B3B3;}

.button-as-link{background:none;border:none;padding:0;font:inherit;
  color:inherit;text-decoration:underline;cursor:pointer;}
.button-as-link:disabled{opacity:.6;cursor:default;text-decoration:none;}

/* ============================================================================
   5) FORM ELEMENTS
   ============================================================================ */
.form-input,.general-dropdown{
  width:100%;padding:.6em .8em;
  background:var(--form-input-primary);color:var(--text-primary); /*  font-family:var(--font-form); */
  border:1px solid transparent;border-radius:var(--btn-border-radius);font-size:1rem;
  font: inherit; cursor:pointer; 
}
.form-input.msd-button, .general-dropdown.msd-button{ margin-bottom: 0; }
.form-input.small,.general-dropdown.small{width:auto;}
.form-input.margin,.general-dropdown.margin{margin-bottom:0;}
/* Only apply hover border to actual form fields, not enhancer wrappers */
input.form-input:hover,
select.form-input:hover,
textarea.form-input:hover {
  border-color: var(--form-input-border-primary);
}

.form-input:focus,.general-dropdown:focus{
  border-color:var(--form-input-border-primary);outline:none;
  box-shadow:0 0 0 2px var(--form-input-shadow-primary);}
select.general-dropdown{padding-right:2.5em;} /* dropdown arrow space */

textarea.form-input, input.form-input,textarea.general-dropdown, input.general-dropdown {
  cursor:text;
}

.form-input option,
.general-dropdown option {
  background: var(--surface-bg);     /* same dark canvas as pages */
  color: var(--text-primary);        /* your white text token    */
}

/* optional: highlight the “hovered” option a bit */
.form-input option:hover,
.general-dropdown option:hover {
  background: color-mix(in srgb, var(--blue-600) 30%, transparent);
}
input.error,textarea.error,select.error{border-color:#F33;}
.field-error{display:block;margin-top:4px;}

.field-error { color:#ef4444; font-size:.875rem; margin-top:.35rem }
.form-input.is-invalid { border-color:#ef4444; outline-color:#ef4444 }

.form-row{display:flex;flex-wrap:wrap;gap:1rem;}
.half-width{flex:1 1 48%;}
.one-third-width{flex:1 1 32%;}
.two-thirds-width{flex:1 1 65%;}

/* Multi-select “chips” enhancer ------------------------------------------- */
.multi-wrapper{
  display:block;max-height:var(--multi-max,220px);overflow-y:auto;
  padding:.25rem .35rem;background:var(--surface-bg);
  border:1px solid var(--grey-700);border-radius:6px;}
.multi-option{
  display:flex;justify-content:space-between;align-items:center;
  padding:.3rem .2rem;border-radius:4px;cursor:pointer;}
.multi-option:not(:last-child){margin-bottom:.15rem;}
.multi-option.selected{background:var(--grey-500);color:var(--white);}
.multi-btn{
  background:none;border:none;width:1.8rem;height:1.8rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:1rem;transition:background .15s;}
.multi-btn:hover{background:rgba(92,92,92,.5);}
.multi-btn.plus{color:var(--blue-300);}
.multi-btn.minus{color:#FF8383;}
select[multiple].is-enhanced{position:absolute!important;left:-9999px;}

/* ============================================================================
   6) TABLES
   ============================================================================ */
.alternating-table {
  width: 100%;
  border-collapse: separate;   /* <-- corner trick needs “separate” */
  border-spacing: 0;       /* vertical gap between rows           */
  font-size: var(--step-0);
  color: var(--text-primary);
}

/* zebra striping */
.alternating-table tbody tr:nth-child(even) { background: var(--alternating-table-clr-2); }
.alternating-table thead tr               { background: var(--alternating-table-clr-2); }

/* round the left + right ends of every row ------------------------- */
.alternating-table tbody tr > *:first-child,
.alternating-table thead tr  > *:first-child  { border-radius: 10px 0 0 10px;}

.alternating-table tbody tr > *:last-child,
.alternating-table thead tr  > *:last-child   { border-radius: 0 10px 10px 0;}

/* padding / typography */
.alternating-table th,
.alternating-table td { padding: .75rem .5rem; }

.alternating-table th { font-weight: 600; text-align: left; }

.ratio-2-1-1{display:grid;grid-template-columns:2fr 1fr 1fr;width:100%;}
.ratio-2-1-1 thead,.ratio-2-1-1 tbody,.ratio-2-1-1 tr{display:contents;}

/* ============================================================================
   7) MODALS
   ============================================================================ */
.modal-overlay{
  position:fixed;inset:0;background:var(--surface-overlay);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s;z-index:900;}
.modal-overlay.active{opacity:1;visibility:visible;}

.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-45%);
  background:var(--surface-modal);color:var(--text-primary);
  border-radius:8px;padding:1.5rem;width:90%;min-width:470px;max-width:900px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:opacity .3s,transform .3s,visibility 0s linear .3s;z-index:1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal.active{opacity:1;visibility:visible;transform:translate(-50%,-50%);
  transition:opacity .3s,transform .3s;}
.modal {
  pointer-events: none;
}
.modal.active {
  pointer-events: auto;
}
.modal .close-btn{
  position:absolute;top:12px;right:12px;background:none;border:none;
  font-size:1.25rem;color:inherit;cursor:pointer;opacity:.8;}
.modal .close-btn:hover{opacity:.5;}
.modal button[type="submit"]{display:block;width:100%;margin-top:1rem;}

.modal .cancel-btn.close-btn {
  /* remove the absolute “×” positioning */
  position: static !important;
  top: auto !important;
  right: auto !important;

  /* reset font-size back to normal button text */
  font-size: var(--step-0) !important;
  line-height: inherit;

  /* full opacity so it doesn’t look faded */
  opacity: 1 !important;
}

.modal .metric-grid{display:grid;gap:.75rem;}
.modal .metric-grid.cols-1{grid-template-columns:1fr;}
.modal .metric-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.modal .metric-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.modal .metric-grid .metric-field:has(textarea){grid-row:span 3;}
.modal .metric-grid textarea{width:100%;min-height:8em;resize:vertical;}

/* ============================================================================
   9) NAVBAR / SIDE-NAV / FLOATING-CLOCK
   ============================================================================ */
/* ... (kept as-is but colours now reference tokens) ... */

/* pagination bar */
.pagination-bar{display:flex;align-items:center;gap:.35rem;justify-content:center;}
.page-btn{
  all:unset;
  cursor:pointer;
  font-size:.8rem;
  padding:.25rem .45rem;
  border-radius:4px;
  background:var(--grey-700);
}
.page-btn.current{background:var(--blue-500);}
.page-btn.arrow{background:transparent;font-size:1rem;}
.page-btn:hover:not(.current){background:var(--grey-600);}
.pagination-bar span{font-size:.8rem;}
/* table row hover */
#team-tracker tbody tr:hover{background:var(--grey-700);cursor:pointer;}

.tr-link {cursor: pointer;}

.tr-link:hover {background: color-mix(in srgb, var(--blue-500) 12%, transparent) !important;}
.tr-link:hover{
  transform:translateY(-2px);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.20));
}

/* ════════════════════════════════════════════════════════════════
   1) Generic border / text utilities (used in many templates)
   ════════════════════════════════════════════════════════════════ */
.border-b        { border-bottom: 1px solid var(--grey-600); }
.border-divider  { border-color:    var(--grey-600); }              /* pairs with .border-b */
.text-muted      { color: var(--text-muted); }

/* ════════════════════════════════════════════════════════════════
   Lightweight grid utilities (Tailwind-style names)
   Used by the project-wizard but generic enough for global use
   ════════════════════════════════════════════════════════════════ */

/* grid container + gaps */
.grid           { display: grid; }
.gap-6          { gap: var(--space-6, 1.5rem); }
.gap-x-6        { column-gap: var(--space-6, 1.5rem); }
.gap-y-6        { row-gap: var(--space-6, 1.5rem); }

/* column templates */
.grid-cols-2    { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-cols-3    { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-cols-4    { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* span helpers — pick whichever naming you prefer */
.col-span-1,
.col-1          { grid-column: span 1 / span 1; }
.col-span-2,
.col-2          { grid-column: span 2 / span 2; }
.col-span-3,
.col-3          { grid-column: span 3 / span 3; }
.col-span-4,
.col-4          { grid-column: span 4 / span 4; }

/* vertical spacing stack helpers (used by <form class=\"space-y-8\"> …) */
.space-y-8 > * + *  { margin-top: 2rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }

/* =======================================================================
   MULTI-SELECT ENHANCERS – CLEANED
   ======================================================================= */

:root {
  /* glass-clear backgrounds */
  --glass-bg: rgba(0, 0, 0, 0.1);
  --glass-backdrop: blur(4px);

  /* native-plus listbox (msl) */
  --msl-bg-clear: transparent;
  --msl-bg-selected: transparent;
  --msl-color-selected: var(--text-primary);

  /* dropdown multi-select (msd) */
  --msd-bg-clear: var(--glass-bg);
  --msd-bg-selected: linear-gradient(90deg, color-mix(in srgb, var(--blue-600) 80%, transparent), color-mix(in srgb, var(--blue-400) 80%, transparent));
  --msd-color-selected: var(--white);
  --msd-focus-bg: var(--msd-bg-selected);
}



/* =======================================================================
   END OF MULTI-SELECT ENHANCER STYLES
   ======================================================================= */

   /* ──────────────────────────────────────────────────────────────
   Utility to push an item to the right in a flex row
   ────────────────────────────────────────────────────────────── */
.justify-end {
  display: flex !important;
  justify-content: flex-end !important;
}

/* If you’d rather float it instead of using flex: */
.float-right {
  float: right !important;
}

/* Or, if the button sits inside a flex parent, you can use: */
.ml-auto {
  margin-left: auto !important;
}

/* And finally, for text‐based right alignment: */
.text-right {
  text-align: right !important;
}

.rounded {
  border-radius: 9999px!important;
}

/* ============================================================================
   COMPONENT: Breadcrumb
   - Flexible, scrollable on small screens
   - Uses tokens: --text-muted, --text-primary, --text-link, --surface-modal
   ============================================================================ */
.breadcrumb{
  display:block;
  margin: .25rem 0 1rem;
  font-size: var(--step-0);
  color: var(--text-muted);
  /* optional subtle glass panel (works nicely with .glass too) */
  background: transparent;
  border-radius: 10px;
}

.breadcrumb.glass{
  /* background: var(--surface-modal);
  border: 1px solid rgba(255,255,255,0.12); */
}

.bc-list{
  display:flex;
  align-items:center;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
  overflow:auto;               /* allow horizontal scroll on narrow screens */
  -webkit-overflow-scrolling:touch;
  scrollbar-color: var(--surface-scrollbar) transparent;
}

.bc-item{
  display:flex;
  align-items:center;
  min-width:0;                 /* enables truncation inside */
}

/* separator */
.bc-item + .bc-item::before{
  content: "\203A";
  display:inline-block;
  opacity:.6;
  margin: 0 .25rem;
}

/* links + current */
.bc-link{
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.bc-link:hover{ color: var(--text-link); }

.bc-item.is-current .bc-current{
  color: var(--text-primary);
  font-weight: 500;
  cursor: default;
}

/* util: truncate long crumb labels */
.bc-item .truncate{
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* compact variant if needed: <nav class="breadcrumb bc-compact"> */
.breadcrumb.bc-compact{ margin:.25rem 0 .5rem; }
.breadcrumb.bc-compact .bc-list{ gap:.35rem; }
.breadcrumb.bc-compact .bc-item + .bc-item::before{ margin:0 .2rem; }

.bc-item + .bc-item .truncate,
.bc-item + .bc-item .bc-current{
  margin-left: .5rem;
}

/* ───────────────────────── Drawer (clock sidebars) ───────────────────────── */
.modal.drawer {
  top: 0; left: auto; right: 0;
  height: 100vh;
  width: 480px; max-width: 92vw;
  transform: translateX(100%);
  border-radius: 0;
  padding: 1rem 1.25rem 1.25rem;
}
.modal.drawer.active {
  transform: translateX(0);
}
.drawer-tabs {
  display: flex; gap: .5rem; margin-bottom: .5rem;
}
.drawer-tabs .tab {
  appearance: none; border: 0; border-radius: 999px;
  padding: .4rem .8rem; cursor: pointer; font-weight: 600;
  background: rgba(255,255,255,.08); color: rgba(255, 255, 255, 0.8);
}
.drawer-tabs .tab.active {
  background: rgba(255,255,255,.16);
  color: white;
}

.drawer-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: var(--step-2);
}

#switchTaskForm .fieldset-title {
  margin-bottom: 0.5rem;
  font-size: var(--step-1);
  font-weight: 400;
}

.field {
  margin-bottom: 1rem;
}

/* Clock drawers — make inputs fill the row and blend metrics inline */
.modal.drawer .metric-grid .metric-field > :is(input, select, textarea) { width: 100%; }

/* Let #manualMetricFields' children participate in the parent grid */
#manualMetricFields { display: contents; }

/* If your metrics inject raw inputs (no .form-input), still make them full width */
#manualMetricFields :is(input, select, textarea) { width: 100%; }

/* Tiny spacing nudge now that the header is gone */
#manualMetricFields .metric-field { margin-top: .25rem; }

/* Utility: Reset all link styles (color, visited, underline, etc) */
.link-reset,
.link-reset:visited,
.link-reset:active,
.link-reset:focus,
.link-reset:hover {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.muted{opacity:.75}
.super-muted{opacity:.5}