/* Auto-extracted public stylesheet */
:root,
html[data-theme="light"] {
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #182030;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --danger: #dc2626;
  --ok: #16a34a;
  --soft: #eef2ff;
  --avatar-bg: #e0ecff;
  --header-bg: rgba(255,255,255,.94);
  --shadow: rgba(15, 23, 42, .06);
  --dropdown-shadow: rgba(15, 23, 42, .14);
}

html[data-theme="dark"] {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --line: #334155;
  --brand: #60a5fa;
  --brand-dark: #3b82f6;
  --danger: #f87171;
  --ok: #4ade80;
  --soft: #1e293b;
  --avatar-bg: #1e3a8a;
  --header-bg: rgba(15, 23, 42, .94);
  --shadow: rgba(0, 0, 0, .25);
  --dropdown-shadow: rgba(0, 0, 0, .35);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #0f172a;
    --card: #111827;
    --text: #e5e7eb;
    --muted: #94a3b8;
    --line: #334155;
    --brand: #60a5fa;
    --brand-dark: #3b82f6;
    --danger: #f87171;
    --ok: #4ade80;
    --soft: #1e293b;
    --avatar-bg: #1e3a8a;
    --header-bg: rgba(15, 23, 42, .94);
    --shadow: rgba(0, 0, 0, .25);
    --dropdown-shadow: rgba(0, 0, 0, .35);
  }
}


* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
}
.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--text);
}
.logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #22c55e);
}
.nav-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.nav-links a, .account button, .button {
  border: 0;
  background: var(--brand);
  color: white;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
}
.nav-links a.secondary, .button.secondary {
  color: var(--text);
  background: var(--soft);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--avatar-bg);
  display: inline-grid;
  place-items: center;
  font-weight: 800;
}

.hero, .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 18px 50px var(--shadow);
}



.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.card { padding: 22px; margin-bottom: 18px; }
.card h2, .card h3 { margin-top: 0; }
.muted { color: var(--muted); }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { background: var(--soft); color: var(--text); }
form.stack { display: grid; gap: 12px; max-width: 760px; }
label { font-weight: 700; display: grid; gap: 6px; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: var(--card);
}
textarea { min-height: 120px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }




.management-section > .muted {
  margin: 0 0 4px;
}
.management-section .actions {
  margin-top: 10px;
}













.badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e0f2fe;
  font-size: 12px;
  font-weight: 800;
}
.badge.ok { background: #dcfce7; color: #166534; }
.badge.warn { background: #fef3c7; color: #92400e; }
.badge.danger { background: #fee2e2; color: #991b1b; }
.error {
  border: 1px solid #fecaca;
  background: #fff1f2;
  padding: 12px;
  border-radius: 12px;
  color: #991b1b;
}
.footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 18px 40px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .nav { align-items: flex-start; flex-direction: column; }
  .nav-links { margin-left: 0; }
  .hero { padding: 28px; }
}

.logo-img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: contain;
  background: var(--card);
  border: 1px solid var(--line);
}


.account-menu {
  position: relative;
}
.account-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px var(--dropdown-shadow);
  padding: 10px;
  display: grid;
  gap: 6px;
  z-index: 100;
}
.account-dropdown a,
.account-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--soft);
  color: var(--text);
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}
.account-dropdown form { margin: 0; }
.avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.avatar.large {
  width: 90px;
  height: 90px;
  font-size: 36px;
}


.language-form select {
  min-width: 120px;
  padding: 9px 12px;
}
.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.toolbar input {
  flex: 1;
  min-width: 240px;
}
.page-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.checkbox-line input { width: auto; }
.top-gap { margin-top: 16px; }
.inline-form { display: inline-block; margin: 8px 0; }





















.button.danger,
.nav-links button.danger {
  background: var(--danger);
  color: white;
}



.theme-form select {
  min-width: 110px;
  padding: 9px 12px;
}

.account-dropdown hr {
  border: 0;
  border-top: 1px solid var(--line);
  width: 100%;
  margin: 4px 0;
}







button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.record-details .card {
  box-shadow: none;
}

html[data-theme="dark"] .logo-img,
html[data-theme="dark"] .branding-preview-logo {
  background: #0b1220;
}


/* v0.1.3 UI/readability hardening */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --input-bg: #ffffff;
  --input-text: #182030;
  --input-placeholder: #64748b;
  --focus-ring: rgba(37, 99, 235, .28);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --input-bg: #0b1220;
  --input-text: #e5e7eb;
  --input-placeholder: #94a3b8;
  --focus-ring: rgba(96, 165, 250, .32);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --input-bg: #0b1220;
    --input-text: #e5e7eb;
    --input-placeholder: #94a3b8;
    --focus-ring: rgba(96, 165, 250, .32);
  }
}

input,
textarea,
select {
  background: var(--input-bg);
  color: var(--input-text);
  border-color: var(--line);
  caret-color: var(--input-text);
  accent-color: var(--brand);
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-color: var(--brand);
}

input:disabled,
textarea:disabled,
select:disabled,
input[readonly],
textarea[readonly] {
  opacity: .72;
  color: var(--muted);
  background: var(--soft);
  cursor: not-allowed;
}



html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="system"] input:-webkit-autofill,
html[data-theme="system"] textarea:-webkit-autofill,
html[data-theme="system"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text);
  box-shadow: 0 0 0 1000px var(--input-bg) inset;
  caret-color: var(--input-text);
}

.language-form select,
.theme-form select,
.menu-form select {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--line);
}

.account-menu summary {
  color: var(--text);
  border-radius: 999px;
  padding: 4px 8px;
}

.account-menu summary:hover {
  background: var(--soft);
  text-decoration: none;
}

.account-dropdown {
  color: var(--text);
}

.search-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.checkbox-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 700;
}

.checkbox-pill input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.checkbox-line {
  color: var(--text);
}

.button.danger {
  background: var(--danger);
  color: white;
}











.profile-picture-picker .profile-picture-large,
.profile-picture-picker .avatar.large {
  flex: 0 0 auto;
}

























/* v0.1.3-r3: keep live banner rendering consistent with Branding preview. */





/* v0.1.3-r4: banner scaling modes.
   These rules remove natural-size rendering and make the live banner use the
   same grow/shrink/fill behavior as the Branding preview. */

















/* v0.1.3-r5: banner original-size mode.
   Shows the uploaded banner at its natural pixel size while keeping the banner
   box height, position controls, and optional manual zoom active. */




/* v0.1.3-r6: authoritative banner renderer.
   Preview and live banners use the same container and mode classes. */






















.banner-alignment-controls .button {
  padding: 7px 10px;
  font-size: 12px;
}





/* v0.1.3-r7: banner editor UI cleanup.
   Automatic modes stay simple; manual sliders and alignment are only visible in Manual mode. */











.under-construction-hero {
  min-height: 45vh;
  align-items: center;
}

.notice {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.notice.ok {
  background: rgba(34, 197, 94, 0.10);
}

.notice.warn {
  background: rgba(245, 158, 11, 0.12);
}

html[data-theme="dark"] .notice.ok,
html[data-theme="dark"] .notice.warn {
  color: var(--text);
}





/* v0.1.3-uc5 cleanup */
.nav-links a.secondary,
.button.secondary {
  color: var(--text);
  background: var(--soft);
}

.nav-links a:not(.secondary) {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
}

.search-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) max-content max-content;
  align-items: center;
  gap: 10px;
}

.search-toolbar input {
  min-width: 280px;
}

.checkbox-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content !important;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 700;
  justify-self: start;
}

.checkbox-pill input,
.checkbox-line input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.create-details {
  display: inline-block;
  width: auto;
}

.create-details > summary.button,
.compact-summary {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: max-content;
}

.badge {
  color: #0f172a;
}

.badge.neutral {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
}

html[data-theme="dark"] .badge:not(.ok):not(.warn):not(.danger):not(.neutral) {
  background: #dbeafe;
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .badge:not(.ok):not(.warn):not(.danger):not(.neutral) {
    background: #dbeafe;
    color: #0f172a;
  }
}

@media (max-width: 720px) {
  .search-toolbar {
    grid-template-columns: 1fr;
  }
  .search-toolbar input,
  .checkbox-pill,
  .search-toolbar .button {
    width: 100% !important;
    max-width: none;
  }
  .checkbox-pill {
    justify-content: flex-start;
  }
}






/* 0.1.4-r2 merge/preservation: preserves UC5 preview while keeping v0.1.4 cleanup styles. */


/* v0.1.4-r3 public-page formatting */
.public-page-hero {
  align-items: start;
}

.public-content {
  display: grid;
  gap: 14px;
  max-width: 780px;
  margin-top: 14px;
}

.public-content h2 {
  margin: 14px 0 0;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.15;
}

.public-content p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  white-space: pre-line;
}

.public-content ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.public-content li + li {
  margin-top: 4px;
}




/* v0.1.4-r6 polish: audit/software log and legal page cleanup */
.legal-page-hero .badge {
  display: none;
}





.audit-tabs .badge {
  margin-left: 6px;
}




























.record-details summary .badge {
  margin-left: 0.35rem;
}


/* v0.1.4-r8 UI layout polish: compact filters, aligned office column and cleaner create panels */


.archive-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: max-content !important;
  min-width: max-content;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 800;
  justify-self: start;
}

.archive-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand);
}

.create-card {
  padding: 16px 22px;
}

.create-panel {
  display: block;
  width: 100%;
}

.create-panel > summary.button,
.create-panel > summary.compact-summary {
  display: inline-flex;
  width: auto;
  max-width: max-content;
  margin: 0;
}

.create-panel[open] > summary {
  margin-bottom: 14px;
}

.create-panel-body {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--soft) 52%, transparent);
  padding: 18px;
}

.create-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.create-panel-header h2,
.create-panel-header h3 {
  margin: 0 0 4px;
}

.create-form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 16px;
  max-width: none !important;
}

.create-form-grid .span-2 {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}













@media (max-width: 780px) {
  .compact-search-toolbar {
    grid-template-columns: 1fr;
  }

  .compact-search-toolbar input,
  .compact-search-toolbar .button,
  .archive-toggle {
    width: 100% !important;
    max-width: none;
  }

  .archive-toggle {
    justify-content: flex-start;
  }

  .create-form-grid {
    grid-template-columns: 1fr;
  }

  .create-form-grid .span-2 {
    grid-column: auto;
  }

  .create-panel-body {
    padding: 14px;
  }
}


/* v0.2.0 Projects module */










/* v0.2.1 Archive filter layout cleanup */
.archive-search-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.archive-search-main {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) max-content;
  gap: 10px;
  align-items: center;
}

.archive-search-main input {
  width: 100%;
  min-width: 0;
}

.archive-search-options {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.archive-search-options .archive-toggle {
  min-height: 36px;
  padding: 7px 10px;
  justify-self: start;
}

@media (max-width: 780px) {
  .archive-search-main {
    grid-template-columns: 1fr;
  }

  .archive-search-main .button {
    width: 100%;
  }

  .archive-search-options .archive-toggle {
    width: 100% !important;
    max-width: none;
    justify-content: flex-start;
  }
}


/* v0.2.2-r2 Document PDF Preview Completion */




/* v0.2.3 simple roadmap page */





.badge.neutral {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--line);
}







/* v0.2.5-r2 Support assignment, archive-filter and language UI fixes */


.toolbar .checkbox-pill,
.toolbar .checkbox-line,
.toolbar .archive-toggle,
.archive-search-options .archive-toggle {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: max-content !important;
  min-width: max-content !important;
  max-width: max-content;
}

.toolbar .checkbox-pill input,
.toolbar .checkbox-line input,
.toolbar .archive-toggle input,
.archive-search-options .archive-toggle input {
  flex: 0 0 auto !important;
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  margin: 0;
}

.toolbar .checkbox-pill,
.toolbar .checkbox-line {
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
  font-weight: 800;
}

.language-form {
  display: inline-flex;
  align-items: center;
}





/* v0.2.5-r3 button layout and protected document actions */
.button,
summary.button,
.actions .button,
.form-actions .button,
.card > details > summary.button,
.create-panel > summary.button {
  flex: 0 0 auto;
  width: auto;
}

summary.button,
.compact-summary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: max-content;
}

.create-panel {
  width: auto;
  max-width: 100%;
}

.create-panel[open] {
  display: block;
  width: 100%;
}



.actions form.no-margin,
td.actions form.no-margin {
  display: inline-flex;
}

td.actions {
  gap: 8px;
  align-items: center;
}


/* v0.2.8-r4: keep shared header on one row on desktop and restore clickable dashboard metric cards. */
.nav {
  flex-wrap: nowrap;
  gap: 10px;
}

.logo {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  text-decoration: none;
}

.logo span {
  white-space: nowrap;
}

.nav-links {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links a,
.nav-links button,
.account button,
.button {
  white-space: nowrap;
}

.account-menu {
  flex: 0 0 auto;
}

.account-menu summary {
  max-width: 220px;
  white-space: nowrap;
}

.account-menu summary span:not(.avatar) {
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-form {
  flex: 0 0 auto;
  margin-left: 4px;
  white-space: nowrap;
}

.language-form select {
  max-width: none;
  min-width: 11.5rem;
  width: auto;
}







.metric-card .muted,
.dashboard-metric-card .muted {
  color: var(--muted);
}

@media (max-width: 720px) {
  .nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-links {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .language-form {
    margin-left: 0;
  }
}

/* v0.2.8-r5: keep the account menu clickable and keep the language selector readable in dense headers. */
.header {
  overflow: visible;
}

.nav {
  overflow: visible;
}

.nav-links {
  overflow: visible;
  align-items: center;
}

.nav-links > a,
.nav-links > form,
.nav-links > details {
  flex: 0 0 auto;
}

.account-menu {
  position: relative;
  z-index: 70;
}

.account-menu summary {
  position: relative;
  z-index: 2;
  max-width: 240px;
  min-width: 0;
  pointer-events: auto;
  user-select: none;
}

.account-menu summary .avatar-img,
.account-menu summary .avatar {
  flex: 0 0 auto;
}

.account-menu summary span:not(.avatar) {
  max-width: 180px;
}

.account-dropdown {
  z-index: 2000;
}

.language-form {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 132px;
}

.language-form select {
  width: 132px;
  min-width: 132px;
  max-width: none;
  padding-right: 32px;
}

@media (max-width: 1040px) {
  .nav {
    gap: 8px;
  }

  .nav-links {
    gap: 6px;
  }

  .nav-links a,
  .nav-links button,
  .button {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 13px;
  }

  .account-menu summary {
    max-width: 190px;
  }

  .account-menu summary span:not(.avatar) {
    max-width: 135px;
  }

  .language-form {
    min-width: 124px;
  }

  .language-form select {
    width: 124px;
    min-width: 124px;
  }
}

@media (max-width: 720px) {
  .nav-links {
    overflow: visible;
  }

  .account-menu summary,
  .account-menu summary span:not(.avatar) {
    max-width: 100%;
  }

  .language-form {
    min-width: 0;
  }

  .language-form select {
    width: auto;
    min-width: 124px;
  }
}

/* v0.2.8-r6-r3: header regression lock.
   Purpose: keep logo, primary navigation, account menu and language selector in stable zones
   so dense Staff/Admin headers do not re-wrap old fixed bugs back into production. */
.header {
  overflow: visible;
}

.nav {
  max-width: 1320px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.logo {
  grid-column: 1;
  min-width: 0;
  max-width: 220px;
  white-space: nowrap;
  text-decoration: none;
  gap: 8px;
}

.logo-img,
.logo-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.logo-text {
  display: inline-block;
  min-width: 0;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
}

.nav-links {
  grid-column: 2;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 2px 0;
}

.nav-links > a,
.nav-links > form,
.nav-links > details,
.nav-links > button {
  flex: 0 0 auto;
}

.nav .nav-links a,
.nav .nav-links button {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.nav-tools {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
  white-space: nowrap;
  overflow: visible;
  position: relative;
  z-index: 90;
}

.nav-tools .account-menu {
  flex: 0 0 auto;
  position: relative;
  z-index: 100;
}

.nav-tools .account-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  min-width: 0;
  white-space: nowrap;
  pointer-events: auto;
  user-select: none;
}

.nav-tools .account-menu summary .avatar-img,
.nav-tools .account-menu summary .avatar {
  flex: 0 0 auto;
}

.nav-tools .account-menu summary span:not(.avatar) {
  min-width: 0;
  max-width: 165px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-tools .account-dropdown {
  top: calc(100% + 8px);
  right: 0;
  z-index: 3000;
}

.nav-tools .language-form {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 11.5rem;
  margin: 0;
  white-space: nowrap;
}

.nav-tools .language-form select {
  width: auto;
  min-width: 11.5rem;
  max-width: min(18rem, 42vw);
  padding: 8px 30px 8px 10px;
}

@media (max-width: 1180px) {
  .nav {
    grid-template-columns: minmax(128px, auto) minmax(0, 1fr) auto;
    gap: 8px;
  }

  .logo-text {
    max-width: 135px;
  }

  .nav .nav-links a,
  .nav .nav-links button {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }

  .nav-tools .account-menu summary {
    max-width: 170px;
  }

  .nav-tools .account-menu summary span:not(.avatar) {
    max-width: 120px;
  }

  .nav-tools .language-form {
    min-width: 10.5rem;
  }

  .nav-tools .language-form select {
    width: auto;
    min-width: 10.5rem;
    max-width: min(16rem, 46vw);
  }
}

@media (max-width: 920px) {
  .nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    flex-direction: initial;
  }

  .logo {
    grid-column: 1;
    max-width: 100%;
  }

  .nav-tools {
    grid-column: 2;
    justify-self: end;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@media (max-width: 640px) {
  .nav {
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo-text {
    max-width: 120px;
  }

  .nav-tools {
    gap: 6px;
  }

  .nav-tools .account-menu summary span:not(.avatar) {
    display: none;
  }

  .nav-tools .language-form {
    min-width: 10rem;
  }

  .nav-tools .language-form select {
    width: auto;
    min-width: 10rem;
    max-width: min(14rem, 52vw);
  }
}


/* v0.2.8-r6-r4: public/login UI cleanup.
   Keep the r3 header regression lock intact while removing duplicate construction-card Login CTA
   and making the login form submit button compact instead of grid-stretched. */
.auth-card {
  max-width: 760px;
  overflow: visible;
}

.auth-form {
  max-width: 100%;
  min-width: 0;
}

.auth-form label {
  min-width: 0;
  max-width: 100%;
}

.auth-form input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.auth-form .auth-submit {
  width: auto;
  min-width: 118px;
  justify-self: start;
  align-self: center;
  padding-left: 18px;
  padding-right: 18px;
}




/* v0.2.8-r6-r5: German language sweep formatting guard.
   Keep longer German UI labels readable without weakening r3/r4 header/login fixes. */


th,
td {
  overflow-wrap: anywhere;
}

.project-number-cell,
.nowrap,
.badge,
.button,
.nav .nav-links a,
.nav .nav-links button,
.archive-toggle,
.checkbox-pill {
  overflow-wrap: normal;
}

.archive-search-form,
.search-toolbar,
.toolbar,
.form-actions,
.actions {
  min-width: 0;
}

.archive-search-main input,
.search-toolbar input,
.toolbar input {
  min-width: 0;
}

/* v0.2.9-r2 mobile banner layout
   Keep desktop banner controls unchanged. On phones, prevent the uploaded
   banner from sitting inside an oversized fixed-height card with large
   empty space above and below the image. */





/* v0.2.9-r3 mobile banner focus preview.
   Admins can choose a mobile-only crop/focus point for the existing banner.
   Desktop banner rendering and uploaded files stay unchanged. */












.mobile-focus-presets .button {
  padding: 7px 10px;
  font-size: 12px;
}






/* v0.2.9-r4 mobile admin/staff list card layout.
   Desktop tables stay unchanged. On phones, tables with headings become stacked
   cards with label/value rows so content no longer breaks letter-by-letter. */
@media (max-width: 760px) {
  main .table-wrap {
    overflow-x: visible;
  }

  main th,
  main td {
    word-break: normal;
    overflow-wrap: break-word;
  }

  main table.mobile-card-table,
  main table.mobile-card-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  main table.mobile-card-table colgroup,
  main table.mobile-card-table .mobile-table-header-row {
    display: none !important;
  }

  main table.mobile-card-table tr {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 10px 28px var(--shadow);
    overflow: hidden;
  }

  main table.mobile-card-table td {
    display: grid;
    grid-template-columns: minmax(104px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    width: 100%;
    min-width: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    white-space: normal;
    line-height: 1.35;
  }

  main table.mobile-card-table td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  main table.mobile-card-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
    text-transform: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  main table.mobile-card-table td[data-label=""] {
    display: block;
  }

  main table.mobile-card-table td[data-label=""]::before {
    display: none;
    content: "";
  }

  main table.mobile-card-table td > *,
  main table.mobile-card-table td a,
  main table.mobile-card-table td span,
  main table.mobile-card-table td strong {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  main table.mobile-card-table .actions {
    margin-top: 0;
    gap: 8px;
  }

  main table.mobile-card-table .button {
    white-space: nowrap;
  }

  main table.mobile-card-table .badge {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  main table.mobile-card-table .nowrap,
  main table.mobile-card-table .office-cell,
  main table.mobile-card-table .project-number-cell {
    white-space: normal;
    min-width: 0;
  }

  main table.mobile-card-table.users-table {
    min-width: 0 !important;
  }
}



/* v0.2.9-r5: mobile header/account menu containment.
   Keep desktop header unchanged. On phones, keep the account dropdown inside
   the viewport and give the brand name enough controlled space before it
   falls back to an ellipsis. */
@media (max-width: 640px) {
  .nav {
    padding-left: 12px;
    padding-right: 12px;
    gap: 8px;
  }

  .logo {
    gap: 6px;
    max-width: 100%;
    min-width: 0;
  }

  .logo-text {
    max-width: clamp(118px, calc(100vw - 234px), 170px);
    font-size: 15px;
    line-height: 1.05;
  }

  .nav-tools {
    gap: 6px;
    min-width: 0;
    overflow: visible;
  }

  .nav-tools .account-menu {
    position: static;
  }

  .nav-tools .account-dropdown {
    position: fixed;
    top: 58px;
    right: 12px;
    left: auto;
    width: min(280px, calc(100vw - 24px));
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 76px);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 5000;
  }

  .account-dropdown a,
  .account-dropdown button,
  .account-dropdown label,
  .account-dropdown strong {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
  }

  .account-dropdown select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .logo-text {
    max-width: clamp(92px, calc(100vw - 228px), 145px);
    font-size: 14px;
  }

  .nav-tools .language-form {
    min-width: 108px;
  }

  .nav-tools .language-form select {
    width: 108px;
    min-width: 108px;
    max-width: 108px;
  }
}


/* v0.2.9-r6: mobile header language placement and compact mobile cards.
   Desktop header/table layout remains unchanged. On phones, the language selector
   moves out of the crowded header and long list-table details are hidden until
   the user opens the record. */
.account-language-form,
.footer-language-form,
.account-language-switcher,
.footer-language-switcher {
  display: none;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-language-form label,
.account-language-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.footer-language-form select,
.account-language-form select {
  min-width: 11.5rem;
  width: auto;
  max-width: 100%;
}

@media (max-width: 640px) {
  .nav {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .nav-tools .header-language-form {
    display: none !important;
  }

  .account-language-form,
  .account-language-switcher {
    display: none !important;
  }

  .logo {
    max-width: calc(100vw - 96px);
  }

  .logo-text {
    max-width: min(260px, calc(100vw - 116px));
    font-size: 15px;
  }

  .nav-tools {
    min-width: auto;
  }

  .footer-main {
    align-items: flex-start;
  }

  .footer-language-form,
  .footer-language-switcher {
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  .footer-language-form label {
    max-width: 220px;
  }

  .footer-language-form select {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .logo-text {
    max-width: min(230px, calc(100vw - 108px));
    font-size: 14px;
  }
}

@media (max-width: 760px) {
  main table.mobile-compact-card-table tr {
    padding: 12px 13px;
  }

  main table.mobile-compact-card-table td[data-mobile-compact-hidden="true"] {
    display: none !important;
  }

  main table.mobile-compact-card-table td {
    grid-template-columns: minmax(82px, 32%) minmax(0, 1fr);
    gap: 9px;
  }

  main table.mobile-compact-card-table td::before {
    font-size: 11px;
  }

  main table.mobile-compact-card-table .mobile-card-secondary-detail {
    display: none !important;
  }

  main table.mobile-compact-card-table td[data-label=""] {
    padding-top: 10px;
  }

  main table.mobile-compact-card-table td[data-label=""] .actions,
  main table.mobile-compact-card-table td[data-label=""] form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  main table.mobile-compact-card-table td[data-label=""] .button,
  main table.mobile-compact-card-table td[data-label=""] button {
    width: auto;
    max-width: 100%;
  }

  main table.mobile-table-companies td,
  main table.mobile-table-projects td,
  main table.mobile-table-support td,
  main table.mobile-table-documents td,
  main table.mobile-table-users td,
  main table.mobile-table-templates td {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  main table.mobile-table-companies tr,
  main table.mobile-table-projects tr,
  main table.mobile-table-support tr,
  main table.mobile-table-documents tr,
  main table.mobile-table-users tr,
  main table.mobile-table-templates tr {
    box-shadow: 0 8px 22px var(--shadow);
  }
}


/* v0.2.9-r7: mobile dense list overview.
   Desktop tables remain unchanged. On phones, list pages show dense overview
   cards instead of tall label/value cards. Full detail remains available after
   opening the record. */
@media (max-width: 760px) {
  main table.mobile-dense-list-table tr {
    display: block;
    padding: 12px 13px;
    margin-bottom: 10px;
    border-radius: 16px;
  }

  main table.mobile-dense-list-table td {
    display: block;
    width: 100%;
    padding: 0;
    border-bottom: 0;
    line-height: 1.28;
  }

  main table.mobile-dense-list-table td::before {
    display: none !important;
    content: "" !important;
  }

  main table.mobile-dense-list-table td[data-mobile-role="primary"] {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    margin-bottom: 5px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="secondary"] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-top: 2px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="secondary"][data-mobile-inline-after="true"] {
    margin-top: 1px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="status"],
  main table.mobile-dense-list-table td[data-mobile-role="priority"] {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin-top: 7px;
    margin-right: 6px;
    vertical-align: middle;
  }

  main table.mobile-dense-list-table td[data-mobile-role="status"] .badge,
  main table.mobile-dense-list-table td[data-mobile-role="priority"] .badge {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
  }

  main table.mobile-dense-list-table td[data-mobile-role="action"] {
    margin-top: 8px;
  }

  main table.mobile-dense-list-table td[data-mobile-role="action"] .actions,
  main table.mobile-dense-list-table td[data-mobile-role="action"] form {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
  }

  main table.mobile-dense-list-table td[data-mobile-role="action"] .button,
  main table.mobile-dense-list-table td[data-mobile-role="action"] button {
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 8px 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  main table.mobile-dense-list-table td[data-mobile-role="hidden"],
  main table.mobile-dense-list-table td[data-mobile-compact-hidden="true"] {
    display: none !important;
  }

  main table.mobile-dense-list-table td > *,
  main table.mobile-dense-list-table td a,
  main table.mobile-dense-list-table td span,
  main table.mobile-dense-list-table td strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  main table.mobile-dense-list-table .mobile-card-secondary-detail {
    display: none !important;
  }

  main table.mobile-dense-list-table .badge {
    width: auto;
    max-width: 100%;
  }
}




/* v0.3.0-r1: project progress percent
   Add readable progress meters on project list/detail pages without changing
   existing desktop table/mobile dense card behavior. */




















/* v0.3.0-r2/r5: project progress desktop table layout fix.
   r5 combines Number + Customer on the main Projects/Projekte list only.
   Progress/Fortschritt stays in its own column. Company/detail linked tables
   are intentionally unchanged. */



































/* v0.3.0-r3: linked project table layout fix.
   Apply the same safe desktop project table procedure to embedded/linked project
   tables inside company/customer detail pages. This prevents Number/Responsible
   from collapsing letter-by-letter after the progress column was added. */

















/* v0.3.2-r1: project detail right-side collapsible readable text blocks.
   Only saved fields are shown by the template; expanded content preserves line breaks. */













/* v0.3.2-r3 Roadmap polish:
   remove helper-pill dependency, make category labels readable on narrow desktop widths. */







/* v0.3.3-r1 support intake source registry */








pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: var(--soft);
}


/* v0.3.3-r4 support intake owner help */













/* v0.3.4-r1 hosted/iframe support intake form */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin-top: 4px;
}

.checkbox-label span,
.checkbox-label small {
  display: block;
}

.support-intake-public-body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--soft), var(--background));
}

.support-intake-public-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 16px;
}

.support-intake-public-shell.is-embedded {
  padding: 12px;
}

.support-intake-public-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 24px;
}

.support-intake-public-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.support-intake-public-form {
  display: grid;
  gap: 14px;
}



.small-text {
  font-size: 13px;
}

@media (max-width: 760px) {
  .support-intake-public-card {
    padding: 18px;
    border-radius: 18px;
  }

  .support-intake-public-shell {
    padding: 12px;
  }
}


/* v0.3.4-r4 hosted/iframe help layout fix */

















/* v0.3.4-r10 customer portal owner-company/projects/support polish */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}






/* v0.3.5-r1 optional MFA security UI */


.card-subsection {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 12px;
  background: color-mix(in srgb, var(--soft) 45%, transparent);
}

.card-subsection summary {
  cursor: pointer;
  font-weight: 800;
}






/* v0.3.5-r3 optional MFA local QR setup */











/* v0.3.5 stable: Admin support/settings layout polish.
   Make support list columns readable on desktop and group runtime settings into clean cards. */




















.support-status-cell .badge,
.support-priority-cell .badge {
  white-space: nowrap;
}













.support-action-cell .button {
  white-space: nowrap;
  display: inline-flex;
}

























.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}





@media (max-width: 760px) {
  .support-list-table {
    min-width: 0;
  }

  .support-assignee-cell {
    min-width: 0;
  }

  .support-action-cell {
    padding-top: 10px !important;
  }

  .support-action-cell .button {
    width: auto;
  }

  .settings-field-grid {
    grid-template-columns: 1fr;
  }

  .settings-save-card {
    align-items: flex-start;
  }
}




.public-contact-form textarea {
  min-height: 10rem;
}






/* v0.3.9-r1 Staff dashboard action cards on existing Companies / Customers dashboard */








.dashboard-action-card > .badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}















/* v0.3.9-r4 Dashboard card settings/menu polish */






.dashboard-card-setting-row .settings-row-copy .muted {
  display: block;
  margin-top: 0.2rem;
  font-weight: 600;
}





/* v0.3.10-r1: compact theme selector in the right-side header tools. */


.theme-menu {
  position: relative;
  flex: 0 0 auto;
}

.theme-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 8px 22px var(--shadow);
  user-select: none;
}

.theme-menu summary::-webkit-details-marker {
  display: none;
}

.theme-menu summary:hover,
.theme-menu[open] summary {
  border-color: var(--brand);
  text-decoration: none;
}

.theme-menu-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 17px;
  line-height: 1;
}

.theme-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px var(--dropdown-shadow);
  padding: 8px;
  display: grid;
  gap: 6px;
  z-index: 3000;
}

.theme-dropdown form {
  margin: 0;
}

.theme-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--soft);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.theme-dropdown button:hover,
.theme-dropdown button.is-active {
  background: var(--brand);
  color: #fff;
}

.nav-tools .theme-menu {
  z-index: 120;
}




/* v0.4.0-r1: Secure Customer Portal Messaging */
































.rich-editor-toolbar .button {
  min-width: 2.4rem;
  padding: .4rem .55rem;
}



.checkbox-grid {
  display: grid;
  gap: .5rem;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
  align-items: end;
}
.nav-unread-badge {
  display: inline-flex;
  min-width: 1.3rem;
  min-height: 1.3rem;
  align-items: center;
  justify-content: center;
  margin-left: .25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--danger, #b42318);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}



/* v0.4.0-r2: preserve optional Cloudflare Turnstile protection. */
.public-contact-turnstile {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  max-width: 100%;
  overflow-x: auto;
}
.turnstile-config-status {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  font-size: 0.9rem;
}
.turnstile-config-status.is-ready { border-color: #2f8f5b; }
.turnstile-config-status.is-warning { border-color: #b7791f; }

/* v0.4.0-r2: internal Owner Company messaging. */


.portal-conversation-title .badge {
  flex: 0 0 auto;
}

/* v0.4.0-r2: dense desktop header navigation without a visible native scrollbar. */
.nav {
  max-width: 1600px;
}
.nav-links {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
@media (max-width: 1420px) and (min-width: 901px) {
  .nav {
    grid-template-columns: minmax(150px, 1fr) auto;
    align-items: center;
  }
  .logo {
    grid-column: 1;
    grid-row: 1;
  }
  .nav-tools {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    padding-bottom: 3px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
@media (max-width: 420px) {
  .public-contact-turnstile { width: 100%; }
}

/* v0.4.0-r3: word-safe portal message previews */








/* v0.4.0-r4: shared permission-scoped live counter refresh */

















/* v0.4.0-r5 portal document message attachments */


























.portal-message-attachments .badge {
  margin-right: 0.35rem;
}

/* v0.4.0-r6: aggregated action-card alert, pale-red counters and timed-theme profile controls */
.badge.action-card-attention {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}



@keyframes live-counter-soft-highlight {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .25); }
  35% { box-shadow: 0 0 0 .35rem rgba(220, 38, 38, .12); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

html[data-theme="dark"] .badge.action-card-attention {
  background: rgba(127, 29, 29, .55);
  color: #fecaca;
  border-color: rgba(248, 113, 113, .55);
}





.theme-auto-settings {
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}



/* v0.4.0-r7 Owner Company staff single-identity workflow */
































@media (max-width: 680px) {
  .owner-company-candidate-row {
    align-items: stretch;
    flex-direction: column;
  }

  .owner-company-candidate-row .button {
    width: 100%;
  }

  .owner-company-employee-summary div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* v0.4.0-r8: role-aware user form visibility.
   The global label display rule must never override the HTML hidden attribute. */









/* v0.4.1-r2: Support Intake help URL source clarity. */




/* v0.4.2-r1: Public website theme-system foundation. */
html[data-public-website-theme="default"] .public-page-theme-default {
  /* Default theme intentionally preserves the existing public website appearance. */
}
.public-website-theme-modern-agency .public-page-theme-default {
  /* Theme classes are present before the Modern Agency layout patch is installed. */
}


/* v0.4.2-r2: Modern Agency public website theme with safe video hero. */
.modern-agency-hero {
  position: relative;
  min-height: clamp(620px, 82vh, 920px);
  display: grid;
  align-items: center;
  overflow: hidden;
  margin: -1.5rem -1.5rem 2rem;
  padding: clamp(7rem, 12vw, 12rem) clamp(1.25rem, 5vw, 6rem) clamp(3rem, 7vw, 6rem);
  color: #fff;
  background: #123246;
}

.modern-agency-hero-video,
.modern-agency-hero-fallback,
.modern-agency-hero-overlay {
  position: absolute;
  inset: 0;
}

.modern-agency-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.modern-agency-hero-fallback {
  z-index: 0;
  background:
    radial-gradient(circle at 74% 28%, rgba(25, 160, 114, .32), transparent 28rem),
    linear-gradient(135deg, #163850 0%, #234f67 44%, #0f2a3b 100%);
}

.modern-agency-hero-overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 20, 31, .74) 0%, rgba(5, 20, 31, .55) 42%, rgba(5, 20, 31, .30) 100%),
    linear-gradient(180deg, rgba(5, 20, 31, .28) 0%, rgba(5, 20, 31, .08) 46%, rgba(5, 20, 31, .62) 100%);
}

.modern-agency-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
}

.modern-agency-hero-copy {
  max-width: 760px;
}

.modern-agency-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .72rem;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: inherit;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.modern-agency-hero h1 {
  margin: 1rem 0;
  color: inherit;
  font-size: clamp(3.2rem, 8vw, 7.4rem);
  line-height: .93;
  letter-spacing: -.06em;
  max-width: 850px;
}

.modern-agency-hero p {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  line-height: 1.55;
  max-width: 760px;
}

.modern-agency-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin: 1.6rem 0 1.2rem;
}

.modern-agency-secondary-action {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .72);
  color: #fff;
}

.modern-agency-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.6rem;
}

.modern-agency-proof-row span {
  display: inline-flex;
  align-items: center;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 700;
}

.modern-agency-contact-card {
  border-radius: 28px;
  background: rgba(255, 255, 255, .94);
  color: #102536;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.modern-agency-contact-card h2 {
  color: #0b7d46;
  margin-top: .75rem;
  font-size: clamp(1.6rem, 2.5vw, 2.25rem);
  line-height: 1.05;
}

.modern-agency-contact-card p {
  color: #315064;
  font-size: 1rem;
}

.modern-agency-card-icon {
  display: inline-grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: .48rem solid #078544;
  border-radius: 999px;
  color: #078544;
  font-size: 1.4rem;
  line-height: 1;
}

.modern-agency-section {
  max-width: 1180px;
  margin: 0 auto 2rem;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 3vw, 2rem);
}

.modern-agency-section-heading {
  max-width: 780px;
  margin-bottom: 1.6rem;
}

.modern-agency-section-heading .modern-agency-kicker {
  color: #086b45;
  border-color: rgba(8, 107, 69, .18);
  background: rgba(8, 107, 69, .08);
}

.modern-agency-section-heading h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: .8rem 0;
}

.modern-agency-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.modern-agency-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  box-shadow: var(--shadow);
}

.modern-agency-card h3 {
  font-size: 1.25rem;
  margin-top: 0;
}

.modern-agency-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.modern-agency-pill-list span {
  padding: .72rem 1rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  font-weight: 750;
}

@media (max-width: 920px) {
  .modern-agency-hero {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-top: 6.5rem;
  }

  .modern-agency-hero-inner,
  .modern-agency-card-grid {
    grid-template-columns: 1fr;
  }

  .modern-agency-contact-card {
    max-width: 520px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modern-agency-hero-video {
    display: none;
  }
}


/* v0.4.2-r3: Modern Agency public chrome polish.
   The alternate public theme owns the public viewport and carries its own nav. */
body.modern-agency-public-chrome {
  background: #071a26;
  color: #ffffff;
}

body.modern-agency-public-chrome .header,
body.modern-agency-public-chrome .site-banner,
body.modern-agency-public-chrome .preview-banner {
  display: none !important;
}

body.modern-agency-public-chrome .modern-agency-public-main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.modern-agency-public-shell {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 8%, rgba(29, 185, 132, .20), transparent 24rem),
    linear-gradient(180deg, #071a26 0%, #0b2535 48%, #eef4f7 48%, #eef4f7 100%);
  color: #ffffff;
}

.modern-agency-nav {
  position: relative;
  z-index: 8;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(.9rem, 2vw, 1.35rem) clamp(1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #ffffff;
}

.modern-agency-nav-overlay {
  margin-bottom: -5.8rem;
}

.modern-agency-nav-solid {
  background: #071a26;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.modern-agency-brand,
.modern-agency-nav-links,
.modern-agency-nav-actions {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(6, 22, 32, .54);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .20);
  backdrop-filter: blur(18px);
}

.modern-agency-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -.02em;
  border-radius: 999px;
  padding: .52rem .9rem .52rem .58rem;
  white-space: nowrap;
}

.modern-agency-brand:hover,
.modern-agency-nav-link:hover,
.modern-agency-login-link:hover {
  text-decoration: none;
}

.modern-agency-logo-img,
.modern-agency-logo-mark {
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.modern-agency-logo-img {
  object-fit: contain;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .28);
}

.modern-agency-logo-mark {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #17a976, #2563eb);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
}

.modern-agency-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  border-radius: 999px;
  padding: .45rem;
  margin-inline: auto;
}

.modern-agency-nav-link,
.modern-agency-login-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  border-radius: 999px;
  padding: .56rem .88rem;
  color: rgba(255, 255, 255, .86);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1;
}

.modern-agency-nav-link.is-active,
.modern-agency-nav-link:hover,
.modern-agency-login-link:hover {
  background: rgba(255, 255, 255, .94);
  color: #092033;
}

.modern-agency-nav-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .45rem;
}

.modern-agency-language-form {
  margin: 0;
}

.modern-agency-language-form select {
  inline-size: auto;
  min-width: 11.5rem;
  max-width: min(18rem, 70vw);
  min-height: 2.35rem;
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .94);
  color: #092033;
  padding: .48rem 2rem .48rem .82rem;
  font-weight: 800;
}

body.modern-agency-public-chrome .modern-agency-hero {
  min-height: 100vh;
  margin: 0;
  padding-top: clamp(8.8rem, 14vw, 13rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.8rem);
}

body.modern-agency-public-chrome .modern-agency-section {
  max-width: 1260px;
  padding-left: clamp(1rem, 4vw, 3rem);
  padding-right: clamp(1rem, 4vw, 3rem);
}

body.modern-agency-public-chrome .modern-agency-public-shell > .card,
body.modern-agency-public-chrome .modern-agency-public-shell > .grid,
body.modern-agency-public-chrome .modern-agency-public-shell > .public-contact-card {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}

body.modern-agency-public-chrome .modern-agency-public-shell > .card {
  border-color: rgba(8, 32, 48, .10);
  background: rgba(255, 255, 255, .96);
  color: #102536;
}

body.modern-agency-public-chrome .modern-agency-public-shell > .card .muted,
body.modern-agency-public-chrome .modern-agency-public-shell > .card p {
  color: #405569;
}

body.modern-agency-public-chrome .footer {
  max-width: none;
  margin: 0;
  padding: 1.35rem clamp(1rem, 4vw, 3rem) 2rem;
  background: #eef4f7;
  color: #405569;
}

body.modern-agency-public-chrome .footer-main {
  max-width: 1260px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .modern-agency-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .modern-agency-brand {
    margin-right: auto;
  }

  .modern-agency-nav-links {
    order: 3;
    flex-basis: 100%;
    border-radius: 28px;
  }

  .modern-agency-nav-actions {
    margin-left: auto;
  }

  .modern-agency-nav-overlay {
    margin-bottom: -8.3rem;
  }

  body.modern-agency-public-chrome .modern-agency-hero {
    padding-top: 12.8rem;
  }
}

@media (max-width: 680px) {
  .modern-agency-nav {
    align-items: stretch;
    padding: .75rem;
  }

  .modern-agency-brand,
  .modern-agency-nav-actions,
  .modern-agency-nav-links {
    width: 100%;
    justify-content: center;
  }

  .modern-agency-nav-actions {
    flex-wrap: wrap;
  }

  .modern-agency-login-link,
  .modern-agency-language-form,
  .modern-agency-language-form select {
    width: 100%;
  }

  .modern-agency-nav-overlay {
    margin-bottom: -13.5rem;
  }

  body.modern-agency-public-chrome .modern-agency-hero {
    padding-top: 17rem;
  }
}

/* v0.4.2-r4: admin/header translation fallback hotfix marker. */

/* v0.4.2-r5: admin-only public theme preview controls. */
.settings-inline-actions.public-theme-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .65rem;
}











body.modern-agency-public-chrome.admin-public-preview-active .admin-public-preview-toolbar {
  position: sticky;
  top: 0;
  margin: 0;
}

body.modern-agency-public-chrome.admin-public-preview-active .modern-agency-nav-overlay {
  top: 0;
}

@media (max-width: 780px) {
  .admin-public-preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-public-preview-toolbar-actions {
    justify-content: stretch;
  }

  .admin-public-preview-toolbar-actions .button {
    flex: 1 1 auto;
  }
}

/* v0.4.2-r6: admin public theme preview controls build fix cache marker. */

/* v0.4.2: stable promotion cache marker from v0.4.2-r6. */

/* v0.4.3-r1: Modern Agency light-section contrast polish. */
body.public-website-theme-modern-agency .modern-agency-section {
  color: #102536;
}

body.public-website-theme-modern-agency .modern-agency-section-heading {
  color: #102536;
}

body.public-website-theme-modern-agency .modern-agency-section-heading .modern-agency-kicker {
  color: #086b45;
  border-color: rgba(8, 107, 69, .28);
  background: rgba(8, 107, 69, .10);
  text-shadow: none;
}

body.public-website-theme-modern-agency .modern-agency-section-heading h2 {
  color: #102536;
  text-shadow: none;
}

body.public-website-theme-modern-agency .modern-agency-benefits,
body.public-website-theme-modern-agency .modern-agency-service-strip {
  color: #102536;
}

body.public-website-theme-modern-agency .modern-agency-card {
  background: rgba(255, 255, 255, .98);
  color: #102536;
  border: 1px solid rgba(15, 35, 50, .12);
  box-shadow: 0 24px 60px rgba(15, 35, 50, .12);
}

body.public-website-theme-modern-agency .modern-agency-card h3 {
  color: #0f2f45;
  text-shadow: none;
}

body.public-website-theme-modern-agency .modern-agency-card p {
  color: #315064;
  text-shadow: none;
}

body.public-website-theme-modern-agency .modern-agency-pill-list span {
  background: rgba(255, 255, 255, .98);
  color: #102536;
  border-color: rgba(15, 35, 50, .12);
  box-shadow: 0 18px 44px rgba(15, 35, 50, .10);
  text-shadow: none;
}

body.public-website-theme-modern-agency .modern-agency-benefits + .modern-agency-service-strip {
  margin-top: .5rem;
}

body.public-website-theme-modern-agency .modern-agency-card:focus-within,
body.public-website-theme-modern-agency .modern-agency-card:hover {
  border-color: rgba(8, 107, 69, .24);
  box-shadow: 0 28px 70px rgba(15, 35, 50, .16);
}

/* v0.4.3-r2: admin settings preview button layout polish. */
.settings-field.public-theme-preview-field {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.settings-field.public-theme-preview-field .field-hint {
  max-width: 100%;
}

.settings-inline-actions.public-theme-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: .55rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: .7rem;
}

.settings-inline-actions.public-theme-preview-actions .button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-content: center;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
}

.settings-field.public-theme-preview-field select {
  max-width: 100%;
}

@media (max-width: 1180px) {
  .settings-inline-actions.public-theme-preview-actions .button {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}

@media (max-width: 760px) {
  .settings-field.public-theme-preview-field {
    grid-column: 1 / -1;
  }
}

/* v0.4.3: stable promotion cache marker from v0.4.3-r2. */

/* v0.4.4-r1: SEO foundation admin checks and metadata controls. */
.seo-checks-card {
  border-color: rgba(37, 99, 235, .22);
}

.seo-check-list {
  display: grid;
  gap: .75rem;
  margin-top: 1rem;
}

.seo-check-item {
  border: 1px solid var(--border, rgba(148, 163, 184, .35));
  border-radius: 14px;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .72);
}

.seo-check-item strong {
  display: block;
  margin-bottom: .25rem;
}

.seo-check-item span {
  color: var(--muted, #64748b);
}

.seo-check-pass {
  border-color: rgba(34, 197, 94, .35);
}

.seo-check-warning {
  border-color: rgba(245, 158, 11, .38);
}

.seo-check-fail {
  border-color: rgba(239, 68, 68, .42);
  background: rgba(254, 242, 242, .82);
}

.seo-check-info {
  border-color: rgba(59, 130, 246, .32);
}



/* v0.4.4-r2: SEO validator alignment repair marker. */

/* v0.4.4: stable promotion cache marker from v0.4.4-r2. */

/* v0.4.5: SEO mode safety lock admin status. */
.seo-mode-safety-card {
  border-color: rgba(37, 99, 235, .28);
}

.seo-mode-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}

.seo-mode-status-grid > div {
  border: 1px solid var(--border, rgba(148, 163, 184, .35));
  border-radius: 14px;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .72);
}

.seo-mode-status-grid strong,
.seo-mode-status-grid span {
  display: block;
}

.seo-mode-status-grid strong {
  margin-bottom: .25rem;
}

.seo-mode-status-grid span {
  color: var(--muted, #64748b);
}

.seo-mode-safety-note {
  margin: 1rem 0 0;
  border: 1px solid rgba(37, 99, 235, .24);
  border-radius: 14px;
  padding: .85rem 1rem;
  background: rgba(239, 246, 255, .78);
}


/* v0.4.8: SEO mode safety lock admin status carry-forward marker. */
/* v0.4.8: message-linked meetings, minutes, and staff dashboard events */







.inline-form {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.clean-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.clean-list li {
  padding: .35rem 0;
}

/* v0.4.8: document preview fallback polish */






/* v0.4.8: default SEO description and SEO contrast polish */
.seo-checks-card,
.seo-mode-safety-card {
  background: var(--card, #ffffff);
  color: var(--text, #182030);
}

.seo-check-item,
.seo-mode-status-grid > div,
.seo-mode-safety-note {
  background: var(--card, #ffffff);
  color: var(--text, #182030);
}

.seo-check-item strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--text, #182030);
}

.seo-check-label {
  color: var(--text, #182030);
}

.seo-check-detail {
  margin: .35rem 0 0;
  color: var(--muted, #475569);
}

.seo-check-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .18rem .55rem;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .03em;
  background: #e2e8f0;
  color: #1e293b;
}

.seo-check-status-pass {
  background: #dcfce7;
  color: #166534;
}

.seo-check-status-warning {
  background: #fef3c7;
  color: #92400e;
}

.seo-check-status-fail {
  background: #fee2e2;
  color: #991b1b;
}

.seo-check-status-info {
  background: #dbeafe;
  color: #1e40af;
}

.seo-check-pass {
  background: rgba(240, 253, 244, .92);
}

.seo-check-warning {
  background: rgba(255, 251, 235, .95);
}

.seo-check-info {
  background: rgba(239, 246, 255, .92);
}

html[data-theme="dark"] .seo-checks-card,
html[data-theme="dark"] .seo-mode-safety-card {
  background: var(--card, #111827);
  color: var(--text, #e5e7eb);
}

html[data-theme="dark"] .seo-check-item,
html[data-theme="dark"] .seo-mode-status-grid > div,
html[data-theme="dark"] .seo-mode-safety-note {
  background: rgba(15, 23, 42, .88);
  color: var(--text, #e5e7eb);
}

html[data-theme="dark"] .seo-check-label,
html[data-theme="dark"] .seo-check-item strong {
  color: var(--text, #e5e7eb);
}

html[data-theme="dark"] .seo-check-detail {
  color: var(--muted, #cbd5e1);
}

html[data-theme="dark"] .seo-check-status-pass {
  background: rgba(22, 101, 52, .34);
  color: #bbf7d0;
}

html[data-theme="dark"] .seo-check-status-warning {
  background: rgba(146, 64, 14, .38);
  color: #fde68a;
}

html[data-theme="dark"] .seo-check-status-fail {
  background: rgba(153, 27, 27, .38);
  color: #fecaca;
}

html[data-theme="dark"] .seo-check-status-info {
  background: rgba(30, 64, 175, .38);
  color: #bfdbfe;
}

/* v0.4.9-r2: protected support screenshot attachment cards */








.support-intake-public-form input[type="file"] {
  padding: 0.65rem;
  border: 1px dashed var(--border-color, #d9e2ec);
  border-radius: 12px;
  background: var(--card-subtle-background, rgba(255, 255, 255, 0.72));
}

/* v0.4.9-r4: support note formatting polish */




/* v0.4.9-r5: universal support ticket attachment uploads */




/* Language switcher — pill control with SVG flags (dark style matches preferred mock) */
.language-flag {
  display: inline-block;
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.28);
  flex: 0 0 auto;
}

.language-switcher {
  --lang-switcher-bg: #ffffff;
  --lang-switcher-border: rgba(37, 99, 235, 0.45);
  --lang-switcher-text: #0f172a;
  --lang-switcher-hover: rgba(37, 99, 235, 0.08);
  --lang-switcher-active-border: #2563eb;
  position: relative;
  display: inline-block;
  min-width: 11.5rem;
  color: var(--lang-switcher-text);
}

html[data-theme="dark"] .language-switcher,
.modern-agency-language-switcher {
  --lang-switcher-bg: #0f1a28;
  --lang-switcher-border: rgba(125, 211, 252, 0.55);
  --lang-switcher-text: #f8fafc;
  --lang-switcher-hover: rgba(125, 211, 252, 0.1);
  --lang-switcher-active-border: #7dd3fc;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .language-switcher {
    --lang-switcher-bg: #0f1a28;
    --lang-switcher-border: rgba(125, 211, 252, 0.55);
    --lang-switcher-text: #f8fafc;
    --lang-switcher-hover: rgba(125, 211, 252, 0.1);
    --lang-switcher-active-border: #7dd3fc;
  }
}

.language-switcher-caption {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: inherit;
}

.language-switcher-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
  cursor: pointer;
  min-height: 2.4rem;
  min-width: 11.5rem;
  padding: 0.48rem 2.1rem 0.48rem 0.78rem;
  border: 1px solid var(--lang-switcher-border);
  border-radius: 999px;
  background: var(--lang-switcher-bg);
  color: var(--lang-switcher-text);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
  box-shadow: none;
}

.language-switcher-trigger::-webkit-details-marker {
  display: none;
}

.language-switcher-trigger::after {
  content: "";
  position: absolute;
  right: 0.85rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.85;
  transition: transform 0.15s ease;
}

.language-switcher[open] .language-switcher-trigger::after {
  transform: translateY(-20%) rotate(225deg);
}

.language-switcher-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 4000;
  min-width: max(100%, 13.5rem);
  padding: 0.4rem;
  border: 1px solid var(--lang-switcher-border);
  border-radius: 14px;
  background: var(--lang-switcher-bg);
  box-shadow: 0 16px 36px rgba(2, 8, 23, 0.45);
  color: var(--lang-switcher-text);
}

.language-switcher-option-form {
  margin: 0;
}

.language-switcher-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.58rem 0.72rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--lang-switcher-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.language-switcher-option:hover,
.language-switcher-option:focus-visible {
  background: var(--lang-switcher-hover);
  outline: none;
}

.language-switcher-option.is-active {
  background: transparent;
  border-color: var(--lang-switcher-active-border);
  box-shadow: inset 0 0 0 1px transparent;
}

.header-language-switcher {
  margin: 0;
}

.header-language-switcher .language-switcher-trigger {
  min-width: 12rem;
}

.modern-agency-language-switcher .language-switcher-trigger {
  border-radius: 999px;
  background: var(--lang-switcher-bg);
  color: var(--lang-switcher-text);
}

.language-choice-list {
  display: grid;
  gap: 0.45rem;
}

.language-choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  background: var(--card, #fff);
}

.language-choice input {
  width: auto;
  margin: 0;
}

.language-choice.is-active,
.language-choice:has(input:checked) {
  border-color: var(--brand, #2563eb);
  background: rgba(37, 99, 235, 0.06);
}

html[data-theme="dark"] .language-choice {
  border-color: rgba(125, 211, 252, 0.28);
  background: #0f1a28;
  color: #f8fafc;
}

html[data-theme="dark"] .language-choice.is-active,
html[data-theme="dark"] .language-choice:has(input:checked) {
  border-color: #7dd3fc;
  background: rgba(125, 211, 252, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .language-choice {
    border-color: rgba(125, 211, 252, 0.28);
    background: #0f1a28;
    color: #f8fafc;
  }

  html[data-theme="system"] .language-choice.is-active,
  html[data-theme="system"] .language-choice:has(input:checked) {
    border-color: #7dd3fc;
    background: rgba(125, 211, 252, 0.08);
  }
}

.language-preference-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.language-preference-fieldset legend {
  padding: 0;
  margin: 0 0 0.55rem;
  font-weight: 700;
}

.language-current-line {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}


/* v0.4.9-r5: structured support intake description layout */










































/* v0.4.9-r5: review items 1-10 polish */




.button.is-disabled,
.button.is-disabled:hover {
  opacity: 0.45;
  pointer-events: none;
}

















/* v0.4.9-r5 review batch 2 + nav clip fix */
.header-search {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: 0.35rem;
}

.header-search input[type="search"] {
  width: min(11rem, 20vw);
  min-width: 6.5rem;
  max-width: 12rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
}



















@media (max-width: 720px) {
  .header-search input[type="search"] {
    width: 7.5rem;
  }
}

/* v0.4.9-r5 quick wins — public motion */
.modern-agency-hero-copy,
.modern-agency-contact-card,
.modern-agency-card {
  animation: ae-modern-rise 700ms cubic-bezier(.22, 1, .36, 1) both;
}
.modern-agency-contact-card { animation-delay: 120ms; }
.modern-agency-card:nth-child(1) { animation-delay: 80ms; }
.modern-agency-card:nth-child(2) { animation-delay: 160ms; }
.modern-agency-card:nth-child(3) { animation-delay: 240ms; }
.modern-agency-nav {
  transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease, box-shadow 220ms ease;
}
.modern-agency-nav.modern-agency-nav-overlay.is-scrolled {
  background: rgba(7, 26, 38, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
@keyframes ae-modern-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modern-agency-hero-copy,
  .modern-agency-contact-card,
  .modern-agency-card { animation: none; }
  .modern-agency-nav { transition: none; }
}

/* Meeting invite RSVP (public token pages) */
.meeting-invite-card { max-width: 42rem; margin: 1.25rem auto; }
.meeting-rsvp-actions { display: grid; gap: 0.45rem; border: 0; padding: 0; margin: 0; }
.meeting-invite-summary { margin-top: 0.75rem; }


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

/* === v0.4.9-r5 mobile public polish: restore banner + no-clip heroes === */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}

.hero {
  padding: 44px;
  min-height: 260px;
  display: grid;
  align-items: center;
}

.hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1;
  margin: 0 0 12px;
}

.hero p {
  color: var(--muted);
  max-width: 760px;
  font-size: 18px;
}

.content-image {
  width: 100%;
  max-height: min(70vw, 420px);
  object-fit: cover;
  object-position: center 28%;
  border-radius: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}

.legal-content {
  max-width: 860px;
}

.site-banner,
.banner-editor-preview {
  position: relative;
  overflow: hidden;
  height: var(--banner-height, 220px);
  padding: 0;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 35px var(--shadow);
  background: var(--soft);
}

.site-banner {
  max-width: 1180px;
  margin: 18px auto 0;
}

.site-banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

.site-banner .banner-image,
.banner-editor-preview .banner-image {
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-width: none !important;
  max-height: none !important;
}

.site-banner.banner-mode-cover .banner-image,
.banner-editor-preview.banner-mode-cover .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: none;
}

.site-banner.banner-mode-contain .banner-image,
.banner-editor-preview.banner-mode-contain .banner-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: none;
}

.site-banner.banner-mode-fill-width .banner-image,
.banner-editor-preview.banner-mode-fill-width .banner-image {
  position: absolute;
  width: 100%;
  height: auto;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.site-banner.banner-mode-fill-height .banner-image,
.banner-editor-preview.banner-mode-fill-height .banner-image {
  position: absolute;
  width: auto;
  height: 100%;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.site-banner.banner-mode-stretch .banner-image,
.banner-editor-preview.banner-mode-stretch .banner-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
  transform: none;
}

.site-banner.banner-mode-manual .banner-image,
.banner-editor-preview.banner-mode-manual .banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
  transform: scale(var(--banner-scale, 1));
  transform-origin: var(--banner-pos-x, 50%) var(--banner-pos-y, 50%);
}

.site-banner.banner-mode-original .banner-image,
.banner-editor-preview.banner-mode-original .banner-image {
  position: absolute;
  width: auto;
  height: auto;
  left: var(--banner-pos-x, 50%);
  top: var(--banner-pos-y, 50%);
  transform: translate(-50%, -50%) scale(var(--banner-scale, 1));
  transform-origin: center center;
  object-fit: none;
}

/* Mobile: show the full banner (people + skyline text) edge-to-edge — no short cover crop. */
@media (max-width: 720px) {
  .site-banner,
  .banner-editor-preview {
    width: calc(100% - 24px);
    max-width: none;
    height: auto !important;
    min-height: 0;
    margin: 12px 12px 0;
    border-radius: 12px;
  }

  .site-banner picture,
  .banner-editor-preview picture {
    height: auto;
  }

  .site-banner .banner-image,
  .site-banner.banner-mode-cover .banner-image,
  .site-banner.banner-mode-contain .banner-image,
  .site-banner.banner-mode-fill-width .banner-image,
  .site-banner.banner-mode-fill-height .banner-image,
  .site-banner.banner-mode-stretch .banner-image,
  .site-banner.banner-mode-manual .banner-image,
  .site-banner.banner-mode-original .banner-image,
  .banner-editor-preview .banner-image {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  .content-image {
    max-height: none;
    object-fit: contain;
    background: var(--soft);
  }
}

/* Public mobile header: stop logo/login/theme/language from colliding. */
@media (max-width: 720px) {
  body:not(.staff-shell) .nav {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    grid-template-columns: none;
    padding: 10px 12px;
  }

  body:not(.staff-shell) .logo {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    grid-column: auto;
  }

  body:not(.staff-shell) .logo-text {
    display: none;
  }

  body:not(.staff-shell) .nav-links {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
    grid-column: auto;
    overflow-x: auto;
  }

  body:not(.staff-shell) .nav-tools {
    order: 2;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: calc(100% - 52px);
  }

  body:not(.staff-shell) .header-login-link {
    padding: 8px 10px;
    font-size: 13px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  body:not(.staff-shell) .theme-menu {
    flex: 0 0 auto;
    z-index: 2;
  }

  body:not(.staff-shell) .theme-menu summary {
    width: 36px;
    height: 36px;
    overflow: hidden;
  }

  body:not(.staff-shell) .header-language-switcher {
    flex: 0 0 auto;
    margin: 0;
  }

  body:not(.staff-shell) .header-language-switcher .language-switcher-trigger {
    min-width: 0 !important;
    width: 40px;
    height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  body:not(.staff-shell) .header-language-switcher > .language-switcher-trigger .language-switcher-text,
  body:not(.staff-shell) .header-language-switcher > .language-switcher-trigger::after {
    display: none !important;
  }

  body:not(.staff-shell) .header-language-switcher .language-switcher-menu {
    right: 0;
    left: auto;
    min-width: 12.5rem;
    max-width: min(18rem, calc(100vw - 24px));
  }

  body:not(.staff-shell) .header-language-switcher .language-switcher-menu .language-switcher-text {
    display: inline !important;
  }
}

@media (max-width: 420px) {
  body:not(.staff-shell) .header-login-link {
    padding: 7px 9px;
  }
}

/* Modern Agency: keep people/skyline in frame on phones. */
.modern-agency-hero-video {
  object-position: var(--ae-hero-pos-x, 50%) var(--ae-hero-pos-y, 38%);
}

@media (max-width: 680px) {
  body.modern-agency-public-chrome .modern-agency-hero {
    min-height: min(100svh, 720px);
  }

  .modern-agency-hero-video {
    object-position: var(--ae-hero-pos-x, 46%) var(--ae-hero-pos-y, 32%);
  }
}