/* Sleep Calculator Pro – minimal, clean UI */
.scp-wrap{--bg:#f2f6ff;--fg:#0b1b3b;--muted:#6b7a99;--card:#ffffff;--accent:#2e67ff;--accent-2:#1e4bd6;--chip:#e9efff;--good:#0a8754;--bad:#b02a37}
.scp-wrap.dark{--bg:#0e1422;--fg:#eaf0ff;--muted:#9bb0d8;--card:#141b2d;--accent:#82a6ff;--accent-2:#b8ccff;--chip:#1c2742}
.scp-wrap{font:16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--fg);background:var(--bg);padding:1rem 1rem;border-radius:1rem}
.scp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.scp-title{display:flex;align-items:center;gap:.6rem}
.scp-title h2{margin:0;font-size:1.8rem}
.scp-moon{font-size:1.6rem}
.scp-darkmode{background:transparent;border:1px solid var(--muted);color:var(--fg);padding:.4rem .6rem;border-radius:.6rem;cursor:pointer}
.scp-card{background:var(--card);border-radius:1rem;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:1rem}
.scp-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:900px){.scp-grid{grid-template-columns:1fr 1fr}}
h3{margin:.2rem 0 .6rem;font-size:1.1rem}
.scp-age-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
@media(min-width:900px){.scp-age-grid{grid-template-columns:repeat(4,1fr)}}
.scp-chip{background:var(--chip);border:none;border-radius:.8rem;padding:.6rem .4rem;cursor:pointer;font-weight:600;color:var(--fg);}
.scp-chip.is-active{outline:2px solid var(--accent)}
.scp-mode{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}
.scp-radio{display:flex;align-items:center;gap:.5rem;background:var(--accent);color:white;padding:.7rem;border-radius:.8rem}
.scp-radio input{accent-color:#fff}
.scp-radio + .scp-radio{background:#2a3350}
.scp-timepickers{display:flex;align-items:center;gap:.4rem;margin:.5rem 0}
.scp-timepickers select{padding:.5rem;border:1px solid #cfd6ee;border-radius:.6rem;background:white;color:#0b1b3b}
.scp-btn{background:var(--accent);color:white;border:none;border-radius:.8rem;padding:.8rem 1rem;font-weight:700;cursor:pointer}
.scp-btn:hover{background:var(--accent-2)}
.scp-btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:.8rem;padding:.7rem .9rem;cursor:pointer}
.scp-btn-outline:hover{background:var(--chip)}
.scp-btn-link{background:none;border:none;color:var(--accent);cursor:pointer;text-decoration:underline}
.scp-results{margin-top:1rem}
.scp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(min-width:700px){.scp-list{grid-template-columns:repeat(3,1fr)}}
.scp-pill{background:var(--chip);border-radius:999px;padding:.6rem .8rem;text-align:center;font-weight:700}
.scp-pill.good{outline:2px solid var(--good)}
.scp-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.scp-history{margin-top:1rem}
.scp-toast{position:fixed;bottom:1rem;right:1rem;background:var(--card);border:1px solid #d7e2ff;padding:.6rem .9rem;border-radius:.8rem;box-shadow:0 6px 16px rgba(0,0,0,.1)}

/* --- v1.0.1: Mobile improvements for time pickers --- */
@media (max-width: 640px){
  .scp-timepickers{
    flex-wrap: wrap;
    gap: .6rem;
  }
  .scp-timepickers select{
    font-size: 18px;
    padding: .8rem .9rem;
    min-width: 110px;
    flex: 1 1 calc(33.333% - .6rem);
    height: 46px;
  }
  .scp-timepickers #scp-now{
    flex-basis: 100%;
    order: 4;
    text-align: left;
  }
  .scp-radio{ padding: .9rem; }
  .scp-btn{ padding: 1rem 1.1rem; font-size: 1rem; }
  .scp-chip{ padding: .8rem .6rem; }
  .scp-list{ grid-template-columns: repeat(2, 1fr); }
}
/* Increase tap targets slightly on medium screens */
@media (min-width: 641px) and (max-width: 900px){
  .scp-timepickers select{ min-width: 120px; font-size: 16px; height: 42px; }
}
/* Ensure native selects are readable on iOS/Android */
.scp-timepickers select{
  -webkit-appearance: none; /* keeps border-box sizing consistent */
  appearance: none;
  line-height: 1.2;
}

/* History block visibility tweaks */
.scp-history summary{
  font-weight:700;
  cursor:pointer;
  padding:.5rem 0;
}
.scp-history[open] summary{ outline: none; }
@media(max-width:640px){
  .scp-history summary{ font-size:1rem; }
}

/* v1.0.2 history layout */
.scp-history-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.scp-history-col ul{margin:.2rem 0;padding-left:1rem}
.scp-muted{color:var(--muted)}
@media(max-width:640px){
  .scp-history-cols{grid-template-columns:1fr}
}