/* ---------- colour vars ---------- */
:root{
  --c-bg:      #f1f5f9;   /* slate-100 */
  --c-panel:   #ffffff;   /* white     */
  --c-border:  #e2e8f0;   /* slate-200 */
  --c-text:    #1e293b;   /* slate-800 */
  --c-text-sub:#64748b;   /* slate-500 */
  --c-blue:    #2563eb;   /* blue-600 */
  --c-blue-h:  #1d4ed8;   /* blue-700 */
}

/* reset */
*,::after,::before{box-sizing:border-box;margin:0;padding:0}button,input,select,textarea{font:inherit;color:inherit;background:0 0;border:none;outline:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none}input,select{padding:.5rem;border:1px solid #ccc;border-radius:4px;background-color:#fff}button{background-color:transparent;cursor:pointer}body{font-family:system-ui,sans-serif;font-size:16px;line-height:1.5;background:#fff;color:#000}ol,ul{list-style:none}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}

/* ---------- layout wrappers ---------- */
.page{background:var(--c-bg);color:var(--c-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
.wrapper{max-width:80rem;margin:auto;padding:2rem 6rem}
.page__title{font-size:1.75rem;font-weight:600;margin-bottom:1.5rem}

/* ---------- form card ---------- */
.form-card{
  background:var(--c-panel);border:1px solid var(--c-border);border-radius:.75rem;padding:1.5rem;box-shadow:0 2px 6px rgb(0 0 0/.08);display:flex;flex-direction:column;gap:1.5rem
}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--disabled{opacity:.4}


/* inputs */
.input-control{width:10rem;padding:.5rem .75rem;border:1px solid var(--c-border);border-radius:.375rem;font-size:1rem}
.input-control:focus{outline:2px solid var(--c-blue)}
.field__label{font-weight:600;font-size:.95rem}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0.5rem 2.5rem 0.5rem 0.5rem; /* extra right padding for arrow */
  font-size: 1rem;
  border-radius: 4px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
}

/* checkboxes */
input[type="checkbox"] {
  appearance: auto; /* or remove appearance:none for checkboxes */
  -webkit-appearance: checkbox; /* for Safari */
  -moz-appearance: checkbox; /* for Firefox */
}

.checkbox-group{display:flex;flex-wrap:wrap;gap:1rem}
.check{display:flex;align-items:center;gap:.25rem;font-size:.95rem}

/* button */
.button-primary{align-self:flex-start;background:var(--c-blue);color:#fff;padding:.5rem 1rem;border:none;border-radius:.375rem;font-size:1rem;cursor:pointer;box-shadow:0 2px 4px rgb(0 0 0/.1);transition:background .15s}
.button-primary:hover{background:var(--c-blue-h)}

/* ---------- pills ---------- */
.pill-container{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{background:var(--c-border);color:#334155;padding:.25rem .5rem;border-radius:9999px;font-size:.8125rem;display:flex;align-items:center;gap:.25rem}
.pill button{border:none;background:none;font-weight:700;cursor:pointer;color:#334155}

/* ---------- output section ---------- */
.output{margin-top:2.5rem}
.output__title{font-size:1.5rem;font-weight:600;margin-bottom:.75rem}
.output__summary{margin-bottom:1rem;font-size:.9rem}

/* month grid */
.month-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.month-grid{grid-template-columns:repeat(2,1fr)}}

/* card */
.card{background:var(--c-panel);border:1px solid var(--c-border);border-radius:1rem;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:0 2px 6px rgb(0 0 0/.07);transition:box-shadow .25s}
.card:hover{box-shadow:0 6px 16px rgb(0 0 0/.08)}
.card__title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}

.card__table{width:100%;font-size:.875rem;border-collapse:collapse}
.card__table td{padding:.25rem .5rem;border-bottom:1px solid var(--c-border)}
.card__table tr:nth-child(odd){background:#f8fafc}
.time{text-align:center;width:4rem;font-weight:500}

.card__footer{margin-top:auto;font-size:.75rem;color:var(--c-text-sub);padding-top:.5rem;border-top:1px solid var(--c-border)}

/* download link inside output */
.output__download{margin-top:1.5rem}
.hidden{display:none}