/* Layout-Raster. Ring, Knopf und Baum teilen sich Ober- und Unterkante einer Zeile;
   Außenränder sind links und rechts sowie oben und unten gleich, auch mit Notch. */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --gutter: 16px;
  --toggle: 56px;
}

@property --sky-a { syntax: '<color>'; inherits: true; initial-value: #000000; }

/* Farbpaletten: eine ruhige Vollfläche ohne Szene, wie beim StandBy-Bildschirm.
   Holz und Laub liest der Baum von hier. */
[data-palette="schwarz"] {
  --sky-a: #000000;
  --ink: #F5F5F7; --muted: rgb(235 235 245 / .62);
  --focus: #E9B872; --rest: #9ED2B4; --long: #AFC6E6;
  --leaf-d: #2F6B5E; --leaf: #5FA37E; --leaf-l: #A8D39A; --wood: #5B4A5E; --wood-l: #7E6A80; --dead: #6E6E73;
  --track: rgb(255 255 255 / .14); --hair: rgb(255 255 255 / .12); --chip: rgb(255 255 255 / .16);
  --sheet: rgb(28 28 30 / .97); --scrim: rgb(0 0 0 / .5); --danger: #F2A093;
}
[data-palette="abend"] {
  --sky-a: #2B3A50;
  --ink: #F0F2F4; --muted: rgb(240 242 244 / .66);
  --focus: #E5B684; --rest: #9CC8B2; --long: #AFC3E0;
  --leaf-d: #3D6E6B; --leaf: #5E9486; --leaf-l: #A3CBA9; --wood: #2A2E3F; --wood-l: #574F5E; --dead: #8A93A2;
  --track: rgb(255 255 255 / .14); --hair: rgb(255 255 255 / .12); --chip: rgb(255 255 255 / .14);
  --sheet: rgb(45 59 80 / .97); --scrim: rgb(20 28 40 / .5); --danger: #EDA08E;
}
[data-palette="moos"] {
  --sky-a: #2F4238;
  --ink: #F0F3EA; --muted: rgb(240 243 234 / .66);
  --focus: #DDBD7E; --rest: #ADCDA4; --long: #A3C5C8;
  --leaf-d: #5B7C4C; --leaf: #7F9F60; --leaf-l: #B8CC86; --wood: #3A3128; --wood-l: #65543F; --dead: #8D9688;
  --track: rgb(255 255 255 / .14); --hair: rgb(255 255 255 / .12); --chip: rgb(255 255 255 / .14);
  --sheet: rgb(50 70 60 / .97); --scrim: rgb(20 30 24 / .5); --danger: #E7A58E;
}
[data-palette="pflaume"] {
  --sky-a: #3B314B;
  --ink: #F3EEF3; --muted: rgb(243 238 243 / .66);
  --focus: #E5AE9F; --rest: #BAC8A8; --long: #B8B9E0;
  --leaf-d: #8C5E7D; --leaf: #B18095; --leaf-l: #E2BBBA; --wood: #33263A; --wood-l: #5F4A63; --dead: #958B9B;
  --track: rgb(255 255 255 / .14); --hair: rgb(255 255 255 / .12); --chip: rgb(255 255 255 / .14);
  --sheet: rgb(66 54 82 / .97); --scrim: rgb(28 20 36 / .5); --danger: #EDA79A;
}
[data-palette="lagune"] {
  --sky-a: #20424A;
  --ink: #EDF4F2; --muted: rgb(237 244 242 / .66);
  --focus: #E7C392; --rest: #9FD3C3; --long: #ABCCE0;
  --leaf-d: #2F7A72; --leaf: #4F9F8D; --leaf-l: #9AD0AE; --wood: #1E2E33; --wood-l: #4A5A58; --dead: #809A9C;
  --track: rgb(255 255 255 / .14); --hair: rgb(255 255 255 / .12); --chip: rgb(255 255 255 / .14);
  --sheet: rgb(36 72 80 / .97); --scrim: rgb(12 30 34 / .5); --danger: #EDA694;
}
[data-palette="salbei"] {
  --sky-a: #E6ECE1;
  --ink: #2C3831; --muted: rgb(44 56 49 / .66);
  --focus: #A4663C; --rest: #47785C; --long: #47718A;
  --leaf-d: #5F8664; --leaf: #82A67A; --leaf-l: #B5D0A2; --wood: #6A5645; --wood-l: #937E69; --dead: #A3A89D;
  --track: rgb(44 56 49 / .1); --hair: rgb(44 56 49 / .12); --chip: rgb(44 56 49 / .09);
  --sheet: rgb(238 242 234 / .98); --scrim: rgb(44 56 49 / .25); --danger: #B4563F;
}
[data-palette="sand"] {
  --sky-a: #F2EADD;
  --ink: #39322A; --muted: rgb(57 50 42 / .66);
  --focus: #A56046; --rest: #597A53; --long: #597188;
  --leaf-d: #76864F; --leaf: #98A866; --leaf-l: #CBCF8F; --wood: #705544; --wood-l: #987C65; --dead: #ADA698;
  --track: rgb(57 50 42 / .1); --hair: rgb(57 50 42 / .12); --chip: rgb(57 50 42 / .09);
  --sheet: rgb(246 240 230 / .98); --scrim: rgb(57 50 42 / .25); --danger: #B4563F;
}
[data-palette="nebel"] {
  --sky-a: #E5EBF0;
  --ink: #2A343E; --muted: rgb(42 52 62 / .66);
  --focus: #A36D4A; --rest: #47797F; --long: #4C6A94;
  --leaf-d: #567C8B; --leaf: #779EA8; --leaf-l: #AFCCD1; --wood: #545E6B; --wood-l: #7C8796; --dead: #A3ABB3;
  --track: rgb(42 52 62 / .1); --hair: rgb(42 52 62 / .12); --chip: rgb(42 52 62 / .09);
  --sheet: rgb(238 242 245 / .98); --scrim: rgb(42 52 62 / .25); --danger: #B4563F;
}
[data-palette="rose"] {
  --sky-a: #F2E5E1;
  --ink: #3B2C2F; --muted: rgb(59 44 47 / .66);
  --focus: #A25C51; --rest: #5A7B64; --long: #686E98;
  --leaf-d: #BC858D; --leaf: #D6A5A9; --leaf-l: #F0D2CF; --wood: #70504F; --wood-l: #97736F; --dead: #AFA2A0;
  --track: rgb(59 44 47 / .1); --hair: rgb(59 44 47 / .12); --chip: rgb(59 44 47 / .09);
  --sheet: rgb(246 236 233 / .98); --scrim: rgb(59 44 47 / .25); --danger: #B14E44;
}

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }

html {
  background: var(--sky-a);
  transition: --sky-a .6s ease;
}
html, body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  font-family: ui-rounded, -apple-system, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; touch-action: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
#clock:focus-visible, #toggle:focus-visible, .swatch:focus-visible { border-radius: 50%; }
#sheet:focus { outline: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .45s ease; }

#app {
  --m-x: max(var(--safe-l), var(--safe-r), 24px);
  --m-t: max(var(--safe-t), 16px);
  --m-b: max(var(--safe-b), 24px);
  --ring: min(calc(100vw - 2 * var(--m-x) - 56px), 37dvh);
  --tint: var(--focus);
  position: fixed;
  inset: 0;
  display: grid;
  justify-items: center;
  grid-template: "tree" minmax(0, 1fr) "toggle" var(--toggle) "clock" auto / minmax(0, 1fr);
  row-gap: var(--gutter);
  padding: var(--m-t) var(--m-x) var(--m-b);
  transition: opacity .45s ease;
}
#app[data-phase="break"] { --tint: var(--rest); }
#app[data-phase="long"] { --tint: var(--long); }
.turning #app, .turning #scene { opacity: 0; transition: none; }

#tree { grid-area: tree; width: 100%; height: 100%; }

#clock {
  grid-area: clock;
  position: relative;
  width: var(--ring);
  aspect-ratio: 200 / 192.5;
  transition: transform .12s ease-out;
}
#clock:active { transform: scale(.97); }

#clock svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 19; stroke-linecap: round; }
#clock .track { stroke: var(--track); }
#fill {
  stroke: var(--tint);
  stroke-dasharray: 1 1;
  transition: stroke-dasharray .5s ease, stroke-dashoffset .5s ease, stroke .5s ease, opacity .25s ease;
}
#clock.paused #fill { opacity: .5; }

/* Die Mitte der Anzeige sitzt auf der Kreismitte, nicht auf der Mitte des Rahmens */
.dial {
  position: absolute;
  inset: 0 0 auto;
  height: 103.9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--ring) * .012);
}
#phase, #unit { font-size: calc(var(--ring) * .066); line-height: 1.15; }
#phase { font-weight: 600; color: var(--tint); transition: color .5s ease; }
#unit { font-weight: 500; color: var(--muted); }
#time {
  font-size: calc(var(--ring) * .4);
  line-height: .96;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

#toggle {
  grid-area: toggle;
  width: var(--toggle);
  height: var(--toggle);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--sky-a);
  transition: transform .1s ease-out, opacity .1s ease-out, background .5s ease;
}
#toggle:active { transform: scale(.9); opacity: .75; }
#toggle svg { grid-area: 1 / 1; width: 30px; height: 30px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
#toggle path { transition: opacity .2s ease, transform .2s ease; transform-origin: center; }
#toggle .stop { opacity: 0; transform: scale(.7); }
#toggle.running .play { opacity: 0; transform: scale(.7); }
#toggle.running .stop { opacity: 1; transform: none; }

@media (orientation: landscape) {
  #app {
    --m-y: max(var(--safe-t), var(--safe-b), 20px);
    --mid: calc(var(--toggle) + 2 * var(--gutter));
    --panel: calc((100vw - 2 * var(--m-x) - var(--mid)) / 2);
    --ring: min(var(--panel), calc((100dvh - 2 * var(--m-y)) / .9625));
    grid-template: "clock toggle tree" calc(var(--ring) * .9625) / var(--panel) var(--mid) var(--panel);
    row-gap: 0;
    justify-content: center;
    align-content: center;
    padding: 0 var(--m-x);
  }
  #toggle { align-self: end; }
}

#scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  opacity: 0;
}

#sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 max(var(--safe-r), 24px) max(var(--safe-b), 8px) max(var(--safe-l), 24px);
  background: var(--sheet);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: 26px 26px 0 0;
  font-size: 17px;
  will-change: transform;
}

.grabber {
  width: 36px;
  height: 5px;
  margin: 8px auto;
  border-radius: 3px;
  background: var(--hair);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  border-bottom: .5px solid var(--hair);
}

.more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .28s ease, opacity .22s ease;
}
.more > .row { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility .28s; }
#sheet.long .for-long, #sheet.sound .for-sound { grid-template-rows: 1fr; opacity: 1; }
#sheet.long .for-long > .row, #sheet.sound .for-sound > .row { visibility: visible; min-height: 50px; }

.stepper { display: flex; align-items: baseline; margin-right: -12px; font-variant-numeric: tabular-nums; }
.stepper output { min-width: 2.2ch; text-align: right; font-size: 20px; font-weight: 600; }
.stepper small { margin: 0 8px 0 4px; font-size: 12px; color: var(--muted); }
.stepper button {
  width: 44px;
  height: 44px;
  font-size: 24px;
  font-weight: 400;
  line-height: 44px;
  transition: opacity .1s ease-out;
}
.stepper button:active { opacity: .35; }

.picker { display: flex; align-items: center; margin-right: -12px; }
.picker button { height: 44px; transition: opacity .1s ease-out; }
.picker button:active { opacity: .35; }
.picker [data-step] { width: 44px; font-size: 26px; font-weight: 400; line-height: 40px; }
.picker .name { min-width: 7.2em; font-size: 17px; font-weight: 600; }

.swatches { display: flex; gap: 5px; }
.swatch {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-a) 50%, var(--leaf) 50%);
  box-shadow: 0 0 0 .5px rgb(127 127 127 / .5);
  transition: transform .1s ease-out;
}
.swatch::before { content: ""; position: absolute; inset: -10px -2.5px; }
.swatch:active { transform: scale(.88); }
.swatch[aria-checked="true"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--selected);
}
.swatches { --selected: var(--ink); }

input[role="switch"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 14px;
  background: var(--chip);
  transition: background .2s ease;
  touch-action: none;
}
input[role="switch"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgb(0 0 0 / .2);
  transition: transform .2s ease;
}
input[role="switch"]:checked { background: var(--rest); }
input[role="switch"]:checked::after { transform: translateX(20px); }

#reset {
  display: block;
  width: 100%;
  min-height: 50px;
  font-size: 16px;
  color: var(--danger);
  transition: opacity .1s ease-out;
}
#reset:active { opacity: .5; }

/* Wenig Höhe: zwei Spalten, damit nichts scrollen muss */
@media (orientation: landscape) and (max-height: 500px) {
  #sheet { max-width: 760px; }
  .rows {
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .rows > :nth-child(1) { grid-area: 1 / 1; }
  .rows > :nth-child(2) { grid-area: 2 / 1; }
  .rows > :nth-child(6) { grid-area: 3 / 1; }
  .rows > :nth-child(7) { grid-area: 4 / 1; }
  .rows > :nth-child(3) { grid-area: 1 / 2; }
  .rows > :nth-child(4) { grid-area: 2 / 2; }
  .rows > :nth-child(5) { grid-area: 3 / 2; }
  .rows > :nth-child(9) { grid-area: 4 / 2; }
  .rows > :nth-child(8) { grid-area: 5 / 1 / auto / span 2; }
  .row, #sheet.long .for-long > .row, #sheet.sound .for-sound > .row { min-height: 44px; }
  .more { grid-template-rows: 1fr; opacity: .3; }
  .more > .row { visibility: visible; min-height: 44px; }
  #sheet:not(.long) .for-long, #sheet:not(.sound) .for-sound { pointer-events: none; }
  #sheet.long .for-long, #sheet.sound .for-sound { opacity: 1; }
  #reset { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html, #app, #scene, #fill, #phase, #toggle, #toggle path, .more, .more > .row, input[role="switch"], input[role="switch"]::after { transition-duration: .01s; }
}
@media (prefers-reduced-transparency: reduce) {
  #sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
}