/* Delay calculator - page-specific styles. Reuses tokens from styles.css */

/* Two-column layout */
.delay-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap:1.25rem;
  align-items:start;
}
@media (max-width: 1100px){
  .delay-layout{ grid-template-columns: 1fr; }
}

.tool-card.delay{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.kicker{
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing:.08em;
  font-size:.85rem;
  margin:0 0 .4rem;
}
.muted{ color: var(--muted); }
.tight{ margin-top:.25rem; }

.row, .row-3{ display:grid; gap:.75rem; }
.row{ grid-template-columns: 1fr 1fr; }
.row-3{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 800px){
  .row, .row-3{ grid-template-columns: 1fr; }
}

.field{ display:flex; flex-direction:column; }
.label{ margin:.25rem 0 .35rem; color:var(--text); font-weight:700; }

.control{
  display:block; width:100%;
  padding:.65rem .7rem; margin:0 0 .2rem;
  background:rgba(255,255,255,.04); color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:10px;
}
select.control { background-image: none; }
.num{ text-align:center; font-variant-numeric: tabular-nums; font-weight:800; }

.speed-wrap{ position:relative; }
.speed-wrap .pill{
  position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:.15rem .45rem; border-radius:999px; font-weight:800; font-size:.8rem;
}

/* Result blocks */
.result{
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.18);
  padding:.7rem .8rem; border-radius:10px; font-weight:800;
  font-variant-numeric: tabular-nums;
}
/* Green highlight to match Backtimer "Start Time" */
.delay-result{
  border: 2px solid rgba(180,255,160,.35);
  background: rgba(35,100,35,.12);
  color: #c9ff9a;
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: .3px;
}

/* Tables */
.tables{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:1rem; }
@media (max-width: 900px){ .tables{ grid-template-columns: 1fr; } }

.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{
  padding:.55rem .65rem; text-align:left;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.table th{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  position:sticky; top:0; z-index:1;
}
.table tr:nth-child(odd) td{ background:rgba(255,255,255,.02); }

/* Temperature controls */
.checkbox-line{
  display:flex; gap:.5rem; align-items:center; margin-top:.25rem;
  user-select:none;
}
.checkbox-line input{ transform: translateY(1px); }
.temp-box{
  margin:.5rem 0 0; padding:.75rem;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:10px;
}
.hidden{ display:none !important; }

/* Precedence slider */
.precedence{
  display:flex; gap:.75rem; align-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  padding:.55rem .65rem; border-radius:10px;
}
.precedence input[type="range"]{ width:100%; }
.precedence output{ font-weight:800; min-width:5.5ch; text-align:right; }

/* Indoor helper styles */
.indoor.card{ position:sticky; top:1rem; }
.rt60-chip{ text-align:center; }
.rt60-chip.rt60-good{ color:#b7ff8f; border-color: rgba(180,255,160,.35); background: rgba(35,100,35,.12); }
.rt60-chip.rt60-ok{ color:#ffe58f; border-color: rgba(255,240,150,.35); background: rgba(100,80,35,.12); }
.rt60-chip.rt60-bad{ color:#ff9a9a; border-color: rgba(255,160,160,.35); background: rgba(100,35,35,.12); }

.tip-box{
  margin-top:.75rem; padding:.75rem;
  border:1px dashed rgba(255,255,255,.18); border-radius:10px;
}
.suggest-line{
  display:flex; gap:.75rem; align-items:center; justify-content:space-between; margin-top:.5rem;
}
.btn-apply{
  appearance:none; border:1px solid rgba(180,255,160,.35);
  background: rgba(35,100,35,.18); color:#c9ff9a;
  font-weight:800; padding:.45rem .7rem; border-radius:10px; cursor:pointer;
}
.btn-apply:hover{ filter:brightness(1.05); }
/* Fix for dropdown option text visibility */
select.control option {
  background-color: var(--card);
  color: var(--text);
}