/* Small additions on top of Pico's classless styles. */
:root {
  --sc-ok: #2e7d32;
  --sc-warn: #b26a00;
  --sc-error: #c62828;
}

header nav .brand { text-decoration: none; }

form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; width: auto; }

button.link {
  background: none;
  border: none;
  padding: 0;
  color: var(--pico-primary);
  text-decoration: underline;
  cursor: pointer;
}
button.danger { --pico-background-color: var(--sc-error); --pico-border-color: var(--sc-error); }

.flash { padding: 0.6rem 0.9rem; border-left: 4px solid var(--pico-primary); background: var(--pico-card-background-color); }
.flash.success { border-color: var(--sc-ok); }
.flash.warning { border-color: var(--sc-warn); }
.flash.error { border-color: var(--sc-error); }

.errorlist { color: var(--sc-error); list-style: none; padding: 0; margin: 0 0 0.5rem; }
.muted { color: var(--pico-muted-color); }

.badge {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8em;
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
}
.badge.gm { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }

.heading-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.heading-row > * { margin-bottom: 0.5rem; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; align-items: end; }

.invite-link { display: flex; gap: 0.5rem; }
.invite-link input { margin: 0; font-family: var(--pico-font-family-monospace); font-size: 0.85em; }
.invite-link button { margin: 0; width: auto; white-space: nowrap; }

.table-wrap { overflow-x: auto; }

nav.tabs ul { flex-wrap: wrap; gap: 0.25rem; padding: 0; }
nav.tabs li { padding: 0.25rem 0.5rem; }
nav.tabs a[aria-current="page"] { font-weight: bold; text-decoration: underline; }
form.search { margin: 0; flex: 1 1 16rem; max-width: 24rem; }
form.search input { margin: 0; }
table.rows td { vertical-align: top; padding: 0.25rem; }
table.rows select, table.rows input { margin: 0; min-width: 6rem; }
fieldset { margin-bottom: 1.25rem; }

/* Character builder */
nav.steps ol { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0 0 1rem; }
nav.steps li { margin: 0; }
nav.steps a { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 0.4rem; text-decoration: none; border: 1px solid var(--pico-muted-border-color); }
nav.steps li.current a { border-color: var(--pico-primary); font-weight: bold; }
nav.steps .marker { display: inline-block; width: 1.1em; text-align: center; font-weight: bold; }
nav.steps li.done .marker { color: var(--sc-ok); }
nav.steps li.attention .marker { color: var(--sc-warn); }
nav.steps li.todo .marker { color: var(--pico-muted-color); }
.builder-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 900px) { .builder-grid { grid-template-columns: 1fr 15rem; } .budget { position: sticky; top: 1rem; align-self: start; } }
@media (max-width: 899px) { .budget { order: -1; } .budget dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0 1rem; } }
.budget { border: 1px solid var(--pico-muted-border-color); border-radius: 0.5rem; padding: 0.75rem; font-size: 0.9em; }
.budget h3 { margin-bottom: 0.5rem; font-size: 1em; }
.budget dl { margin: 0; }
.budget dt { font-weight: normal; color: var(--pico-muted-color); margin: 0; }
.budget dd { margin: 0 0 0.4rem; font-weight: bold; }
.budget dd.over { color: var(--sc-error); }
.budget dd.left { color: var(--sc-warn); }
ul.problems { list-style: none; padding: 0; }
ul.problems li { padding: 0.35rem 0.6rem; margin-bottom: 0.3rem; border-left: 4px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); }
ul.problems li.error { border-color: var(--sc-error); }
ul.problems li.warning { border-color: var(--sc-warn); }
ul.problems li.note { border-color: var(--pico-muted-border-color); }
ul.edge-picker { list-style: none; padding: 0; }
ul.edge-picker li { padding: 0.3rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
ul.edge-picker li.unavailable { opacity: 0.6; }
ul.edge-picker .reason { color: var(--sc-warn); }
button.small { padding: 0.15rem 0.6rem; font-size: 0.85em; width: auto; margin: 0 0.4rem 0 0; }
ul.plain { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1.5rem; }
.sheet h4 { margin: 0.75rem 0 0.25rem; font-size: 0.95em; }
.return-form { display: flex; gap: 0.5rem; flex: 1 1 20rem; }
.return-form input { margin: 0; }
.return-form button { margin: 0; width: auto; }

.password-wrap { display: flex; gap: 0.5rem; align-items: center; margin-bottom: var(--pico-spacing); }
.password-wrap input { margin: 0; flex: 1; }
.password-wrap button { margin: 0; width: auto; white-space: nowrap; }

.copy-form { display: flex; gap: 0.4rem; margin: 0; }
.copy-form select, .copy-form button { margin: 0; width: auto; }

/* Checkbox rows: the box, then its title with an optional description underneath. The text is
   wrapped in a span so Pico's "input + small" helper-text rule (a block with a negative top
   margin, meant for text fields) can't pull the description up over the checkbox. */
label.check { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
label.check input[type="checkbox"] { flex: none; margin: 0.2em 0 0; }
label.check span { line-height: 1.35; }
label.check small { display: block; margin: 0.1rem 0 0; }

/* Landing page: character table with Players / NPCs group rows */
tr.group-row th { background: var(--pico-card-sectioning-background-color, transparent); font-weight: bold;
  padding-top: 0.9rem; border-bottom: 2px solid var(--pico-muted-border-color); }
.button-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.button-row button { margin: 0; width: auto; }