/* Living example stylesheet: mobile-first, responsive by default. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 1rem;
  background: #102030; color: #fff; }
.brand { color: #fff; font-weight: bold; text-decoration: none; }
.nav-wide { display: none; gap: 0.75rem; }
.nav-wide a { color: #cde; text-decoration: none; }
.nav-narrow { margin-left: auto; }
.nav-narrow nav { display: flex; flex-direction: column; gap: 0.25rem;
  background: #fff; padding: 0.5rem; border: 1px solid #ccc; }
main { padding: 1rem; max-width: 60rem; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 0.25rem 0.5rem; text-align: left; }
form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 28rem; }
input, textarea, button { font-size: 1rem; padding: 0.4rem; }
.ok { color: #0a0; }
.error { color: #a00; }
.hint { color: #555; }
/* Big button group becomes a dropdown on small phones: the details element
   above is the dropdown; on wide screens show the plain link row. */
@media (min-width: 48rem) {
  .nav-wide { display: flex; }
  .nav-narrow { display: none; }
}