/* tool.css (minimal/additive; namespaced only) */

.pn-tool-atomic-clock{
  width:100%;
  --pnac-bg: color-mix(in oklab, var(--card) 92%, var(--bg));
  --pnac-bg-strong: color-mix(in oklab, var(--card) 86%, var(--bg));
  --pnac-border: color-mix(in oklab, var(--border) 82%, transparent);

  --pnac-accent: color-mix(in oklab, var(--brand2) 78%, var(--bg));
  --pnac-accent2: color-mix(in oklab, var(--brand4) 64%, var(--bg));
  --pnac-glow: color-mix(in oklab, var(--brand2) 18%, transparent);

  --pnac-ink: var(--fg);
  --pnac-muted: var(--muted-strong);
  --pnac-flip-shift: 26%;
}

.pn-tool-atomic-clock[data-pnac-theme="minimal"]{
  --pnac-accent: color-mix(in oklab, var(--brand2) 62%, var(--bg));
  --pnac-accent2: color-mix(in oklab, var(--brand) 56%, var(--bg));
  --pnac-glow: color-mix(in oklab, var(--pnac-accent) 12%, transparent);
}
.pn-tool-atomic-clock[data-pnac-theme="neon"]{
  --pnac-accent: color-mix(in oklab, var(--brand3) 70%, var(--brand2));
  --pnac-accent2: color-mix(in oklab, var(--brand2) 74%, var(--brand4));
  --pnac-glow: color-mix(in oklab, var(--pnac-accent) 22%, transparent);
}
.pn-tool-atomic-clock[data-pnac-theme="classic"]{
  --pnac-accent: color-mix(in oklab, var(--brand) 52%, var(--bg));
  --pnac-accent2: color-mix(in oklab, var(--brand4) 50%, var(--bg));
  --pnac-glow: color-mix(in oklab, var(--pnac-accent) 12%, transparent);
}
.pn-tool-atomic-clock[data-pnac-theme="night"]{
  --pnac-bg: color-mix(in oklab, var(--tool-control-bg) 86%, var(--bg));
  --pnac-bg-strong: color-mix(in oklab, var(--tool-control-bg) 78%, var(--bg));
  --pnac-accent: color-mix(in oklab, var(--brand2) 76%, var(--fg));
  --pnac-accent2: color-mix(in oklab, var(--brand4) 70%, var(--fg));
  --pnac-glow: color-mix(in oklab, var(--pnac-accent) 18%, transparent);
}
.pn-tool-atomic-clock[data-pnac-theme="aerospace"]{
  --pnac-accent: color-mix(in oklab, var(--brand2) 78%, var(--bg));
  --pnac-accent2: color-mix(in oklab, var(--brand4) 64%, var(--bg));
  --pnac-glow: color-mix(in oklab, var(--brand2) 18%, transparent);
}

.pn-tool-atomic-clock .pnac-sub{ color: var(--pnac-muted); font-size: .95rem; }

.pn-tool-atomic-clock .pnac-head-actions{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}

.pn-tool-atomic-clock .pnac-kbd-hint{ opacity:.75; font-variant-numeric: tabular-nums; }

.pn-tool-atomic-clock .pnac-stage{ padding:18px; }

.pn-tool-atomic-clock .pnac-badges{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom: 12px;
}

.pn-tool-atomic-clock .pnac-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px; border-radius:999px;
  border:1px solid var(--pnac-border);
  background: color-mix(in oklab, var(--pnac-bg) 92%, transparent);
  box-shadow: var(--tool-shadow-soft);
  font-size: .92rem;
}
.pn-tool-atomic-clock .pnac-pill--ghost{
  background: color-mix(in oklab, var(--tool-control-bg) 86%, transparent);
  color: color-mix(in oklab, var(--pnac-ink) 86%, var(--pnac-muted));
}

.pn-tool-atomic-clock .pnac-dot{
  width:10px; height:10px; border-radius:999px;
  background: color-mix(in oklab, var(--pnac-muted) 60%, transparent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--pnac-muted) 10%, transparent);
}

.pn-tool-atomic-clock .pnac-clock-wrap{
  width:100%;
  display:grid; place-items:center;
  min-height: clamp(240px, 30vw, 380px);
  position:relative; overflow:hidden;
  border-radius: 18px;
  border:1px solid var(--pnac-border);
  background:
    radial-gradient(circle at 18% 20%, var(--pnac-glow), transparent 58%),
    radial-gradient(circle at 80% 28%, color-mix(in oklab, var(--pnac-accent2) 14%, transparent), transparent 60%),
    var(--pnac-bg);
  box-shadow: var(--tool-shadow-soft);
  padding: 18px;
  contain: layout paint;
}

.pn-tool-atomic-clock .pnac-clock{
  width:100%;
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:10px;
}

.pn-tool-atomic-clock[data-pnac-style="digital"] .pnac-clock--digital{ display:flex; }
.pn-tool-atomic-clock[data-pnac-style="analog"] .pnac-clock--analog{ display:flex; }
.pn-tool-atomic-clock[data-pnac-style="flip"] .pnac-clock--flip{ display:flex; }
.pn-tool-atomic-clock[data-pnac-style="station"] .pnac-clock--station{ display:flex; }

/* SR-only */
.pn-tool-atomic-clock .pnac-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Exit fullscreen */
.pn-tool-atomic-clock .pnac-fs-close{
  display:none;
  position:absolute; top:12px; right:12px;
  width: 48px; height: 48px; border-radius: 16px;
  border:1px solid var(--pnac-border);
  background: color-mix(in oklab, var(--tool-control-bg) 88%, var(--bg));
  color: var(--pnac-ink);
  box-shadow: var(--tool-shadow-soft);
  cursor:pointer;
  align-items:center; justify-content:center;
}
.pn-tool-atomic-clock.is-fullscreen .pnac-fs-close{ display:inline-flex; }

/* Clean exit (only when clean, not fullscreen) */
.pn-tool-atomic-clock .pnac-clean-exit{
  display:none;
  position:absolute; top:12px; left:12px;
  gap:10px; align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--pnac-border);
  background: color-mix(in oklab, var(--tool-control-bg) 90%, var(--bg));
  color: var(--pnac-ink);
  box-shadow: var(--tool-shadow-soft);
  cursor:pointer;
}
.pn-tool-atomic-clock .pnac-clean-exit__text{ font-weight: 850; font-size:.95rem; }
.pn-tool-atomic-clock.is-clean:not(.is-fullscreen) .pnac-clean-exit{ display:inline-flex; }

.pn-tool-atomic-clock .pnac-digital-time{
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  font-weight: 950;
  line-height: 1;
  font-size: clamp(46px, 7.6vw, 92px);
  color: var(--pnac-ink);
  text-shadow: 0 10px 30px color-mix(in oklab, var(--pnac-accent) 18%, transparent);
}
.pn-tool-atomic-clock .pnac-digital-sub{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:center;
  color: var(--pnac-muted);
  font-variant-numeric: tabular-nums;
}
.pn-tool-atomic-clock .pnac-sep{ opacity:.7; }

.pn-tool-atomic-clock .pnac-divider{
  height:1px; background: color-mix(in oklab, var(--border) 75%, transparent);
  margin: 16px 0;
}

/* Analog / Station face */
.pn-tool-atomic-clock .pnac-analog-face,
.pn-tool-atomic-clock .pnac-station-face{
  width: min(320px, 64vw);
  aspect-ratio: 1/1;
  border-radius: 999px;
  position:relative;
  border:1px solid var(--pnac-border);
  background:
    radial-gradient(circle at center, color-mix(in oklab, var(--pnac-accent) 12%, transparent), transparent 56%),
    repeating-conic-gradient(from 0deg,
      color-mix(in oklab, var(--pnac-ink) 18%, transparent) 0deg 2deg,
      transparent 2deg 6deg
    ),
    radial-gradient(circle at center, transparent 62%, color-mix(in oklab, var(--pnac-ink) 10%, transparent) 63% 64%, transparent 65%),
    var(--pnac-bg-strong);
  box-shadow: 0 22px 60px color-mix(in oklab, var(--pnac-ink) 14%, transparent);
}

/* Robust hands */
.pn-tool-atomic-clock .pnac-hand{
  position:absolute; left:50%; top:50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius: 999px;
  will-change: transform;
}
.pn-tool-atomic-clock .pnac-hand--hour{
  width: 8px; height: 34%;
  background: color-mix(in oklab, var(--pnac-ink) 86%, var(--bg));
  box-shadow: 0 10px 24px color-mix(in oklab, var(--pnac-ink) 14%, transparent);
}
.pn-tool-atomic-clock .pnac-hand--min{
  width: 6px; height: 46%;
  background: color-mix(in oklab, var(--pnac-ink) 82%, var(--bg));
  box-shadow: 0 10px 24px color-mix(in oklab, var(--pnac-ink) 14%, transparent);
}
.pn-tool-atomic-clock .pnac-hand--sec{
  width: 3px; height: 54%;
  background: var(--pnac-accent);
  box-shadow: 0 0 0 6px var(--pnac-glow);
}
.pn-tool-atomic-clock .pnac-hand--station-sec{
  width: 2px; height: 58%;
  background: var(--pnac-accent);
  box-shadow: 0 0 0 6px var(--pnac-glow);
}
.pn-tool-atomic-clock .pnac-station-lollipop{
  position:absolute; left:50%; top:50%;
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--pnac-accent);
  box-shadow: 0 0 0 7px var(--pnac-glow);
  transform: translate(-50%, -50%) rotate(0deg) translateY(-120px);
  will-change: transform;
}
.pn-tool-atomic-clock .pnac-center{
  position:absolute; left:50%; top:50%;
  width: 14px; height: 14px; border-radius:999px;
  transform: translate(-50%, -50%);
  background: color-mix(in oklab, var(--pnac-ink) 90%, var(--bg));
  border: 2px solid color-mix(in oklab, var(--pnac-accent) 35%, var(--bg));
}
.pn-tool-atomic-clock .pnac-center--station{ width: 16px; height: 16px; border-color: color-mix(in oklab, var(--pnac-accent2) 38%, var(--bg)); }
.pn-tool-atomic-clock .pnac-analog-caption{ margin-top: 10px; color: var(--pnac-muted); font-weight: 800; }

/* Flip (fixed split rendering) */
.pn-tool-atomic-clock .pnac-flip-row{
  display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:nowrap;
  font-variant-numeric: tabular-nums;
}
.pn-tool-atomic-clock .pnac-flip-sep{
  font-weight: 950;
  font-size: clamp(30px, 4.8vw, 56px);
  color: color-mix(in oklab, var(--pnac-ink) 78%, var(--pnac-muted));
  margin: 0 2px;
}
.pn-tool-atomic-clock .pnac-flip-digit{
  width: clamp(46px, 8.4vw, 74px);
  height: clamp(66px, 10.8vw, 100px);
  contain: layout paint;
}
.pn-tool-atomic-clock .pnac-flip-card{
  width:100%; height:100%;
  border-radius: 14px;
  border:1px solid var(--pnac-border);
  background: var(--pnac-bg-strong);
  box-shadow: 0 18px 46px color-mix(in oklab, var(--pnac-ink) 14%, transparent);
  overflow:hidden;
  position:relative;
}
.pn-tool-atomic-clock .pnac-flip-half{
  position:absolute; left:0; right:0;
  height:50%;
  display:flex; justify-content:center;
  overflow:hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.pn-tool-atomic-clock .pnac-flip-half--top{ top:0; align-items:flex-end; }
.pn-tool-atomic-clock .pnac-flip-half--bot{ bottom:0; align-items:flex-start; }

.pn-tool-atomic-clock .pnac-flip-half--top > span{ transform: translateY(var(--pnac-flip-shift)); }
.pn-tool-atomic-clock .pnac-flip-half--bot > span{ transform: translateY(calc(-1 * var(--pnac-flip-shift))); }

.pn-tool-atomic-clock .pnac-flip-divider{
  position:absolute; left:0; right:0; top:50%;
  height:1px;
  background: color-mix(in oklab, var(--pnac-border) 85%, transparent);
  transform: translateY(-0.5px);
}

.pn-tool-atomic-clock .pnac-flip-cur,
.pn-tool-atomic-clock .pnac-flip-prev,
.pn-tool-atomic-clock .pnac-flip-next{
  font-weight: 950;
  line-height: 1;
  font-size: clamp(32px, 5.4vw, 56px);
  color: var(--pnac-ink);
  text-shadow: 0 10px 26px color-mix(in oklab, var(--pnac-accent) 14%, transparent);
  will-change: transform, opacity;
}

.pn-tool-atomic-clock .pnac-flip-anim{
  opacity:0;
  pointer-events:none;
}
.pn-tool-atomic-clock .pnac-flip-digit.is-flipping .pnac-flip-anim{ opacity:1; }

.pn-tool-atomic-clock .pnac-flip-anim--top{ top:0; align-items:flex-end; transform-origin: 50% 100%; }
.pn-tool-atomic-clock .pnac-flip-anim--bot{ bottom:0; align-items:flex-start; transform-origin: 50% 0%; }

.pn-tool-atomic-clock .pnac-flip-anim--top > span{ transform: translateY(var(--pnac-flip-shift)); }
.pn-tool-atomic-clock .pnac-flip-anim--bot > span{ transform: translateY(calc(-1 * var(--pnac-flip-shift))); }

.pn-tool-atomic-clock .pnac-flip-digit.is-flipping .pnac-flip-anim--top{
  animation: pnacFlipTop 420ms cubic-bezier(.2,.9,.2,1);
}
.pn-tool-atomic-clock .pnac-flip-digit.is-flipping .pnac-flip-anim--bot{
  animation: pnacFlipBot 420ms cubic-bezier(.2,.9,.2,1);
}

@keyframes pnacFlipTop{
  0%{ transform: translateY(0); opacity:1; }
  100%{ transform: translateY(-12%); opacity:0; }
}
@keyframes pnacFlipBot{
  0%{ transform: translateY(12%); opacity:0; }
  100%{ transform: translateY(0); opacity:1; }
}

.pn-tool-atomic-clock .pnac-flip-sub{
  display:flex; gap:10px; flex-wrap:wrap;
  justify-content:center;
  color: var(--pnac-muted);
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}

/* World */
.pn-tool-atomic-clock .pnac-world-head{
  display:flex; gap:14px;
  align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap;
}
.pn-tool-atomic-clock .pnac-world-title{ font-weight: 950; font-size: 1.1rem; }
.pn-tool-atomic-clock .pnac-world-sub{ color: var(--pnac-muted); font-size: .95rem; margin-top: 2px; }

.pn-tool-atomic-clock .pnac-world-list{ display:grid; gap:12px; margin-top: 12px; }
.pn-tool-atomic-clock .pnac-city{
  border:1px solid var(--pnac-border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--pnac-bg) 92%, var(--bg));
  box-shadow: var(--tool-shadow-soft);
  padding: 12px;
}
.pn-tool-atomic-clock .pnac-city-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.pn-tool-atomic-clock .pnac-city-name{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
.pn-tool-atomic-clock .pnac-city-label{ font-weight: 950; }
.pn-tool-atomic-clock .pnac-city-tz{ color: var(--pnac-muted); font-size: .92rem; }
.pn-tool-atomic-clock .pnac-city-metrics{ margin-top: 10px; display:grid; gap:6px; }
.pn-tool-atomic-clock .pnac-city-time{
  font-weight: 950; font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.pn-tool-atomic-clock .pnac-city-meta{
  color: var(--pnac-muted);
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center;
  font-variant-numeric: tabular-nums;
}
.pn-tool-atomic-clock .pnac-city-dn{
  display:inline-flex; gap:8px; align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--pnac-border) 85%, transparent);
  background: color-mix(in oklab, var(--tool-control-bg) 86%, transparent);
}
.pn-tool-atomic-clock .pnac-city-dn.is-day{ border-color: color-mix(in oklab, var(--pnac-accent2) 42%, var(--pnac-border)); }
.pn-tool-atomic-clock .pnac-city-dn.is-night{ border-color: color-mix(in oklab, var(--pnac-accent) 42%, var(--pnac-border)); }

.pn-tool-atomic-clock .pnac-dialog{ outline:none; }
.pn-tool-atomic-clock .pnac-tabs{ margin-bottom: 14px; }
.pn-tool-atomic-clock .pnac-tabpanel{ display:block; }
.pn-tool-atomic-clock .pnac-theme-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.pn-tool-atomic-clock .pnac-toggles{ display:grid; gap:10px; margin-top: 10px; }
.pn-tool-atomic-clock .pnac-actions-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px; }
.pn-tool-atomic-clock .pnac-panel-grid{ display:grid; gap:14px; }

.pn-tool-atomic-clock .pnac-advanced{
  border:1px solid var(--pnac-border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--pnac-bg) 92%, var(--bg));
  box-shadow: var(--tool-shadow-soft);
  padding: 10px 12px;
}
.pn-tool-atomic-clock .pnac-advanced-summary{
  cursor:pointer; display:flex; align-items:center; gap:10px;
  font-weight: 900; list-style:none;
}
.pn-tool-atomic-clock .pnac-advanced-summary::-webkit-details-marker{ display:none; }
.pn-tool-atomic-clock .pnac-advanced-body{ margin-top: 12px; }

.pn-tool-atomic-clock .pnac-toast{
  margin-top: 10px; color: var(--pnac-muted);
  font-size: .95rem; min-height: 1.2em;
  opacity:0; transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
}
.pn-tool-atomic-clock .pnac-toast.is-show{ opacity:1; transform: translateY(0); }

.pn-tool-atomic-clock .pnac-kv{
  display:grid; gap:10px; margin: 14px 0 0 0;
}
.pn-tool-atomic-clock .pnac-kv-row{
  display:flex; justify-content:space-between; gap:14px;
  border: 1px solid var(--pnac-border);
  border-radius: 14px;
  padding: 10px 12px;
  background: color-mix(in oklab, var(--pnac-bg) 92%, var(--bg));
  box-shadow: var(--tool-shadow-soft);
}
.pn-tool-atomic-clock .pnac-kv-row dt{ margin:0; color: var(--pnac-muted); font-weight: 800; }
.pn-tool-atomic-clock .pnac-kv-row dd{ margin:0; font-weight: 950; font-variant-numeric: tabular-nums; }
.pn-tool-atomic-clock .pnac-kv-unit{ color: var(--pnac-muted); font-weight: 700; margin-left:6px; }

.pn-tool-atomic-clock .pnac-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.pn-tool-atomic-clock .pnac-mini-note{
  margin-top: 12px;
  display:flex; gap:10px; align-items:flex-start;
  color: var(--pnac-muted);
}
.pn-tool-atomic-clock .pnac-preset-grid{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* Show/hide date line */
.pn-tool-atomic-clock[data-pnac-showdate="0"] [data-pnac-date-wrap]{ display:none !important; }

/* Fullscreen: clock only */
.pn-tool-atomic-clock.is-fullscreen .tool-surface__head{ display:none !important; }
.pn-tool-atomic-clock.is-fullscreen [data-pnac-hide-in-fullscreen]{ display:none !important; }
.pn-tool-atomic-clock.is-fullscreen .pnac-stage{ padding: 0; border:0; background:transparent; box-shadow:none; }
.pn-tool-atomic-clock.is-fullscreen .pnac-clock-wrap{
  border-radius: 0; border: 0; box-shadow: none;
  padding: 28px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, var(--pnac-glow), transparent 60%),
    radial-gradient(circle at 80% 30%, color-mix(in oklab, var(--pnac-accent2) 14%, transparent), transparent 65%),
    var(--pnac-bg);
}
.pn-tool-atomic-clock.is-fullscreen .pnac-digital-time{ font-size: clamp(64px, 10vw, 140px); }
.pn-tool-atomic-clock.is-fullscreen .pnac-flip-digit{ width: clamp(60px, 10vw, 96px); height: clamp(88px, 14vw, 140px); }
.pn-tool-atomic-clock.is-fullscreen .pnac-analog-face,
.pn-tool-atomic-clock.is-fullscreen .pnac-station-face{ width: min(520px, 76vw); }

/* Clean mode: hide controls/world but keep inside page (not fullscreen) */
.pn-tool-atomic-clock.is-clean:not(.is-fullscreen) [data-pnac-hide-in-clean]{ display:none !important; }
.pn-tool-atomic-clock.is-clean:not(.is-fullscreen) .pnac-stage{ padding-top: 8px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pn-tool-atomic-clock .pnac-flip-digit.is-flipping .pnac-flip-anim--top,
  .pn-tool-atomic-clock .pnac-flip-digit.is-flipping .pnac-flip-anim--bot{
    animation: none;
  }
}