@font-face {
  font-family: 'Departure Mono';
  src: url('/fonts/DepartureMono-Regular.woff2') format('woff2'), url('/fonts/DepartureMono-Regular.woff') format('woff');
  font-display: swap;
}

/* Departure Mono is drawn on an 11px grid: sizes are multiples of 11px (1rem). */
:root {
  --ink: #000;
  --paper: #fff;
  --g1: #f2f2f2;
  --g2: #dcdcdc;
  --g3: #b4b4b4;
  --g4: #7a7a7a;
  --g5: #4d4d4d;
  font-size: 11px;
}
@media (max-width: 899px) { :root { font-size: 14.667px; } }

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

html {
  font-family: 'Departure Mono', ui-monospace, monospace;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: normal; }
em { font-style: normal; }
b, strong { font-weight: normal; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- top bar ---------- */

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--ink);
}
.brand a { text-decoration: none; text-transform: uppercase; }

.tabs, .groups { display: flex; }
.tabs a, .groups span {
  display: block;
  padding: 0.25rem 1rem;
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.tabs a + a, .groups label + label span { margin-left: -1px; }
.tabs a:hover, .groups span:hover { background: var(--g1); }
.tabs a[aria-current], .groups input:checked + span { background: var(--ink); color: var(--paper); }

.groups { border: 0; margin: 0; padding: 0; align-items: center; gap: 0; }
.groups legend { float: left; margin-right: 1rem; padding: 0; color: var(--g4); text-transform: uppercase; }
.groups input { position: absolute; opacity: 0; pointer-events: none; }
.groups input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.search { margin-left: auto; }
.search input {
  font: inherit;
  color: inherit;
  width: 22rem;
  max-width: 100%;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--g3);
  background: var(--paper);
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--g4); }
.search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1H0zM6 0h1v1H6zM1 1h1v1H1zM5 1h1v1H5zM2 2h1v1H2zM4 2h1v1H4zM3 3h1v1H3zM2 4h1v1H2zM4 4h1v1H4zM1 5h1v1H1zM5 5h1v1H5zM0 6h1v1H0zM6 6h1v1H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search input:focus { outline: none; border-color: var(--ink); }

/* ---------- week strip ---------- */

.weeks {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--g3) transparent;
}
.weeks a {
  flex: 1 0 5rem;
  max-width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  border-right: 1px solid var(--g2);
  text-decoration: none;
  white-space: nowrap;
}
.weeks a:last-child { border-right: 0; }
.weeks a small { color: var(--g4); font-size: inherit; }
.weeks a:hover { background: var(--g1); }
.weeks a.is-quiet b { color: var(--g4); }
.weeks a[aria-current] { background: var(--ink); color: var(--paper); }
.weeks a[aria-current] b, .weeks a[aria-current] small { color: inherit; }

/* ---------- week ---------- */

main { flex: 1; padding: 2rem; outline: none; }

.wk-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.wk-head h2 { font-size: 2rem; line-height: 1; min-width: calc(var(--wk-ch, 0) * 1ch); white-space: nowrap; }
.wk-head h2 span { color: var(--g4); }
.step, .jump {
  display: block;
  padding: 0.25rem 1rem;
  border: 1px solid var(--ink);
  text-decoration: none;
}
.step { font-size: 2rem; line-height: 1; padding: 0.25rem 0.5rem; }
.step:hover, .jump:hover { background: var(--g1); }
.step[aria-disabled='true'] { border-color: var(--g2); color: var(--g3); pointer-events: none; }
.jump { margin-left: auto; }

.intro, .notes { display: grid; gap: 0.5rem; margin-bottom: 2rem; max-width: 66rem; }
.notes.outro { margin: 2rem 0 0; }

.note { padding: 0.5rem 1rem; border: 1px solid var(--ink); }
.note.is-big { font-size: 2rem; padding: 2rem; }
.note .ln { margin-left: 1rem; }

.days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.day { display: grid; gap: 0.5rem; }
.day h3 {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--g3);
  text-transform: uppercase;
}
.day h3 span { color: var(--g4); }
.day h3 .chip { margin-left: auto; color: var(--paper); background: var(--ink); border: 0; }
.day.is-today h3 { border-bottom-color: var(--ink); }
.day.is-past { color: var(--g5); }
.day .info { color: var(--g4); }
.day .empty { color: var(--g3); }

/* ---------- events ---------- */

.ev, .note { --fg: var(--ink); --bg: var(--paper); color: var(--fg); background: var(--bg); }
.ev { padding: 0.5rem 0.75rem; border: 1px solid var(--ink); }
.ev header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.25rem; }
.ev p { overflow-wrap: anywhere; }
.ln { display: inline-block; margin-top: 0.25rem; text-underline-offset: 2px; }

.chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.chip { padding: 0 0.25rem; border: 1px solid currentColor; text-transform: uppercase; }

em { background: var(--fg, var(--ink)); color: var(--bg, var(--paper)); padding: 0 0.125rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* GR1 + GR2 together */
.v-both { --fg: var(--paper); --bg: var(--ink); border-color: var(--ink); }
/* GR1 only */
.v-gr1 { --bg: var(--g2); border-color: var(--g2); }
/* GR2 only */
.v-gr2 { border-color: var(--ink); }
/* personal / asynchronous work */
.v-self { border-style: dashed; border-color: var(--g5); }
/* in the company, travel, holiday */
.v-away {
  --fg: var(--g5);
  border-color: var(--g3);
  background: repeating-linear-gradient(135deg, var(--g2) 0 1px, var(--paper) 1px 6px);
}
.v-break { --fg: var(--g4); border-color: transparent; padding-block: 0; }
.v-break header { margin: 0; }
.v-plain { border-color: var(--g3); }
.v-banner { --fg: var(--paper); --bg: var(--ink); }

.is-struck { --fg: var(--g4); }
.is-struck.v-both { --fg: var(--g3); }
.day.is-past .ev:not(.v-both) { --fg: var(--g5); }

/* ---------- search ---------- */

.results { display: grid; gap: 0.5rem; max-width: 110rem; }
.res-count { color: var(--g4); margin-bottom: 1rem; }
.res-week { margin-top: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ink); text-transform: uppercase; }
.res {
  --fg: var(--ink); --bg: var(--paper);
  display: grid;
  grid-template-columns: 9rem 11rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink);
  color: var(--fg);
  background: var(--bg);
  text-decoration: none;
}
.res:hover .res-text { text-decoration: underline; }
.res-text { overflow-wrap: anywhere; }

/* ---------- footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 1rem 2rem;
  border-top: 1px solid var(--ink);
  color: var(--g4);
}
.foot a { color: var(--ink); }
.status { color: var(--g4); }
.status a { color: var(--ink); }

/* ---------- narrow screens ---------- */

@media (max-width: 899px) {
  .bar { padding: 0.75rem 1rem; gap: 0.75rem 1rem; }
  .tabs { flex: 1 0 100%; }
  .tabs a { flex: 1; text-align: center; padding-inline: 0.5rem; }
  .search { margin-left: 0; flex: 1 0 100%; }
  .search input { width: 100%; }
  main { padding: 1rem; }
  .wk-head { flex-wrap: wrap; gap: 0.75rem; }
  .wk-head h2 { font-size: 1.5rem; flex: 1; min-width: 0; white-space: normal; }
  .wk-head h2 span { display: block; margin: 0.25rem 0 0; font-size: 1rem; }
  .step { font-size: 1.5rem; }
  .jump { margin-left: 0; order: 5; }
  .days { grid-template-columns: 1fr; gap: 2rem; }
  .note.is-big { font-size: 1.5rem; padding: 1rem; }
  .res { grid-template-columns: auto 1fr; gap: 0.25rem 1rem; }
  .res-text, .res .chips { grid-column: 1 / -1; }
  .keys { display: none; }
}