/* Spotter on top of Pico.css: a dark, compact "range" theme with an amber
   accent. Pico's own variables carry the colours, so its forms, buttons and
   tables follow without extra rules. Keep the rest small and component-like. */

/* ---- Theme ------------------------------------------------------------ */

/* :root[data-theme] beats Pico's own [data-theme=dark] and its responsive
   font sizes, so these win everywhere. */
:root[data-theme="dark"] {
  --sp-bg: #141517;
  --sp-raise: #1c1d20;
  --sp-raise-2: #25262a;
  --sp-line: #2f3135;
  --sp-line-strong: #43454b;
  --sp-text: #ecebe6;
  --sp-muted: #a09f99;
  --sp-accent: #f2a43a;
  --sp-accent-hover: #f7b95f;
  --sp-accent-ink: #1f1400;
  --sp-accent-soft: rgba(242, 164, 58, 0.14);
  --sp-danger: #f08a80;
  --sp-danger-soft: rgba(240, 138, 128, 0.14);
  --sp-ok: #86c99a;
  --sp-ok-soft: rgba(134, 201, 154, 0.13);
  --sp-info: #86b4e6;
  --sp-info-soft: rgba(134, 180, 230, 0.14);
  --sp-radius: 6px;
  --sp-tabbar-height: 3.75rem;

  --pico-font-size: 100%;
  --pico-line-height: 1.45;
  --pico-border-radius: var(--sp-radius);
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: 0.875rem;
  --pico-form-element-spacing-vertical: 0.6rem;
  --pico-form-element-spacing-horizontal: 0.75rem;
  --pico-grid-row-gap: 0; /* form fields already keep their own space below */

  --pico-background-color: var(--sp-bg);
  --pico-color: var(--sp-text);
  --pico-muted-color: var(--sp-muted);
  --pico-muted-border-color: var(--sp-line);
  --pico-text-selection-color: var(--sp-accent-soft);
  --pico-h1-color: var(--sp-text);
  --pico-h2-color: var(--sp-muted);
  --pico-h3-color: var(--sp-text);

  --pico-primary: var(--sp-accent);
  --pico-primary-background: var(--sp-accent);
  --pico-primary-border: var(--sp-accent);
  --pico-primary-underline: rgba(242, 164, 58, 0.45);
  --pico-primary-hover: var(--sp-accent-hover);
  --pico-primary-hover-background: var(--sp-accent-hover);
  --pico-primary-hover-border: var(--sp-accent-hover);
  --pico-primary-hover-underline: var(--sp-accent-hover);
  --pico-primary-focus: rgba(242, 164, 58, 0.4);
  --pico-primary-inverse: var(--sp-accent-ink);

  --pico-secondary: #c4c3bd;
  --pico-secondary-background: var(--sp-raise-2);
  --pico-secondary-border: var(--sp-line-strong);
  --pico-secondary-underline: rgba(196, 195, 189, 0.4);
  --pico-secondary-hover: var(--sp-text);
  --pico-secondary-hover-background: #2e2f34;
  --pico-secondary-hover-border: #5a5c62;
  --pico-secondary-focus: rgba(196, 195, 189, 0.3);
  --pico-secondary-inverse: var(--sp-text);

  --pico-card-background-color: var(--sp-raise);
  --pico-card-border-color: var(--sp-line);
  --pico-card-sectioning-background-color: var(--sp-raise-2);
  --pico-card-box-shadow: none;
  --pico-dropdown-background-color: var(--sp-raise);
  --pico-dropdown-border-color: var(--sp-line);

  --pico-form-element-background-color: #18191c;
  --pico-form-element-selected-background-color: var(--sp-raise-2);
  --pico-form-element-border-color: var(--sp-line-strong);
  --pico-form-element-color: var(--sp-text);
  --pico-form-element-placeholder-color: #75746f;
  --pico-form-element-active-background-color: #18191c;
  --pico-form-element-focus-color: var(--sp-accent);
  --pico-form-element-invalid-border-color: #b5584f;
  --pico-form-element-invalid-active-border-color: var(--sp-danger);
  --pico-switch-checked-background-color: var(--sp-accent);

  --pico-table-border-color: var(--sp-line);
  --pico-table-row-stripped-background-color: rgba(255, 255, 255, 0.02);
  --pico-mark-background-color: var(--sp-accent-soft);
  --pico-mark-color: var(--sp-accent);
  --pico-ins-color: var(--sp-ok);
  --pico-del-color: var(--sp-danger);
  --pico-progress-background-color: var(--sp-raise-2);
  --pico-progress-color: var(--sp-accent);
  --pico-accordion-active-summary-color: var(--sp-accent);
}

body {
  font-variant-numeric: tabular-nums;
}

h1 {
  --pico-font-size: 1.5rem;
  letter-spacing: -0.01em;
}

/* Section headings are quiet labels, like the signs along a range. */
h2 {
  --pico-font-size: 0.8125rem;
  --pico-typography-spacing-top: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.6rem;
}

h3 {
  --pico-font-size: 1.0625rem;
  --pico-typography-spacing-top: 1.25rem;
}

/* The body's first section starts without the extra heading space. */
main > h1:first-child,
main > .pagehead:first-child h1 {
  margin-top: 0;
}

small,
.muted {
  color: var(--pico-muted-color);
}

:is(button, [role="button"], [type="submit"], [type="button"], [type="reset"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 600;
}

button.danger {
  --pico-background-color: var(--sp-danger);
  --pico-border-color: var(--sp-danger);
  --pico-color: #2a0d0a;
}

button.danger:is(:hover, :active, :focus) {
  --pico-background-color: #f4a49c;
  --pico-border-color: #f4a49c;
}

button.small,
[role="button"].small {
  padding: 0.35rem 0.7rem;
  font-size: 0.875rem;
}

/* Icons: stroke drawings in the colour of the text around them. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden,
button.visually-hidden,
[type="submit"].visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Top bar and sections menu ------------------------------------------ */

.topbar {
  background: var(--sp-raise);
  border-bottom: 1px solid var(--sp-line);
}

.topbar > .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--sp-text);
  text-decoration: none;
}

.brand .icon {
  color: var(--sp-accent);
  width: 1.5rem;
  height: 1.5rem;
}

.usermenu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.usermenu li {
  margin: 0;
  list-style: none;
}

.usermenu .user-name a {
  display: block;
  max-width: 11rem;
  padding: 0.35rem 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: var(--sp-radius);
  color: var(--sp-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.usermenu .user-name a:hover,
.usermenu .user-name a[aria-current="page"] {
  color: var(--sp-text);
  background: var(--sp-raise-2);
}

.usermenu form {
  margin: 0;
}

.iconbutton {
  margin: 0;
  padding: 0.45rem;
  border: 0;
  background: transparent;
  color: var(--sp-muted);
}

.iconbutton:hover,
.iconbutton:focus-visible {
  background: var(--sp-raise-2);
  color: var(--sp-text);
}

/* Pico gives every nav list and item its own spacing; reset it here. */
.topbar nav.tabbar ul,
.topbar nav.tabbar ul:first-of-type,
.topbar nav.tabbar ul:last-of-type {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
}

.topbar nav.tabbar li {
  margin: 0;
  padding: 0;
}

.topbar nav.tabbar a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: var(--sp-radius);
  color: var(--sp-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.topbar nav.tabbar a:hover {
  color: var(--sp-text);
  background: var(--sp-raise-2);
}

.topbar nav.tabbar a[aria-current="page"] {
  color: var(--sp-accent);
  background: var(--sp-accent-soft);
}

/* On phones the sections sit in a bar at the bottom, in reach of a thumb. */
@media (max-width: 767px) {
  body {
    padding-bottom: calc(var(--sp-tabbar-height) + 0.5rem);
  }

  .topbar > .container {
    min-height: 3.25rem;
  }

  .topbar nav.tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    background: var(--sp-raise);
    border-top: 1px solid var(--sp-line);
  }

  .topbar nav.tabbar ul,
  .topbar nav.tabbar ul:first-of-type,
  .topbar nav.tabbar ul:last-of-type {
    width: 100%;
    gap: 0;
  }

  .topbar nav.tabbar li {
    flex: 1 1 0;
    min-width: 0;
  }

  .topbar nav.tabbar a {
    flex-direction: column;
    gap: 0.2rem;
    height: var(--sp-tabbar-height);
    justify-content: center;
    padding: 0 0.1rem;
    border-radius: 0;
    font-size: 0.6875rem;
  }

  .topbar nav.tabbar a .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .topbar nav.tabbar a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar nav.tabbar a:hover {
    background: transparent;
  }

  .topbar nav.tabbar a[aria-current="page"] {
    background: transparent;
    box-shadow: inset 0 2px 0 var(--sp-accent);
  }
}

/* Keep lines readable on very wide screens. */
@media (min-width: 1024px) {
  .container {
    max-width: 60rem;
  }
}

body > footer {
  padding-block: 1.5rem;
  text-align: center;
  color: var(--sp-muted);
}

/* ---- Page parts --------------------------------------------------------- */

main.container {
  padding-top: 1.25rem;
}

.pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.pagehead h1 {
  margin: 0;
}

.pagehead .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.pagehead [role="button"] {
  margin: 0;
}

.subtitle {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  color: var(--sp-muted);
}

.back {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.back a {
  color: var(--sp-muted);
  text-decoration: none;
}

.back a:hover {
  color: var(--sp-text);
}

.flash {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--sp-radius);
  background: var(--sp-ok-soft);
  color: var(--sp-ok);
}

/* After saving a session that earned something: the message, a row per
   achievement with its ribbon or medal, and the link to the overview. */
.flash-achievements {
  display: block;
  margin-bottom: var(--pico-typography-spacing-vertical);
}

.flash-achievements > p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.flash-achievements ul {
  margin: 0 0 0.5rem;
  padding: 0;
}

.flash-achievements li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  list-style: none;
  color: var(--sp-text);
}

.flash-achievements .ribbon {
  flex: none;
  width: 2.75rem;
}

.flash-achievements .medal {
  width: 2rem;
  height: 2rem;
  margin-inline: 0.375rem;
  border-width: 2px;
}

.flash-achievements .medal .icon {
  width: 1rem;
  height: 1rem;
}

.flash-achievements .label {
  color: var(--sp-muted);
}

.flash-achievements a {
  color: var(--sp-ok);
  font-size: 0.875rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.actions [role="button"],
.actions button {
  width: auto;
  margin: 0;
}

/* On phones the buttons of a row share it, so each is easy to hit. */
@media (max-width: 575px) {
  .actions > [role="button"],
  .actions > button,
  .actions > form {
    flex: 1 1 auto;
  }

  .actions > form button {
    width: 100%;
  }
}

.actions > form {
  margin: 0;
}

.empty {
  padding: 1.25rem;
  border: 1px dashed var(--sp-line-strong);
  border-radius: var(--sp-radius);
  color: var(--sp-muted);
  text-align: center;
}

/* Forms and confirmations: not wider than reads well. */
main > form,
main > article,
main > details,
main > .narrow {
  max-width: 42rem;
}

article {
  border: 1px solid var(--sp-line);
}

/* ---- The big button on the dashboard ------------------------------------ */

.cta {
  width: 100%;
  margin-bottom: 0.5rem;
  padding-block: 0.9rem;
  font-size: 1.125rem;
}

/* ---- Key figures --------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: var(--pico-spacing);
}

.stat {
  padding: 0.7rem 0.5rem;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.15;
}

.stat small {
  display: block;
  font-size: 0.75rem;
  line-height: 1.3;
}

.stat.accent strong {
  color: var(--sp-accent);
}

.stat.danger strong {
  color: var(--sp-danger);
}

.stat.ok strong {
  color: var(--sp-ok);
}

.stat .when {
  margin-top: 0.15rem;
  font-size: 0.6875rem;
}

/* A key figure that links to where it comes from, such as a record. */
a.stat {
  color: inherit;
  text-decoration: none;
}

a.stat:hover {
  border-color: var(--sp-accent);
}

/* ---- Lists of rows (sessions, ammo, ...) --------------------------------- */

ul.list {
  margin: 0 0 var(--pico-spacing);
  padding: 0;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
  overflow: hidden;
}

ul.list > li {
  margin: 0;
  list-style: none;
}

ul.list > li + li {
  border-top: 1px solid var(--sp-line);
}

.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  color: var(--sp-text);
  text-decoration: none;
}

a.row:hover {
  background: var(--sp-raise-2);
}

a.row:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: -2px;
}

.row-main {
  flex: 1;
  min-width: 0;
}

.row-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.row-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-main .meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-figure {
  text-align: right;
  white-space: nowrap;
}

.row-figure small {
  display: block;
  font-size: 0.75rem;
}

.unit {
  color: var(--sp-muted);
  font-size: 0.8125rem;
}

.row-figure .score {
  color: var(--sp-accent);
  font-weight: 600;
}

.row > .icon {
  color: var(--sp-line-strong);
}

.row form,
.row form button {
  margin: 0;
}

.list-total {
  margin-bottom: 0.5rem;
}

.list-total strong {
  color: var(--sp-accent);
}

/* ---- Badges: always text, the colour is extra ---------------------------- */

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--sp-raise-2);
  color: var(--sp-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.1em;
}

.badge-danger {
  background: var(--sp-danger-soft);
  color: var(--sp-danger);
}

.badge-warn {
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

.badge-ok,
.status-active {
  background: var(--sp-ok-soft);
  color: var(--sp-ok);
}

.badge-info {
  background: var(--sp-info-soft);
  color: var(--sp-info);
}

.warning {
  color: var(--sp-danger);
}

/* ---- Cards (firearms, cleaning, disciplines) ----------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin-bottom: var(--pico-spacing);
}

.cards article {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.85rem;
}

.cards article > :last-child {
  margin-bottom: 0;
}

.cards article form {
  margin-top: auto;
  margin-bottom: 0;
}

.cards article form button {
  width: 100%;
  margin: 0;
}

.card-title {
  margin: 0 0 0.35rem;
  color: var(--sp-text);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-link:hover .card-title {
  color: var(--sp-accent);
}

/* Cards with a photo: a row with a small square on phones, a tile with the
   photo on top from 576px. */
.card-media {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sp-raise-2);
  color: var(--sp-line-strong);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-media .icon {
  width: 2rem;
  height: 2rem;
}

.no-photo {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.no-photo small {
  color: var(--sp-muted);
}

.card-text {
  display: block;
  min-width: 0;
}

.card-text .meta {
  display: block;
  margin-bottom: 0.3rem;
}

.media-cards {
  gap: 0.5rem;
}

.media-cards article {
  padding: 0;
  overflow: hidden;
}

.media-cards .card-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem;
}

.media-cards .card-media {
  flex: none;
  width: 4.5rem;
  aspect-ratio: 1;
  border-radius: var(--sp-radius);
}

.media-cards .no-photo small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 576px) {
  .media-cards {
    gap: 0.75rem;
  }

  .media-cards .card-link {
    display: block;
    padding: 0;
  }

  .media-cards .card-media {
    width: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
  }

  .media-cards .card-media .icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .media-cards .no-photo small {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
  }

  .media-cards .card-text {
    padding: 0.75rem 0.85rem 0.85rem;
  }
}

.cards p {
  margin-bottom: 0.3rem;
}

.cards small {
  line-height: 1.35;
}

.cards article form {
  padding-top: 0.4rem;
}

/* Dashboard: what needs doing comes first, with an amber edge. */
.attention {
  padding-left: 0.75rem;
  border-left: 3px solid var(--sp-danger);
}

/* ---- Details: facts, tables, photos -------------------------------------- */

dl.facts {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  margin: 0 0 var(--pico-spacing);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
  overflow: hidden;
}

dl.facts dt,
dl.facts dd {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-top: 1px solid var(--sp-line);
}

dl.facts dt {
  color: var(--sp-muted);
  font-size: 0.875rem;
}

dl.facts dt:first-of-type,
dl.facts dt:first-of-type + dd {
  border-top: 0;
}

dd.notes {
  white-space: pre-line;
}

.meta span + span::before {
  content: "\00b7";
  margin-inline: 0.4em;
}

.label::after {
  content: ":";
}

.overflow-auto {
  margin-bottom: var(--pico-spacing);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
}

.overflow-auto table {
  margin: 0;
}

table {
  --pico-background-color: var(--sp-raise);
}

th,
td {
  padding: 0.5rem 0.7rem;
}

thead th {
  color: var(--sp-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

tfoot th {
  font-weight: 700;
}

th.num,
td.num {
  text-align: right;
  white-space: nowrap;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--pico-spacing);
}

.gallery img {
  object-fit: cover;
  border-radius: var(--sp-radius);
}

/* ---- Filters and fold-outs ----------------------------------------------- */

nav ul.filters,
nav ul.filters:first-of-type,
nav ul.filters:last-of-type {
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

nav ul.filters li {
  padding: 0;
}

nav ul.filters a {
  margin: 0;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--sp-line-strong);
  border-radius: 999px;
  color: var(--sp-muted);
  font-size: 0.875rem;
  text-decoration: none;
}

nav ul.filters a:hover {
  color: var(--sp-text);
}

nav ul.filters a[aria-current="page"] {
  border-color: var(--sp-accent);
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

details > summary[role="button"] {
  display: inline-flex;
  width: auto;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.9375rem;
}

details[open] > form {
  margin-bottom: var(--pico-spacing);
  padding: 0.85rem;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
}

.foldouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 0 0.75rem;
  align-items: start;
}

/* ---- Cleaning status ----------------------------------------------------- */

.clean-status {
  margin-bottom: 0.35rem;
}

.clean-needed {
  --pico-progress-color: var(--sp-danger);
}

.clean-needed .badge {
  background: var(--sp-danger-soft);
  color: var(--sp-danger);
}

.clean-almost .badge {
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
}

.clean-ok {
  --pico-progress-color: var(--sp-ok);
}

.clean-ok .badge {
  background: var(--sp-ok-soft);
  color: var(--sp-ok);
}

.clean progress {
  height: 0.375rem;
  margin-bottom: 0.4rem;
}

.of::before {
  content: " / ";
}

/* ---- Session form: series rows and feeling buttons ----------------------- */

.series-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 0.5rem;
  align-items: start;
}

.series-row label {
  min-width: 0;
}

.series-row button {
  margin-top: calc(1.45rem + var(--pico-spacing) / 4);
  padding-inline: 0.75rem;
}

.feeling {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.feeling legend {
  flex-basis: 100%;
}

.feeling label {
  margin: 0;
}

.feeling input {
  position: absolute;
  opacity: 0;
}

.feeling span {
  display: inline-block;
  min-width: 2.75rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--pico-form-element-border-color);
  border-radius: var(--sp-radius);
  background: var(--pico-form-element-background-color);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.feeling input:checked + span {
  border-color: var(--sp-accent);
  background: var(--sp-accent);
  color: var(--sp-accent-ink);
}

.feeling input:focus-visible + span {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

/* The ammo follows the firearm (ADR-0020). When the form changed the ammo by
   itself, the select lights up briefly; the note under it says what changed
   and stays until the form is saved. */
select.changed {
  animation: field-changed 2.5s ease-out;
}

@keyframes field-changed {
  from {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 0.3rem var(--sp-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  select.changed {
    animation: none;
    border-color: var(--sp-accent);
  }
}

/* Stays in the page (also when empty) so screen readers announce new text. */
.field-note {
  margin-top: calc(var(--pico-spacing) * -0.5);
  font-size: 0.875em;
  color: var(--sp-muted);
}

.field-note:empty {
  margin: 0;
}

.field-note strong {
  color: var(--sp-accent);
}

.field-note .warning {
  display: block;
}

/* ---- Login --------------------------------------------------------------- */

.login {
  max-width: 24rem;
  margin: 2rem auto;
}

.login-brand {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.login-brand .icon {
  width: 3rem;
  height: 3rem;
  color: var(--sp-accent);
}

.login-brand h1 {
  margin: 0;
  --pico-font-size: 1.75rem;
}

.login-brand p {
  margin: 0;
  color: var(--sp-muted);
}

.login article {
  padding: 1.25rem;
}

.login button[type="submit"] {
  width: 100%;
}

/* ---- Statistics and charts (ADR-0018) ------------------------------------ */

/* Charts sit side by side as long as each keeps about 20rem, so the text in
   their 400-unit viewBox stays about the same size on every screen. */
.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 0.75rem;
  align-items: start;
  margin-bottom: var(--pico-spacing);
}

.chart-card {
  min-width: 0;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
}

.chart-card.wide {
  grid-column: 1 / -1;
}

.chart-card figcaption {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.chart-card figcaption small {
  margin-left: 0.25rem;
  font-weight: 400;
}

.chart-card .hint {
  margin: -0.25rem 0 0.5rem;
  line-height: 1.35;
}

.chart-card .stats {
  margin-bottom: 0.5rem;
}

.chart-card .empty {
  margin: 0;
  padding: 1rem;
}

.chart-card details {
  margin: 0.5rem 0 0;
}

.chart-card details summary {
  color: var(--sp-muted);
  font-size: 0.8125rem;
}

.chart-card details table {
  margin: 0.5rem 0 0;
}

table.compact {
  font-size: 0.875rem;
}

table.compact :is(th, td) {
  padding: 0.3rem 0.5rem;
}

.stats-note {
  margin-top: -0.25rem;
  line-height: 1.35;
}

nav ul.filters a .count {
  margin-left: 0.2rem;
  color: var(--sp-muted);
  font-size: 0.75rem;
}

nav ul.filters.filters-small a {
  padding: 0.2rem 0.6rem;
  font-size: 0.8125rem;
}

/* The drawing itself. Colours: amber is your own trend and training, blue
   is competition (and maintenance), green is a record. */
svg.chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

:is(svg.chart, svg.heatmap) text {
  fill: var(--sp-muted);
  font-size: 11px;
}

/* Phones scale the viewBox down a little; the labels make up for it. */
@media (max-width: 575px) {
  svg.chart text {
    font-size: 13px;
  }
}

svg.chart .tick-strong {
  fill: var(--sp-text);
}

svg.chart .tick-small {
  font-size: 10px;
}

svg.chart .grid {
  stroke: var(--sp-line);
  stroke-width: 1;
}

svg.chart .baseline {
  stroke: var(--sp-line-strong);
  stroke-width: 1;
}

svg.chart polyline {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}

svg.chart .line-trend {
  stroke: var(--sp-accent);
  stroke-width: 2.5;
}

svg.chart .line-best {
  stroke: var(--sp-ok);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

svg.chart .line-plain {
  stroke: var(--sp-line-strong);
  stroke-width: 1.5;
}

svg.chart .dot {
  fill: var(--sp-raise);
  stroke: var(--sp-text);
  stroke-width: 1.5;
}

svg.chart .dot-strong {
  fill: var(--sp-accent);
  stroke: var(--sp-accent);
}

svg.chart .dot-alt {
  fill: var(--sp-info);
  stroke: var(--sp-info);
}

svg.chart .dot-best {
  stroke: var(--sp-ok);
  stroke-width: 2.5;
}

svg.chart .dot-uncertain {
  fill: var(--sp-raise);
  stroke: var(--sp-accent);
  stroke-dasharray: 2 2;
}

svg.chart a:hover .dot,
svg.chart a:focus-visible .dot {
  stroke: var(--sp-accent-hover);
  stroke-width: 3;
}

svg.chart .bar {
  fill: var(--sp-accent);
}

svg.chart .bar-alt {
  fill: var(--sp-info);
}

/* An invisible column over the full height, so the tooltip shows anywhere above a month. */
svg.chart .hit {
  fill: transparent;
}

svg.chart .column:hover .hit {
  fill: rgba(255, 255, 255, 0.04);
}

svg.chart.spark {
  margin-top: 0.25rem;
}

/* The activity calendar keeps readable squares on a phone; it scrolls,
   starting at the most recent weeks on the right. */
.heatmap-scroll {
  overflow-x: auto;
  direction: rtl;
}

.heatmap-scroll > svg {
  direction: ltr;
}

svg.heatmap {
  display: block;
  width: 100%;
  min-width: 34rem;
  max-width: 52rem;
  height: auto;
}

.cell,
.cell-key {
  fill: var(--sp-raise-2);
  background: var(--sp-raise-2);
}

.cell.level-1,
.cell-key.level-1 {
  fill: rgba(242, 164, 58, 0.28);
  background: rgba(242, 164, 58, 0.28);
}

.cell.level-2,
.cell-key.level-2 {
  fill: rgba(242, 164, 58, 0.5);
  background: rgba(242, 164, 58, 0.5);
}

.cell.level-3,
.cell-key.level-3 {
  fill: rgba(242, 164, 58, 0.75);
  background: rgba(242, 164, 58, 0.75);
}

.cell.level-4,
.cell-key.level-4 {
  fill: var(--sp-accent);
  background: var(--sp-accent);
}

/* Legends: a small key in the colour of the mark, then its name. */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  margin: 0.4rem 0 0;
  color: var(--sp-muted);
  font-size: 0.8125rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.key {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

.key-bar {
  background: var(--sp-accent);
}

.key-bar-alt {
  background: var(--sp-info);
}

.key-dot,
.key-dot-alt,
.key-dot-uncertain {
  border-radius: 50%;
}

.key-dot {
  border: 1.5px solid var(--sp-text);
  background: var(--sp-raise);
}

.key-dot-alt {
  background: var(--sp-info);
}

.key-dot-uncertain {
  border: 1.5px dashed var(--sp-accent);
}

.key-trend,
.key-best {
  height: 0;
  border-radius: 0;
}

.key-trend {
  border-top: 3px solid var(--sp-accent);
}

.key-best {
  border-top: 2px dashed var(--sp-ok);
}

.heat-legend {
  justify-content: flex-end;
  gap: 0.2rem;
}

.heat-legend small {
  margin: 0 0.2rem;
}

.cell-key {
  width: 0.7rem;
  height: 0.7rem;
}

/* Lists with a bar per row: name and number on a line, the bar below. */
.barlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.barlist li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
}

.barlist-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barlist-value {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.barlist-value small {
  font-weight: 400;
}

.barlist .rowbar,
.barlist-meta {
  grid-column: 1 / -1;
}

.rowbar {
  display: block;
  width: 100%;
  height: 0.375rem;
}

.rowbar-track {
  fill: var(--sp-raise-2);
}

.rowbar-fill {
  fill: var(--sp-accent);
}

/* A small chart in a card that links on, as on the dashboard. */
.spark-card {
  display: block;
  margin-bottom: var(--pico-spacing);
  padding: 0.7rem 0.75rem 0.5rem;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
  color: inherit;
  text-decoration: none;
}

a.spark-card:hover {
  border-color: var(--sp-accent);
}

.spark-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--sp-muted);
}

.spark-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--sp-accent);
}

/* ---- Licences ------------------------------------------------------------ */

/* The licence year shown, with the previous and next year below it. */
.yearnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-bottom: 0.75rem;
}

.yearnav strong {
  flex-basis: 100%;
}

.yearnav a {
  white-space: nowrap;
}

/* A licence row on the dashboard keeps its deadline readable: the line wraps
   instead of ending in an ellipsis next to the badge. The parts are written
   without a space between them, so each becomes a box the line can break
   around, not inside. */
.row-main .meta.wrap {
  white-space: normal;
}

.row-main .meta.wrap > span {
  display: inline-block;
}

/* A date never breaks at its hyphens. */
time {
  white-space: nowrap;
}

/* ---- Achievements (ADR-0027) -------------------------------------------- */

/* The tier and stripe colours live here only; templates name them by class. */
:root[data-theme="dark"] {
  --sp-bronze: #c8834a;
  --sp-silver: #b9bab4;
  --sp-gold: #e2b23a;
  --sp-platinum: #86b9cc;
}

.hidden-note {
  padding: 0.6rem 0.8rem;
  border-radius: var(--sp-radius);
  background: var(--sp-raise);
  color: var(--sp-muted);
}

/* Ribbons and medals in a rack: four in a row on a phone. */
ul.rack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem 0.5rem;
  margin: 0 0 var(--pico-spacing);
  padding: 0;
}

@media (min-width: 576px) {
  ul.rack {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  }
}

ul.rack > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  list-style: none;
  text-align: center;
}

ul.rack small {
  color: var(--sp-muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

/* A rack item that links (the ribbons on a session's page). */
ul.rack > li > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  text-decoration: none;
}

/* The stars of a firearm on its page, with its rounds towards the next. */
.firearm-stars {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.firearm-stars a {
  text-decoration: none;
}

.times {
  color: var(--sp-text);
  font-weight: 600;
  white-space: nowrap;
}

.ribbon {
  display: block;
  width: 100%;
  max-width: 4.5rem;
  height: auto;
  aspect-ratio: 60 / 18;
  border-radius: 2px;
}

.rb-blue { fill: #185fa5; }
.rb-cream { fill: #f1efe8; }
.rb-red { fill: #a32d2d; }
.rb-green { fill: #3b6d11; }
.rb-amber { fill: #ef9f27; }
.rb-pine { fill: #085041; }
.rb-mint { fill: #5dcaa5; }
.rb-graphite { fill: #444441; }
.rb-coral { fill: #e24b4a; }

/* A medal: a ring in the colour of its highest tier around its glyph. */
.medal {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid var(--sp-line-strong);
  border-radius: 50%;
  background: var(--sp-raise);
  color: var(--sp-muted);
}

.medal .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.medal.tier-bronze { border-color: var(--sp-bronze); color: var(--sp-bronze); }
.medal.tier-silver { border-color: var(--sp-silver); color: var(--sp-silver); }
.medal.tier-gold { border-color: var(--sp-gold); color: var(--sp-gold); }
.medal.tier-platinum { border-color: var(--sp-platinum); color: var(--sp-platinum); }

/* Not earned yet: only the drawing fades, never the text next to it. */
.medal.locked {
  border-style: dashed;
  color: var(--sp-line-strong);
}

.next-up progress {
  height: 0.375rem;
  margin: 0.35rem 0 0.15rem;
}

/* The stars of a firearm. */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--sp-gold);
}

.stars .icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.stars.none {
  color: var(--sp-line-strong);
}

.stars.none .icon {
  fill: none;
}

.stars .times {
  margin-left: 0.2rem;
  color: var(--sp-gold);
}

/* The list: one tab per category. On a phone the tabs are one row you scroll
   sideways (nine would wrap over three lines); from 768px a side column. */
nav ul.category-tabs,
nav ul.category-tabs:first-of-type,
nav ul.category-tabs:last-of-type {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

nav ul.category-tabs a {
  display: block;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .tabbed {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .tabbed > nav {
    display: block;
  }

  nav ul.category-tabs,
  nav ul.category-tabs:first-of-type,
  nav ul.category-tabs:last-of-type {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
  }

  nav ul.category-tabs li {
    display: block;
  }

  nav ul.category-tabs a {
    display: flex;
    justify-content: space-between;
    border-color: transparent;
    border-radius: var(--sp-radius);
  }
}

.category > h2:first-child {
  margin-top: 0;
}

.category h3 {
  margin: 1rem 0 0.4rem;
  color: var(--sp-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

ul.list.achievements > li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
}

.achievement-graphic {
  display: flex;
  flex: none;
  justify-content: center;
  width: 2.75rem;
}

.achievement-graphic .ribbon {
  width: 2.5rem;
  margin-top: 0.55rem;
}

:is(.next-up, .achievements) .medal {
  width: 2.25rem;
  height: 2.25rem;
  border-width: 2px;
}

:is(.next-up, .achievements) .medal .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.achievement-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}

.achievement-name {
  font-weight: 600;
}

.achievement-value {
  margin-left: auto;
  color: var(--sp-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.achievement-criterion {
  display: block;
  color: var(--sp-muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.achievement progress {
  height: 0.3rem;
  margin: 0.45rem 0 0.15rem;
}

/* Not earned yet: a grey drawing and muted text, never transparency. */
.achievement.off .achievement-name {
  color: var(--sp-muted);
  font-weight: 500;
}

.achievement.off progress {
  --pico-progress-color: var(--sp-muted);
}

.achievement.off .ribbon rect {
  fill: #55575d;
}

.achievement.off .ribbon rect + rect {
  fill: #7b7c82;
}

/* ---- Print --------------------------------------------------------------- */

/* Paper gets dark text on white and none of the menus, links between years
   or buttons. The licence overview is meant to be printed (ADR-0021); the
   other pages print the same way. */
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --sp-bg: #fff;
    --sp-raise: #fff;
    --sp-raise-2: #eee;
    --sp-line: #bbb;
    --sp-line-strong: #888;
    --sp-text: #000;
    --sp-muted: #444;
    --sp-accent: #8a5200;
    --sp-danger: #a3241a;
    --sp-ok: #1e6b35;
    --sp-info: #1d4f8a;
    --pico-form-element-background-color: #fff;
  }

  .topbar,
  footer,
  .back,
  .flash,
  .actions,
  .yearnav a,
  .pagehead a[role="button"],
  button {
    display: none !important;
  }

  body {
    padding-bottom: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  tr {
    break-inside: avoid;
  }
}