/* Additions to Pico CSS (vendor/pico-*.min.css). Colors come from Pico's
   variables, so light and dark mode work without extra rules. */

/* Navigation: brand and the active section. */
nav .brand { font-weight: 700; text-decoration: none; }
nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
body > footer { color: var(--pico-muted-color); }

/* Page and section heads: title left, actions right; wraps on phones. */
.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; margin-bottom: var(--pico-spacing);
}
.page-head h1, .page-head h2 { margin: 0; }
section { margin-top: calc(var(--pico-spacing) * 2); }

/* Groups of buttons. Smaller buttons in heads and rows. */
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.actions form { margin: 0; }
.actions.end { margin-top: calc(var(--pico-spacing) * 3); }
.page-head [role="button"], .actions [role="button"], .actions button, td button {
  padding: .4rem .9rem; margin: 0; width: auto;
}
td form, td fieldset { margin: 0; }
td.row-action { text-align: right; white-space: nowrap; width: 1%; }
/* Buttons in table rows are compact, so lists stay calm. */
td.row-action [role="button"], td.row-action button { padding: .2rem .6rem; font-size: .875em; }

/* Destructive actions: delete, retire. */
.danger {
  --pico-color: var(--pico-del-color);
  --pico-border-color: var(--pico-del-color);
  --pico-background-color: var(--pico-del-color);
}
.danger.outline, a.danger.outline { color: var(--pico-del-color); background: transparent; }
button.danger:not(.outline) { color: #fff; }

/* Warnings and validation errors. */
.alert, .alert a { color: var(--pico-del-color); }
[role="alert"] {
  color: var(--pico-del-color); border-left: 4px solid var(--pico-del-color);
  padding: .5rem .75rem; background: color-mix(in srgb, var(--pico-del-color) 8%, transparent);
}
.retired { border-left: 4px solid var(--pico-muted-border-color); padding: .5rem .75rem; color: var(--pico-muted-color); }

/* Required fields. */
.req { color: var(--pico-del-color); margin-left: .15em; }

/* Numbers line up in tables. */
td { font-variant-numeric: tabular-nums; }
td small, label small { color: var(--pico-muted-color); }

/* Details as a two-column list. */
dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
dt { font-weight: 600; }
dd { margin: 0; }

fieldset { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: .5rem 1rem 0; }
legend { font-weight: 600; padding-inline: .25rem; }

/* Value rows in forms: compact inputs, the label column gets the space. */
.value-rows td { padding: .25rem; }
.value-rows input, .value-rows select { margin: 0; }
.value-rows td:nth-child(2) { width: 10rem; }
.value-rows td:nth-child(3), .value-rows td:nth-child(4), .value-rows td:nth-child(5) { width: 6rem; }

/* Many checkboxes in columns, filled top to bottom so alphabetical order
   reads down each column, e.g. the component types of a step. */
.checkbox-grid { columns: 12rem; column-gap: 1rem; margin-bottom: .5rem; }
.checkbox-grid label { break-inside: avoid; }

/* Measured values in maintenance tables. */
td input[name^="measured_"] { margin: 0; max-width: 8rem; }
ol.steps h4 { margin: var(--pico-spacing) 0 .25rem; font-size: 1em; }

/* Texts with line breaks, e.g. step instructions. */
.multiline { white-space: pre-line; }

/* Steps of the catalog or a maintenance: numbered cards. */
ol.steps { padding-left: 1.5rem; }
ol.steps > li { list-style-position: outside; }
ol.steps > li::marker { font-weight: 700; }
ol.steps article { margin-bottom: var(--pico-spacing); }
ol.steps article > header { margin-bottom: var(--pico-spacing); }
ol.steps header [role="button"], ol.steps header button { padding: .2rem .6rem; font-size: .875em; }

/* Catalog and maintenance: a phase is a section with an underlined title,
   its assembly groups have small muted subheadings. */
.phase > h2 { padding-bottom: .25rem; border-bottom: 2px solid var(--pico-primary-border); }
h3.assembly {
  margin: calc(var(--pico-spacing) * 1.25) 0 .5rem;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pico-muted-color);
}

/* A module hint on a step, e.g. carbon paste on clamps. */
p.hint { padding-left: .75rem; border-left: 3px solid var(--pico-primary-border); }

/* A note behind a checkbox label stays inline (Pico shows small after an
   input as a block hint). */
label > [type="checkbox"] + small { display: inline; width: auto; margin: 0; }

/* Login and setup: a narrow card. */
article.auth { max-width: 28rem; margin: calc(var(--pico-spacing) * 2) auto; }
article.auth h1 { font-size: 1.75rem; }
article.auth button { width: 100%; }
.divider { text-align: center; color: var(--pico-muted-color); margin: var(--pico-spacing) 0; }

/* Logout sits in the navigation as a small button. */
nav form.logout { margin: 0; }
nav form.logout button { padding: .3rem .8rem; margin: 0; font-size: .875em; }