/* Mobile-first. Posture must be readable from across the room. */

:root {
  color-scheme: light dark;

  --bg: #f6f5f2;
  --fg: #1c1b19;
  --muted: #6b6862;
  --surface: #ffffff;
  --border: #dedcd6;
  --accent: #2f6fed;

  /* Posture states: sit / stand / off (out of plan) */
  --sit-bg: #dcecff;
  --sit-fg: #0b3d91;
  --stand-bg: #d9f3e3;
  --stand-fg: #0c5a2f;
  --off-bg: #ebe9e4;
  --off-fg: #5a574f;
  --paused-bg: #f3e6cf;
  --paused-fg: #6b4a0a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14141a;
    --fg: #ececec;
    --muted: #9a9aa3;
    --surface: #1e1e26;
    --border: #33333d;
    --accent: #6f9cff;

    --sit-bg: #0f2e6b;
    --sit-fg: #cfe0ff;
    --stand-bg: #0f3f25;
    --stand-fg: #c8f0d6;
    --off-bg: #2a2a33;
    --off-fg: #c4c4cc;
    --paused-bg: #3d2f12;
    --paused-fg: #f0d9a8;
  }
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  background: var(--bg);
  color: var(--fg);
}

#app,
#editor {
  max-width: 32rem;
  margin: 0 auto;
  padding: 1rem;
  display: grid;
  gap: 1rem;
}

/* ---- Now ------------------------------------------------------------ */

.now {
  border-radius: 1.25rem;
  padding: 2.5rem 1rem;
  text-align: center;
  background: var(--off-bg);
  color: var(--off-fg);
  transition: background-color 0.3s, color 0.3s;
}

.now[data-state="sit"]   { background: var(--sit-bg);   color: var(--sit-fg); }
.now[data-state="stand"] { background: var(--stand-bg); color: var(--stand-fg); }
.now[data-state="paused"] { background: var(--paused-bg); color: var(--paused-fg); }

.now__posture {
  margin: 0;
  font-size: clamp(3rem, 16vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.now__until {
  margin: 0.75rem 0 0;
  font-size: 1.25rem;
}

.now__countdown {
  margin: 0.25rem 0 0;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  min-height: 1.4em; /* keep height stable when empty */
}

/* Insist mode: a soft pulse until the user confirms they saw the notice. */
.now[data-pending="true"] {
  animation: now-pulse 2s ease-in-out infinite;
}

@keyframes now-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; filter: brightness(1); }
  50% { box-shadow: 0 0 0 0.5rem currentColor; filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .now[data-pending="true"] {
    animation: none;
    box-shadow: 0 0 0 0.25rem currentColor;
  }
}

.now__ack {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 1.25rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: 2px solid currentColor;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}

.now__ack:hover { filter: brightness(0.96); }

/* ---- Closed interval ------------------------------------------------ */

.closed {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Actions -------------------------------------------------------- */

.actions {
  display: grid;
  gap: 0.5rem;
}

.actions__row {
  display: flex;
  gap: 0.5rem;
}

.actions__row > .action { flex: 1; }

/* Big, thumb-friendly targets: never below 3rem tall on touch screens. */
.action {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.action:hover:not(:disabled) { filter: brightness(0.96); }

.action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.action--sit   { background: var(--sit-bg);   color: var(--sit-fg);   border-color: transparent; }
.action--stand { background: var(--stand-bg); color: var(--stand-fg); border-color: transparent; }

.action--extend {
  font-variant-numeric: tabular-nums;
}

.action--undo {
  font-weight: 600;
}

/* Pause is destructive for the day: secondary look, set apart from the rest. */
.actions__row--pause {
  margin-top: 0.75rem;
  justify-content: center;
}

.action--pause {
  flex: 0 1 auto;
  min-height: 2.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.action--pause:hover:not(:disabled) { color: var(--fg); filter: none; }

/* ---- Permission ----------------------------------------------------- */

.permission {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: grid;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.permission[data-state="granted"] { display: none; }

.permission__text { margin: 0; }

.permission__button {
  justify-self: start;
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.permission__button:hover { filter: brightness(1.1); }

.permission__help { display: grid; gap: 0.35rem; font-size: 0.9rem; color: var(--muted); }
.permission__help p { margin: 0; }

/* ---- Notification settings ------------------------------------------ */

.settings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.settings__option {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  cursor: pointer;
}

.settings__option input {
  margin: 0.2em 0 0;
  accent-color: var(--accent);
  flex: none;
}

.settings__test {
  justify-self: start;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.settings__note {
  margin: -0.25rem 0 0 1.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Plan ----------------------------------------------------------- */

.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.plan__title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.plan__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

.plan__empty {
  margin: 0;
  color: var(--muted);
}

.plan__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  border-left: 4px solid transparent;
  font-size: 0.95rem;
}

.plan__item[data-posture="sit"]   { border-left-color: var(--sit-fg); }
.plan__item[data-posture="stand"] { border-left-color: var(--stand-fg); }

.plan__item--current {
  font-weight: 700;
  background: var(--off-bg);
}

.plan__item--current[data-posture="sit"]   { background: var(--sit-bg);   color: var(--sit-fg); }
.plan__item--current[data-posture="stand"] { background: var(--stand-bg); color: var(--stand-fg); }

.plan__time {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.plan__item--current .plan__time { color: inherit; }

/* Secondary: editing the template is rare next to the day's actions. */
.plan__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.plan__edit,
.plan__float {
  font: inherit;
  font-weight: 500;
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.plan__edit:hover,
.plan__float:hover { color: var(--fg); }

/* ---- Floating window (Document Picture-in-Picture) ------------------ */

/* Root of the floating document: fills the small window, same posture
   colours as .now. The page stylesheet is copied there, so tokens apply. */
.float {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  padding: 0.5rem;
  text-align: center;
  background: var(--off-bg);
  color: var(--off-fg);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s, color 0.3s;
}

.float[data-state="sit"]    { background: var(--sit-bg);    color: var(--sit-fg); }
.float[data-state="stand"]  { background: var(--stand-bg);  color: var(--stand-fg); }
.float[data-state="paused"] { background: var(--paused-bg); color: var(--paused-fg); }

.float__posture {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.float__until {
  margin: 0;
  font-size: 0.95rem;
}

.float__countdown {
  margin: 0;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  min-height: 1.4em;
}

/* Posture change or pending acknowledgement: blink between the posture
   colour and white so it catches the eye from any app or desktop. */
.float.flash {
  animation: float-flash 0.7s ease-in-out infinite alternate;
  transition: none;
}

/* No `from`: the animation starts from the posture colour in force. */
@keyframes float-flash {
  to { background-color: #fff; color: #111; }
}

@media (prefers-reduced-motion: reduce) {
  .float.flash {
    animation: none;
    box-shadow: inset 0 0 0 0.35rem currentColor;
  }
}

/* Hint on the page when the window was wanted but is not open (Chrome needs
   a click to open it), and the small button that opens it otherwise. */
.float-hint {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: grid;
  gap: 0.5rem;
  text-align: center;
}

.float-hint__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.float-hint__open {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.float-hint__open:hover { filter: brightness(1.1); }

.float-hint__dismiss {
  justify-self: center;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.float-hint__dismiss:hover { color: var(--fg); }

/* ---- Template editor ------------------------------------------------ */

.editor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  display: grid;
  gap: 1rem;
}

.editor__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.editor__section {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
  display: grid;
  gap: 0.5rem;
}

.editor__legend {
  display: block;
  padding: 0;
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.editor__field {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.editor__input {
  font: inherit;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  width: 100%;
}

.editor__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.editor__input[aria-invalid="true"] { border-color: #c0392b; }

.editor__input--minutes { width: 5.5rem; font-variant-numeric: tabular-nums; }

/* Days: seven equal toggles, the checkbox itself hidden behind the label. */
.editor__days {
  display: flex;
  gap: 0.35rem;
}

.editor__day {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.editor__day input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.editor__day:has(input:checked) {
  background: var(--sit-bg);
  color: var(--sit-fg);
  border-color: transparent;
}

.editor__day:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.editor__list {
  display: grid;
  gap: 0.5rem;
}

/* One row per block or step: inputs in a line, the row error underneath. */
.editor__row {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 0.5rem;
}

.editor__row > .editor__field { flex: 1 1 6rem; }

.editor__row--step > .editor__field:first-child { flex: 2 1 8rem; }
.editor__row--step > .editor__field:nth-child(2) { flex: 0 0 auto; }

.editor__sep,
.editor__unit {
  align-self: center;
  color: var(--muted);
  line-height: 2.5rem;
}

.editor__row > .editor__error { flex-basis: 100%; }

.editor__error {
  margin: 0;
  font-size: 0.85rem;
  color: #c0392b;
}

@media (prefers-color-scheme: dark) {
  .editor__error { color: #ff8a7a; }
  .editor__input[aria-invalid="true"] { border-color: #ff8a7a; }
}

.editor__remove,
.editor__add,
.editor__button {
  font: inherit;
  font-weight: 600;
  min-height: 2.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
}

.editor__remove:hover,
.editor__add:hover,
.editor__button:hover { filter: brightness(0.96); }

.editor__remove {
  font-weight: 500;
  color: var(--muted);
}

.editor__add { justify-self: start; }

.editor__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.editor__button--save {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}

.editor__button--save:hover { filter: brightness(1.1); }

@media (min-width: 40rem) {
  #app,
  #editor { padding: 2rem 1rem; }
  .now { padding: 3.5rem 1.5rem; }
}

.version {
  margin: 1.5rem auto 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}