/* Shared styles across all pages. Consolidated from the per-page <style>
   blocks in the Stitch exports so every page looks consistent. */

body {
  font-family: "Inter", sans-serif;
}

/* Tell the browser this is a dark site, so the controls IT draws are dark too.
   Without it, a <select>'s open option list is a light system popup, and the
   site's light option text on it is unreadable — Ryan reported this on the
   Manage Documents category list on 2026-09-13, and it affected every dropdown
   on the site. color-scheme covers Chromium and Firefox (including autofill and
   scrollbars); the option colors below cover browsers that paint options from
   CSS instead. */
:root {
  color-scheme: dark;
}
select option,
select optgroup {
  background-color: #1b2122;
  color: #dee3e5;
}
select option:disabled {
  color: #869397;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #090f11;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #3c494d;
  border-radius: 10px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.login-card {
  background-color: #1b2122;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* DO NOT USE for new fields. On a plain text/email/password input this class
   loses to the Tailwind forms plugin, whose own white background has the same
   specificity and loads later — that is how login.html and forgot-password.html
   ended up with light text on white boxes (1.29:1 contrast), fixed 2026-09-13.
   Use the utility classes on profile.html's fields instead. Nothing uses this
   class any more; it is kept only so this warning is found. */
.input-field {
  background-color: #171d1e;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input-field:focus {
  border-color: #48dafa;
  outline: none;
  box-shadow: 0 0 0 2px rgba(72, 218, 250, 0.2);
}

.bento-card {
  background-color: #1b2122;
  border-radius: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.glass-card {
  background: #1b2122;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
}

.support-card {
  background-color: #1b2122;
  border: 1px solid #3c494d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.custom-toggle:checked + .toggle-bg {
  background-color: #48dafa;
}
.custom-toggle:checked + .toggle-bg .toggle-dot {
  transform: translateX(1.25rem);
  background-color: #003640;
}

.active-tab {
  border-left: 4px solid #48dafa;
  background: rgba(72, 218, 250, 0.1);
  color: #48dafa;
  font-weight: 600;
}

/* Placeholder hero background used instead of the Stitch preview's
   externally-hosted (and not durably available) AI-generated photo. */
.hero-banner {
  background: radial-gradient(circle at 20% 20%, rgba(72, 218, 250, 0.12), transparent 55%),
    linear-gradient(135deg, #171d1e 0%, #0e1416 55%, #090f11 100%);
}

.nav-link {
  color: #bbc9cd;
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: #48dafa;
}
.nav-link.active {
  color: #48dafa;
  font-weight: 700;
  border-bottom: 2px solid #48dafa;
  padding-bottom: 4px;
}

/* Slide-in nav drawer (hamburger menu) for phones and tablets. Hidden at lg:
   (1024px) and above, where the horizontal .nav-link bar is used instead. The
   switch was at md: (768px) until 2026-09-13, but between 768 and 1023px the
   full bar did not fit: the brand wrapped onto three lines and Support touched
   the account icon. */
#nav-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
}
#nav-drawer.open {
  transform: translateX(0);
}
#nav-drawer-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}
#nav-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  color: #bbc9cd;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.drawer-nav-link:hover {
  background-color: #252b2d;
  color: #48dafa;
}
.drawer-nav-link.active {
  background-color: rgba(72, 218, 250, 0.1);
  color: #48dafa;
}

/* Long-form legal copy (terms.html, privacy.html). Kept here rather than as
   per-element Tailwind classes so both documents stay visually identical and
   future edits touch prose, not markup. Colors mirror theme.js tokens. */
.legal-prose {
  color: #bbc9cd;
  font-size: 16px;
  line-height: 26px;
}
.legal-prose h2 {
  color: #dee3e5;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
  scroll-margin-top: 24px;
}
.legal-prose h2:first-child {
  margin-top: 0;
}
.legal-prose h3 {
  color: #dee3e5;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 10px;
}
.legal-prose p {
  margin-bottom: 16px;
}
.legal-prose ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}
.legal-prose li {
  margin-bottom: 8px;
}
.legal-prose a {
  color: #48dafa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-prose strong {
  color: #dee3e5;
  font-weight: 600;
}

/* Status message injected above the submit button on the Contact and Support
   forms (assets/js/form-submit.js). Only ever shown for real states — the
   forms never display a success message the server did not confirm. */
.form-status {
  display: none;
  border-radius: 0.5rem;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 4px;
}
.form-status-ok {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.45);
  color: #b8f5cd;
}
.form-status-error {
  background: rgba(147, 0, 10, 0.18);
  border: 1px solid #93000a;
  color: #ffdad6;
}
.form-status a {
  color: #48dafa;
  text-decoration: underline;
}
.form-status-detail {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  opacity: 0.75;
}

/* "Did you mean ...?" on a suspected email typo. Deliberately the warning gold
   (#FACC15 per DESIGN.md), NOT the red error treatment — the address the
   resident typed is valid and may well be correct. We are asking, not
   rejecting, and the resident can always keep what they entered. */
.form-status-warn {
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.5);
  color: #ffdea3;
}
.form-status-warn code {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
}
.form-status-choice {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #facc15;
  text-decoration: underline;
  cursor: pointer;
}
.form-status-choice + .form-status-choice {
  margin-left: 16px;
}
.form-status-choice:hover {
  color: #ffdea3;
}

/* Per-field feedback under a single input, e.g. the retyped email address on
   request-access.html. Success green / error red are the DESIGN.md tokens. */
.field-hint {
  display: none;
  margin: 6px 0 0 4px;
  font-size: 12px;
  line-height: 16px;
}
.field-hint-ok {
  color: #4ade80;
}
.field-hint-bad {
  color: #ffb4ab;
}

/* ---------------------------------------------------------------------------
   Document management page (manage-documents.html), added 2026-09-13.
   Buttons follow DESIGN.md's button spec: 44px tall, 8px radius, weight 600,
   2px #0dbedd focus outline with a 2px offset. Colors are the theme.js tokens
   the other pages already use.
   --------------------------------------------------------------------------- */
.page-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 0.5rem;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 20px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.5);
  color: #ffdea3;
}
.page-notice .material-symbols-outlined {
  color: #facc15;
  font-size: 22px;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn .material-symbols-outlined {
  font-size: 20px;
}
.btn:focus-visible {
  outline: 2px solid #0dbedd;
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background: #48dafa;
  color: #003640;
}
.btn-primary:hover:not(:disabled) {
  background: #7ee6fc;
}
.btn-secondary {
  background: #303638;
  color: #dee3e5;
}
.btn-secondary:hover:not(:disabled) {
  background: #3c4345;
}
.btn-ghost {
  background: transparent;
  color: #bbc9cd;
}
.btn-ghost:hover:not(:disabled) {
  background: #252b2d;
  color: #dee3e5;
}
.btn-danger {
  background: #ffb4ab;
  color: #690005;
}
.btn-danger:hover:not(:disabled) {
  background: #ffdad6;
}
.btn-danger-ghost {
  background: transparent;
  color: #ffb4ab;
}
.btn-danger-ghost:hover:not(:disabled) {
  background: rgba(147, 0, 10, 0.3);
}

/* Visibility labels, agreed 2026-09-13. Board only: lock icon on a neutral
   chip. All residents: the secondary blue #507e8a as a tint with a solid border
   rather than a solid fill, because white text on solid #507e8a falls just
   short of the WCAG AA contrast minimum for small text. Gold is kept out on
   purpose: DESIGN.md reserves it for urgent and priority items, and board-only
   means restricted, not urgent. */
.doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.doc-chip .material-symbols-outlined {
  font-size: 14px;
}
.doc-chip-board {
  background: #252b2d;
  border: 1px solid #3c494d;
  color: #dee3e5;
}
.doc-chip-residents {
  background: rgba(80, 126, 138, 0.28);
  border: 1px solid #507e8a;
  color: #d4eaf0;
}
.doc-chip-sample {
  background: transparent;
  border: 1px dashed #869397;
  color: #bbc9cd;
}

.choice-card {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #3c494d;
  border-radius: 8px;
  background: #171d1e;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.choice-card:has(input:checked) {
  border-color: #48dafa;
  background: rgba(72, 218, 250, 0.08);
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #3c494d;
  border-radius: 8px;
  background: #171d1e;
}
.segmented button {
  flex: 1;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #bbc9cd;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.segmented button:hover {
  color: #dee3e5;
}
.segmented button[aria-pressed="true"] {
  background: #252b2d;
  color: #48dafa;
}
.segmented button:focus-visible {
  outline: 2px solid #0dbedd;
  outline-offset: 2px;
}

/* Rows: 12px gap per DESIGN.md's Documents Page spec. */
.doc-manage-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-manage-row {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  background: #171d1e;
}
.doc-manage-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.doc-manage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: #303638;
  color: #48dafa;
}
.doc-manage-text {
  min-width: 0;
}
.doc-manage-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.doc-manage-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #dee3e5;
  overflow-wrap: anywhere;
}
.doc-manage-meta {
  font-size: 14px;
  line-height: 20px;
  color: #bbc9cd;
}
/* Below 1024px the visibility button takes its own full-width line and
   Rename / Move / Delete share an even row of three beneath it. Left to flex
   wrapping, they broke differently on every row. From 1024px up they return
   to a single line (see the media query below). */
.doc-manage-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.doc-manage-actions .btn-secondary {
  grid-column: 1 / -1;
}
.doc-manage-actions .btn-ghost,
.doc-manage-actions .btn-danger-ghost {
  gap: 4px;
  padding: 0 6px;
}
.doc-manage-actions .btn-ghost .material-symbols-outlined,
.doc-manage-actions .btn-danger-ghost .material-symbols-outlined {
  font-size: 18px;
}
/* The smallest phones cannot fit an icon and "Rename" in a third of the row. */
@media (max-width: 359px) {
  .doc-manage-actions .btn-ghost .material-symbols-outlined,
  .doc-manage-actions .btn-danger-ghost .material-symbols-outlined {
    display: none;
  }
}
/* Tablets: stop three buttons stretching across the whole card. */
@media (min-width: 640px) {
  .doc-manage-actions {
    max-width: 480px;
  }
}
.doc-manage-row-status {
  grid-column: 1 / -1;
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .doc-manage-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .doc-manage-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: none;
  }
  .doc-manage-actions .btn-ghost,
  .doc-manage-actions .btn-danger-ghost {
    gap: 8px;
    padding: 0 16px;
  }
  .doc-manage-actions .btn-ghost .material-symbols-outlined,
  .doc-manage-actions .btn-danger-ghost .material-symbols-outlined {
    font-size: 20px;
  }
}

.doc-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 24px;
  border: 1px solid #3c494d;
  border-radius: 0.75rem;
  background: #1b2122;
  color: #dee3e5;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.doc-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

/* Keyboard focus and disabled state for the shared .custom-toggle switch
   (profile.html, and "Residents can download" on manage-documents.html). The
   checkbox itself is visually hidden, so without the outline a keyboard user
   cannot see which switch has focus. Added 2026-09-13. */
.custom-toggle:focus-visible + .toggle-bg {
  outline: 2px solid #0dbedd;
  outline-offset: 2px;
}
.custom-toggle:disabled + .toggle-bg {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Per-document "Residents can download" switch in a Manage Documents row. The
   inset ring marks the track's edge in the off state, where its fill is close
   to the row background. */
.doc-download-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #bbc9cd;
  cursor: pointer;
}
.doc-download-switch .toggle-bg,
#upload-allow-download + .toggle-bg {
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px #3c494d;
}
.doc-download-note {
  color: #869397;
}

/* ---------------------------------------------------------------------------
   Documents page list (documents.html, rendered by documents-page.js) and the
   in-page document viewer (document-viewer.js). Added 2026-09-14.
   --------------------------------------------------------------------------- */
.doc-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.doc-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  background: #171d1e;
  transition: background-color 0.2s ease;
}
.doc-row:hover {
  background: #1b2122;
}
.doc-row-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 0;
  border-radius: 0.6rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.doc-row-open:hover .doc-row-title {
  color: #48dafa;
}
.doc-row-open:focus-visible,
.doc-row-download:focus-visible {
  outline: 2px solid #0dbedd;
  outline-offset: 2px;
}
.doc-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: #303638;
  color: #48dafa;
}
.doc-row-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.doc-row-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.doc-row-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #dee3e5;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.doc-row-meta {
  font-size: 14px;
  line-height: 20px;
  color: #bbc9cd;
}
.doc-row-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: #bbc9cd;
  cursor: pointer;
}
.doc-row-download:hover:not(:disabled) {
  background: #252b2d;
  color: #48dafa;
}
.doc-chip-viewonly {
  background: #252b2d;
  border: 1px solid #3c494d;
  color: #dee3e5;
}

/* The viewer. Full-screen on phones, a large window from 640px up. The page
   behind it stops scrolling while it is open (html.doc-viewer-open). */
html.doc-viewer-open {
  overflow: hidden;
}
.doc-viewer {
  width: min(1000px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #3c494d;
  border-radius: 0.75rem;
  background: #1b2122;
  color: #dee3e5;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.doc-viewer[open] {
  display: flex;
  flex-direction: column;
}
.doc-viewer::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}
.doc-viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid #3c494d;
  background: #171d1e;
}
.doc-viewer-heading {
  flex: 1 1 220px;
  min-width: 0;
}
.doc-viewer-title {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: #dee3e5;
  overflow-wrap: anywhere;
}
.doc-viewer-sub {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: #bbc9cd;
}
.doc-viewer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.doc-viewer-pagecount {
  padding: 0 8px;
  font-size: 13px;
  line-height: 18px;
  color: #bbc9cd;
  white-space: nowrap;
}
.doc-viewer-tools .doc-chip-viewonly {
  margin: 0 6px;
}
.doc-viewer-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #bbc9cd;
  cursor: pointer;
}
.doc-viewer-icon-btn:hover:not(:disabled) {
  background: #252b2d;
  color: #dee3e5;
}
.doc-viewer-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.doc-viewer-icon-btn:focus-visible {
  outline: 2px solid #0dbedd;
  outline-offset: 2px;
}
.doc-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  background: #0e1416;
  overscroll-behavior: contain;
}
.doc-viewer-body:focus-visible {
  outline: 2px solid #0dbedd;
  outline-offset: -2px;
}
.doc-viewer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: min-content;
}
.doc-viewer-page {
  flex-shrink: 0;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.doc-viewer-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.doc-viewer-page-error {
  padding: 24px;
  color: #690005;
  font-size: 14px;
}
.doc-viewer-image {
  display: block;
  max-width: none;
  height: auto;
  background: #ffffff;
}
.doc-viewer-status {
  max-width: 640px;
  margin: 0 auto 16px;
}
.form-status-loading {
  background: #171d1e;
  border: 1px solid #3c494d;
  color: #bbc9cd;
}
@media (max-width: 639px) {
  .doc-viewer {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .doc-viewer-bar {
    padding: 8px 6px 8px 14px;
  }
  .doc-viewer-close {
    order: 2;
  }
  .doc-viewer-tools {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }
  .doc-viewer-download-label {
    display: none;
  }
  .doc-viewer-download {
    padding: 0 12px;
  }
  .doc-viewer-body {
    padding: 10px;
  }
}

/* ---- Level-gated elements (auth-gate.js) ----------------------------------
   Anything marked data-min-level="N" stays hidden until auth-gate.js confirms
   the signed-in person is level N or above and marks it data-level-ok. Hidden
   by default so a Resident never sees a Manage Documents link flash up.
   A whole page marked <body data-min-level> is kept invisible (not removed)
   until the check finishes, then shown or sent to Home. */
[data-min-level]:not(body):not([data-level-ok]) {
  display: none !important;
}
body[data-min-level]:not([data-level-ok]) {
  visibility: hidden;
}