/**
 * Reset, page ground and the shared type roles.
 *
 * The design specifies no focus treatment, and accessibility is not optional,
 * so :focus-visible gets a 2px accent ring here. It is the one visual element
 * on the page that is not in the handoff, and it is deliberate.
 */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 13.5px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-hover);
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
}

input {
  font: inherit;
}

p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Pointer interaction should not paint a ring; keyboard interaction must. */
:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--r-btn);
  font: 600 13px/1 var(--font);
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

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

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: var(--control);
  border-radius: 9px;
}

/* ---- Shared type roles ------------------------------------------------- */

.kicker {
  font: 400 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-4);
  text-transform: uppercase;
}

.screen-title {
  font: 600 25px/1.15 var(--font);
  letter-spacing: -.015em;
  color: var(--ink);
}

.screen-sub {
  font: 400 13.5px/1.4 var(--font);
  color: var(--ink-3);
}

.card-title {
  font: 600 14.5px/1.2 var(--font);
  color: var(--ink);
}

.time-label {
  font: 400 11px/1 var(--mono);
  color: var(--ink-5);
}

/* Struck through when the item is done. The line is the only completion
 * signal besides the filled circle; nothing is removed from the list. */
.is-done .item-title,
.is-done .row-title {
  text-decoration: line-through;
}