/*
 * Theme layer over Pico. Everything here is built from tokens.css.
 * House rule: grep this file for a class name before adding a new component class
 * (docs/ui-module.md#theme--shared-layout).
 */

/* ---- Pico re-map ------------------------------------------------------------
 * Same specificity as Pico's own light-scheme block, so source order makes these win.
 */
:root:not([data-theme="dark"]) {
  --pico-font-family: var(--dh-font-body);
  --pico-font-family-sans-serif: var(--dh-font-body);
  --pico-background-color: var(--dh-bg);
  --pico-color: var(--dh-text);
  --pico-muted-color: var(--dh-text-muted);
  --pico-muted-border-color: var(--dh-border);
  --pico-border-radius: var(--dh-radius);

  --pico-h1-color: var(--dh-text);
  --pico-h2-color: var(--dh-text);
  --pico-h3-color: var(--dh-text);
  --pico-h4-color: var(--dh-text);
  --pico-h5-color: var(--dh-text);
  --pico-h6-color: var(--dh-text);

  --pico-primary: var(--dh-link);
  --pico-primary-background: var(--dh-link);
  --pico-primary-border: var(--dh-link);
  --pico-primary-underline: color-mix(in srgb, var(--dh-link) 50%, transparent);
  --pico-primary-hover: var(--dh-link-hover);
  --pico-primary-hover-background: var(--dh-link-hover);
  --pico-primary-hover-border: var(--dh-link-hover);
  --pico-primary-hover-underline: var(--dh-link-hover);
  --pico-primary-focus: color-mix(in srgb, var(--dh-link) 30%, transparent);
  --pico-primary-inverse: var(--dh-link-contrast);

  --pico-card-background-color: var(--dh-surface);
  --pico-card-sectioning-background-color: var(--dh-bg);
  --pico-card-box-shadow: var(--dh-shadow);

  --pico-form-element-background-color: var(--dh-surface);
  --pico-form-element-border-color: var(--dh-border);
  --pico-form-element-focus-color: var(--dh-link);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dh-font-heading);
  font-weight: 600;
}

h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main.container {
  flex: 1;
  max-width: var(--dh-content-width);
  padding-block: 1.5rem 2.5rem;
}

/* ---- Site chrome ----------------------------------------------------------- */

.dh-site-header,
.dh-site-footer {
  color: var(--dh-chrome-text);
}

.dh-site-header {
  background: var(--dh-header-bg);
  box-shadow: 0 2px 0 rgb(0 0 0 / 25%);
}

.dh-site-header > nav.container,
.dh-site-footer > div {
  max-width: var(--dh-content-width);
}

.dh-site-header nav a {
  color: var(--dh-chrome-text);
}

.dh-site-header nav a:hover,
.dh-site-header nav a:focus-visible,
.dh-site-header nav a[aria-current="page"] {
  color: var(--dh-accent);
}

.dh-site-header nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.dh-site-header nav ul {
  flex-wrap: wrap;
}

/* The anonymous "Log ind" link is the one accent button on the wood. */
.dh-site-header nav a[role="button"] {
  background: var(--dh-accent);
  border-color: var(--dh-accent);
  color: var(--dh-accent-text);
  font-weight: 700;
  padding: 0.5rem 1rem;
}

.dh-site-header nav a[role="button"]:hover,
.dh-site-header nav a[role="button"]:focus-visible {
  color: var(--dh-accent-text);
  filter: brightness(1.08);
}

/* Logout is a POST form; keep it in line with the nav links. */
.dh-site-header nav form {
  margin: 0;
}

.dh-site-header nav button {
  padding: 0.25rem 0.75rem;
  color: var(--dh-chrome-text);
  border-color: var(--dh-chrome-text-muted);
}

.dh-site-header nav button:hover,
.dh-site-header nav button:focus-visible {
  color: var(--dh-accent);
  border-color: var(--dh-accent);
  background: transparent;
}

.dh-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--dh-font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.dh-brand svg {
  width: 2rem;
  height: 2rem;
  color: var(--dh-accent);
}

.dh-site-footer {
  background: var(--dh-footer-bg);
  padding-block: 1.5rem;
  font-size: 0.9rem;
}

.dh-site-footer > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

.dh-site-footer strong {
  font-family: var(--dh-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
}

.dh-site-footer p {
  margin: 0;
  color: var(--dh-chrome-text-muted);
}

/* Members' bottom tab bar (plan.md §13). Phones only: from 768px the header links take over. */
.dh-tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  padding: 0.25rem 0 calc(0.25rem + env(safe-area-inset-bottom));
  background: var(--dh-tabbar-bg);
  box-shadow: 0 -2px 0 rgb(0 0 0 / 25%);
}

.dh-tabbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  min-width: 4rem;
  min-height: 3rem;
  color: var(--dh-chrome-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.dh-tabbar a[aria-current="page"],
.dh-tabbar a:hover,
.dh-tabbar a:focus-visible {
  color: var(--dh-accent);
}

.dh-tabbar svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Room for the fixed tab bar under the footer. */
body:has(.dh-tabbar) {
  padding-bottom: calc(3.5rem + env(safe-area-inset-bottom));
}

@media (max-width: 767.98px) {
  .dh-nav-primary {
    display: none;
  }
}

@media (min-width: 768px) {
  .dh-tabbar {
    display: none;
  }

  body:has(.dh-tabbar) {
    padding-bottom: 0;
  }
}

/* ---- Components ------------------------------------------------------------- */

.dh-card {
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
}

.dh-note {
  font-family: var(--dh-font-hand);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--dh-text-muted);
}

/* ---- Front page (home.html, body.dh-home) --------------------------------- */

.dh-home > main {
  flex: 1;
  padding-block: 0;
}

/* The hero runs on from the header as one stretch of boards. */
.dh-home .dh-site-header {
  box-shadow: none;
}

/* Pico pads .container only on narrow screens, so the widened ones keep their own gutter. */
.dh-home .dh-site-header > nav.container,
.dh-home .dh-site-footer > div,
.dh-home main > .container,
.dh-hero > .container {
  max-width: var(--dh-wide-width);
  padding-inline: var(--pico-spacing);
}

.dh-hero {
  background: var(--dh-header-bg);
  color: var(--dh-chrome-text);
  box-shadow: 0 2px 0 rgb(0 0 0 / 25%);
  padding-block: 1.5rem 3.5rem;
}

.dh-hero > .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.dh-hero h1 {
  color: var(--dh-chrome-text);
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  line-height: 1.05;
}

.dh-hero p {
  max-width: 34em;
  font-size: 1.15rem;
  color: var(--dh-chrome-text-soft);
}

.dh-hero .dh-note {
  margin-bottom: 0.75rem;
  font-size: 1.75rem;
  color: var(--dh-accent);
}

.dh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 0;
}

.dh-hero-actions [role="button"] {
  font-weight: 700;
  background: var(--dh-bg);
  border: 2px solid var(--dh-bg);
  color: var(--dh-accent-text);
}

.dh-hero-actions [role="button"].outline {
  background: transparent;
  border-color: var(--dh-chrome-border);
  color: var(--dh-chrome-text);
}

.dh-hero-actions [role="button"]:hover,
.dh-hero-actions [role="button"]:focus-visible {
  border-color: var(--dh-accent);
}

/* Polaroids, scattered on the boards. Phones get the first one only. */
.dh-polaroids {
  display: flex;
  justify-content: center;
}

.dh-polaroid {
  margin: 0;
  padding: 0.75rem 0.75rem 0;
  background: var(--dh-surface);
  box-shadow: 0 12px 28px rgb(0 0 0 / 35%);
  transform: rotate(-4deg);
}

.dh-polaroid:not(:first-child) {
  display: none;
}

.dh-polaroid figcaption {
  padding-block: 0.5rem 0.75rem;
  font-family: var(--dh-font-hand);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--dh-text);
  text-align: center;
}

.dh-polaroid img {
  display: block;
  width: 12rem;
  height: 15rem;
  object-fit: cover;
}

.dh-polaroid:nth-child(2) img {
  width: 9rem;
  height: 11.25rem;
}

.dh-polaroid:nth-child(3) img {
  width: 11rem;
  height: 7.33rem;
}

@media (min-width: 768px) {
  .dh-hero {
    padding-block: 3rem 5rem;
  }

  .dh-polaroids {
    position: relative;
    width: 100%;
    height: 28rem;
    max-width: 30rem;
    margin-inline: auto;
  }

  .dh-polaroid,
  .dh-polaroid:not(:first-child) {
    display: block;
    position: absolute;
  }

  /* On top, so the beach photo tucks under it instead of covering its caption. */
  .dh-polaroid:nth-child(1) {
    left: 0;
    top: 2rem;
    z-index: 1;
  }

  .dh-polaroid:nth-child(2) {
    right: 0;
    top: 0;
    transform: rotate(5deg);
  }

  .dh-polaroid:nth-child(3) {
    right: 1rem;
    bottom: 0;
    transform: rotate(-1.5deg);
  }
}

@media (min-width: 1024px) {
  .dh-hero > .container {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

.dh-welcome {
  max-width: 44em;
  padding-top: 3.5rem;
}

.dh-welcome h2,
.dh-guestbook h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.15;
}

.dh-welcome p,
.dh-guestbook p {
  font-size: 1.15rem;
}

.dh-page-cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .dh-page-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .dh-page-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dh-page-card {
  display: block;
  padding: 1.75rem;
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius);
  color: var(--dh-text);
  text-decoration: none;
}

.dh-page-card:hover,
.dh-page-card:focus-visible {
  border-color: var(--dh-link);
  box-shadow: var(--dh-shadow);
}

.dh-page-card svg {
  width: 2rem;
  height: 2rem;
  color: var(--dh-link);
}

.dh-page-card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.5rem;
}

.dh-page-card p {
  margin: 0;
  color: var(--dh-text-muted);
}

.dh-page-card small {
  display: block;
  margin-top: 0.75rem;
  color: var(--dh-link);
  font-weight: 700;
}

/* "Hyttebogen er flyttet online": the pitch beside a lined guestbook page. */
.dh-guestbook {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  padding-block: 4rem;
}

@media (min-width: 1024px) {
  .dh-guestbook {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
    padding-block: 6rem;
  }
}

.dh-guestbook .dh-note {
  margin-bottom: 0.25rem;
  font-size: 1.6rem;
  color: var(--dh-link);
}

.dh-guestbook small {
  color: var(--dh-text-muted);
}

.dh-guestbook [role="button"] {
  background: var(--dh-cta-bg);
  border-color: var(--dh-cta-bg);
  color: var(--dh-cta-text);
  font-weight: 700;
}

/* Every line box is one ruled line, so the text sits on the rules. */
.dh-guestbook-page {
  --dh-line: 2rem;

  padding: var(--dh-line) 2rem;
  background-color: var(--dh-surface);
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent calc(var(--dh-line) - 1px),
      var(--dh-paper-line) calc(var(--dh-line) - 1px),
      var(--dh-paper-line) var(--dh-line)
    );
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius);
  box-shadow: 8px 8px 0 var(--dh-cta-bg);
  line-height: var(--dh-line);
}

.dh-guestbook-page h3 {
  margin: 0;
  font-family: var(--dh-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: var(--dh-line);
  text-transform: uppercase;
  color: var(--dh-text-muted);
}

.dh-guestbook-page ol {
  margin: 0;
  padding-left: 1.25rem;
}

.dh-guestbook-page li {
  margin: 0;
}

.dh-guestbook-page strong,
.dh-guestbook-page span {
  display: block;
}

.dh-guestbook-page strong {
  font-family: var(--dh-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.dh-guestbook-page span {
  color: var(--dh-text-muted);
}

/* ---- Markdown pages --------------------------------------------------------
 * MarkdownRenderer emits dh-callout, dh-checklist and dh-photo; page.html adds dh-steps to guides.
 */

.dh-page h2 {
  font-size: 1.35rem;
  margin-top: 1.75rem;
}

.dh-page-summary {
  font-size: 1.1rem;
  color: var(--dh-text-muted);
}

.dh-steps {
  counter-reset: dh-step;
}

.dh-steps h2 {
  counter-increment: dh-step;
}

.dh-steps h2::before {
  content: counter(dh-step) ". ";
  color: var(--dh-link);
}

.dh-callout {
  background: var(--dh-callout-bg);
  border-left: 4px solid var(--dh-callout-border);
  border-radius: var(--dh-radius);
  padding: 0.75rem 1rem;
  color: var(--dh-text);
}

.dh-callout > :last-child {
  margin-bottom: 0;
}

.dh-checklist {
  padding-left: 0;
}

.dh-checklist li {
  list-style: none;
}

.dh-checklist input[type="checkbox"] {
  margin-right: 0.5rem;
}

.dh-photo {
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  padding: 0.5rem 0.5rem 0.25rem;
  margin: 1rem 0 1.5rem;
  max-width: 28rem;
  transform: rotate(-1deg);
  box-shadow: var(--dh-shadow);
}

.dh-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.dh-photo figcaption {
  /* Guide captions carry instructions, so not the handwritten font. */
  font-size: 0.95rem;
  color: var(--dh-text-muted);
  text-align: center;
  padding-top: 0.25rem;
}

/* Guide index under /p/praktisk (plan.md §9). */
.dh-guide-index h3 {
  font-size: 1.15rem;
  margin-top: 1.5rem;
}

.dh-guide-index h4 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.dh-guide-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  color: var(--dh-text-muted);
  font-size: 0.875rem;
}

/* "Se også" under a page (plan.md §9). */
.dh-related h2 {
  font-size: 1.15rem;
}

.dh-related small {
  display: block;
  color: var(--dh-text-muted);
}

/* Threads: a post is a paper card with an initials avatar (plan.md §13). */
.dh-post {
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Pico gives an article's header and footer a full-bleed band; a post card is one sheet of paper. */
.dh-post > header,
.dh-post > footer {
  padding: 0;
  background: none;
  border: 0;
}

.dh-post > header {
  margin: 0 0 0.5rem;
}

.dh-post > footer {
  margin: 0.75rem 0 0;
}

.dh-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--dh-text-muted);
  font-size: 0.875rem;
}

.dh-post-meta strong {
  color: var(--dh-text);
}

.dh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--dh-header-bg);
  color: var(--dh-chrome-text);
  font-family: var(--dh-font-heading);
  font-size: 0.875rem;
}

.dh-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--dh-border);
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dh-text-muted);
}

.dh-tag svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* "Følger" toggle on a thread. */
.dh-follow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.dh-follow button {
  width: auto;
  margin-bottom: 0;
}

/* ---- Thread page (thread.html, body.dh-thread-page) ------------------------ */

/* The thread header runs on from the site header as one stretch of boards. */
.dh-thread-page .dh-site-header {
  box-shadow: none;
}

.dh-thread-header {
  background: var(--dh-header-bg);
  color: var(--dh-chrome-text);
  box-shadow: 0 2px 0 rgb(0 0 0 / 25%);
  padding-block: 0.5rem 1.25rem;
}

.dh-thread-header > .container {
  max-width: var(--dh-content-width);
}

.dh-thread-header-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.dh-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-weight: 700;
  color: var(--dh-chrome-text);
  text-decoration: none;
}

.dh-back:hover,
.dh-back:focus-visible {
  color: var(--dh-accent);
}

.dh-back svg {
  width: 1.25rem;
  height: 1.25rem;
}

.dh-thread-header h1 {
  margin: 0.75rem 0 0.25rem;
  color: var(--dh-chrome-text);
}

.dh-thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--dh-chrome-text-muted);
}

.dh-thread-meta .dh-tag {
  border-color: var(--dh-chrome-border);
  color: var(--dh-chrome-text-soft);
}

/* On the wood: the ochre accent when following, a chrome outline when not. */
.dh-thread-header .dh-follow {
  margin: 0;
}

.dh-thread-header .dh-follow button {
  min-height: 44px;
  padding-inline: 1rem;
  font-weight: 700;
  background: transparent;
  border-color: var(--dh-chrome-border);
  color: var(--dh-chrome-text);
}

.dh-thread-header .dh-follow button[aria-pressed="true"] {
  background: var(--dh-accent);
  border-color: var(--dh-accent);
  color: var(--dh-accent-text);
}

.dh-thread-header .dh-follow button:hover,
.dh-thread-header .dh-follow button:focus-visible {
  border-color: var(--dh-accent);
}

.dh-thread-header .dh-follow small {
  max-width: 18em;
  color: var(--dh-chrome-text-muted);
}

/* The reply form: a paper card with the button beside the text. */
.dh-reply {
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
  padding: 1rem;
}

.dh-reply label {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--dh-text-muted);
}

.dh-reply-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.dh-reply-row textarea {
  flex: 1;
  margin-bottom: 0;
  background: var(--dh-bg);
}

.dh-reply-row button {
  width: auto;
  min-height: 44px;
  margin-bottom: 0;
  background: var(--dh-cta-bg);
  border-color: var(--dh-cta-bg);
  color: var(--dh-cta-text);
  font-weight: 700;
}

.dh-reply .dh-note {
  margin: 0.5rem 0 0;
  font-size: 1.25rem;
  color: var(--dh-link);
}

/* ---- Thread list: the guestbook (list.html, main.dh-thread-list) ------------- */

body > main.container.dh-thread-list {
  max-width: var(--dh-content-width);
}

.dh-thread-list-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dh-thread-list-head .dh-note {
  margin: 0;
  color: var(--dh-link);
}

.dh-thread-list-head h1 {
  margin: 0;
}

.dh-thread-list-head [role="button"] {
  min-height: 44px;
  margin: 0;
  background: var(--dh-cta-bg);
  border-color: var(--dh-cta-bg);
  color: var(--dh-cta-text);
  font-weight: 700;
}

/* One sheet of paper, one ruled entry per thread. */
.dh-thread-rows {
  margin: 0;
  padding: 0 1.25rem;
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
}

.dh-thread-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding-block: 1rem;
  list-style: none;
  border-bottom: 1px solid var(--dh-paper-line);
}

.dh-thread-row:last-child {
  border-bottom: 0;
}

.dh-thread-row .dh-avatar {
  flex-shrink: 0;
}

.dh-thread-row > div {
  flex: 1;
  min-width: 0;
}

.dh-thread-row h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
}

.dh-thread-row h2 a {
  color: var(--dh-text);
  text-decoration: none;
}

.dh-thread-row h2 a:hover,
.dh-thread-row h2 a:focus-visible {
  color: var(--dh-link);
  text-decoration: underline;
}

.dh-thread-row p {
  margin: 0 0 0.25rem;
  overflow-wrap: anywhere;
}

.dh-thread-row small {
  color: var(--dh-text-muted);
}

/* ---- Members directory: one card per household (plan.md §13) ---------------- */

body > main.container.dh-directory {
  max-width: var(--dh-directory-width);
}

.dh-households {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 768px) {
  .dh-households {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dh-household {
  margin: 0;
  padding: 1.25rem;
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
}

.dh-household-head {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--dh-border);
}

.dh-household-head h2 {
  margin-bottom: 0.25rem;
  font-size: 1.35rem;
}

.dh-household-head p {
  margin: 0;
  color: var(--dh-text-muted);
}

.dh-household ul {
  margin: 0;
  padding: 0;
}

.dh-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding-block: 0.75rem;
  list-style: none;
  border-bottom: 1px solid var(--dh-paper-line);
}

.dh-person:last-child {
  border-bottom: 0;
}

.dh-person-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.dh-person-name small {
  color: var(--dh-text-muted);
}

.dh-contact {
  display: flex;
  gap: 0.5rem;
}

.dh-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--dh-border);
  border-radius: 50%;
  color: var(--dh-link);
}

.dh-contact a:hover {
  border-color: var(--dh-link);
  color: var(--dh-link-hover);
}

.dh-contact svg {
  width: 1.25rem;
  height: 1.25rem;
}

.dh-household-note {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--dh-border);
  color: var(--dh-text-muted);
  font-size: 0.9rem;
}

/* ---- Login flow and notices (auth/*.html, notify/*.html, error/*.html) -------- */
/* main.dh-auth and main.dh-notice share one narrow centered card. */

body > main.container.dh-auth,
body > main.container.dh-notice {
  max-width: 28rem;
}

.dh-auth .dh-card,
.dh-notice .dh-card {
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
}

.dh-auth h1,
.dh-notice h1 {
  margin-bottom: 0.5rem;
}

.dh-auth-icon,
.dh-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--dh-header-bg);
  color: var(--dh-accent);
}

.dh-auth-icon svg,
.dh-notice-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.dh-auth form,
.dh-notice form {
  margin: 1.5rem 0 0;
  text-align: left;
}

.dh-auth button[type="submit"],
.dh-notice button[type="submit"],
.dh-notice a[role="button"] {
  width: 100%;
  min-height: 44px;
  background: var(--dh-cta-bg);
  border-color: var(--dh-cta-bg);
  color: var(--dh-cta-text);
  font-weight: 700;
}

.dh-auth .dh-note {
  margin: 0.25rem 0 0;
}

.dh-auth [role="alert"] {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--dh-danger);
  border-radius: var(--dh-radius);
  background: var(--dh-danger-bg);
  color: var(--dh-danger);
}

/* The login code: large and spaced, like in the mail. */
.dh-code-input {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
}

.dh-auth-hint,
.dh-notice-hint {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--dh-border);
  color: var(--dh-text-muted);
  font-size: 0.9rem;
}

.dh-auth-hint + p {
  margin: 1rem 0 0;
}

.dh-notice a[role="button"] {
  margin-top: 0.5rem;
}

.dh-notice-code {
  margin: 0;
  font-family: var(--dh-font-hand);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--dh-text-muted);
}

/* Pico spaces a heading that follows a paragraph. Keep the code tight above it. */
.dh-notice-code + h1 {
  margin-top: 0.5rem;
}

/* ---- Forms: profile and new thread (main.dh-form) ---------------------------- */

body > main.container.dh-form {
  max-width: 40rem;
}

.dh-form-head {
  margin-bottom: 1.5rem;
}

.dh-form-head .dh-note {
  margin: 0;
  color: var(--dh-link);
}

.dh-form-head h1 {
  margin: 0;
}

.dh-form-head p:last-child:not(.dh-note) {
  margin: 0.25rem 0 0;
  color: var(--dh-text-muted);
}

/* On paper the back link takes the link colour, not the chrome one. */
.dh-form .dh-back {
  color: var(--dh-link);
}

.dh-form .dh-back:hover,
.dh-form .dh-back:focus-visible {
  color: var(--dh-link-hover);
}

.dh-form .dh-card {
  margin-bottom: 1.25rem;
  padding: 1.25rem;
}

.dh-form legend {
  float: left;
  width: 100%;
  margin-bottom: 0.75rem;
  font-family: var(--dh-font-heading);
  font-size: 1.35rem;
  font-weight: 600;
}

.dh-form legend + * {
  clear: left;
}

.dh-form [role="status"],
.dh-form [role="alert"] {
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--dh-callout-border);
  border-radius: var(--dh-radius);
  background: var(--dh-callout-bg);
}

.dh-form [role="alert"] {
  border-left-color: var(--dh-danger);
  background: var(--dh-danger-bg);
  color: var(--dh-danger);
}

.dh-form button[type="submit"] {
  width: auto;
  min-height: 44px;
  padding-inline: 1.5rem;
  background: var(--dh-cta-bg);
  border-color: var(--dh-cta-bg);
  color: var(--dh-cta-text);
  font-weight: 700;
}

.dh-form .dh-card small {
  display: block;
  color: var(--dh-text-muted);
}

@media (max-width: 767.98px) {
  .dh-form button[type="submit"] {
    width: 100%;
  }
}

/* Push on this device (profile.html): the heading looks like the fieldset legends above it. */
.dh-push h2 {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}

.dh-push button {
  width: auto;
  min-height: 44px;
  margin-bottom: 0;
  padding-inline: 1.5rem;
}

.dh-push button:not(.outline) {
  background: var(--dh-cta-bg);
  border-color: var(--dh-cta-bg);
  color: var(--dh-cta-text);
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .dh-push button {
    width: 100%;
  }
}

/* ---- Admin members list (admin/members.html, main.dh-form.dh-admin) ---------- */

body > main.container.dh-form.dh-admin {
  max-width: var(--dh-directory-width);
}

.dh-admin .dh-card h2,
.dh-admin > h2 {
  font-size: 1.35rem;
}

/* One paper sheet, one ruled row per member, as on the thread list. */
.dh-admin-rows {
  margin: 0;
  padding: 0 1.25rem;
  background: var(--dh-surface);
  border: 1px solid var(--dh-border);
  border-radius: var(--dh-radius-lg);
  box-shadow: var(--dh-shadow);
}

.dh-admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding-block: 1rem;
  list-style: none;
  border-bottom: 1px solid var(--dh-paper-line);
}

.dh-admin-row:last-child {
  border-bottom: 0;
}

.dh-admin-row .dh-avatar {
  flex-shrink: 0;
}

.dh-admin-who {
  flex: 1;
  min-width: 0;
}

.dh-admin-who p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.dh-admin-who small {
  color: var(--dh-text-muted);
  overflow-wrap: anywhere;
}

/* The actions keep full contrast; only who the member is fades. */
.dh-admin-row-inactive .dh-avatar,
.dh-admin-row-inactive .dh-admin-who strong {
  opacity: 0.55;
}

.dh-admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding-left: 3rem;
}

.dh-admin-actions form {
  margin: 0;
}

.dh-admin-actions [role="group"] {
  width: auto;
  margin: 0;
}

.dh-admin-actions select {
  width: auto;
  margin: 0;
}

/* Small outline buttons here, not the dark CTA the dh-form rules give a submit. */
.dh-admin-actions button[type="submit"] {
  width: auto;
  min-height: 44px;
  margin: 0;
  padding-inline: 1rem;
  background: transparent;
  border-color: var(--dh-border);
  color: var(--dh-text);
  font-weight: 400;
}

.dh-admin-actions button[type="submit"]:hover,
.dh-admin-actions button[type="submit"]:focus-visible {
  border-color: var(--dh-link);
  color: var(--dh-link);
}

@media (min-width: 768px) {
  .dh-admin-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  .dh-admin-actions {
    width: auto;
    padding-left: 0;
    flex-wrap: nowrap;
  }
}