/* Exam Timer — public, free tool. Reuses base component classes from
   styles.css (.seg, .stepper-row, .topic-row, .btn, .section-title) but
   with its own orange accent instead of the app's default teal, per
   request ("get a bit of that orange tint in the design too"). Scoped
   under .timer-wrap so it never bleeds into the logged-in app's styling. */

.timer-wrap{max-width:640px; margin:0 auto; padding:8px 0 40px;}

.timer-hero{text-align:center; margin:18px 0 30px;}
.timer-hero .glyph{font-size:40px; display:block; margin-bottom:6px;}
.timer-hero h1{font-size:30px; font-weight:800; letter-spacing:-0.01em; margin:0 0 8px;}
.timer-hero p{font-size:14.5px; color:var(--muted); max-width:440px; margin:0 auto; line-height:1.5;}

.timer-card{
  background:var(--surface); border:1.5px solid rgba(255,106,19,0.35); border-radius:var(--radius);
  padding:22px 20px; margin-bottom:16px;
}

.timer-wrap .section-label{margin:18px 2px 8px;}
.timer-wrap .section-label:first-child{margin-top:0;}

.timer-mode-seg{margin-bottom:16px;}

.preset-row{display:flex; gap:8px; flex-wrap:wrap;}
.preset-btn{
  flex:1; min-width:200px; padding:12px 10px; border-radius:11px;
  border:1.5px solid rgba(255,106,19,0.4); background:rgba(255,106,19,0.07);
  color:#B84E0D; font-weight:700; font-size:13px; cursor:pointer; text-align:center; line-height:1.35;
}
.preset-btn:hover{background:rgba(255,106,19,0.14);}
.preset-btn:active{transform:scale(0.98);}

/* orange-accented segmented control, overriding the default teal active state */
.timer-wrap .seg button.active{background:#FF6A13; color:#1B2430;}

.timer-wrap .stepper-btn:active{background:rgba(255,106,19,0.12);}

.bell-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1.5px solid var(--divider); border-radius:12px;
  padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:border-color .12s, background .12s;
}
.bell-option.active{border-color:#FF6A13; background:rgba(255,106,19,0.07);}
.bell-option .name{font-weight:600; font-size:14.5px;}
.bell-option .name .sel{color:#B84E0D; font-weight:700; font-size:12px; margin-left:8px;}
.bell-preview-btn{
  border:1px solid var(--divider); background:#fff; color:var(--ink);
  border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; flex:none;
}
.bell-preview-btn:active{background:#F0F2F1;}

.timer-estimate{
  text-align:center; font-size:13.5px; color:var(--muted); margin:14px 0 4px;
}
.timer-estimate b{color:#B84E0D;}

.timer-start-btn{
  width:100%; padding:15px; border-radius:12px; border:none; font-weight:800; font-size:15.5px;
  background:#FF6A13; color:#1B2430; cursor:pointer; margin-top:18px;
}
.timer-start-btn:hover{background:#E85D04;}

/* running screen */
.timer-run{text-align:center; padding:20px 0;}
.timer-phase{font-size:15px; font-weight:700; color:#B84E0D; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px;}
.timer-station-count{font-size:13px; color:var(--muted); margin-bottom:22px;}
.timer-clock{font-size:76px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; margin-bottom:22px;}
.timer-clock.urgent{color:var(--brick);}
.timer-progress-outer{height:8px; background:var(--divider); border-radius:999px; overflow:hidden; margin-bottom:26px;}
.timer-progress-inner{height:100%; background:#FF6A13; transition:width 1s linear;}
.timer-run-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.timer-run-actions button{
  padding:12px 20px; border-radius:11px; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid var(--divider);
  background:var(--surface); color:var(--ink);
}
.timer-run-actions button.primary{background:#FF6A13; border-color:#FF6A13; color:#1B2430;}
.timer-run-actions button.stop{color:var(--brick); border-color:rgba(193,72,63,0.4);}

.timer-done{text-align:center; padding:30px 0;}
.timer-done .glyph{font-size:44px; display:block; margin-bottom:10px;}
.timer-done h2{font-size:22px; font-weight:800; margin:0 0 8px;}
.timer-done p{color:var(--muted); font-size:14px; margin-bottom:20px;}

@media(max-width:600px){
  .timer-clock{font-size:56px;}
  .timer-card{padding:18px 14px;}
}