/* Backtimer only - uses global variables from /css/styles.css */
.grid-one {
  grid-template-columns: 1fr;
}

.tool-card.backtimer{
  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);
}

.backtimer .segments{
  display:grid;
  grid-template-columns: repeat(3,minmax(220px,1fr));
  gap:1rem;
}
@media (max-width: 900px){
  .backtimer .segments{ grid-template-columns: 1fr; }
}

.backtimer .segment{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1rem;
  background: rgba(255,255,255,.03);
}

.seg-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.seg-label input.seg-name{
  width:100%;
  background:transparent;
  border:0;
  color:var(--text);
  font-weight:800;
  font-size:1.25rem;
  outline:none;
  padding:.25rem 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
}
.seg-inputs{
  display:flex; gap:.6rem; align-items:flex-end;
}
.seg-inputs.compact .field{ flex: 0 0 100px; }
.field{ flex:1; }
.label{ display:block; margin:.25rem 0 .35rem; color:var(--text); font-weight:600; }
.control{
  display:block; width:100%;
  margin:0 0 .6rem; padding:.65rem .7rem;
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
.num { text-align:center; font-variant-numeric: tabular-nums; font-weight:700; }

.seg-total{
  font-weight:800; font-size:1.4rem; text-align:center;
  padding:.25rem 0 .1rem; color:#fff;
}

.target{
  margin-top:1rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:1rem;
  background: rgba(255,255,255,.03);
}
.target h2{ margin:.1rem 0 0.6rem; }

.start-block{
  margin-top:1.2rem;
  border:2px solid rgba(180,255,160,.35);
  background: rgba(35,100,35,.12);
  border-radius:16px;
  padding:1rem;
}
.start-head{
  text-align:center; font-weight:800; font-size:1.6rem; color:#d5f7c6;
}
.start-time{
  text-align:center;
  font-weight:900;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  color: #c9ff9a;
  line-height:1.15;
  letter-spacing:.5px;
}
.notice{
  margin-top:.4rem;
  text-align:center;
  color:#ffd3d3;
  font-weight:700;
}
.actions{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
  margin-top:.8rem;
}
.btn{
  display:inline-block; border:0; cursor:pointer;
  background:var(--blue); color:#fff; font-weight:800;
  padding:.8rem 1rem; border-radius:10px;
  box-shadow:0 6px 14px rgba(14,118,188,.25);
}
.btn:hover{ filter:brightness(1.08); }
/* Center the Target Time heading and fields */
.target { text-align: center; }
.target .seg-inputs { justify-content: center; }
/* Prevent stacked padding if main gets nested by mistake */
.site-main .site-main { padding-top: 0; }

/* Two-up row for Current + Start */
.timing-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}
@media (max-width: 900px){
  .timing-row { grid-template-columns: 1fr; }
}

/* Current Time block, visually related to start-block but neutral */
.now-block{
  margin-top: 0; /* aligns with start-block */
  border:2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  border-radius:16px;
  padding:1rem;
}
.now-head{
  text-align:center; font-weight:800; font-size:1.4rem; color:#e7f0ff;
}
.now-time{
  text-align:center;
  font-weight:900;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  color:#ffffff;
  line-height:1.15;
  letter-spacing:.5px;
}
.now-note{
  margin-top:.4rem;
  text-align:center;
  color:rgba(255,255,255,.75);
  font-weight:600;
  font-size:.95rem;
}

/* Optional: tighten .start-block when used in a split row */
.start-block { margin-top: 0; }
/* Target + Running Late split */
.plan-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 900px){
  .plan-row{ grid-template-columns: 1fr; }
}

/* Running Late panel */
.late-block{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:1rem;
  background: rgba(255,255,255,.03);
}
.late-head{
  text-align:center; font-weight:800; font-size:1.4rem; color:#e7f0ff; margin-bottom:.25rem;
}
.late-text{
  color:rgba(255,255,255,.9); text-align:center; font-weight:600; margin:.25rem 0 .5rem;
}
.skip-note{
  margin-top:.5rem; text-align:center; font-weight:800;
  color:#ffdca8; /* subtle highlight */
}

/* make the countdown total flash red after Running Late */
.seg-total.alert-red {
  color: #ff6b6b;
  text-shadow: 0 0 8px rgba(255, 60, 60, .35);
  transition: color .25s ease, text-shadow .25s ease;
}