/* =====================================================================
   RANGE CONTROL — the phone is the controller.
   Phone-first: everything here is written for a handset held one-handed,
   and widened on larger screens rather than the other way round.
   ===================================================================== */

.ctl-body{
  /* The page is a fixed app shell: a bar at the top, a bar at the bottom and
     the only scrolling in between. Letting the whole document scroll on a
     phone means the start button drifts off screen exactly when it is needed. */
  /* height, not min-height: the shell has to be EXACTLY the viewport so the
     middle section is what scrolls and the start bar stays pinned. With
     min-height the content simply grows the body and pushes the bar off the
     bottom of the screen -- which is where it is least useful.
     svh, not vh: vh is wrong while mobile browser chrome slides in and out. */
  height:100vh; height:100svh;
  display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  overscroll-behavior-y:none;     /* no rubber-band bounce under the bars */
}

/* --- top bar --- */
.ctl-top{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:rgba(7,16,12,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(92,255,157,.12);
}
.ctl-top__back{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  border-radius:10px; text-decoration:none; color:var(--muted-mid);
  font-size:20px; border:1px solid var(--card-bd);
}
.ctl-top__title{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.ctl-top__name{font-family:var(--font-head); font-weight:700; font-size:15px; letter-spacing:.05em;}
.ctl-top__sub{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.ctl-pill{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px; border:1px solid rgba(92,255,157,.25);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.ctl-pill__dot{width:7px; height:7px; border-radius:50%; background:var(--muted-dim);}
.ctl-pill.is-live{border-color:rgba(92,255,157,.5); color:var(--green);}
.ctl-pill.is-live .ctl-pill__dot{background:var(--green); box-shadow:0 0 9px var(--green);}
.ctl-pill.is-down{border-color:rgba(255,107,107,.45); color:var(--red);}
.ctl-pill.is-down .ctl-pill__dot{background:var(--red);}

/* --- scroll region --- */
.ctl-main{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px 24px;
}
.ctl-grid{display:flex; flex-direction:column; gap:16px;}

.ctl-panel{border:1px solid var(--card-bd); border-radius:16px; background:var(--card-bg); padding:16px;}
.ctl-panel__head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.ctl-panel__h{font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.1em; margin:0; color:var(--muted-soft);}
.ctl-panel__count{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim);}

/* --- targets --- */
.ctl-targets{display:flex; flex-direction:column; gap:10px;}

.ctl-target{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:14px; border-radius:13px; cursor:pointer;
  border:1px solid var(--card-bd); background:rgba(255,255,255,.02); color:inherit;
  font:inherit;
  /* 44px+ of height and no double-tap zoom: this is the control you will be
     stabbing at with a glove on, outdoors, in a hurry. */
  min-height:62px; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:border-color .15s, background .15s;
}
.ctl-target[aria-pressed="true"]{border-color:rgba(92,255,157,.55); background:rgba(92,255,157,.08);}
.ctl-target[disabled]{opacity:.42; cursor:not-allowed;}

.ctl-target__check{
  flex:none; width:24px; height:24px; border-radius:7px;
  border:1.5px solid rgba(255,255,255,.25); display:grid; place-items:center;
  font-size:14px; color:var(--bg); background:transparent;
}
.ctl-target[aria-pressed="true"] .ctl-target__check{background:var(--green); border-color:var(--green);}

.ctl-target__body{flex:1; min-width:0;}
.ctl-target__id{font-family:var(--font-head); font-weight:600; font-size:15px; letter-spacing:.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ctl-target__meta{font-family:var(--font-mono); font-size:11px; color:var(--muted-dim); margin-top:3px;
  display:flex; gap:9px; flex-wrap:wrap;}
.ctl-target__state{text-transform:uppercase; letter-spacing:.06em;}
.ctl-target__state--free{color:var(--cyan);}
.ctl-target__state--timed{color:var(--yellow);}
.ctl-target__state--running{color:var(--green);}

.ctl-target__live{flex:none; width:8px; height:8px; border-radius:50%; background:var(--muted-dim);}
.ctl-target__live.is-on{background:var(--green); box-shadow:0 0 8px var(--green);}
.ctl-target__splits{color:#ff8a1f; text-transform:uppercase; letter-spacing:.06em;}

/* A row: the target (select it) and its rename button, side by side. */
.ctl-target-row{display:flex; gap:8px; align-items:stretch;}
.ctl-target-row .ctl-target{flex:1; min-width:0;}
.ctl-target__rename{
  flex:none; width:48px; border-radius:13px; border:1px solid var(--card-bd);
  background:rgba(255,255,255,.02); color:var(--muted); font-size:18px; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.ctl-target__rename:hover,.ctl-target__rename:focus-visible{color:var(--cyan); border-color:rgba(46,230,255,.45);}
.ctl-rename{flex:1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px;
  border-radius:13px; border:1px solid rgba(46,230,255,.45); background:rgba(46,230,255,.05);}
.ctl-rename__input{flex:1 1 160px; min-width:0; margin:0;}
.ctl-rename__save,.ctl-rename__cancel{flex:none; min-height:44px; padding:0 14px; border-radius:10px; cursor:pointer;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; touch-action:manipulation;}
.ctl-rename__save{border:none; color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff);}
.ctl-rename__save:disabled{opacity:.5;}
.ctl-rename__cancel{border:1px solid rgba(255,255,255,.16); background:transparent; color:var(--muted);}
.ctl-rename__hint{flex-basis:100%; margin:0;}

/* Split times switch */
.ctl-split{margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07);}
.ctl-switch{display:flex; align-items:center; gap:12px; cursor:pointer; min-height:44px;}
.ctl-switch input{position:absolute; opacity:0; width:1px; height:1px;}
.ctl-switch__track{flex:none; position:relative; width:46px; height:26px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); transition:background .15s, border-color .15s;}
.ctl-switch__track::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:var(--muted-soft); transition:transform .15s, background .15s;}
.ctl-switch input:checked + .ctl-switch__track{background:rgba(255,138,31,.25); border-color:#ff8a1f;}
.ctl-switch input:checked + .ctl-switch__track::after{transform:translateX(20px); background:#ff8a1f; box-shadow:0 0 10px rgba(255,138,31,.7);}
.ctl-switch input:indeterminate + .ctl-switch__track{border-color:#ff8a1f;}
.ctl-switch input:indeterminate + .ctl-switch__track::after{transform:translateX(10px); background:#ff8a1f;}
.ctl-switch input:focus-visible + .ctl-switch__track{outline:2px solid var(--green); outline-offset:2px;}
.ctl-switch input:disabled + .ctl-switch__track{opacity:.4;}
.ctl-switch__label{font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--muted-soft);}
.ctl-switch__state{margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--muted-dim);}
.ctl-switch__state.is-on{color:#ff8a1f;}

.ctl-empty{font-size:13px; color:var(--muted-dim); line-height:1.55; margin:4px 0 0;}
.ctl-empty a{color:var(--cyan);}

/* Link a target -- folded away until wanted; opened for you when there are none. */
.ctl-add{margin-top:14px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.02);}
.ctl-add__toggle{list-style:none; cursor:pointer; padding:13px 14px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--cyan); min-height:44px; display:flex; align-items:center;}
.ctl-add__toggle::-webkit-details-marker{display:none;}
.ctl-add[open] .ctl-add__toggle{color:var(--muted-dim);}
.ctl-add__body{padding:2px 14px 14px;}
.ctl-add__body .field-input{margin-bottom:14px;}
.ctl-add__btn{margin-top:4px;}
.ctl-add code{font-family:var(--font-mono); font-size:11px; color:var(--muted-mid);}

/* --- drills --- */
.ctl-games{display:grid; grid-template-columns:1fr; gap:9px;}
.ctl-game{
  display:block; width:100%; text-align:left; padding:13px 15px; border-radius:12px;
  border:1px solid var(--card-bd); background:rgba(255,255,255,.02); color:inherit; font:inherit;
  cursor:pointer; min-height:56px; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:border-color .15s, background .15s;
}
.ctl-game[aria-checked="true"]{border-color:rgba(46,230,255,.55); background:rgba(46,230,255,.08);}
.ctl-game__name{display:block; font-family:var(--font-head); font-weight:600; font-size:15px;}
.ctl-game__blurb{display:block; font-size:12px; color:var(--muted-dim); margin-top:3px; line-height:1.45;}

/* --- count-in --- */
.ctl-lead{display:flex; align-items:center; gap:12px; margin-top:16px;}
.ctl-lead__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--muted-dim); flex:none;}
.ctl-lead__range{flex:1; accent-color:var(--green); height:28px;}
.ctl-lead__out{font-family:var(--font-mono); font-size:13px; color:var(--green); flex:none; min-width:30px; text-align:right;}
.ctl-hint{font-size:11.5px; color:var(--muted-dim); line-height:1.5; margin:8px 0 0;}

.ctl-msg{margin-top:13px; padding:11px 13px; border-radius:10px; font-size:13px; line-height:1.5;
  border:1px solid rgba(46,230,255,.3); background:rgba(46,230,255,.07); color:var(--muted-soft);}
.ctl-msg--err{border-color:rgba(255,107,107,.4); background:rgba(255,107,107,.08); color:#ffc9c9;}

/* --- the start bar --- */
.ctl-bar{
  flex:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(7,16,12,.94); backdrop-filter:blur(12px);
  border-top:1px solid rgba(92,255,157,.12);
}
.ctl-start{
  width:100%; min-height:58px; border:none; border-radius:14px; cursor:pointer;
  font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.09em;
  color:#06140d; background:linear-gradient(95deg,#5cff9d,#2ee6ff);
  box-shadow:0 0 26px rgba(92,255,157,.33); touch-action:manipulation;
  transition:opacity .15s, box-shadow .15s;
}
.ctl-start:disabled{
  background:rgba(255,255,255,.07); color:var(--muted-dim);
  box-shadow:none; cursor:not-allowed;
}

/* --- countdown overlay --- */
.ctl-count{
  position:fixed; inset:0; z-index:90; display:grid; place-content:center; justify-items:center; gap:10px;
  background:rgba(4,9,7,.97); padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
}
.ctl-count__num{font-family:var(--font-head); font-weight:700; font-size:min(42vw,220px); line-height:1;
  color:var(--green); text-shadow:0 0 48px rgba(92,255,157,.45);}
.ctl-count__sub{font-family:var(--font-mono); font-size:13px; letter-spacing:.3em; color:var(--muted);}
.ctl-count__abort{
  margin-top:26px; padding:13px 30px; min-height:48px; border-radius:11px; cursor:pointer;
  background:none; border:1px solid rgba(255,107,107,.45); color:var(--red);
  font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.12em;
  touch-action:manipulation;
}
.ctl-count.is-go .ctl-count__num{color:#fff; text-shadow:0 0 60px rgba(255,255,255,.6);}

/* --- gate --- */
.ctl-gate{text-align:center; padding:40px 8px;}
.ctl-gate__h{font-family:var(--font-head); font-weight:700; font-size:22px; margin:0 0 10px;}
.ctl-gate__p{font-size:14px; color:var(--muted); line-height:1.6; margin:0 auto 22px; max-width:34ch;}
.ctl-gate__btn{display:inline-flex;}

.hidden{display:none !important;}

/* --- wider screens: the two panels sit side by side, control beside the list,
       and the start button stops being a fixed bar because there is room. --- */
@media (min-width:760px){
  .ctl-main{padding:24px;}
  .ctl-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start;
    max-width:1000px; margin:0 auto;}
  .ctl-bar{padding:14px 24px calc(14px + env(safe-area-inset-bottom));}
  .ctl-start{max-width:1000px; margin:0 auto; display:block;}
  .ctl-games{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .ctl-target,.ctl-game,.ctl-start{transition:none;}
}