/* Site-level overrides layered on top of the vendored classless Pico build (vendor/pico.classless.min.css). */
/* Colours, radii, and the font stack come from theme.css, which loads between Pico and this file. The rules
   here consume those --pico-* tokens; they should not introduce raw hexes of their own. */

/* Secondary metadata lines: dates, venues, match reasoning. */
.muted {
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}

/* Dashboard event cards: title and tracking signal on the left, the track/untrack control on the right. */
.event-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.event-row form,
.event-row p {
  margin-bottom: 0;
}

.event-row button {
  margin-bottom: 0;
  padding: 0.25rem 0.75rem;
  white-space: nowrap;
  width: auto;
}

/* Tracking signal on dashboard event cards: a pill, green while Digger is watching the event, muted otherwise.
   The leading dot is drawn by ::before rather than being a literal ● / ○ glyph in the template. */
.tracking-state {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.35rem;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}

.tracking-state::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 0.45em;
  width: 0.45em;
}

.tracking-state.on {
  background: color-mix(in srgb, var(--pico-ins-color) 12%, transparent);
  color: var(--pico-ins-color);
}

.tracking-state.off {
  border: 1px solid var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}

/* One-line forms: the first child stretches, the action button hugs the right edge. */
form.row {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 0;
}

form.row > * {
  margin-bottom: 0;
}

form.row > :first-child {
  flex: 1;
}

/* Pico sizes form buttons at 100% width; in a row the button should hug its label instead. */
form.row > button {
  width: auto;
}

/* The logo links home but is a mark plus wordmark, not a hyperlink: body text color, no underline, even on hover.
   Heavier than the nav links beside it, with the tracking pulled in slightly so it reads as one mark. The flex row
   is what spaces the pawprint tile from the wordmark — the whitespace between them in the markup collapses. */
nav a.brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  font-weight: 600;
  gap: 0.4rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* The favicon tile doubles as the nav mark, sized in em so it tracks the nav's font size. `display: block` takes it
   off the text baseline, leaving the flex row's align-items to centre it against the wordmark. */
nav a.brand img {
  display: block;
  height: 1.25em;
  width: 1.25em;
}

/* --- Warm Earth component treatments ------------------------------------------------------------------- */

/* Cards: a hairline border plus tighter padding than Pico's default, so a list of them stays dense.
   Pico's `article > header`/`footer` key their negative margins off --pico-block-spacing-horizontal (1rem);
   no template uses card sectioning today, but adding one would need that variable set to match this padding. */
article {
  border: 1px solid var(--pico-card-border-color);
  border-radius: calc(var(--pico-border-radius) * 1.5);
  margin-bottom: 0.75rem;
  padding: 1rem 1.25rem;
}

/* Card titles — an <a> wrapping just a <strong> — read as text until hovered, so a list of cards is not a wall
   of links. Deliberately structural: digest.html gets no markup changes, so there is no class to hang this on.
   In-sentence links (the event page's "Source:" domain) keep the normal accent treatment. */
article a:has(> strong) {
  color: inherit;
  text-decoration: none;
}

article a:has(> strong):hover {
  color: var(--pico-primary);
  text-decoration: underline;
}

/* Event updates are subordinate to the event they belong to: a quiet left-border timeline, not a stack of cards. */
article.update {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--pico-muted-border-color);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 1rem;
}

/* Sign-in is one short card, centred, rather than a full-bleed page holding a single paragraph. */
article.login-card {
  margin: 4rem auto 0;
  max-width: 24rem;
}

/* Secondary actions: Untrack, Retire, Sign out. The classless Pico build ships no secondary button class, so
   this outline variant is hand-rolled. Pico paints buttons from `[type=submit]` (0,1,0) and its :hover rule only
   swaps the --pico-* vars that rule reads, so these direct declarations at 0,1,1 hold in both states. box-shadow
   is left alone on purpose: that is where Pico's focus ring lives.
   `color: inherit`, not var(--pico-color) — Pico shadows --pico-color with --pico-primary-inverse (white) on
   every button, so reading the token here would paint white-on-transparent. */
button.quiet {
  background-color: transparent;
  border: 1px solid var(--pico-muted-border-color);
  color: inherit;
}

button.quiet:hover {
  border-color: var(--pico-primary);
  color: var(--pico-primary);
}

/* Destructive row actions use an icon-only button with an accessible label in the markup. */
button.icon-button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  padding: 0.4rem;
}

button.icon-button svg {
  height: 1.25rem;
  width: 1.25rem;
}

/* A hairline rule under the nav is the only thing separating the header band from the page. Pico gives both the
   header and each nav item vertical padding; removing the redundant outer padding keeps the brand near the top. */
body > header {
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding-block: 0;
}

/* Pico's default 1rem nav-item padding makes the bar much taller than its contents. Keep the row close to the
   wordmark's height while leaving enough breathing room for the action targets and their focus rings. */
body > header > nav {
  --pico-nav-element-spacing-vertical: 0.375rem;
  --pico-nav-link-spacing-vertical: 0.375rem;
}

/* Preferences and the POST-based Sign Out action share one navbar treatment and interaction model. Scope these
   rules to the page header so future in-page navigation can retain Pico's normal link and button styling. */
body > header > nav :is(a:not(.brand), button.nav-link) {
  align-items: center;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  color: var(--pico-muted-color);
  display: inline-flex;
  font-weight: 500;
  gap: 0.35rem;
  text-decoration: none;
}

body > header > nav form {
  display: flex;
  flex: none;
  margin-bottom: 0;
}

body > header > nav button.nav-link {
  margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
    calc(var(--pico-nav-link-spacing-horizontal) * -1);
  min-width: max-content;
  padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
  white-space: nowrap;
}

body > header > nav :is(a:not(.brand), button.nav-link):focus-visible {
  box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
}

body > header > nav :is(a:not(.brand), button.nav-link):is(:hover, :focus-visible),
body > header > nav a:not(.brand)[aria-current="page"] {
  background-color: color-mix(in srgb, var(--pico-primary) 8%, transparent);
  color: var(--pico-primary);
}

body > header > nav :is(a:not(.brand), button.nav-link):active {
  background-color: color-mix(in srgb, var(--pico-primary) 14%, transparent);
  color: var(--pico-primary-hover);
}

/* Heroicons are masks so the vendored SVGs follow the surrounding nav text colour in both colour modes. */
body > header > nav .nav-icon {
  -webkit-mask: center / contain no-repeat;
  background-color: currentColor;
  display: inline-block;
  flex: none;
  height: 1em;
  mask: center / contain no-repeat;
  width: 1em;
}

body > header > nav .nav-icon-preferences {
  -webkit-mask-image: url("/static/vendor/heroicons/16/solid/adjustments-horizontal.svg");
  mask-image: url("/static/vendor/heroicons/16/solid/adjustments-horizontal.svg");
}

body > header > nav .nav-icon-sign-out {
  -webkit-mask-image: url("/static/vendor/heroicons/16/solid/arrow-right-start-on-rectangle.svg");
  mask-image: url("/static/vendor/heroicons/16/solid/arrow-right-start-on-rectangle.svg");
}

/* Secondary region navigation: one horizontally scrollable row so every actively monitored region is directly
   selectable. Date-bounded regions carry a quieter second line without making permanent regions look unfinished. */
nav.region-nav {
  margin-bottom: var(--pico-block-spacing-vertical);
  overflow-x: auto;
}

nav.region-nav ul {
  align-items: stretch;
  flex: 1;
  flex-wrap: nowrap;
  margin-inline: 0;
  width: 100%;
}

nav.region-nav li {
  display: flex;
  flex: 1 0 5rem;
  min-width: 0;
  padding-block: 0.375rem;
}

nav.region-nav a {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

nav.region-nav a:is(:hover, :focus-visible),
nav.region-nav a[aria-current="page"] {
  background-color: color-mix(in srgb, var(--pico-primary) 8%, transparent);
  color: var(--pico-primary);
}

nav.region-nav a[aria-current="page"] {
  font-weight: 600;
}

nav.region-nav .region-window {
  color: var(--pico-muted-color);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.25;
}

nav.region-nav .region-window time {
  white-space: nowrap;
}

/* Tightened heading scale for information density, at a single weight across the whole scale. 600 is the
   heaviest IBM Plex Sans weight vendored, so it also has to be what `strong` resolves to: Pico's `bolder`
   would land on 700 (or 900 inside a heading) and make the browser synthesize a faux bold instead. */
b,
strong {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.05rem;
}