:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eeeae3;background:#191a1c;color-scheme:dark;font-synthesis:none;--muted:#a3a3a5;--line:#353638;--surface:#222326;--accent:#d9e5c2}
*{box-sizing:border-box}body{margin:0;min-width:260px}main{max-width:540px;margin:auto;padding:30px 28px 20px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:22px;letter-spacing:-1px;font-weight:650;margin:0}h1 span{color:var(--accent)}#connection{font-size:12px;color:var(--muted)}.timer{text-align:center;padding:55px 0 40px}#phase{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 7px}#countdown{font-size:clamp(64px,20vw,112px);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.065em;line-height:1.2}#next{font-size:13px;color:var(--muted);min-height:20px;margin:12px 0 25px}.controls{display:flex;gap:10px;justify-content:center}button{font:inherit;font-size:14px;font-weight:550;border:1px solid var(--line);border-radius:7px;background:transparent;color:inherit;padding:12px 20px;cursor:pointer;min-height:44px}button:hover:not(:disabled){background:var(--surface)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled,input:disabled{opacity:.45;cursor:default}button.primary{color:#1c2415;background:var(--accent);border-color:var(--accent);min-width:125px}button.primary:hover:not(:disabled){background:#e6efd6}.settings{border-top:1px solid var(--line);padding-top:24px}#sync{width:100%;display:flex;justify-content:space-between;align-items:center;font-weight:500}#sync[aria-pressed=true]{border-color:#86986b;color:var(--accent)}#schedule,.hint{font-size:11px;color:var(--muted);line-height:1.6}#schedule{text-align:center;margin:10px 0 27px}form{display:flex;gap:12px;align-items:end}label{flex:1;font-size:12px;color:var(--muted);min-width:0}.input-wrap{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;margin-top:8px;height:44px;padding:0 10px;gap:6px}.input-wrap span{font-size:11px}input{font:inherit;font-size:15px;color:#eeeae3;background:transparent;border:0;width:100%;min-width:35px;font-variant-numeric:tabular-nums}#apply{padding:11px 15px}.hint{margin:12px 0 0}#message{font-size:12px;color:var(--accent);min-height:18px;line-height:1.5;margin:15px 0}footer{border-top:1px solid var(--line);padding-top:16px;font-size:11px;color:var(--muted)}#clock{white-space:nowrap}body.break #phase{color:#c9d8ef}@media(max-width:360px){main{padding:20px 18px}form{gap:8px}.timer{padding:35px 0}footer{flex-wrap:wrap}}@media(max-height:480px){main{padding:16px 24px}.timer{padding:16px 0}#countdown{font-size:72px}.settings{padding-top:12px}#schedule{margin-bottom:12px}#next{margin:5px 0 10px}.hint,#message{margin:8px 0}}body.compact main{padding:10px}body.compact header,body.compact .settings,body.compact .controls,body.compact footer,body.compact #message{display:none}body.compact .timer{padding:5px 0}body.compact #countdown{font-size:clamp(36px,18vw,90px)}body.compact #next{font-size:11px;margin:3px 0}
#people{font-size:12px;color:var(--muted);margin:0 0 18px}#names{line-height:1.6;margin:6px 0 0;overflow-wrap:anywhere}

/* Fit the timer inside the Discord Activity window */
html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

main {
  width: 100%;
  max-width: 540px;
  height: 100vh;
  height: 100dvh;
  margin: auto;
  padding: clamp(8px, 2vh, 24px) clamp(12px, 4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vh, 10px);
  overflow: hidden;
}

header,
footer,
.settings,
#people {
  flex-shrink: 0;
}

.timer {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#phase {
  margin: 0 0 4px;
}

#countdown {
  font-size: min(20vw, 18vh, 112px);
  line-height: 1.05;
}

#next {
  min-height: 0;
  margin: clamp(4px, 1.2vh, 12px) 0;
}

.controls {
  gap: 10px;
}

button {
  min-height: 34px;
  padding: clamp(6px, 1.2vh, 12px) 16px;
}

.settings {
  padding-top: clamp(6px, 1.5vh, 18px);
}

#sync {
  gap: 8px;
  text-align: left;
}

#schedule {
  margin: 6px 0 clamp(6px, 1.5vh, 16px);
  line-height: 1.3;
}

form {
  gap: 8px;
}

.input-wrap {
  height: clamp(32px, 5.5vh, 44px);
  margin-top: 4px;
  padding: 0 8px;
}

input {
  min-width: 0;
}

#apply {
  min-height: 32px;
  height: clamp(32px, 5.5vh, 44px);
  padding: 5px 12px;
}

.hint {
  margin: 6px 0 0;
  line-height: 1.3;
}

#message {
  flex-shrink: 0;
  min-height: 0;
  margin: 0;
  line-height: 1.3;
}

#message:empty {
  display: none;
}

#people {
  margin: 0;
  font-size: 11px;
}

#names {
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

footer {
  padding-top: 6px;
  gap: 8px;
  flex-wrap: nowrap;
  font-size: 10px;
}

/* Keep essential controls visible in shorter windows */
@media (max-height: 600px) {
  .hint,
  #message,
  #people,
  footer {
    display: none;
  }

  #countdown {
    font-size: min(20vw, 21vh, 112px);
  }
}

@media (max-height: 380px) {
  header,
  #schedule {
    display: none;
  }

  main {
    gap: 4px;
    padding-block: 6px;
  }

  .settings {
    padding-top: 5px;
  }

  form {
    margin-top: 5px;
  }

  #phase,
  #next {
    font-size: 11px;
  }

  #next {
    margin: 3px 0;
  }
}


/* Appearance selector */
.theme-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 12px;
}

.theme-setting label {
  font-size: 12px;
  color: var(--muted);
}

#theme {
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 12px;
  font: inherit;
}

/* Light appearance */
:root[data-theme="light"] {
  color-scheme: light;
  color: #252e28;
  background: #f7f8f3;
  --muted: #566359;
  --line: #cdd7ca;
  --surface: #e9eee7;
  --accent: #3c672c;
}

:root[data-theme="light"] input {
  color: #252e28;
}

:root[data-theme="light"] button.primary {
  color: white;
}

:root[data-theme="light"] button.primary:hover {
  background: #305522;
}

:root[data-theme="light"] body.break #phase {
  color: #345d9a;
}

#theme:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* Three-way appearance toggle */
.theme-switch {
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.theme-switch button {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: inherit;
  opacity: 0.65;
  padding: 8px 13px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.theme-switch button[aria-pressed="true"] {
  background: #5865f2;
  color: white;
  opacity: 1;
  font-weight: 600;
}

.theme-switch button:focus-visible {
  outline: 2px solid #5865f2;
  outline-offset: 2px;
}


.sound-settings {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sound-heading {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 14px;
}

.sound-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sound-row label {
  font-size: 12px;
}

.sound-row select {
  width: 100%;
  min-width: 0;
  height: 44px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
}

.sound-row button {
  padding: 8px 10px;
  min-height: 44px;
  font-size: 12px;
}

@media (max-width: 380px) {
  .sound-row {
    grid-template-columns: 1fr auto;
  }
  .sound-row label {
    grid-column: 1 / -1;
  }
}



/* Allow scrolling to sound settings */
main {
  overflow-y: auto;
  overflow-x: hidden;
}

.sound-row select {
  color: inherit;
}


/* Compact application heading */
header h1 {
  flex: 1;
  min-width: 0;
  font-size: clamp(11px, 2.8vw, 16px);
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

/* Settings gear */
#settings-gear {
  flex-shrink: 0;
  min-width: 38px;
  padding: 6px 10px;
  font-size: 19px;
  line-height: 1;
}

/* Settings popout */
#settings-dialog {
  width: min(440px, calc(100vw - 24px));
  max-width: 440px;
  max-height: min(84dvh, 700px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  box-shadow: 0 20px 60px #0007;
}

#settings-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#settings-dialog::backdrop {
  background: #0009;
}

.settings-dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.settings-dialog-top h2 {
  margin: 0;
  font-size: 17px;
}

#close-settings {
  padding: 5px 10px;
  min-height: 34px;
}

/* Scrollable settings */
.settings-dialog-body {
  overflow-y: auto;
  min-height: 0;
  padding: 4px 2px 10px;
}

.settings-dialog-body form {
  margin-top: 4px;
}

.settings-dialog-body .sound-settings,
.settings-dialog-body .theme-setting {
  margin-top: 16px;
}

/* Keep settings accessible on short Discord windows */
@media (max-height: 380px) {
  header {
    display: flex;
  }
}

/* Show Discord participants on small screens */
#people:not([hidden]) {
  display: block;
}

/* Allow scrolling when the Activity is compact */
main {
  overflow-y: auto;
}


/* Participant list on main screen */
.timer #people:not([hidden]) {
  display: block;
  width: 100%;
  text-align: center;
  margin: 16px 0 0;
  font-size: 13px;
}

.timer #members {
  font-weight: 600;
}

.timer #names {
  margin-top: 5px;
  white-space: normal;
  overflow-wrap: anywhere;
}


/* Volume control inside Settings */
.sound-volume {
  margin: 16px 0;
}

.sound-volume label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

#soundVolume {
  display: block;
  width: 100%;
  margin: 12px 0 4px;
  accent-color: var(--accent);
  cursor: pointer;
}

#soundVolumeValue {
  font-variant-numeric: tabular-nums;
}


/* 2026-10-25: full-window compact Settings. Two balanced columns avoid scrolling. */
#settings-dialog {
  box-sizing:border-box;
  width:min(920px,calc(100vw - 12px));
  max-width:none;
  height:calc(100dvh - 12px);
  max-height:calc(100dvh - 12px);
  overflow:hidden;
  padding:clamp(7px,1.5dvh,14px);
  gap:6px;
  margin:auto;
}
#settings-dialog[open] {gap:6px}
#settings-dialog .settings-dialog-top {flex-shrink:0;min-height:26px}
#settings-dialog .settings-dialog-body {
  flex:1;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto auto auto 1fr;
  grid-template-areas:
    "profile sound"
    "durations sound"
    "note sound"
    "theme sound"
    "message sound";
  column-gap:clamp(10px,2vw,24px);
  row-gap:clamp(5px,1vh,12px);
  align-content:start;
  align-items:start;
  padding:2px;
}
#settings-dialog #study-name-box {grid-area:profile;margin:0;padding:3px 0 7px;border-top:0;border-bottom:1px solid var(--line)}
#settings-dialog #study-name-box label {margin-bottom:4px}
#settings-dialog #study-name {padding:7px;min-height:29px}
#settings-dialog #study-name-box .hint {font-size:10px;margin:4px 0 0}
#settings-dialog #durations {grid-area:durations;align-items:end;min-width:0}
#settings-dialog #durations label {font-size:11px}
#settings-dialog .input-wrap {height:33px;margin-top:4px}
#settings-dialog .settings-dialog-body > .hint {grid-area:note;margin:0;font-size:10px}
#settings-dialog .theme-setting {grid-area:theme;margin:0!important;padding:5px 0;min-width:0}
#settings-dialog .theme-switch {padding:2px}
#settings-dialog .theme-switch button {padding:5px 8px;font-size:11px;min-height:25px}
#settings-dialog .sound-settings {
  grid-area:sound;margin:0!important;padding:0;border-top:0;
  min-width:0;
}
#settings-dialog .sound-heading {margin:0 0 6px}
#settings-dialog .sound-row {gap:5px;margin:0 0 7px;grid-template-columns:minmax(65px,1fr) minmax(80px,1.25fr) auto}
#settings-dialog .sound-row select {height:33px;padding:0 4px;font-size:11px}
#settings-dialog .sound-row button {min-height:33px;padding:4px 7px}
#settings-dialog .sound-volume {margin:8px 0}
#settings-dialog #soundVolume {margin:5px 0}
#settings-dialog .sound-settings .hint {font-size:10px;margin-top:3px}
#settings-dialog #message {grid-area:message;margin:0}
@media(max-width:560px) {
  #settings-dialog .settings-dialog-body {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:"profile" "durations" "note" "theme" "sound" "message";
    row-gap:5px;
  }
  #settings-dialog .sound-row {grid-template-columns:minmax(60px,1fr) minmax(85px,1.4fr) auto}
}
@media(max-height:460px) {
  #settings-dialog .settings-dialog-body {row-gap:3px}
  #settings-dialog #study-name-box .hint,
  #settings-dialog .settings-dialog-body > .hint,
  #settings-dialog .sound-settings .hint {display:none}
  #settings-dialog .sound-row {margin-bottom:3px}
  #settings-dialog .sound-volume {margin:4px 0}
}

/* Settings widens as needed but stays only as tall as its content. */
#settings-dialog {height:auto;max-height:calc(100dvh - 12px)}
#settings-dialog .settings-dialog-body {flex:initial}
#settings-dialog {height:min(340px,calc(100dvh - 12px))}
@media(max-width:560px) {
  #settings-dialog {height:min(470px,calc(100dvh - 12px))}
}

/* Two clock-aligned schedules, kept in one compact row. */
.sync-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.sync-options button { width:100%; min-width:0; padding:8px 10px; font-size:clamp(10px,2vw,14px); text-align:left; display:flex; align-items:center; justify-content:space-between; gap:6px; }
#sync100[aria-pressed="true"] { border-color:var(--sync-line,#86986b); color:var(--sync-ink,var(--accent)); }