/* base — reset, atoms, typography primitives */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--t-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.5;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Skip link */
.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  background: var(--accent);
  color: #fff;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-1);
  font-size: var(--t-sm);
  font-weight: 600;
  z-index: 9999;
  transform: translateY(-120%);
  transition: transform .15s;
}
.skip-link:focus { transform: translateY(0); }

/* Typography atoms */
.mono {
  font-family: var(--f-mono);
  font-feature-settings: "zero", "ss01";
}
.display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.01em;
}
.caps {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 10px;
  color: var(--ink-mute);
}
.hr { height: 1px; background: var(--hair); border: 0; }
.hidden   { display: none !important; }
.is-hidden { display: none !important; }
.req { color: var(--overdue); }
.muted { color: var(--ink-mute); }

::selection { background: var(--accent-soft); }

/* Tag — inline status badge */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px 7px;
  border-radius: var(--r-1);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tag--stale   { background: var(--stale-soft);   color: var(--stale);   }
.tag--blocked { background: var(--blocked-soft); color: var(--blocked); }
.tag--done    { background: var(--done-soft);    color: var(--done);    }
.tag--overdue { background: var(--overdue-soft); color: var(--overdue); }

/* Priority dot */
.pri-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.pri-dot.pri-urgent, .pri-dot.pri-p-urgent { background: var(--p-urgent); }
.pri-dot.pri-high,   .pri-dot.pri-p-high   { background: var(--p-high); }
.pri-dot.pri-medium, .pri-dot.pri-med,
.pri-dot.pri-p-med                          { background: var(--p-med); }
.pri-dot.pri-low,    .pri-dot.pri-p-low    { background: var(--p-low); }

/* Avatar */
.tf-avatar {
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
  width: 28px; height: 28px;
  user-select: none;
}
.tf-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.tf-avatar--lg { width: 36px; height: 36px; font-size: var(--t-sm); }
.tf-avatar--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #0c0e11;
}
.tf-avatar--empty { background: transparent; border-color: var(--hair-2); color: var(--ink-faint); }

/* Reveal animation (IntersectionObserver adds .is-visible) */
.reveal { opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Skeleton shimmer */
.skeleton {
  border-radius: var(--r-2);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

/* Tooltip — label icon-only controls on hover/focus.
   Add data-tooltip="…" to any element; appears above by default. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--surface-3);
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  padding: 4px 8px;
  border-radius: var(--r-2);
  font-family: var(--f-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 200;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* tip-below: for controls near the top edge, show the tooltip underneath. */
[data-tooltip].tip-below::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip].tip-below:hover::after,
[data-tooltip].tip-below:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}