/* ========== Global box-sizing (safe pattern) ========== */
html { 
  box-sizing: border-box; 
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: inherit; }

  .print-only {
    display: none
}

:root{
  --green:  rgb(159, 223, 201);
  /* --green:  rgb(163, 232, 255); */
  --grey1:  rgb(245, 245, 245);
  --grey2:  rgb(188, 188, 188);
  --blue1:  #549ac0;
  --blue2:  #cde8ff;   /* aliceblue */
  --blue3:  #87ceeb;   /* skyblue */
  --red: tomato;
  --yellow: gold;

  --bg: rgb(245, 245, 245);
  
  --card-bg: #ffffff;
  --ink: #1f2328;
  
  --border: #e5e7eb;

  --lens-off: #eaeaea;    /* neutral gray for OFF state */
  --card-border: #e6e6ea;
  --card-radius: .75rem;
  --row-alt: #f6f6f7;
  --row-hover: #f2f7ff;
  --header-bg: #f0f0f3;
  --text-muted: #666;
  --focus: #3b82f6; /* blue-ish focus ring */
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.05);
}

::placeholder {
  color: #9aa0a6;      /* muted gray */
  opacity: 1;          /* Firefox */
  font-weight: 400;
  font-size: .9rem;
}

/* Print styles */
@media print {
    .no-print {
      display: none !important;
    }
    .print-only {
        display: block
    }
    .page-wrapper {
      padding: 1rem !important;
    }
    .filter-actions {
      display: none
    }
    .no-break {
      break-inside: avoid;
      page-break-inside: avoid; /* legacy, still needed */
    }
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: "Tilt Warp", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  }

html, body {
   height: 100%;
   margin: 0;
   display: flex;
   flex-direction: column;
}

.field-error {
  color: #b00020;
  font-size: .9rem;
  margin-top: .25rem;
}

.wrapper .card {
  margin: 1rem auto;
}

.blue-link {
  text-decoration: underline;
  color: blue;
}
/* status colors for machines */
.machineDash.trouble {
    background-color: gold;
}
.machineDash.down {
    background-color: tomato;
}
.machineDash.up {
    background-color: lightgreen;
}

.white {
 color: white;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
.green {
  color: green;
}

.gold {
  color: gold;
}

.green-bold {
  color: #5cb85c;
  font-weight: 600;
}
.gold-bold {
  color: gold;
  font-weight: 600;
}
.red-bold {
  color: tomato;
  font-weight: 600;
}

.thick {
  font-size: 1.1rem;
  font-weight: 600;
}

.score {
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
}

.score.red {
  background: #ffe5e5;
  color: #c40000;
}

.score.gold {
  background: #fff4cc;
  color: #a67c00;
}

.score.green {
  background: #e6f4ea;
  color: #1e7d32;
}

.score-lg {
  font-size: 3rem;
}

.health-header {
  display: flex;
  gap: .5rem;
}

.health-title {
  display: flex;
  flex-direction: column;
  gap: .50rem;
}


mark {
  background-color: #fff3a3;
  padding: 0 2px;
  border-radius: 2px;
}

.help-card.is-dim {
  opacity: 0.45;
}

.help-link.is-dim-item {
  opacity: 0.55;
}

.help-section{
  scroll-margin-top: 150px;
}

.red-fill {
  background-color: tomato;
}

.yellow-fill {
  background-color: gold;
}

.green-fill {
  background-color: rgb(74, 187, 74);
  color: white
}

.radio-group{
  background-color: white;
 padding: 4px;
  border-radius: .50rem;
  border: 1px solid #dcdcdc;
}

.protest-strike {
  font-family: "Protest Strike", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.title {
    font-size: 1.8em;
    font-weight: 600;
}
.heading {
    font-size: 1.5em;
    font-weight: 500;
}
.subject {
    font-size: 1.25em;
    font-weight: 500;
}

.small {
  font-size: .80em;
}
.section {
    font-weight: bold;
    text-decoration: underline;
}

.task-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
}

.task-name {
  font-size: 1.50rem;
  font-weight: 700;
}

.task-info-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.task-info-toggle img {
  width: 16px;
  height: 16px;
  display: block;
  opacity: .8;
}

.task-info-toggle:hover img,
.task-info-toggle:focus-visible img {
  opacity: 1;
}

.task-details-panel {
  margin-top: .75rem;
}

.sub-value {
  font-size: 0.9rem;
  color: #777;
  margin-top: .15rem;
}

.admin-table-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem;
}

.admin-table{
  border: 1px solid var(--border, #ccc);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.admin-row{
  border-bottom: 1px solid var(--border, #e5e5e5);
}

.admin-head{
  display: grid;
  grid-template-columns: 5rem 1.6fr 0.9fr 0.9fr 1fr 1fr 2rem;
  gap: .75rem;
  padding: .75rem .75rem;
  font-weight: 700;
  font-size: .85rem;
  background: var(--green);
}

.admin-customer > summary{
  list-style: none;
}
.admin-customer > summary::-webkit-details-marker{ display:none; }

.admin-summary{
  display: grid;
  grid-template-columns: 5rem 1.6fr 0.9fr 0.9fr 1fr 1fr 2rem;
  gap: .75rem;
  align-items: center;
  padding: .75rem .75rem;
  cursor: pointer;
}

.admin-customer[open] .c-caret{ transform: rotate(180deg); }
.c-caret{ transition: transform .15s ease; text-align:center; opacity:.7; }

.name-line{ font-weight: 650; }
.c-name .sub-line{ font-size: .8rem; opacity: .75; margin-top: .15rem; }

.pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem .50rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 650;
  border: 1px solid rgba(0,0,0,0.12);
  white-space: nowrap;
}

.pill-good{ background: rgba(46, 125, 50, .12); }
.pill-bad { background: rgba(211, 47, 47, .12); }

.pill-status.closed{ background: rgba(0,0,0,.08); }
.pill-status.active{ background: rgba(84, 154, 192, .15); }

.pill-sub.active{ background: rgba(46, 125, 50, .12); }
.pill-sub.canceled,
.pill-sub.cancelled{ background: rgba(211, 47, 47, .12); }
.pill-sub.past_due{ background: rgba(255, 193, 7, .2); }

.admin-details{
  padding: .50rem .75rem .50rem .75rem;
  background: #ececec;
}

.admin--white {
  background: white;
  border: 1px solid grey;
  border-radius: 5px;
}

.tile-stats {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.detail-grid.detail-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .25rem;
}


  .grid-label {
    grid-column: 1 / -1;
    font-weight: 700;
    color: #666;
   
    font-size: .85rem;
    
  }


.detail {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: .33rem .7rem;
  background: white;
}

.detail-grid--compact .detail {
  background: rgb(247, 247, 247);
}

.detail .label {
  font-size: .80rem;
  opacity: .7;
  margin-bottom: .25rem;
}

.detail.wide {
  grid-column: 1 / -1;
}

.detail.ltblue {
  background: #f3f7fb;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.admin-filter{
  max-width: 1200px;
  margin: 0 auto 1rem auto;
  padding: 0 .5rem;
  display: flex;
  gap: .75rem;
  align-items: center;
}

.admin-users .admin-head,
.admin-users .admin-summary{
  grid-template-columns: 5rem 1.6fr 0.9fr 1fr 2rem;
}

.admin-empty{
  padding: 1rem;
  opacity: .75;
}

.pw-form{
  margin-top: .25rem;
}

.pw-grid{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: .75rem;
  align-items: end;
}

.pw-actions{
  display: flex;
  justify-content: flex-end;
}

.pw-note{
  font-size: .85rem;
  opacity: .75;
  margin-top: .5rem;
}


.task-details-inner h3 {
  margin: 0 0 .4rem;
  font-weight: 700;
}

.task-details-inner p {
  margin: 0 0 .35rem;
  line-height: 1.35;
}

.task-details-inner .label {
  display: inline-block;
  min-width: 6.5rem;      
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #6b6b6b;
}

.comment-box{
  width: 100%;
  max-width: 42rem;
  border-radius: .5rem;
  padding: .6rem .7rem;
  border: 1px solid #d9d9de;
  margin-bottom: .5rem;
}

.task-desc {
  font-size: 0.95rem;
  background-color: rgb(255, 255, 242);
  padding: .15rem .50rem;
  border: 1px solid rgb(213, 213, 197);
  border-radius: 5px;
}

.task-meta {
  font-size: 0.85rem;
  color: #555;
  display: flex;
  align-items: center;
}

.task-meta .label {
  margin-right: .5rem;
}

/* new report pages */
.machine-report-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .75rem;
  margin: 1rem 0;
}

.machine-report-top > * {
  flex: 0 0 auto;
}

.report-heading {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #555);
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-light, #ddd);
}

.machine-report-top.stack {
  display: grid;
  gap: .75rem;
}

.report-top-summary .summary {
  width: 100%;
}

.input-error {
    border: 1px solid red;
}

.password-wrapper{
    position: relative;
  display: inline-block;
 
}
  .toggle-password {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    width: 1rem;
    height: auto;
    cursor: pointer;
    opacity: 0.7;
  }
  
  .toggle-password:hover {
    opacity: 1;
  }

.toggle-button {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    cursor: pointer;
    gap:.25rem;
    background-color: var(--grey1);
    padding: 4px 12px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.toggle-row {
  display: flex;
  justify-content: center;   
  margin-bottom: 0.75rem;    
}

.toggle-button img {
    width: 1.50rem; 
    height: auto; 
}

.group-container {
    display: flex;
    align-items: center;
    gap: .25rem; 
    justify-content: center;
    margin-bottom: 1rem;
  }

  .group-actions {
    display: flex;
    gap: 3px;
    padding-bottom: 2px;
  }

.center {
    text-align: center;
}

/* base template */
main {
    flex: 1;
}

.site-header {
    background-color: var(--blue1);
    position: fixed;
    padding-left: .5em;
    padding-right: .5em;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.site-header-title{
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
}

.new-site-header {
  position: fixed;
  top: 0 ;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: env(safe-area-inset-top);
  background-color: white;
}

.new-site-header-title {
  
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: .25rem .5rem 0.25rem .5rem;
  background-color: var(--blue1);
}

.breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
 margin-top: .25rem;
 padding-left: .5rem;
 padding-right: .5rem;
  width: 100%;
  background-color: white;
}

.breadcrumb-trail {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  padding-bottom: 0.25rem;
}

.breadcrumb-trail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
bottom: 0;
  height: 2px;
  background: var(--blue1);
}

.breadcrumb-bar img {
  display: block;
  width: 24px;
  height: 24px;
}

.new-header-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;      
  overflow: hidden;
  
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .33rem;
  flex:1;
}

.title-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.25rem;
}

.icon-btn {
  width: 1rem;
  height: auto;
  cursor: pointer;
  opacity: 0.8;
}

.icon-btn:hover {
  opacity: 1;
}

.header-left {
    flex: 1 1 0;               
}


nav {
    display: flex;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    height: 36px;
}

.signup {
    background-color: var(--blue1);
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 5px 1rem 5px 5px;
    font-size: 1.50rem;
    padding: .50rem
}

.pricing-wrap {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1rem;
  
}

.pricing-copy {
  flex: 1 1 500px;
  max-width: 500px;
 
}

.pricing-copy h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.pricing-sub {
  font-size: 1.05rem;
  color: #555;
  padding-bottom: 1rem;
}

.testimonials p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: forestgreen;
}

.testimonials span {
  color: #666;
  font-size: 0.9rem;
}

.site-footer {
    text-align: center;
    padding: .5em 1rem;
    font-size: .75rem;
}

.footer-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap; 
}

.footer-left,
.footer-right {
  display: flex;
  gap: 1rem;
  align-items: center;
  white-space: nowrap;
}

.muted {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.green-icon{
    background-color: var(--green);
    width: 40px;
    height: 40px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 2px;
    border-radius: 6px;
}

.logo img{
  width: 7rem;
  height: auto;
  margin-right: 1rem;
}

.green-icon a{
  display: flex;
  align-items: center;
  justify-content: center;
}

.green-icon img{
  width: 32px;
  height: 32px;
  display: block;
}

.green-icon.circle {
  border-radius: 50%;
}

.nav-box{
  background-color: var(--green);
  padding: .25rem .5rem;
  border-radius: 5px;
}

.nav-text {
  font-size: 1rem;
  font-weight: 500;
}

.reset-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  .left {
    margin: 0;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: .5rem;
  }
  
  .form-group label {
    font-weight: 600;
    margin-bottom: 0.25rem;
  }
  
  .form-control {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* background-color: rgb(245,245,245); */
    background-color: white;
   
  }
  
  .error {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #c00;
  }

.breadcrumbs a, .breadcrumbs span{
    color: white;
    text-decoration: none;
    font-size: .8em;
    margin-top: 2px;
}

.breadcrumbs a:visited {
    color: white
}

.breadcrumbs a:active {
    color: white
}
.new-breadcrumbs a {
    
    text-decoration: none;
    color: var(--blue1);
    border-bottom: 1px solid transparent;
}



.new-breadcrumbs a:visited {
    color: rgb(30, 111, 197);
}

.new-breadcrumbs a:hover{
  border-bottom-color: var(--blue1)
}

.crumbs-mobile{ display: none; }

.left-auto {
  margin-left: auto;
  margin-right: .5rem;
}

/* facility layout page */
.group-header {
    display: flex;         
    align-items: center;   
    justify-content: space-between;
    gap: 10px;    
    font-size: 1.25em;
    color: rgb(48, 48, 48);
    background-color: var(--green);
    width: 100%;
    padding: .25rem .75rem;
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    margin-bottom: .25rem;
  }

  .group-name {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;     
  }

.group2{  
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    border: 1px solid #e6e6ea;
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    padding: .5rem;
    background: rgb(245, 245, 245);
    min-width: 13rem;
    max-width: 100%;
}

.facility-map {
    display: grid;
    flex-wrap: nowrap;   /* Ensures groups stay side-by-side */
    grid-template-columns: repeat(3, minmax(12rem, 1fr));
    gap: 1rem;
    padding: 1rem;       /* Optional: breathing room */
    justify-content: center;
}

.facility-map > * {
  min-width: 0;
}

.facility-map-wrapper {
    width: 100%;
}

.group-name {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;     
}

/* Compact inline form inside a group card */
.inline-form {
  width: 100%;
  padding: .5rem 1rem;     
  box-sizing: border-box;
}

/* label + field in one row */
.inline-form .inline-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .5rem 0;
}

.inline-form .inline-label {
  margin: 0;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
}

/* WTForms often renders inputs with their own width rules */
.inline-form .inline-field input,
.inline-form .inline-field select,
.inline-form .inline-field textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Full-width submit */
.inline-form .inline-submit {
  width: 100%;
  margin: 0;
}


.name-role {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.name-role .name {
  font-weight: 700;
  font-size: 1.25rem;
}

.name-role .role {
  padding: .1rem .4rem;
  border-radius: .4rem;
  background: var(--green);
  
}

.empty-hint {
  display: block;
  padding: .75rem;
  margin: .5rem auto;
  border: 1px dashed var(--grey2);
  border-radius: .5rem;
  background: var(--bg-subtle);
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
  max-width: 40rem;
}

.empty-hint--top { margin-top: 1rem; }
.empty-hint--inside { margin: .5rem 0 0; }


.group-name img:hover {
  opacity: 1;
  transform: scale(1.05);
}

.machines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center; 
    margin-top: .5rem;
    padding: 1rem;
}
.machines .machine {
    position: relative;
    text-align: center;

}

.card.narrow {
  padding: .25rem .5rem;
  max-width: 20rem;
  background: white;
}

/* Tooltip container */
.tooltip {
    position: relative; /* Needed to position the tooltip text */
    cursor: pointer; /* Optional: changes the cursor to indicate interactivity */
  }
  
  /* Tooltip text */
  .tooltip::after {
    content: attr(data-tooltip); /* Text to display is taken from the 'data-tooltip' attribute */
    position: absolute;
    bottom: 125%; /* Position above the element */
    left: 50%;
    transform: translateX(-50%);
    background-color: skyblue; /* Dark background for the tooltip */
    color: #fff; /* White text color */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap; /* Prevents text from wrapping */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Prevents interaction when hidden */
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    z-index: 10; /* Ensures it appears on top */
  }
  
  /* Show the tooltip on hover */
  .tooltip:hover::after {
    opacity: 1;
    visibility: visible;
  }

  /* page description area */
  .header-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    align-items: flex-start;
    margin-top: .5rem;
  }

  .header-left {
    display: flex;
    flex-direction: column;
    gap: .25rem; 
  }

  .header-title {
    display: inline-block;
    font-size: 1.50em;
    font-weight: 500; 
  }

  .header-title img {
    cursor: pointer;
  }

/* dashboard page  */
.trouble-notes {
    width: 100%;
}

.trouble-header-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: .9rem;
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: .75rem;
}

.trouble-header-main {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.25rem;
  align-items: start;
}

.trouble-header-meta {
  min-width: 0;
}

.trouble-header-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  margin-bottom: .75rem;
}

.trouble-title-block {
  min-width: 0;
}

.trouble-summary-grid{
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: .35rem 1rem;
}

.trouble-summary-grid .k{
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

.trouble-summary-grid .v{
  color: #222;
  min-width: 0;
}

.trouble-summary-grid {
  padding-top: .15rem;
}

.root-cause-pill {
  display: inline-block;
  background: #f4f4f4;
  border: 1px solid #e6e6e6;
  color: #444;
  padding: 0 .35rem;
  border-radius: 3px;
}

.trouble-calls{
  background: #fff;
  border: 1px solid #ccc;
  border-radius: .5rem;
  padding: .4rem .6rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  margin: 0 auto .5rem auto;
  width: 17rem;
  transition: box-shadow .15s ease, transform .05s ease;
}

.trouble-calls:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

.trouble-calls:active {
  transform: scale(.99);
}

.trouble-inner{
  display: grid;
  grid-template-columns: 2.25rem 1fr; /* icon column + text column */
  gap: .55rem;
  align-items: center;              /* centers 1-line text vs icon */
}

.trouble-icon{
  width: 2.25rem;
  height: 2.25rem;                 /* about 2 lines worth */
  display: block;
  flex-shrink: 0;
}

.trouble-text{
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;           /* allow up to 2 lines */
  overflow: hidden;
}


.trouble-calls.mini {
    padding: .3rem .3rem;
    margin-bottom: 1px;
}

.post-notes {
    width: 100%;
}

.trouble-area {
    margin-bottom: .5em;
}
.group {
    width: 100%;
    gap: .5rem;
    padding: 10px;
    margin: 0;
    border: 1px solid #ccc;
    background-color: #ebeaea;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease,
    box-shadow .15s ease;
  } 
  .group:hover {
    background-color: #e2e2e2;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  .group:active {
    transform: scale(.99);
  }

.ehi-bar {
    width: 16rem; 
    height: 1.5rem; 
    background-color: #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    margin: 0 auto;
}

.ehi-fill {
    height: 100%;
    transition: width 0.5s ease, background-color 0.5s ease;
}

.machine-photo {
  flex: 0 0 auto;
}

.machine-photo img {
  display: block;
  width: 7rem;
  height: 7rem;
  object-fit: contain;
  border-radius: .5rem;
  border: 1px solid #ddd;
  background: #f8f8f8;
}

.machine-image {
  display: block;
  width: 7rem;
  height: 7rem;
  border-radius: .5rem;
  border: 1px solid #ddd;
  /* background: #f8f8f8; */
  object-fit: contain;
}

.detail-row {
  display: contents; 
  border-bottom: 1px solid grey;
}

.label {
  font-weight: 600;
  color: #555;
  text-align: left;
  white-space: nowrap;
 
}

.value {
  color: #222;
  font-size: 1rem;
  font-weight: 500;
}

.value.bold {
  font-weight: 600;
  font-size: 1.25rem;
}

.on-time .sub-value {
  color: #2e7d32;   /* green */
}

.late .sub-value {
  color: #c62828;   /* red */
}

.summary-bar-label.bar--good { color: #3d8b3d; }
.summary-bar-label.bar--warn { color: #b07d12; }
.summary-bar-label.bar--bad  { color: #a94442; }

.summary-bar-fill.bar--good {
  background: #5cb85c; /* green */
}

.summary-bar-fill.bar--warn {
  background: #f0ad4e; /* yellow/orange */
}

.summary-bar-fill.bar--bad {
  background: #d9534f; /* red */
}


.summary.summary--compact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-auto-rows: auto;
  align-items: center;
  gap: .65rem .85rem;
  padding: .6rem .85rem;
  margin-bottom: 1rem;
  max-width: 30rem;
}

.summary-left .summary-title {
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
}

.summary-left .summary-sub {
  color: #666;
  font-size: .95rem;
  margin-top: .2rem;
}

/* Right side metric tiles */
.summary-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.metric {
  border: 1px solid #eee;
  border-radius: .6rem;
  padding: .4rem .6rem;
  /* background-color: white; */
}

.metric-label {
  color: #666;
  font-weight: 700;
  font-size: .85rem;
}

.metric-value {
  font-weight: 900;
  font-size: 1.1rem;
  margin-top: .15rem;
  line-height: 1.1;
}

/* Bar row spans BOTH columns */
.summary-bar-row--full {
  grid-column: 1 / -1;
}

/* label | bar | value */
.summary-bar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem;
  margin-top: .2rem; /* tiny separation from row 1 */
}

.summary-bar-label,
.summary-bar-value {
  font-weight: 700;
  color: #555;
  font-size: .95rem;
  white-space: nowrap;
}

.summary-bar {
  height: .55rem;
  border-radius: 999px;
  background: rgb(241, 241, 241);
  overflow: hidden;
  overflow: hidden;
}

.summary-bar-fill {
  height: 100%;
  display: block;
  transition: width 0.25s ease;
}

.report-summary {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: .5rem 0 1rem;
  width: 100%;
  flex: 1;
}

.report-summary-title {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
}

.kpi-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: .6rem;
  align-items: stretch;
}

.kpi{
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  border: 2px solid #e5e7eb;
  border-radius: .6rem;
  padding: .6rem .75rem;
}

.kpi-label {
  color: #666;
  font-weight: 700;
  font-size: 1rem;
}

.user-menu {
  margin-top: 2rem;
}

.kpi-value {
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.1;
  margin-top: .1rem;
}



.lg {
  width: 10rem;
  height: 10rem;
}

.hidden {
    display: none
}
.machine {
    padding: 5px;
    cursor: pointer;
    background-color: #e9e9e9;
    margin-bottom: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.facility-machine {
    padding: 5px 10px;
    cursor: pointer;
    background-color: white;
    margin-bottom: 5px;
    font-size: 1.25rem;
    font-weight: 500;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.facility-machine:hover {
  background: #f0f0f0;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.facility-machine:active{
  transform: translateY(0) scale(.99);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.machineDash {    
    padding: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: .25rem;
    justify-content: flex-start;
    width: 93%;
    max-width: 20rem;
    margin: 0;
    font-size: 1.25rem;
}

.machineDash {
  transition: filter .15s ease, transform .05s ease;
}

.machineDash:hover {
  filter: brightness(1.05);
}

.machineDash:active {
  transform: scale(.99);
}

.machine-meta{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: .25rem;
}

.machine-actions {
  margin: .25rem auto 1rem;
  display: inline-flex;
  /* width: auto; */
  gap: .50rem; 
  
}

.button-container {
    display: flex;
    justify-content: center;
    margin-left: .5rem;
    width: 17rem;
    margin-top: 1rem;
}

.note-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
 
  min-width: 20px;
  height: 20px;
  border: none;
  padding: 0 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  border-radius: 6px;   
}

.status-wrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;             
}

.status-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  gap: 2px;                 
  min-width: 20px;
  height: 20px;
  padding: 0 6px;           
  font-size: 12px;
  font-weight: bold;
  border-radius: 3px;
  border: 1px solid black;
}

.status-box.trouble {
    background-color: gold;
    color: black; /* Use black for contrast */
}

.status-box.down {
    background-color: tomato;
    color: white;
}
.status-box.pm {
  background: rgba(255,255,255,0.85);
  color: #111;
  border: none;
  padding: 0 4px;
 
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  border-radius: 6px;                
}
.pm-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.status-box.note{
  background: rgba(255,255,255,0.85);
  border: 1px solid #ccc;
}


.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
   
}

.day {
  min-width: 0;
}

.hero-text {
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: .25rem;
}

.day h3 {
    margin: 5px 0;
}

.chart-box{
  height: 350px;      /* pick what you like */
  width: 100%;
  position: relative; /* helps Chart.js sizing */
}

/* -------TABLE classes------- */

/* .table th::after {
  content: " ⇅";
  color: var(--green);
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.2s ease;
} */

/* 2) Put the icon on the tab instead */
.table th .th-tab::after {
  content: " ⇅";
  /* color: var(--green); */
  color: green;
  /* color: blue; */
  font-size: .85rem;
  font-weight: 400;
  margin-left: 0.35rem;
  transition: color 0.2s ease;
}

th.sorted-asc .th-tab::after {
  content: " ▲";
  /* color: var(--green); */
  color: green;
  font-size: 1rem;
}
th.sorted-desc .th-tab::after {
  content: " ▼";
  color: green;
  font-size: 0.8em;
}

/* Disable sort icon */
.no-sort::after {
  content: none !important;
}

/* Make it feel non-clickable */
.no-sort {
  cursor: default;
  pointer-events: none; /* optional but recommended */
}

.trend-list { display: grid; gap: .35rem; }
.table-wrap {
  
  border-bottom: 1px solid rgb(80, 80, 80);
 
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  max-height: 75vh;         
}

.med {
  max-width: 60rem;
}

/* base */
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 1rem;
}

.table td {
  min-width: 0;
}

.table th,
.table td {
  padding: .50rem .75rem;
  vertical-align: top;
 white-space: nowrap;
}



/* --- Fixed-width columns --- */
/* --- Fixed-width columns --- */
.table col.col-small {width: 6rem}

.table col.col-notes {
  width: 16rem;  
}

.wide-col {
  width: 20%;
}

.center {
  text-align: center;
}
 
.ellipsis {
 display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13rem;
}

.edit-pm .ellipsis {
  max-width: 25rem;
}

/* header */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: white;
  text-align: center;
  font-weight: 600;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
  padding: 0.25rem 0.15rem 0;    
  vertical-align: bottom;       
}

.table thead th > .th-tab{
  /* NEW: sit at bottom */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;              /* pushes it down */
  padding: 0.25rem 1.5rem;
  width: 100%;
  border-radius: 0.6rem 0.6rem 0 0;
  background: rgb(212, 212, 212);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.table thead th.tight-head > .th-tab {
  padding: 0.25rem 0.5rem;
}


.table th.sorted-asc .th-tab,
.table th.sorted-desc .th-tab{
  background: rgb(242, 235, 196); /* or a muted amber */
  
}

/* rows */
.table tbody tr:nth-child(odd) { background: #fff; }
.table tbody tr:nth-child(even){ background: var(--grey1); }

.table tbody tr {
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
  outline: none;
}
.table tbody tr:hover { background: var(--row-hover); }
.table tbody tr:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus);
}

/* Opt-out for non-clickable tables */
.table.no-click tbody tr {
  cursor: default;
}

/* “pill” role badge */
.pill {
  display: inline-block;
  padding: .10rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--grey2);
  background: #fafafa;
  font-size: .85rem;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
  line-height: 1;
}

.pill--trouble {
  background: #f4e7a1;      /* slightly richer than pastel */
  color: #5c4a00;           /* darker text */
  border-color: #d4b200;    /* strong edge */
}

.pill--down {
  background: #efb5af;   /* slightly less pink, more “industrial red” */
  color: #3a1412;        /* tiny bump for readability */
  border-color: #b03a2e; /* slightly less harsh than current */
}

.pill--pm {
  background: #e5e7eb;
  color: #374151;
  border-color: #9ca3af;
}

.task-pill {
  display: block;
  line-height: 1;
  padding: .25rem .50rem;
  border-radius: 5px;
  border: 1px solid var(--card-border);
  background: var(--blue2);
  /* font-size: 1rem; */
  width: fit-content;
  margin:0 auto;
  cursor: pointer;
}

/* For detail_mode (single tech) tasks */
.task-pill.detail {
  display: block;
  white-space: normal;      /* allow wrapping */
  border-radius: 10px;
}

/* Stack machine name above task name */
.task-pill .machine__name {
  display: block;
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 1rem;
}

.task-pill .machine__task {
  display: block;
  font-size: .85rem;
}



.tech-legend {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;     /* wrap to new lines if many techs */
  gap: 0.5rem;  
  margin-bottom: 1rem; /* spacing before calendar */
  align-items: center;
}

.legend {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}

.legend-swatch {
  width: 1.5rem;
  height: 1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18); /* light outline */
}

.day.collapsed .extra-item {
  display: none;
}

/* When not collapsed, all task-pill are visible */
.day .task-pill {
  display: inline-block;        /* or flex if you’re styling them that way */
}

.underline {
    border-bottom: 2px solid black;
    display: inline-block;
}

.zero {
  color: red;
  white-space: nowrap;
  font-size: .85rem;
}

.small-photo {
    max-width: 100px;
    height: auto;
}

a {
    text-decoration: none;
    color:black;
    cursor: pointer;
}

a:visited {
    color: black
}

.blue-text {
    color: blue
}

.note {
   max-width: 20rem;
   width: 100%
}

.box {
    margin-bottom: 1rem;
}

.pointer{
    cursor: pointer;
}

.note-bubble {
    /* margin-left: .5rem; */
    margin-bottom: .5rem;
    margin-top: 1rem;
    position: relative;
    background: #fffbcc; /* Light yellow sticky note color */
    border: 1px solid #d1cea6;
    color: #333;
    padding: 8px 10px;
    border-radius: 5px;
    width: 80%;
    max-width: 20rem;
    display: inline-block;
    cursor: pointer;
    font-family: Arial, sans-serif;
}

/* Main Tail (Yellow) */
.note-bubble::after {
    content: "";
    position: absolute;
    top: -16px; /* Adjusted to match border */
    left: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid #fffbcc; /* Main yellow color */
    z-index: 2; /* Make sure it stays on top */
}

/* Tail Border */
.note-bubble::before {
    content: "";
    position: absolute;
    top: -17px; /* Slightly higher to show border */
    left: 19px; /* Align with tail */
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 17px solid #d1cea6; /* Border color */
    z-index: 1; /* Behind the main tail */
}

/* data display area like a table */
.info-details {
    display: flex;
    flex-direction: column;
    max-width: 30rem; 
    width: 100%
}

.info-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  column-gap: .5rem;
}

.info-label {
  font-weight: 500;
  white-space: nowrap;
}

.pm-task {
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
    margin-bottom: .5rem;
    overflow: hidden;
}

.pm-content {
    padding: .5rem;
    display: none
}

.pm-task.expanded .pm-content {
    display: block;
}

.next-pm{
  font-weight: 400;
}

.grey {
  display: flex;
    background-color: #f4f4f4;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    transition: background-color .15s ease, transform .05s ease;
    cursor: pointer;
    gap: .75rem;
}

.pm-right{
  display:flex;
  align-items:center;
  gap: .75rem;
  flex-shrink: 0;           /* don’t let right side shrink */
}

.pm-due{
  white-space: nowrap;      /* prevents the date from wrapping */
}

.grey:hover {
  background: #ededed;
}

.grey:active {
  transform: scale(.99);
}

.pm-name{
  flex: 1;
  min-width: 0;            
  white-space: normal;
}

.icon {
    height: 1rem;
    width: 1rem;
}

.button-div {
    margin-bottom: 2rem;
    margin-top: .25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: .75rem;
}

  .report-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
  }

  .billing-note {
   
    font-size: .85rem;
  }

  .trial-end {
    min-height: 100vh;              /* optional but nice */
  display: flex;
  flex-direction: column;
  align-items: center;            /* horizontal centering */
  
  gap: 1.5rem;
  text-align: center;
  padding: 2rem 1rem;
  }
  
  .stripe-logo {
    height: 24px;
    vertical-align: middle;
  margin-top: 1rem;
    opacity: 0.9;
  }

button {
    background-color: var(--blue1); 
    color: white;
    border: none;
    padding: 3px 5px;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    width: fit-content;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.button {
    background-color: var(--blue1); 
    color: white !important;
    border: none;
    padding: 3px 5px;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    width: fit-content;
    font-size: 1.1rem;
    align-items: center;
}

.btn--red {
  background-color:var(--grey1);
  color: rgb(82, 82, 82);
}
.red-btn {
  background-color: tomato; 
  color: white;
  border: none;
  padding: 3px 5px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  width: fit-content;
  font-size: 1.25rem;
}
.button-row {
  display: flex;
  gap: 1rem;
}

.std-btn {
    color:black !important;
    background: rgb(244, 241, 241) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    border: 1px solid #d0d7de;
}

.issue-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.issue-btn img {
  width: 1.2rem;
  height: 1.2rem;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 5.5rem;
  gap: 0;
  padding: .25rem;
  border: 1px solid #d6dbe1;
  border-radius: .70rem;
  background-color: #f5f5f5;
  cursor: pointer;
  white-space: nowrap;
  color: black;
  transition: background-color .15s ease, transform .05s ease;
}

.action-btn:hover {
  background-color: #e9e9e9;
}

/* Icon container */
.action-btn .btn-icon img {
  display: block;
  width: 30px;  
  height: 30px;
}

.action-btn .btn-text {
  font-size: 1rem;
  font-weight: 500;
}

.action-btn.pm-overdue{
  border-color: rgba(240,195,109, 1);
  box-shadow: 0 0 0 3px rgba(240,195,109,.45);
}

.action-btn.pm-overdue:hover{
  background: #ffefbf;               
}

button:active {
    transform: scale(0.98); /* Slight press effect */
}

button:disabled {
    background-color: #ccc;
    color: rgb(80, 80, 80);
    font-size: 1rem;
    cursor: not-allowed;
}
#messages {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

@media (min-width: 700px) and (max-width: 1024px){
  #messages {
    left: auto;
    right: 8rem;
    transform: none;
    align-items: flex-end;
  }
}

.flash-message {
  transform: translateY(-120%);
  opacity: 0;
  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

/* visible state */
.flash-message.show {
  transform: translateY(0);
  opacity: 1;
}

/* optional exit state (same as default, but explicit) */
.flash-message.hide {
  transform: translateY(-120%);
  opacity: 0;
  transition:
    transform 500ms ease,
    opacity 350ms ease;
}

.good-message {
    background-color: white;
    color: green;
}
.bad-message {
    background-color: white;
    color: red;
}
.good-message,
.bad-message{
  display: inline-flex; 
  align-items: center;
  padding: .45rem .75rem;
  font-size: 1rem;
  line-height: 1.15;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  max-width: min(34rem, calc(100vw - 1.5rem));
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  font-weight: 600;
}

.dragging-ghost {
    opacity: 0.5;
    background: #c8ebfb;
}

.scrollable {
    max-height: 300px;
    overflow-y: auto;

}

.dashboard-container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    /* background-color: #dff2fb; */
   
}

/* modal test area ------------------ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
}

.modal[hidden] {
  display: none;
}

.modal-panel {
  position: relative;
  background: cornsilk;
  padding: .75rem 1rem;
  border-radius: .5rem;
  border: 1px solid lightgrey;
  max-width: 33rem;
  width: 90vw;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

.video-wrap{
  width: min(300px, 100%);  /* <-- key line */
  margin: 2rem auto;
}

.help-video{
  width: 100%;
  height: auto;
  display: block;
}

video::cue {
  font-size: 16px;
}

.videos-page{
  max-width: 1050px;
  margin: 0 auto;
  padding: 1rem .75rem 2rem;
}

.videos-head{
  margin-bottom: 1rem;
}

.videos-title{
  margin: 0;
  font-size: 1.6rem;
}

.videos-subtitle{
  margin: .25rem 0 0;
  opacity: .75;
}

.player-wrap{
  max-width: 500px;
  margin: 1rem auto 2rem;
  
}

.help-video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 8px solid black;
}

.player-title{
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.topic{
  margin-top: 2rem;
}

.thumb-strip{
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  /* padding: .25rem 0 .75rem; */
  scroll-snap-type: x mandatory;
}

.thumb{
  flex: 0 0 150px;      /* thumbnail width */
  scroll-snap-align: start;
  border: 1px solid #e6e6ea;
  border-radius: 12px;
  background: #fff;
  padding: .4rem;
  cursor: pointer;
  text-align: left;
  display: grid;
  gap: .4rem;
}

.thumb__img{
  width: 100%;
  aspect-ratio: 1 / 1;   /* your square export */
  object-fit: cover;
  /* border-radius: 10px; */
  display: block;
}

.thumb__title{ font-weight: 600; font-size: .9rem; line-height: 1.1; }
.thumb__sub{ display: flex; justify-content: space-between; gap: .5rem; margin-top: .15rem; }
.thumb__topic{ font-size: .78rem; opacity: .75; }
.thumb__dur{ font-size: .78rem; opacity: .7; }

.thumb.is-active{ outline: 2px solid rgba(0,0,0,.2); }

/* Captions size tweak */
video::cue { font-size: 14px; }

.help-list {
  margin: 0.33rem 0 0;      /* tiny space below header */
  padding-left: 1rem;    /* subtle indent */
}

.help-list li {
  margin: 0.15rem 0;
}

/* Tighten hero spacing */
.help-title {
  margin: 0 0 .5rem 0;
}

.help-subtitle {
  margin: 0 0 .75rem 0;
}

/* Add breathing room below hero */
.help-hero {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* Card basics */
.help-card {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-top: 1rem;
}

/* Remove default h3/ul spacing inside cards */
.help-card__title {
  margin: 0;
}

.help-card__list {
  margin: .5rem 0 0;
  padding-left: 1.1rem; /* keep bullets but tighter */
}

.help-card__list li {
  margin: .35rem 0;
}

.help-card--lean {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .85rem;
  padding: .75rem .85rem;
  transition: transform .12s ease, box-shadow .12s ease;
}

.help-card--lean:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.05);
}

.help-card__row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* TEXT BLOCK */
.help-card__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* TITLE */
.help-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* SUBTITLE */
.help-card__desc {
  font-size: .9rem;
  color: #6b7280;
  line-height: 1.3;
  margin-top: .1rem;
}

.help-grid {
  display: grid;
  gap: .25rem;
}

/* Player wrapper */
.vid{
  position: relative;
}

.big-green {
  font-size: 2.5rem;
  color: green;
}
  
  .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    background: rgb(217, 217, 217);
    border: 1px solid rgb(106, 106, 106);
    border-radius: 5px;
    padding: 2px;
    font-size: 1.2rem;
    color: #333;
    cursor: pointer;
  }

  .help-inline-icon {
    width: 1.25rem;
    height: auto;
    vertical-align: middle;
    /* margin: 0 0.25rem; */
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.setup-container {
     display: flex;
     flex-direction: column;
     gap: .5rem;
     margin-top: 1rem;
     max-width: 600px;
     margin-bottom: 2rem;
}


/* Container */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
  padding: .33rem .75rem;
  background: var(--green);
  border-radius: .33rem;
}

.filter-field select {
  max-width: 13rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Default (desktop/tablet) – hide it */
.filter-toggle {
  display: none;
}

.narrow-filter .filter-bar{
  font-size: .9rem !important;
  padding: .5rem !important;
  }
  

/* Form row */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: end;          
  flex: 1;                   
}

/* Field: label + control aligned */
.filter-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: .5rem;
  white-space: nowrap;
}

/* Labels */
.filter-field > label {
  font-weight: 600;
  white-space: nowrap;
}

/* Controls */
.filters select,
.filters input[type="date"],
.filters input[type="text"] {
  height: 2rem;
  padding: 0 .6rem;
  border: 1px solid #dcdcdc;
  border-radius: .5rem;
  font: inherit;
  background: #fff;
  min-width: 10rem;         
}

/* Actions */
.filter-actions .btn {
  height: 2rem;
  padding: 0 .75rem;
  border-radius: .5rem;
  border: 1px solid #d0d7de;
  background: rgb(232, 232, 232);
  color: black;
  
  cursor: pointer;
  font-size: 1rem;
}

/* Print button at far right */
.print-button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .75rem;
  border: 1px solid #d0d7de;
  border-radius: .5rem;
  background: rgb(232, 232, 232);
  cursor: pointer;
  white-space: nowrap;
  color: black;
  font-size: .8rem;
  align-self: flex-start;
}

/* Responsive: stack fields cleanly on small screens */
@media (max-width: 640px) {
  .filters {
    align-items: stretch;           /* no bottom alignment when stacked */
  }
  .filter-field {
    grid-template-columns: 1fr;     /* label above control on mobile */
  }
  .filters select { min-width: 100%; }

 
}

.machine-container {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  padding: .5rem;
  max-width: none;
  width: 100%;
  margin-bottom: 1rem;
  align-items: center;
  background-color: white;
  /* border: 1px solid rgb(209, 209, 209); */
  border-radius: 5px;
  box-shadow: 0 6px 12px rgba(164, 164, 164, 0.15);
}

.machine-text {
  font-size: 2rem;
  /* color: var(--blue3); */
  font-weight: 600;
}

/* Desktop & tablet: two columns */
.machine-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* 2 equal columns */
  gap: .5rem;                                  /* row / column gaps */
  max-width: 45rem;   
  margin: 0 auto;      
}

.machine-task {
  width: 20rem;
  background: rgb(245, 245, 245);
  border: 1px solid #e6e6ea;
  border-radius: .75rem;
  padding: .25rem;
  margin-bottom: .5rem;
  /* padding-left: .5rem; */
  align-items: center;
  cursor: pointer;
}

.number {
  background-color: white;
  font-size: 1.1rem;
  font-weight: 400;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid var(--grey2)
}

.machine-summary {
  font-size: 1.20rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: .25rem;
  padding-right: .75rem;
}

.machine-left {
  display: flex;
  align-items: center;
  gap: .50rem;
}

.caret {
  width: .5rem;
  height: .5rem;
  border-right: 1px solid #818181;
  border-bottom: 1px solid #818181;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

.machine-task[open] .caret {
  transform: rotate(45deg);
}

.machine-name{
  flex: 1;                    
  text-align: left;
  padding-left: .5rem;   
}

.machine-name-div{
  flex: 1;             
  min-width: 0;         
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-list {
  margin: .5rem 0 0;
  display: grid;
  gap: .25rem;
}

.task-item {
  padding: .25rem .5rem;
  border-radius: .25rem;
  background: var(--grey1);
  font-size: .9rem;
  margin-left: .5rem;
  /* background-color: white; */
}

.manage-btn {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: .25rem;
  /* background-color: white; */
  gap:.25rem;
  width:fit-content;
  padding: .25rem;
  border-radius: 3px;
}

.top-space {
    margin-top: .5rem;
}
  
  .filter-bar form {
    display: flex;      /* make the form’s children line up */
    flex-wrap: wrap;    /* allow wrapping on small screens */
    gap: .5rem;
    flex-grow: 1;       /* let it stretch */
    align-items: center;
  }

.menu {    
  width: 100%;
  max-width: 850px;
  margin: 2rem auto;
  display: grid;
  gap: 2rem;
  font-size: 1.25rem;
  font-weight: 500;
}
.menu--cols-1 { grid-template-columns: 1fr; max-width: 400px; gap: .75rem; font-size: 1.50rem;}
.menu--cols-2 { grid-template-columns: 1fr 1fr; }
.menu--cols-3 { grid-template-columns: 1fr 1fr 1fr;}

.menu-col {
  display: flex;
  flex-direction: column;
  gap: .75rem;     
}

/* Dashboard spans both columns and is exactly the grid width */
.menu .dashboard {
  grid-column: 1 / -1;
  height: 4rem;
  font-weight: 600;
  font-size: 1.75rem ;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  gap: .75rem;

  background: rgb(245, 245, 245);
  border: 1px solid #e6e6ea;
  border-radius: .75rem;
  padding: .5rem;
  height: 3.25rem;
  text-decoration: none;
  color: inherit;
  transition: 
  background-color 0.15s ease,
  box-shadow 0.15s ease,
}

.menu-btn img {
  display: block;
}

/* Hover (optional) */
.menu-btn:hover {
  background: rgb(229, 228, 228);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.menu-btn:active{
  transform: translateY(0) scale(.99);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.blue-icon {
    vertical-align: bottom;
    background-color: #aae4ff;
    padding: .25rem;
    border-radius: 5px;
}

.machine-list {
    display: flex;
    flex-direction: column; 
    margin-top: .50rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding-inline: .5rem;
  }
  
  .trouble-entry {
    margin-left: 1rem;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: .5rem 1rem;
    border-radius: 5px;
    margin-bottom: .25rem;
    width: 23rem;
  }

  .trouble-down {
    padding: 2px 10px;
    border-radius: 8px;
    background-color: #fde2df;   
    color: #9c2f1f;              
  }
 
  .trouble-trouble { 
   padding: 2px 10px;
    border-radius: 8px;
    background-color: #fff4cc;   
    color: #7a5a00;              
  }

  .trouble--small {
    font-size: 1rem;
  }
  

  .trouble-pm-task { 
    padding-right: .25rem;
    border-radius: 3px;
  }

  .pm-notes {
    margin-bottom: .5rem;
    background-color: #fff8dc;
    padding: .5rem;
    border-radius: 10px;
  }

  .machine.projected {
    opacity: 0.4;
  pointer-events: none;
  cursor: default;
  }

  .area-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(16rem, 1fr));
    gap: .5rem;
    margin-top: 1rem;
    max-width: 1000px;
    width: 100%;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .area-grid.area-grid--centered {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
  }

  .group-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .area-grid--centered .group-wrapper {
    flex: 0 1 20rem;   
    max-width: 100%;
  }

.dashboard-info {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    padding: 1rem;
    text-align: center;
    border-radius: 1rem;

}
/* Default layout of Minimal: nothing shows */
.dashboard-info > div {
    display: none;
}

/* Full: show all */
.dashboard-info.full .priority,
.dashboard-info.full .health,
.dashboard-info.full .activity {
    display: block;
}

.dashboard-section {
    padding: .5rem;
    min-width: 12rem;
    background-color: white;
    
    border-radius: .5rem; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    border: 1px solid #e0e0e0;
}

/* Priority section title */
.dashboard-section.priority > span {
    font-weight: bold;
    font-size: 1.3rem;
    display: block;
    margin-bottom: .5rem;
    color: #b91c1c; /* deep red for emphasis */
}

/* Individual priority call card */
.priority-call {
    background: #fee2e2;
    border-left: 5px solid #dc2626;
    border-radius: 6px;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.priority-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* Priority call icon */
.priority-call img {
    /* background-color: white; */
    border-radius: 5px;
    width: 2.5rem;
    height: 2.5rem;
}

.dashboard-section.activity > span {
    font-weight: bold;
    font-size: 1.3rem;
    display: block;
    margin-bottom: .5rem;
    color: blue; /* deep red for emphasis */
}

.activity-log {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Vertical line */
.activity-log::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb; /* light gray */
}

/* Each list item */
.activity-log li {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid black;
}

/* Bullet marker */
.activity-log li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: #3b82f6; /* blue bullet */
    border-radius: 50%;
    border: 2px solid #fff; /* gives bullet a clean border */
    box-shadow: 0 0 0 2px #3b82f6; /* makes it stand out */
}

/* Timestamp style */
.activity-timestamp {
    font-size: 0.85rem;
    color: #6b7280;
    display: inline-block;
    min-width: 55px; /* aligns times */
}



.dashboard-section span {
    font-size: 1.2rem;
    display: inline-block;
}

.dashboard-info.standard .health {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1/3;
    justify-self: center;
    min-width: 20rem;
    max-width: 100%;
}

.dashboard-info.full .priority {
    display: block;
    grid-column: 6 / 9;
    grid-row: 1 / 3;
}

.dashboard-info.full .health {
    display: block;
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    min-width: 20rem;
    max-width: 100%;
}

.dashboard-info.full .activity {
    display: block;
    grid-column: 9 / 13;
    grid-row: 1 / 3;
    border: 1px solid black;
    box-shadow: 0 4px 3px rgba(0,0,0,0.15);
}
    
.subnotes {
    display: grid;
    grid-template-columns: repeat(4, auto);
    margin: 1rem auto 0 auto;
    justify-content: center;
    gap: 1rem;
}

.subnote {
   padding: .25rem 0;
    min-width: 5rem;
    border: 2px solid grey;
    border-radius: .5rem;
    font-size: .85rem;
    box-shadow: 0 3px 2px rgba(0,0,0,0.15);
}

.subnote:hover {
background-color: #f0f0f0;
border-color: #333;
}

.sign-container {
    position: relative;
    display: inline-block;
    width: 2.5rem; /* adjust size as needed */
    height: 2.5rem;
  }
  
  .sign-image {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .sign-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    white-space: nowrap;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 3px black;
    pointer-events: none;
  }

  fieldset {
    width: 15rem; /* or any width you want */
    max-width: 100%; /* prevents overflow on small screens */
   margin-bottom: 1rem;
    border: 1px solid #ccc; /* if you keep the border */
    padding: .5rem;
  }
/* Base paper styling */

.notebook{
  display: block;
  box-sizing: border-box;
  width: 100%;              /* default to fluid */
  background-color: #fffbe8;
  background-image: repeating-linear-gradient(
    to bottom,
    #f4f4f4 0px,
    #dddddd 1px,
    transparent 1px,
    transparent 1.6rem
  );
  border-left: 4px solid rgba(255, 0, 0, 0.3);
  padding: .3rem .4rem .3rem .2rem;
  line-height: 1.6rem;
  font-family: "Courier New", monospace;
  text-align: left;
  align-self: stretch;
}

.notebook--dash{
  width: 100%;
  max-width: none;
  cursor: pointer;
  display: block;
  padding-left: .4rem;
  padding-right: .4rem;
  height: 5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.notebook--dash .note-text{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  /* helps with long tokens/URLs */
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Full note (view/edit page) */
.notebook--full{
  min-height: 6rem;
  height: auto;
  overflow: visible;
  cursor: default;
  margin-bottom: .75rem;
}

.notebook.handwritten{
  font-family: "Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 1.1rem;
  font-weight: 300;

  /* subtle adjustment for cursive ascenders/descenders */
  line-height: 1.7rem;
  background-image: repeating-linear-gradient(
    to bottom,
    #f4f4f4 0px,
    #dddddd 1px,
    transparent 1px,
    transparent 1.7rem
  );
}

.notebook p{
  margin: 0 0 1.7rem;
}

.notebook p:last-child{
  margin-bottom: 0;
}

.note-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}
.note-card{
  margin-top: 1rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow, 0 4px 10px rgba(0,0,0,0.08));
}

.note-title{
  margin: 0 0 .75rem 0;
  font-size: 1.2rem;
}

.note-input{
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.note-meta{
  border-top: 1px solid var(--border, #ddd);
  padding-top: .75rem;
  margin-top: .75rem;
}

.note-actions{
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

.modal-btn {
  height: 2rem;
  padding: 0 .75rem;
  border-radius: .5rem;
  border: 1px solid #d0d7de;
  background: rgb(217, 217, 217);
  color: black;
  
  cursor: pointer;
  font-size: 1rem;
}

.story {
  display: grid;
  grid-template-columns: 250px 1fr;           /* images | text */
  grid-template-areas: "images text";
  gap: .5rem;
  margin-top: 2rem;
}

.text-column {
  grid-area: text;
  display: flex;
  flex-direction: column;
  min-width: 0;          /* prevents overflow */
}

.image-column {
  grid-area: images;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  }

  .image-column img {
    width: 100%;   /* or whatever fixed size you like */
    height: auto;   /* keep aspect ratio */
    border-radius: 8px;  /* optional styling */
  }

.about-section {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}

.notebook.large p {
    margin: 0 0 1.6rem;    /* one extra line between paragraphs */
  }

.faq {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    margin-top: 1.5rem;
}

.note-line {
    display: block;
    line-height: 1.6667rem; /* exact same as .notebook */
    white-space: nowrap; /* prevents wrap if needed */
}

.blue {
    color: blue
}

.page-wrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 7rem 1rem 1.5rem;
    background-color: white;
    min-height: 100%;
}

.public-site .page-wrapper {
  padding-bottom: 4rem;
}

/* splash page */

.landing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}

.hero {
    margin-bottom: 5rem;
}


.splash-grid {
  display: grid;
  /* gap: 1.5rem; */
  column-gap: 1.5rem;
  margin-bottom: 3rem;

  /* Desktop default layout */
  grid-template-columns: 1fr auto auto 1fr;
  justify-content: center;
  grid-template-areas:
    "title title title title"
    "subtitle subtitle subtitle subtitle"
    ". phone group .";
}

/* Assign each item to an area */
.hero-title     { grid-area: title; font-size: 2.3rem; margin-top: 1rem; margin-bottom: .5rem;}
.subtitle       { grid-area: subtitle; color: #62a96e; font-size: 1.5rem; margin-bottom: 2.5rem; font-weight: 600;}
.group-image-wrap { grid-area: group; justify-self: start; width: 500px; align-self: center; }

/* Highlights cards */
.highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1.5rem;
    margin: 5rem auto;
    max-width: 1200px;
}

.highlight-card {
    flex: 1 1 250px;
    /* background-color: #d5e0fb; */
    background-color: #c4ddc7;
    padding: .5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

.gear {
    background-image: url("/static/icons/gears.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 80px auto; /* adjust size */
    background-blend-mode: multiply; /* optional: softens into bg */
    opacity: 0.95; /* optional: subtle transparency */
}

.chart {
    background-image: url("/static/icons/grid.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 80px auto; /* adjust size */
    background-blend-mode: multiply; /* optional: softens into bg */
    opacity: 0.95; /* optional: subtle transparency */
}
.search {
    background-image: url("/static/icons/search.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 80px auto; /* adjust size */
    background-blend-mode: multiply; /* optional: softens into bg */
}

.highlight-card img {
    max-width: 100%;
    height: auto;   /* keeps aspect ratio */
    display: block; /* removes inline spacing issues */
   
  }

.pricing {
    display: flex;
    justify-content: center;
   margin-top: 2rem;
    padding: 1rem;
  }

  /* Inline badge next to yearly price */
.price-alt {
    margin-top: .25rem;
    font-size: 1rem;
    color: #333;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
  }
  
  .save-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: #ffd400;
    color: #000;
    font-weight: 800;
    font-size: .9rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    /* Make it noticeable */
 
  }
  
  .pricing-card {
    flex: 0 0 360px;
    position: relative;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    max-width: 420px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.06);
  }
 
  .price {
    margin: 0 0 .5rem;
    line-height: 1.1;
  }
  .price-main { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.5px; }
  .price-unit { font-size: 1.125rem; margin-left: .25rem; color: #555; }
  .price-alt { display: block; font-size: 1rem; color: #333; margin-top: .25rem; }
  
  .trial { color: #2c8a3b; font-weight: 700; font-size:1.2rem; margin: .25rem 0 1.25rem; }
  
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
  }
  .feature-list li {
    position: relative;
    padding-left: 1.6rem;
    margin: .5rem 0;
  }
  .feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
  }
  
  .signup {
    width: 100%;
    padding: .9rem 1.2rem;
    border: none;
    border-radius: .75rem;
    background: #3b82f6; /* blue CTA */
    color: white;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(59,130,246,.25);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    justify-content:  center;
  }
  .signup:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(59,130,246,.32);
    filter: brightness(1.03);
  }
  .signup:active { transform: translateY(0); }
  
  .assurance {
    margin-top: .75rem;
    font-size: .9rem;
    color: #555;
  }

.green-sub {
    color: #62a96e;
    font-size: 1.50rem;
}

.machine-left {
        width: 300px;
        height: auto;
        border-radius: 4px;
    }

.group-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.section-heading{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  width: min(42rem, 92%);
  margin: 0 auto 2rem;  /* centers the whole unit */
}

.section-title{
  font-size: 2rem;
  font-weight: 700;
  color: #222;
  align-self: flex-start;   /* left bias */
}

.section-head{
  width: 100%;
  max-width: 900px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  margin: 1rem 0 .75rem;
}

.section-title2{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.pm-meta{
  display:flex;
  flex-wrap:wrap;
  gap: .35rem 1.25rem;
  margin: .4rem 0 .75rem;
}

.pm-right{
  display:flex;
  align-items:center;
  gap: .75rem;
}

.pm-chevron{
  width: .55rem;
  height: .55rem;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(45deg);
  transition: transform .15s ease;
  opacity: .7;
}

.pm-task.expanded .pm-chevron{
  transform: rotate(-135deg);
}

.section-intro{
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(127, 190, 154);
  align-self: flex-end;     /* right bias */
  text-align: right;
}

  .space {
    margin-top: 5rem;
  }

  .med-space {
    margin-top: 2rem;
  }

  .center-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .center-buttons button{
    padding: .6rem 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: .6rem;
  }

  #close {
    background-color: #2c7da0;
  }

  #delete-btn{
    background-color: red;
  }

  .close-reason {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
  }

  .close-reason ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
  }
  
  .close-reason li{ margin: 0; }
  
  .close-reason input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .close-reason label{
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: #f2f3f5;
    border: 1px solid #e6e6ea;
    font-weight: 600;
    cursor: pointer;
  }
  
  .close-reason input:checked + label{
    background: #e7f1ff;
    border-color: #9cc7ff;
  }

  .long {
    margin-right: 10%;
  }
  
  .problem-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .cmms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .solution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .problem-card {
    display: flex;
    flex-direction: column;
    align-items: center;  
    min-width: 0;
    border-radius: 12px;
    padding-bottom: 20px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  
  .problem-card img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;                 
  
  }

  .problem-card p {
    padding-left: 5px;
    padding-right: 5px;
    font-size: .9rem;
  }
  /* faq section  */

  .faq-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 3rem;
  }
  
  .faq-list li {
    border-bottom: 1px solid #ddd;
        padding: 10px 0;
  }
  
  .question {
    cursor: pointer;
        font-weight: bold;
  }
  
  .answer {
    display: none;
    margin-top: 5px;
    margin-left: 1rem;
    color: #62a96e
  }


  .answer.show {
    display: block;
}

  #toggle-all {
    margin-bottom: 10px;
    padding: 6px 12px;
    cursor: pointer;
  }
  
  .feature {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .feature-top {
    text-align: center;
    margin-bottom: 1.5rem; /* space before images */
  }
  
  .feature-heading {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
  }
  
  .feature-sub {
    font-size: 1.25rem;
    margin: .5rem 0 0;
    color: #4b5563; /* optional */
  }
  
  /* two images side-by-side */
  .feature-media {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }
  
  /* equal columns that can shrink */
  .user-collage,
  .device-collage {
    flex: 1 1 0;
    min-width: 0;
  }
  
  .user-collage img,
  .device-collage img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  .equipment-wrap{
    width: 100%;
    max-width: 700px;     /* try 960–1100; 980 is a sweet spot */
    margin: 0 auto;
    padding: 0 1rem;      /* keeps nice gutters on iPad */
  }

  /* new partial template */
  .equip-header {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr);
    gap: .33rem;
    padding: .50rem;
    background: #fff;
    /* background: green; */
    border-radius: .75rem;
    border: 1px solid #e6e6ea;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 1rem auto;
    align-items: start;
  }

  .summary-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .50rem;
    margin: 0 1rem 1rem;
  }

  .summary-header.onebox {
    grid-template-columns: 150px 250px 250px;
    justify-content: center;
  }

  .summary-header.twobox {
      grid-template-columns: 150px 150px 300px;
      justify-content: center;
    }

  .summary-header.threebox {
      grid-template-columns: 200px 200px 200px;
      justify-content: center;
    }



    .table td.timing-cell {
      padding-top: 0;
      padding-bottom: 0;
      vertical-align: middle;
      text-align: center;
    }
    
    .timing-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 100%;
      line-height: 0;
    }
    
    .timing-icon img {
      display: block;
      width: 22px;
      height: 22px;
    }

    
    .timing.late {
      color: #c62828;
      font-weight: 600;
    }
    
    .timing.pending {
      color: #9e9e9e;
    }
  
  
  .equip-photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    overflow: hidden;
  }
  
  .equip-photo img {
    display: block;
    width: 9rem;
    height: 9rem;
    object-fit: contain;
    background: #f8f8f8;
  }

  .photo {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
  }

  .photo img {
    display: block;
    width: 6rem;
    height: 6rem;
    object-fit: contain;
    background: #f8f8f8;
  }

  .equip-header.wide {
    max-width: 900px;
  }
  .equip-top {
    grid-column: 2 / 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }


  .equip-title {
    min-width: 0;
}
  
.equip-name {
  font-size: 1.40rem;
  font-weight: 700;
  margin: 0;
}

.equip-more {
  flex-shrink: 0;
  font-size: .8rem;
}

.equip-summary-card {
  min-width: 0;
}

.equip-summary-wide {
  grid-column: 2 / 4;
}


.equip-more-panel {
  grid-column: 1 / -1;
  margin-top: .25rem;
}

  .k {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
  }
  
  .v {
    color: #222;
  }
  
  .equip-more-panel {
    grid-column: 1 / -1;
  }

  
  
  /* Tablet/mobile */
  @media (max-width: 700px) {
    .equip-header {
      grid-template-columns: 1fr;
    }
  
    /* Reset anything that was spanning desktop columns */
    .equip-photo,
    .equip-top,
    .equip-summary-card,
    .equip-summary-wide,
    .equip-more-panel {
      grid-column: 1;
    }

    .equip-top {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: .5rem;
      width: 100%;
    }
  
    .equip-name {
      font-size: 1.20rem;
      margin: 0;
    
    }

    .equip-title {
      width: 100%;
      min-width: 0;
    }

    .detail .label {
      font-size: .9rem;
    }
  
    .equip-more {
      display: inline-flex;
      justify-self: end;
      align-self: start;
      font-size: .75rem;
    }
    
  }
  
  .bubble {
    position: relative;
    display: inline-block;
    background: #7fb2d3;
    color: #fff;
    font-weight: 600;
    border-radius: 12px;
    padding: .5rem;
    margin-top: .5rem;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    text-align: center;
  }

  .bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% - 1px);    /* sit just above, overlap by 1px */
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #7fb2d3; /* triangle points UP */
  }
  .header-cta{
    margin-left: auto;  /* pushes CTA to the right */
  }

  .cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem .8rem;
    border-radius: .6rem;
    font-weight: 700;
    text-decoration: none;
    background: #ffd400;        /* your pricing yellow */
    color: #111;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    white-space: nowrap;
  }
  
  .cta-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,.16);
  }
  
  .cta-btn:active{
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }


  .image-mosaic{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "big top"
      "big bottom";
    gap: .75rem;
    max-width: 600px;
  }
  
  .mosaic-big   { grid-area: big; }
  .mosaic-top   { grid-area: top; }
  .mosaic-bottom{ grid-area: bottom; }
  
  .image-mosaic img{
    width: 100%;
    height: auto;      /* keep natural aspect ratio */
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.12);
  }
  /* CSS */
/* Device frame */
.phone-frame {
  --radius: 24px;
  --glass-radius: 6px;

  /* Per-side bezel controls */
  --bezel-top: 8px;
  --bezel-right: 9px;
  --bezel-bottom: 8px;
  --bezel-left: 9px;

  width: 180px;
  aspect-ratio: 9.5 / 19.5;
  border-radius: var(--radius);
  background: radial-gradient(120% 140% at 50% 20%, #1b1b1d, #0f0f10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
  overflow: hidden; /* rounded outer body */
  grid-area: phone; 
  justify-self: end;
  /* No padding here – we’ll inset the screen itself */
}

/* Optional notch; auto aligns with the top bezel */
.phone-frame::before {
  content: "";
  position: absolute;
  top: calc(var(--bezel-top) * 0.5);
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 8px;
  background: #181818;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}

/* The masked "glass" area that holds your screenshot */
.phone-screen {
  /* Inset the screen by the bezels */
  margin: var(--bezel-top) var(--bezel-right) var(--bezel-bottom) var(--bezel-left);
  border-radius: 16px;

  overflow: hidden;
  background: #000;
  width: calc(100% - (var(--bezel-left) + var(--bezel-right)));
  height: calc(100% - (var(--bezel-top) + var(--bezel-bottom)));
}

/* Keep the full screenshot visible (no cropping) */
.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* switch to 'cover' if you want edge-to-edge with some crop */
  display: block;
}

.time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: monospace; /* optional LED look */
}

.time-unit .num {
  font-size: 1rem;
  font-weight: bold;
  min-width: 2ch;
  text-align: right;
  color: white;
  /* border: 1px solid grey; */
  border-radius: 3px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  padding: 1px;
  background-color: rgb(64, 63, 63);
}

.time-unit .label {
  font-size: 0.7rem;
  opacity: 0.7;
}
/* User Page */
.panel {
  background: #fff;
  border: 1px solid #e6e6ea;
  border-radius: .50rem;
  margin-bottom: .75rem;
  width: 100%;
  max-width: 32rem;   /* increase from 23rem */
  overflow: hidden;
}

.panel-overdue { border-left: 8px solid tomato; }
.panel-trouble { border-left: 8px solid gold; }

.panel-head {
  cursor: pointer;
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.1rem;
  background-color: #f4f4f4;
  padding: .25rem 1rem .25rem .5rem;
  border-radius: 0;
}

.panel-head:hover {
  background: #ededed;
}

.panel-head:active {
  transform: scale(.99);
}

.panel > div {
  padding: .5rem .75rem;
}

.panel-row {
  padding-top: .25rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid #e9e9e9;
  display: flex;             
  align-items: center;
  margin-left: 1rem;
}

.row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty {
  padding: .5rem;
  font-size: .9rem;
  color: #555;
  font-style: italic;
}

.key { height: 1.25rem; }

details > summary { list-style: none; }                 /* Firefox + modern Chrome */
details > summary::-webkit-details-marker { display: none; } /* Older Chrome/Edge/Safari */

.dropzone {
  min-height: 10rem;
}

/* new calendar page */
.table-wrapper{ padding-bottom:.5rem; }

.day{
  background:var(--grey1);
  /* background:var(--grey1); */
  border:1px solid var(--grey2);
  border-radius:.75rem;
  padding:.25rem;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  min-height: 220px;
  display:flex; flex-direction:column; gap:.5rem;
}

.date-heading{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:500; color: black;
  border-bottom:1px dashed var(--border);
  padding-bottom: 5px; margin-bottom:.25rem;
  background-color: var(--grey2);
  padding-left: .25rem;
  padding-right: .25rem;
  padding-top: 2px;
  border-radius: 5px;
}


.machine2{
  text-align:left;
  width:100%;
  padding:.5rem .6rem;
  border:1px solid var(--grey2);
  border-radius:.6rem;
  background:linear-gradient(to bottom, #fff, #f9fafb);
  display:flex; flex-direction:column; gap:.15rem;
  cursor:pointer;
  transition:transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}

.machine2.projected {
  background: lightgrey;
  opacity: .50;
  cursor: default;
}

/* In 'collapsed' days, hide tasks 5+ (per button type) */
.day.collapsed button.machine2:nth-of-type(n + 5) {
  display: none;
}

/* When expanded, show everything */
.day.expanded button.machine2 {
  display: flex;
}

/* "+N more" link/button */
.more-tasks-btn.small {
  border: none;
  background: none;
  color: var(--link, #0077cc);
  padding: 0;
  margin-top: 0.1rem;
  cursor: pointer;
  font-size: 0.75rem;
  text-align: left;
}

.machine:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.machine:focus{ outline:2px solid var(--ring); outline-offset:2px; }

.machine.projected{
 
  cursor:not-allowed;
  border-style:dashed;
}

.no-task{
  color:var(--muted);
  /* background: white; */
  /* border:1px dashed var(--border); */
  /* border-radius:.6rem; */
  padding:.6rem; text-align:center;
}

.chip{
  margin-top:.15rem;
  align-self:flex-end;
  font-size:.75rem; line-height:1; padding:.25rem .45rem;
  border-radius:999px; border:1px solid var(--border);
  background-color: rgb(255, 232, 103);
  color: #6b7280;
}

.machine-mania {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transition: border-color 2s ease;
}

.machine-mania.is-open {
  border-left-color:lightgray;
}

.note-modal::backdrop { background: rgba(0,0,0,.4); }
.note-modal { border: 0; border-radius: .75rem; padding: 1rem; max-width: 540px; width: 92vw; }
.modal-title { margin: 0 0 .5rem 0; font-weight: 600; }
.modal-note-content { white-space: pre-wrap; line-height: 1.4; margin-bottom: .75rem; }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.btn { padding: .5rem .9rem; border-radius: .5rem; border: 1px solid #dcdcdc; background: #fff; cursor: pointer; }
.btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.btn:hover { filter: brightness(0.98); }


/* Card shell (optional) eee*/
.card {
  width: 100%;
  max-width: 800px;
  margin: 1rem 0 1rem;
  padding: 1rem;
  background: var(--grey1);
  border: 1px solid #e6e6ea;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  
}

.pm-card {
  width: 100%;
  max-width: 800px;
  margin: 1rem auto;
  padding: .5rem;
  background: white;
  /* border: 1px solid #e9e9e9; */
  border-radius: .75rem;
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, .05); */
  justify-content: center;
  align-items: center;
  
}

.signup-wrap{
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "intro form"
    "mini  form";
  gap: 1rem;
  max-width: 1050px;
  margin: .5rem 0  0 auto;
  padding: 1rem .25rem;
}

.signup-intro{ grid-area: intro; margin-top: 1rem;}
.signup-mini { grid-area: mini; }
.signup-card { grid-area: form; width: 100%; max-width: none; }

.signup-title{
  font-size: 2rem;
  margin: 0 0 .5rem;
}

.signup-sub{
  margin: 0 0 1.25rem;
  color: #555;
  font-size: 1.05rem;
}

.signup-points{
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
}

.signup-points li{
  margin-bottom: .5rem;
}

.signup-badge{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: .9rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.mini-price{
  font-weight: 900;
  font-size: 3.5rem;
  line-height: 1;
}

.mini-price-unit{
  font-weight: 700;
  font-size: 1.60rem;
  margin-left: .25rem;
  color: #444;
}

.mini-alt{
  margin-top: .35rem;
  color: #555;
  font-size: 1.25rem;
}

.mini-badge{
  display: inline-block;
  margin-left: .4rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #ffd400;
  color: #111;
  font-weight: 800;
  font-size: .85rem;
}

.bare-header {
  max-width: 800px;
  margin: .25rem 0 .25rem;
  padding: .5rem;
}

.card.max {
  width: 800px;
}

.card.mobile {
  width: 100%;
  padding: .50rem;
  margin-bottom: 1rem;
  max-width: 600px;
}

.task-details-inner p {
  margin-top: 0;  
  margin-bottom: 0.40rem;   
}


.card-btn {
  display: flex; 
  width: fit-content;
  background: rgb(245, 245, 245);
  border: 1px solid #e6e6ea;
  border-radius: .75rem;
  padding: .25rem;
  margin-bottom: .5rem;
  padding-left: .5rem;
  min-width: 15rem;
  align-items: center;
  cursor: pointer;
  transition: transform .06s ease;
}


.card-btn:active {
  transform: scale(.98);
}

.card-btn-button {
  background: rgb(245, 245, 245);
  border: 1px solid #e6e6ea;
  border-radius: .75rem;
  padding: .25rem .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 15rem;
  cursor: pointer;
  color: black;
  box-shadow: none;
  font-size: inherit;
}

.card-btn.big {
  font-size: 1.25rem;
  padding: .5rem;
  
}

.card-btn.green {
  background-color: mediumaquamarine;
  color: white;
}

.card-btn.red {
  background-color: tomato;
  color: white;
}

.full {
  min-width: 26rem;
}
  .form-row {
    display: grid;
    grid-template-columns: 200px 1fr; /* fixed label, flexible field */
    gap: .75rem;
    align-items: center;
    
    padding: .25rem 0;
  }

  .form-row.green {
    background-color: mediumaquamarine;
    color: white;
    padding-left: 5px;
    border-radius: 5px;
  }

  .card3 {
    width: 100%;
    max-width: 800px;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--card-bg);              /* or white */
    border: 1px solid var(--border);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  .card-body {
    background: var(--grey1);                 /* your soft grey */
    border: 1px solid #e6e6ea;
    border-radius: .6rem;
    padding: .75rem 1rem;
  }

  .form-row3{
    display:grid;
    grid-template-columns: 200px 1fr;
    gap: .75rem;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .form-row3:last-child{ border-bottom: 0; }
  
  .form-label3{
    font-weight: 600;
    color: var(--text-muted);
  }
  
  .form-data{
    color: var(--text);
    text-decoration: none;          /* kill underline */
    font-weight: 500;
  }

  .pointer {
    cursor: pointer;
  }

  .form-row.equal {
    grid-template-columns: 1fr 1fr; 
  }

  /* Modifier: 3-column row (label | field | actions) */
.form-row.triple{
  grid-template-columns: 12rem 1fr 5rem;
}

.form-row.triple.tight {
  grid-template-columns: 1fr 1fr 24px
}

/* when disabled, make it calm */
.form-row.triple button:disabled {
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
}
  
  .form-label {
    font-weight: 600;
    text-align: left;
    align-items: center;
    display: flex;
    gap: .25rem;
  }

  .form-label.large {
    font-size: 1.2rem;
  }
  
  .form-field {
    min-width: 0;       
  }

.control {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid #bebebe;
  border-radius: .5rem;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: inherit; 
  background-color: white;
  color: #000;
}


.control[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

/* The "Silver Bullet" for iOS alignment */
.control[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 1.2em; 
}

/* Make inputs/selects/ file inputs look consistent */
input[type="text"],
input[type="number"],
input[type="file"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid #bebebe;
  border-radius: .5rem;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: inherit; 
  background-color: white;
  color: #000;
  
}

input:focus {
outline: none;
box-shadow: inset 0 -2px 0 0 rgb(42, 56, 114); /* “underline” */
border-color: #dcdcdc; /* keep side/top borders unchanged */
transition: box-shadow 0.3s ease-in-out;
}

.form-field-inline {
  display: inline-flex;
  align-items: center;
  gap: .25rem; /* small space between input and "days" */
}

.form-field-inline input {
  width: 5rem; /* optional: control size */
}

summary,
.card-btn {
  display: flex;
  align-items: center;     /* vertically centers icon + text */
  gap: 0.5rem;             /* nice spacing */
}

summary img,
.card-btn img {
  width: 32px;
  height: 32px;
}

/* compounding classes */
.btm-margin {
  margin-bottom: 1rem;
}

input.lt-grey {
  background-color: rgb(242, 242, 242)
}

.main-dash{
  display:grid;
  grid-template-columns: repeat(4, 8.5rem);
  grid-auto-rows: 5.25rem;
  gap: .50rem;
  margin: .5rem auto;
  width: fit-content;
}

.tile{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction: column;
  overflow: visible;
  width: 100%;         
  height: 100%;
  transition: transform .06s ease;
}

.tile:active {
  transform: scale(.985);
}

.tile-title{
  
  padding: .25rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: .90rem;
  line-height: 1.0;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  width: auto;            
  align-self: stretch;    
  border-bottom: 1px solid rgb(181, 181, 181);
}

.tile-title span{ white-space: nowrap; }

.tile-value{
  font-size:2.5rem;
  font-weight: 800;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: rgb(243, 243, 243);

}
 
.red-fill {
  background-color: tomato;
}
.yellow-fill {
  background-color: gold;
}
.green-fill {
  background-color: rgb(74, 187, 74);
  color: white
}

/* Icon: fixed height, keeps aspect ratio */
.tt-icon{
height: var(--icon-h);
width: auto;
display: block;
flex: 0 0 auto;
}

.expand-icon {
  width: 50px;
  height: auto
}


/* Square tiles (all but the stoplight) */
.tile:not(.stoplight-tile){
  aspect-ratio: 1 / 1;
}

/* Stoplight spans both rows simply by being first and tall */

.stoplight-tile {
grid-row: span 2;      
display: flex;        
padding-bottom: .25rem;
align-items: center;    
justify-content: center;

}

/* the inner container and SVG — add these */
.stoplight {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden; 
background-color: darkgrey;
border-radius: 15px;
}

.stoplight-svg {
display: block;
height: 100%;   /* scales to the tile’s height */
width: auto;    /* keeps aspect ratio */
max-width: 100%;
}

.tile-title.status {
    font-size: 1.1rem;
    font-weight: 700;
}


.tile-value.small {
  font-size: 1rem;
  /* text-align: center; */
}

.machines-down {
background-color:var(--red)
}
.open-troubles {
background-color:var(--yellow)
}

#oldestCall {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.stoplight-body{
  fill: #787878;
}
.light{
    stroke: rgba(0,0,0,.28);      /* subtle bezel */
stroke-width: 3px;
transition: fill .15s ease, opacity .15s ease, filter .15s ease;
}
/* OFF = neutral + faint */
.light:not(.on){
fill: rgb(202, 200, 200) !important;
/* opacity: .5;              
filter: none;             */
}

/* ON colors */
.light.on.red{    fill: var(--red); }
.light.on.yellow{ fill: var(--yellow); }
.light.on.green{  fill: rgb(0, 166, 0); }

.auth-form-wrap {
  max-width: 500px;   /* sweet spot for email fields */
  width: 100%;
}

.help-page {
  max-width: 900px;
  margin: 0 auto;
  padding: .5rem .75rem;
}

.help-page header h2 {
  margin-bottom: .25rem;
}

.help-toc{
  max-width: 24rem;
  margin: 1rem 0 1.75rem;
  padding: .25rem .75rem;
  border-radius: .75rem;
  font-size: .95rem;  /* slightly smaller overall */
  background: rgb(248, 249, 250);      /* very light gray */
  border: 1px solid rgb(225, 228, 232); 
  border-left: 3px solid var(--blue1)
}

.help-image {
  max-width: 100%;
  width: 700px;          /* preferred max size on desktop */
  height: auto;
  display: block;
  margin: 1.25rem 0;
  border-radius: .5rem;
  border: 1px solid rgb(225, 228, 232);
}

.help-link {
  max-width: 100%;
  width: 150px;
  height: auto;
}

.help-image.small {
  max-width: 100%;
  width: 300px;
}

.help-image.med {
  max-width: 100%;
  width: 450px;
}


.help-subtitle{
  font-size: .90rem;
  font-weight: 600;
  margin: 0 0 .4rem;
  color: rgb(100, 110, 120);  /* muted gray */
}

.help-toc ul{
  margin: 0;
  padding-left: 1.05rem;
}

.help-toc li{
  margin: .25rem 0;
}

.help-toc .title{
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .35rem;
}


.help-section {
  margin-bottom: 2rem;
}

.help-section h2 {
  margin-bottom: .5rem;
}

.help-section ol {
  padding-left: 1.25rem;
}

.help-section li {
  margin-bottom: 0.6rem;
  /* line-height: 1.5; */
}

input.read-only {
  background-color: #dbdbdb; 
  cursor: not-allowed;    
 color: rgb(52, 114, 214);
}



/* Responsive niceties */
@media (max-width: 980px){

  .area-grid {
   
    grid-template-columns: repeat(2, minmax(16rem, 1fr));
   
  }
  
  .machine-task {
    width: 20rem;          /* or whatever width you like */
    margin: 0 auto;  /* center + add some space between blocks */
  }
  .admin-head,
  .admin-summary{
    grid-template-columns: 4rem 1.6fr 1fr 2rem;
  }
  .c-status, .c-access, .c-sub, .c-end{ display:none; }
  
  /* .detail.wide{ grid-column: span 1; } */
}

@media (max-width: 900px){
  .filters select {
    min-width: 8rem;
   } 
 
   .facility-map {
     grid-template-columns: repeat(2, minmax(12rem, 1fr));
   }
  .toggle-button,
  .manage-btn {
    margin-left: auto;
    margin-right: auto;
  }

  .table {
    font-size: 0.85rem;           /* smaller text */
  } 

  .table th,
  .table td {
    padding: 0.50rem 0.35rem;     
    white-space: nowrap;         
  }

  .pw-grid{
    grid-template-columns: 1fr;
  }

.hide-col{
  display: none !important;
}

  .signup-wrap{
    grid-template-columns: 1fr 400px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "intro mini"
      "form  form";
    gap: 1rem;
  }

  .edit-pm .ellipsis {
    max-width: 16rem;
  }

  .signup-title{
    font-size: 1.5rem;
  }

  .mini-price{
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
  }
  
  .signup-sub{
    font-size: 1rem;
  }

  .signup-points{
    margin: 0 0 1rem;
    padding-left: 1.1rem;
  }

  .signup-points li {
    margin-bottom: .25rem; 
  }

  .signup-intro{ margin-top: .5rem;}

  .menu.menu--cols-1,
  .menu.menu--cols-2,
  .menu.menu--cols-3{
    grid-template-columns: 1fr;
    max-width: 420px; /* optional */
    gap: 1rem;        /* optional */
  }

  .menu-btn {
    width: 90%;
    margin: 0 auto;
  }

  .signup-mini {
  padding-top: 2rem;
  }
}
  
@media (max-width: 600px) {
  .signup-wrap{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "mini"
      "form";
  }

      /* Reduce the nested-card look */
  .card3 {
    padding: .75rem;
    margin: .75rem 0;
  }

  .card-body {
   background-color: var(--grey1);
    border: none;
    padding: .25rem .5rem;
  }

  /* Stack rows */
  .form-row3 {
    grid-template-columns: 1fr;   /* label then value */
    gap: .2rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0,0,0,.25);
  }

  .form-label3 {
    font-size: .90rem;
    font-weight: 700;
    line-height: 1.1;
  }

  .button-row {
    justify-content: space-around;
  }

  .form-data {
    font-size: 1rem;
    line-height: 1.25;

    /* long strings (email, IDs) won't blow up layout */
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .machine-text {
    font-size: 1.5rem;
  }

  .form-row.triple{
    grid-template-columns: 1fr;   /* label -> field -> button */
    gap: .35rem;
    align-items: stretch;
  }

  /* Labels read better as smaller "titles" on mobile */
  .form-label{
    font-size: .85rem;
    font-weight: 700;
  }

  /* Inputs/selects/textarea fill the width */
  .form-row.triple input,
  .form-row.triple select,
  .form-row.triple textarea{
    width: 100%;
    min-width: 0;
  }

  /* Make the Save button usable on mobile */
  .form-row.triple button{
    width: auto;
    align-self: flex-start;
    opacity: .9;
  }

  /* Long values / filenames / etc won’t overflow */
  .form-row.triple{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .machine-container {
    gap: 1rem;
    }

    .footer-inner {
      gap: .4rem;
    }
  
    .footer-left {
      width: 100%;
      justify-content: center;
    }
  
    .footer-right {
      width: 100%;
      justify-content: center;
    }

    .kpi-row{
      grid-auto-flow: unset;
      grid-template-columns: 1fr 1fr; /* 2-up */
      gap: .6rem;
      justify-items: stretch;
    }
  
    .kpi{
      width: 100%;                 /* fill its grid cell */
      display: flex;
      flex-direction: column;      /* label above value */
      align-items: flex-start;
      justify-content: flex-start;
      gap: .25rem;
      padding: .50rem
    }

    .kpi-row{
      grid-template-columns: .3fr .7fr; 
      gap: .5rem;
    }

    .kpi-row--compact {
      grid-template-columns: 1fr 1fr; 
    }
  
    .kpi-label{
      font-size: .90rem;
      line-height: 1.1;
    }
  
    .kpi-value{
      font-size: 1rem;          
      line-height: 1.2;
      margin-top: 0;
      overflow-wrap: normal;     
      word-break: normal;
      white-space: normal; 
    }
    .filter-field > label {
      min-width: 6rem; 
    }

    .area-grid {
      grid-template-columns: 1fr;
    }

    .area-grid--centered .group-wrapper {
      flex-basis: 100%;
    }

  .signup-title{
    font-size: 1.5rem;
  }
  .signup-mini{
    width: 100%;
  }

  .signup-card{
    flex: none;
    max-width: 100%;
  }

  .equipment-wrap{
    padding: 0;    
  }

  .close-reason ul{
    flex-wrap: wrap;
  }
  
    .pm-meta{
      flex-direction: column;
    }

    .grey {
      flex-direction: column;
      font-size: 1.20rem;
    }

  .user-collage,
  .device-collage {
    width: 100%;
  }
  .pricing-wrap {
    flex-direction: column;
    gap: .5rem;
    padding: .5rem 0;
    justify-content: flex-start;
 
  }
  .pricing-copy,
  .pricing-card {
    flex: 0 0 auto !important;
  }
 
.pricing-sub {
margin-bottom: 1rem;
font-size: 1rem;
}

.testimonials {
padding-bottom: 1rem;
}

  .pricing {
    margin-top: 0;
    padding: 0;
  }

  .pricing-copy,
  .pricing-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .pricing-card {
    padding: 1rem;
  }

  .pricing-copy h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }

  .pricing-copy {
    align-self: flex-start;
  }


  .detail-grid{ grid-template-columns: 1fr; }

  .page-wrapper {
    padding-top: 5.5rem;
  }

  .close-reason {
    flex-direction: column;
  }

  .center-buttons button{
    padding: .33rem 1rem;
    font-size: 1rem;
  }

.tile-title{
  flex-direction: column;
  padding: .25rem 0;
  font-size: .80rem;
}

.toggle-button {
  font-size: 1rem;
}

.main-dash{
  grid-template-columns: repeat(4, 5.25rem);
  grid-auto-rows: 6rem;
  gap: .25rem;
}

.tile-title span{ white-space: nowrap; }

.tile-value{
  font-size:2rem;
  font-weight: 700;
  line-height: 1;
}

 /* Base sticky first-column rules */
 .sticky-first th:first-child,
 .sticky-first td:first-child {
   position: sticky;
   left: 0;
   z-index: 2;
   border-right: 1px solid black;
 }

 /* Remove border from sticky header cell only */
.sticky-first thead th:first-child {
  border-right: none;
}
 
 /* STICKY SECOND COLUMN */
 .sticky-second th:nth-child(2),
 .sticky-second td:nth-child(2) {
   position: sticky;
   left: 0;
   z-index: 2;
   border-right: 1px solid black;
 }
 /* Remove border from sticky header cell only */
 .sticky-second th:nth-child(2) {
  border-right: none;
}
 
 /* Match alternating row colors */
 .sticky-first tbody tr:nth-child(odd) td:first-child,
 .sticky-second tbody tr:nth-child(odd) td:nth-child(2) {
   background: white;
 }
 
 .sticky-first tbody tr:nth-child(even) td:first-child,
 .sticky-second tbody tr:nth-child(even) td:nth-child(2) {
   background: var(--grey1);
 }
 
 .table.sticky-first thead th:first-child {
   position: sticky;
   top: 0;
   left: 0;
   z-index: 3;             
  
 }

 .logo img{
  width: 5.4rem;
  height: auto;
  margin-right: .25rem;
}

.nav-box{
  padding: .25rem;
  border-radius: 4px;
}
.nav-text {
  font-size: .9rem;
}
.cta-btn{
   padding: .50rem;
   border-radius: 4px;
}

.crumbs-full{ display: none; }
  .crumbs-mobile{ display: inline; }
  .breadcrumb-bar {
  font-size: .90rem;
  }

   .table-wrap {
     overflow-x: auto;        /* allow horizontal scroll */
     max-height: none;
     overflow-y: visible;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior-x: contain;
   }

   .table {
     width: 100%;
     min-width: 100%;
   }

    .title {
      font-size: 1.5rem;     /* smaller size for mobile */
    }

    /* Calendar page only */
.filter-bar--calendar .filter-field > label {
  flex: 0 0 6rem;      /* fixed label column; tweak 6rem as needed */
  white-space: nowrap;
}

    .task-pill {
      font-size: 1.5rem;
    }

    .task-pill .machine__name {
      font-size: 1.5rem;
    }
    
    .task-pill .machine__task {
      font-size: 1rem;
    }

    .tech-legend {
      gap: 0.25rem;  
    }

  .machine-task-grid {
    grid-template-columns: 1fr;
    gap:.5rem;
  }

  .machine-task {
    width: 90%;          /* or whatever width you like */
  }

  .facility-map {
    grid-template-columns: 1fr;
  }
    .card-btn.big {
      font-size: 1.25rem;
      padding: .5rem 1rem;
      min-width: 20rem;
    }

    .form-row {
      grid-template-columns: 1fr; /* one column */
      gap: .25rem;
    }

    .trouble-header-main {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
  
    .equip-photo {
      display: flex;
      justify-content: center;
    }
  
    .equip-photo img {
      width: 8rem;
      height: 8rem;
    }
  
    .trouble-header-top {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .75rem;
    }
  
    .trouble-summary-grid {
      grid-template-columns: 7rem 1fr;
      gap: .4rem .75rem;
    }

    
    .menu .dashboard {
      grid-column: auto;
    }


   
    /* .cmms-grid {
        grid-template-columns: 1fr;
    } */

    .solution-grid {
        grid-template-columns: 1fr;
    }
    .solution-grid .problem-card p {
      font-size: 1.1rem; /* or whatever feels right */
    }

    .subnotes {
        grid-template-columns: repeat(4, 1fr); 
        justify-content: stretch;
        gap: .5rem;
        /* margin-left: .5rem;
        margin-right: .5rem; */
    } 

    .subnote {
        width: 100%
    } 

    .subnote:active {
        background-color: #dcdcdc; /* slightly darker when pressed */
        transform: scale(0.98);
    }

    .dashboard-section {
        border: none;
        box-shadow: none;

    }  

    .dashboard-info {
        padding: 0;
    }
    
    .scroll-table {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
        font-size: 0.85rem;
      }
    
      /* calendar only  */
      .table-wrapper {
        overflow-x: auto; /* horizontal scroll only appears when needed */
      }

      .calendar {
       grid-template-columns: 1fr;
      }

      .day{
        min-height: 100px;    
      }

    .day {
      width: 90%;
      margin: 0 auto;
    }

    .machine {
        padding: 2px;
    }

    .pm-task {
        margin-left: auto;
        margin-right: auto;
      }
      .group2 {
        font-size: .9rem;
      }

      .machines {
        padding-left: .5rem;
        padding-right: .5rem;
      }

      .breadcrumbs a, .breadcrumbs span{
        font-size: .9rem;
    }

    .machine-image {
        width: 6rem;
        height: 6rem;
    }

    .lg {
      width: 8rem;
      height: 8rem
    }

    input, textarea{ 
        font-size: 16px;
    }

    .dashboard-info {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
    
      .dashboard-info.full .priority {
        grid-column: 1 / 2; /* full width */
        grid-row: 2 / 3;
      }
    
      .dashboard-info.full .health {
        grid-column: 1 / 2;
        grid-row: 1 / 2; 
      }
    
      .dashboard-info.full .activity {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
      }

    .filter-bar form {
      display: flex;
        font-size: 1.10rem;
        flex-direction: column;
        align-items: stretch;
        margin-right: 0;
        gap: .25rem;
        width: 100%;  
    }

    .filter-bar form > div {
        display: flex;            
        justify-content: flex-start;
        align-items: center;
        gap: .5rem;
        width: 100%;
      }
    
      .filter-bar form label {
        flex: 0 0 5rem;  
        white-space: nowrap; 
       /* keep label natural width */
      }
    
      .filter-bar form select {
        flex: 1 1 auto;                   
        max-width: 100%;  
        font-size: 1.1rem;      
        min-width: 0;
      }

      .filter-toggle {
        display: flex;           /* only show on small screens */
        width: 100%;
        border: 1px solid #ddd;
        border-radius: .4rem;
        padding: .25rem .5rem;
        background: var(--grey1);
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: black;
      }  
    
      .filter-bar.is-collapsed .filter-content {
        display: none;
      }

      .filter-bar.is-collapsed .filter-toggle {
        display: flex;
      }
    
      .filter-bar:not(.is-collapsed) .filter-toggle {
        display: none;
      }

      .public-nav {
        grid-template-columns: 1fr auto;            /* left | right */
        grid-template-areas:
          "left right"
          "messages messages";
      }

      .hero {
        margin-bottom: 2rem;
      
    }
      
    .green-sub {
        font-size: 1.40rem;
    }
   
.group-image {
    margin: 0 auto;
}

.feature-media {
  flex-direction: column;
}

.user-collage{
  width: 90%;
  margin: 0 auto;
}
.device-collage {
  width: 100%;
}

.highlights {
    display: grid;                 /* only on mobile */
    grid-template-columns: 1fr 1fr;
    gap: 1rem;                     /* tighter gap to preserve width */
    justify-items: stretch;
    margin: 2rem auto;
  }
  .highlight-card { 
    width: 100%; 
    padding: .25rem;
    } /* fill grid cell */

.highlight-card p {
    font-size: .9rem;
}

.highlight-card h3 {
    margin-top: .25rem;
}


.landing-container {
    padding: 0 .5rem .5rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
    text-align: left;
    margin:auto
  }
  
  .section-intro {
    font-size: 1.10rem;
    color: rgb(127, 190, 154);
    font-weight: bold;
    text-align: right;
    margin: auto;
  }

  .space {
    margin-top: 2rem;
  }

  .bottom-card { display: none; }       /* hide all */

  .problem-grid {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  .cmms-grid {
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }

  .public-hide {
    display: none;
  }
  
  .notebook.large {
    margin-left: 0;
    width: 100%;
  }

  .story {
    grid-template-columns: 1fr;
    grid-template-areas:
      "images"
      "text";        
  }

  .image-column {
    flex: none;                        /* don't keep the fixed 250px rule */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1rem;
  }

  .splash-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: .5rem;
    grid-template-areas:
      "title title"
      "group group"
    "phone subtitle"   
  }

  .hero-title { font-size: 1.6rem; margin-bottom: 1rem;}
  .subtitle   { font-size: 1.40rem; font-weight: 700; align-self: center;}

  .phone-frame {
    width: 140px;

    /* scale everything down proportionally */
    --radius: 18px;

    --bezel-top: 6px;
    --bezel-right: 7px;
    --bezel-bottom: 6px;
    --bezel-left: 7px;
    justify-self: center;
  }

  .phone-screen {
    border-radius: 12px;
  }

  .group-image-wrap {
    margin-bottom: 2rem;
    width: 100%;
  }

  .new-header-title {
    font-size: 1.50rem;
  }

  .tdash { grid-template-columns: 1fr}

  .signup-intro{ margin-top: .5rem;}
  
    }

    @media (max-width: 430px){
.title {
  font-size: 1.1rem;
}

.title-with-icon{
  --icon-h: 24px;                 /* set your desired icon height here */
  }

  #tile-schedule {
    font-size: .6rem
  }
    
    }
    @media (max-width: 375px) {
      /* iPhone SE / very small phones */
      .logo img {
        width: 4.8rem;   /* was ~5.4rem */
      }
    
      .nav-box {
        padding: .2rem .3rem;
      }
    
      .nav-text {
        font-size: .85rem;
      }
    
      .cta-btn {
        padding: .4rem .55rem;
        font-size: .85rem;
      }
    
      .breadcrumb-bar {
        gap: .2rem;
      }
    
      .header-actions {
        gap: .2rem;
      }

    }  

    
    @media (min-width: 700px) and (max-width: 1024px) {
      .date-hide {
        display: none;
      }
    }