/* ============================================================================
   Foundations — the reset, element defaults and the helpers every layer uses.
   ----------------------------------------------------------------------------
   Nothing here is a component. Consumes tokens.css and declares no literal
   colour or family.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--pomy-canvas);
  color: var(--pomy-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--pomy-font);
  font-size: 13px;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { color: inherit; font: inherit; font-family: var(--pomy-font); }
button { background: none; border: none; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }

.pomy-mono { font-family: var(--pomy-font-mono); }

.pomy-cap {
  color: var(--pomy-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pomy-sr {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Long client, job and task names wrap rather than truncate. */
.pomy-wrap { overflow-wrap: anywhere; text-wrap: pretty; }
.pomy-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pomy-skip-link {
  background: var(--pomy-raised);
  border-radius: var(--pomy-r-control);
  color: var(--pomy-ink);
  left: 12px;
  padding: 8px 12px;
  position: absolute;
  top: -100px;
  z-index: 100;
}
.pomy-skip-link:focus { top: 8px; }

@keyframes pomy-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes pomy-fade { from { opacity: 0; } }
@keyframes pomy-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .95; } }