/* ──────────────────────────────────────────────
   100 % custom cross-browser date picker
   – square host input
   – square pop-up
   – no future dates if data-max is set
─────────────────────────────────────────────── */ :root {
  /* theme tokens */
  --clr-bg: #ffffff;
  --clr-border: #b9bcbf;
  --clr-accent: #0067ff;
  --clr-accent-fg: #ffffff;
  --clr-hover: #f1f3f5;
  --radius: .5rem; /* still used in pop-up */
  --shadow: 0 4px 16px rgba(0, 0, 0, .08);
  font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
/*──────────────────────────────────────────────*/
/* Host input (date picker)                    */
/*──────────────────────────────────────────────*/
.date-input {
  inline-size: 130px; /* width close to your select */
  block-size: 32px; /* ≈32 px */
  padding: 0px 6px 0px 8px; /* right pad for arrow */
  border: 1px solid var(--clr-border);
  border-radius: 0; /* square */
  background:
    var(--clr-bg) url('data:image/svg+xml,\
         <svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5">\
           <path fill="%23333" d="M0 0l4 5 4-5z"/>\
         </svg>') no-repeat right .5rem center / 8px 5px; /* ▼ arrow */
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  appearance: none; /* hide native icons in Safari/Chrome */
  -webkit-appearance: none;
  -moz-appearance: none;
}
/*──────────────────────────────────────────────*/
/* Host input (difficulty picker)              */
/*──────────────────────────────────────────────*/
.difficulty-input {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* left‐justify the label text */
  inline-size: 130px; /* same width as .date-input */
  block-size: 32px; /* same height as .date-input */
  padding: 0px 8px; /* left+right padding */
  border: 1px solid var(--clr-border);
  border-radius: 0; /* square */
  background:
    var(--clr-bg) url('data:image/svg+xml,\
         <svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5">\
           <path fill="%23333" d="M0 0l4 5 4-5z"/>\
         </svg>') no-repeat right .5rem center / 8px 5px; /* ▼ arrow */
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.difficulty-input .difficulty-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide any extra .difficulty-arrow elements if present */
.difficulty-input .difficulty-arrow {
  display: none;
}
/*──────────────────────────────────────────────*/
/* Hover/focus states for both hosts           */
/*──────────────────────────────────────────────*/
.date-input:hover, .date-input:focus, .date-input:focus-visible, .difficulty-input:hover, .difficulty-input:focus {
  background-color: var(--clr-hover);
  outline: none;
}
/*──────────────────────────────────────────────*/
/* Prevent text‐selection on hosts and pop-ups  */
/*──────────────────────────────────────────────*/
.date-input, .difficulty-input {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
/*──────────────────────────────────────────────*/
/* Pop-up calendar (.dp)                        */
/*──────────────────────────────────────────────*/
.dp {
  position: absolute;
  z-index: 9999;
  inline-size: 18rem;
  padding: .75rem;
  border-radius: 0; /* square card */
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow);
  user-select: none;
}
@media (max-width: 991px) {
  .dp {
    left: auto !important;
    right: 25px !important;
  }
}
.dp header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: .5rem;
}
.dp header button {
  background: none;
  border: 0;
  padding: .25rem .5rem;
  cursor: pointer;
}
.dp header button:focus-visible {
  outline: 2px solid var(--clr-accent);
}
/* weekday grid */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
}
.dp-grid button {
  font-size: 1.2rem;
  aspect-ratio: 1;
  line-height: 1;
  border: 0;
  border-radius: 0; /* square day cells */
  background: none;
  cursor: pointer;
}
.dp-grid button:hover {
  background: #c8cbcf; /* hover color */
}
.dp-grid button:focus-visible {
  outline: 2px solid var(--clr-accent);
}
.dp-grid button.selected:hover, .dp-grid button.selected:focus-visible {
  color: #000 !important;
}
/* state modifiers */
.dp-grid .today {
  border: 1px solid var(--clr-accent);
}
.dp-grid .selected {
  background: var(--clr-accent);
  color: var(--clr-accent-fg);
}
.dp-grid .disabled {
  opacity: .35;
  cursor: not-allowed;
}
.dp-grid .disabled:hover {
  background: none;
}
/*──────────────────────────────────────────────*/
/* Pop-up for difficulty picker (.difficulty-popup) */
/*──────────────────────────────────────────────*/
.difficulty-popup {
  position: absolute;
  z-index: 9999;
  inline-size: 120px; /* match host width */
  border: 1px solid var(--clr-border);
  background: var(--clr-bg);
  box-shadow: var(--shadow);
  user-select: none;
  margin-top: 4px; /* slight gap under host */
}
.difficulty-popup button {
  width: 100%;
  block-size: 32px;
  border: none;
  background: none;
  text-align: left;
  padding-left: 8px;
  font-size: 16px;
  cursor: pointer;
}
.difficulty-popup button:hover {
  background: #c8cbcf;
}
.difficulty-popup button.selected {
  background: var(--clr-accent);
  color: var(--clr-accent-fg);
}
/*──────────────────────────────────────────────*/
/* Toast                                        */
/*──────────────────────────────────────────────*/
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 1.5rem;
  display: flex;
  justify-content: center;
  pointer-events: none;
  font-size: .9rem;
}
.toast span {
  background: #333;
  color: #fff;
  padding: .4rem .9rem;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity .25s ease;
}
.toast.show span {
  opacity: .9;
}