/* Geometry overrides kept separate so the dial scales cleanly on every viewport. */
.clock-wrap {
  width: min(var(--clock-size), 72vw);
  height: min(var(--clock-size), 72vw);
  container-type: size;
}

.tick {
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  transform-origin: center;
}

.tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4.2%;
  width: 1px;
  height: 2.8%;
  background: var(--hands);
  transform: translateX(-50%);
}

.tick.major { width: auto; height: auto; }
.tick.major::after { width: 2px; height: 4.2%; }
.number { font-size: clamp(11px, 3.4cqw, 17px); }

@media (max-width: 900px) {
  .clock-wrap {
    width: min(var(--clock-size), 72vw);
    height: min(var(--clock-size), 72vw);
    --clock-size: inherit;
  }
}

.panel-ad {
  width: 100%;
  min-width: 0;
  margin: -18px 0 30px;
  /* padding-bottom: 20px; */
  /* border-bottom: 1px solid var(--line); */
  text-align: center;
  overflow: hidden;
}

.ad-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font: 400 8px/1 DM Mono, monospace;
  letter-spacing: .12em;
}

.panel-ad .adsbygoogle {
  width: 100%;
}

.tool-nav {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 5px;
  transform: translateX(-50%);
  font-size: 9px;
}

.tool-nav a,
.tool-nav .current-tool {
  padding: 6px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

.tool-nav .current-tool {
  background: var(--ink);
  color: var(--canvas);
}

.tool-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .2s, background .2s;
}

.tool-nav a:hover,
.tool-nav a:focus-visible {
  background: var(--face);
  color: var(--ink);
  outline: none;
}

@media (max-width: 700px) {
  .tool-nav {
    position: static;
    margin-left: auto;
    transform: none;
  }

  .tool-nav .current-tool,
  .header-actions .status {
    display: none;
  }
}

@media (max-width: 520px) {
  .brand > span:last-child {
    display: none;
  }
}

main.panel-collapsed {
  grid-template-columns: 1fr;
}

main.panel-collapsed .panel {
  display: none;
}

main.panel-collapsed .clock-stage {
  border-right: 0;
}

.panel-toggle svg {
  transition: transform .25s ease;
}

body:has(main.panel-collapsed) .panel-toggle svg {
  transform: rotate(90deg);
}

/* Keep both hands anchored precisely to the center of the header clock icon. */
.brand-mark i,
.brand-mark i:last-child {
  left: 50%;
  top: auto;
  bottom: 50%;
  width: 1.5px;
  margin-left: -.75px;
  transform-origin: 50% 100%;
}

.brand-mark i:first-child {
  height: 6px;
  transform: rotate(38deg);
}

.brand-mark i:last-child {
  height: 9px;
  transform: rotate(105deg);
}

/* Fullscreen is a distraction-free, centered analog clock view. */
html:fullscreen .topbar,
html:fullscreen .panel,
html:fullscreen .digital-readout,
html:fullscreen .ambient {
  display: none;
}

html:fullscreen main {
  display: block;
  min-height: 100vh;
}

html:fullscreen .clock-stage {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border: 0;
}

html:fullscreen .clock-wrap {
  flex: 0 0 auto;
}

/* Safari uses the prefixed fullscreen selector. */
html:-webkit-full-screen .topbar,
html:-webkit-full-screen .panel,
html:-webkit-full-screen .digital-readout,
html:-webkit-full-screen .ambient {
  display: none;
}

html:-webkit-full-screen main {
  display: block;
  min-height: 100vh;
}

html:-webkit-full-screen .clock-stage {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border: 0;
}