/* The Village - association document site.
   Priorities, in order: legibility, large tap targets, works in both themes.
   No external fonts or frameworks; this must stay fast and self-contained.

   Palette is sampled from the entrance sign in the photograph: the plum of
   the sign border (#54394E) and its lettering (#3B2B34), the warm stone of
   the pillars, and the foliage green of the plantings. */

:root {
  --plum:      #553a4f;
  --plum-deep: #33242d;
  --plum-pale: #f1eaef;
  --ink:       #2a2228;
  --stone:     #665d62;
  --paper:     #faf8f8;
  --card:      #ffffff;
  --rule:      #ded5da;
  --focus:     #5c7033;

  /* Surfaces that always carry light text, in both themes. */
  --banner-bg:  #33242d;
  --banner-sub: #d9c9d3;
  --badge-bg:   #553a4f;
  --badge-fg:   #ffffff;

  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max:  54rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --plum:      #cba5bf;
    --plum-deep: #d8bcce;
    --plum-pale: #2a2027;
    --ink:       #ece6ea;
    --stone:     #a89ca3;
    --paper:     #161216;
    --card:      #1f1a1e;
    --rule:      #362c33;
    --focus:     #9ab86a;

    --banner-bg:  #241a20;
    --banner-sub: #c6b2bd;
    --badge-bg:   #cba5bf;
    --badge-fg:   #241a20;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--plum); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 0.5rem; top: 0.5rem; z-index: 10;
  background: var(--card); padding: 0.6rem 1rem; border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================================================================
   SPLASH (home page only)
   The sign in the photograph already carries the association's name,
   so nothing is overlaid on it. The photo fills the screen and the
   menu sits beneath it on the plum bar.
   ================================================================ */
/* Phones first: show the photograph at its own proportions with the menu
   directly beneath it. Filling the viewport here would letterbox the photo
   inside a tall box and push the menu off the bottom of the screen. */
.splash {
  background: var(--banner-bg);
  min-height: 100vh;
  min-height: 100svh;
}
.splash-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Roomy screens: fill the viewport. Cropping is safe here because the sign
   sits in the middle of the frame. */
@media (min-width: 700px) and (min-aspect-ratio: 4/5) {
  .splash {
    /* A definite height, not just min-height: with min-height the container
       grows to fit the image and the flex item never shrinks, pushing the
       tagline and menu below the fold. */
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
  }
  .splash-img {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}
.splash-tagline {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.1rem 1rem 0;
  text-align: center;
  color: var(--banner-sub);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-style: italic;
  letter-spacing: 0.01em;
}
.splash-nav {
  flex: 0 0 auto;
  background: var(--banner-bg);
  padding: 0.75rem 1rem 1.1rem;
}
.splash-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 62rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem 0.4rem;
}
.splash-nav a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 500;
  border-radius: 4px;
}
.splash-nav a:hover,
.splash-nav a:focus-visible { background: rgba(255, 255, 255, 0.16); }
.splash-nav .is-login {
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.splash-role {
  display: block;
  padding: 0.6rem 0.5rem;
  color: var(--banner-sub);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.splash-nav form { margin: 0; }
.splash-nav button {
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  background: none;
  border: 0;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.splash-nav button:hover { background: rgba(255, 255, 255, 0.16); }
.lock-splash { font-size: 0.55em; vertical-align: 0.35em; margin-left: 0.3em; opacity: 0.75; }

/* ================================================================
   INTERIOR PAGES
   ================================================================ */
.banner { background: var(--banner-bg); }
.banner-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
}
.wordmark {
  display: inline-block;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1.1;
}
.tagline { margin: 0.1rem 0 0; color: var(--banner-sub); font-size: 0.92rem; }

.nav {
  background: var(--card);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 5;
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}
.nav-inner a {
  padding: 0.75rem 0.62rem;
  color: var(--stone);
  text-decoration: none;
  font-size: 0.97rem;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}
.nav-inner a:hover { color: var(--plum); }
.nav-inner a[aria-current="page"] {
  color: var(--plum);
  border-bottom-color: var(--plum);
}
.lock { font-size: 0.55em; vertical-align: 0.35em; margin-left: 0.3em; color: var(--plum); }
.nav-add { font-weight: 700 !important; color: var(--plum) !important; }
.nav-login {
  font-weight: 700 !important;
  color: var(--plum) !important;
}
.nav-role {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--stone); padding: 0 0.5rem;
}
.nav-logout { display: inline; margin: 0; }
.nav-logout button {
  background: none; border: 0; color: var(--plum);
  font: inherit; font-size: 0.97rem; font-weight: 500;
  cursor: pointer; padding: 0.75rem 0.5rem;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h2 { font-size: 1.3rem; margin: 0 0 0.5rem; }
.lede { margin: 0 0 1.75rem; font-size: 1.1rem; color: var(--stone); max-width: 42rem; }
.gated-note, .help { font-size: 0.97rem; color: var(--stone); }
.gated-note {
  background: var(--plum-pale);
  border-left: 4px solid var(--plum);
  padding: 0.7rem 1rem;
  margin: 0 0 1.5rem;
}
.empty { color: var(--stone); font-style: italic; }
.error {
  background: #fbe9e2; border-left: 4px solid #a2432a; color: #6d2f10;
  padding: 0.7rem 1rem; margin: 0 0 1.25rem; max-width: 26rem;
}
@media (prefers-color-scheme: dark) {
  .error { background: #33201a; color: #f0c7b3; }
}

/* ---------- document list ---------- */
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.doc {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
}
.doc:hover { border-color: var(--plum); background: var(--plum-pale); }
.doc-ext {
  flex: 0 0 3.4rem; text-align: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--badge-fg); background: var(--badge-bg);
  padding: 0.3rem 0; border-radius: 3px;
}
.doc-body { display: flex; flex-direction: column; min-width: 0; }
.doc-label { font-weight: 600; font-size: 1.05rem; }
.doc-meta {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.86rem; color: var(--stone);
}
.doc-kind { font-style: italic; }

/* ---------- login ---------- */
.login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 34rem;
  margin-bottom: 1.5rem;
}
.login label { font-weight: 600; align-self: flex-start; }
.login input {
  width: 100%;
  max-width: 22rem;
  font: inherit; font-size: 1.1rem; padding: 0.7rem 0.8rem;
  border: 2px solid var(--rule); border-radius: 5px;
  background: var(--card); color: var(--ink);
}
.login button {
  width: 100%;
  max-width: 22rem;
  font: inherit; font-size: 1.05rem; font-weight: 600;
  padding: 0.75rem 1rem;
  background: var(--badge-bg); color: var(--badge-fg);
  border: 0; border-radius: 5px; cursor: pointer;
}
.login button:hover { filter: brightness(1.12); }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 1.25rem 3rem;
  text-align: center;
  color: var(--stone);
  font-size: 0.9rem;
}
.foot p { margin: 0.2rem 0; }

/* ================================================================
   ADMIN  (only rendered for an admin session)
   ================================================================ */
.flash {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--focus);
  background: var(--plum-pale);
  font-size: 0.97rem;
}
.flash-error {
  border-left-color: #a2432a;
  background: #fbe9e2;
  color: #6d2f10;
}
@media (prefers-color-scheme: dark) {
  .flash-error { background: #33201a; color: #f0c7b3; }
}

.admin-bar { margin: 0 0 1rem; }
.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.97rem;
}
.btn:hover { filter: brightness(1.12); }

/* The row becomes a two-part object: the download link, then the controls. */
.docs li { display: flex; align-items: stretch; gap: 0.4rem; }
.docs li .doc { flex: 1 1 auto; min-width: 0; }

.doc-gate {
  font-weight: 600;
  color: var(--plum);
}

.doc-admin {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}
.doc-admin form { margin: 0; display: inline; }
.doc-admin button,
.doc-admin a {
  font: inherit;
  font-size: 0.86rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--stone);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.doc-admin button:hover,
.doc-admin a:hover { border-color: var(--plum); color: var(--plum); }
.doc-admin .danger:hover { border-color: #a2432a; color: #a2432a; }

@media (max-width: 620px) {
  .docs li { flex-wrap: wrap; }
  .doc-admin { width: 100%; justify-content: flex-end; }
}

/* ---------- admin forms ---------- */
.adminform {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 32rem;
}
.adminform label { font-weight: 600; margin-top: 0.9rem; }
.adminform .opt { font-weight: 400; color: var(--stone); }
.adminform input[type="text"],
.adminform input[type="date"],
.adminform input[type="file"],
.adminform select {
  font: inherit;
  font-size: 1.02rem;
  padding: 0.6rem 0.7rem;
  border: 2px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  width: 100%;
}
.adminform .hint { font-size: 0.86rem; color: var(--stone); }
.adminform .vis {
  margin: 1.1rem 0 0;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.6rem 0.9rem 0.8rem;
}
.adminform .vis legend { font-weight: 600; padding: 0 0.3rem; }
.adminform .radio {
  display: block;
  font-weight: 400;
  margin-top: 0.3rem;
}
.adminform .radio input { margin-right: 0.45rem; }
.adminform .actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.adminform button {
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.75rem 1.2rem;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.adminform button:hover { filter: brightness(1.12); }
.adminform .cancel { color: var(--stone); }

.filenote {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--stone);
  max-width: 32rem;
}

/* ---------- contact ---------- */
.contact-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--plum);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  max-width: 24rem;
  margin-bottom: 1.5rem;
}
.contact-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
}
.contact-card address {
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.5;
}

/* ---------- activity log ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 6px; }
table.log {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.88rem;
  background: var(--card);
}
table.log th, table.log td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  white-space: nowrap;
}
table.log thead th {
  background: var(--plum-pale);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--stone);
}
table.log tbody tr:last-child td { border-bottom: 0; }
.log-when { font-variant-numeric: tabular-nums; color: var(--stone); }
.log-who { font-weight: 600; }
.log-detail { white-space: normal; min-width: 18rem; }
.log-act {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--plum-pale);
  color: var(--plum);
}
.log-delete { background: #fbe9e2; color: #8d3a1c; }
.log-login_failed { background: #fbe9e2; color: #8d3a1c; }
@media (prefers-color-scheme: dark) {
  .log-delete, .log-login_failed { background: #33201a; color: #f0c7b3; }
}

.login-hint {
  max-width: 34rem;
  margin: 0.2rem 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--stone);
}
.login-hint strong { color: var(--ink); }