/* Mobile-first access and shared dashboard ergonomics. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body:has(.access-page), .access-outer, .access-page,
.access-page .access-top, .access-page .access-bottom.login-brand-footer {
  background: #080808; color: #f5f5f5; border-color: #292929;
}
.access-page { container-name: access-page; }
.access-page :is(.access-main, .access-form-area, #access-flow, #auth-form) { min-width: 0; max-width: 100%; }
.access-page .access-form-area { background: #111; }
.access-page .access-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; padding: 4px; border: 1px solid #383838; background: #151515; }
.access-page .access-modes button { min-width: 0; min-height: 48px; padding: 12px 8px; border-radius: 12px; font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.access-page .access-modes button[aria-pressed=true] { background: #28251a; color: #ffe268; box-shadow: inset 0 0 0 1px #75642d; }
.access-page #auth-form .field { margin-bottom: 20px; }
.access-page #auth-form .field label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 1.4; color: #e8e8e8; }
.access-page #auth-form :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  width: 100%; max-width: 100%; min-width: 0; min-height: 56px; font-size: 16px; line-height: 1.4;
  color: #f5f5f5; background: #191919; border: 1px solid #555; border-radius: 14px; caret-color: #ffdb1a;
}
.access-page #auth-form .input-wrap input { height: 56px; padding: 0 56px 0 46px; }
.access-page #auth-form .input-wrap > .field-icon { top: 18px; left: 16px; width: 20px; height: 20px; color: #b8b8b8; }
.access-page #auth-form .password-eye { top: 2px; right: 2px; width: 52px; height: 52px; color: #c8c8c8; }
.access-page #auth-form input::placeholder { color: #aaa; opacity: 1; }
.access-page #auth-form input:focus-visible { border-color: #ffdb1a; outline: 2px solid #ffdb1a; outline-offset: 3px; }
.access-page #auth-form input:-webkit-autofill { -webkit-text-fill-color: #f5f5f5; box-shadow: 0 0 0 1000px #191919 inset; }
.access-page .access-submit.button.primary { min-height: 56px; padding: 14px 18px; border-radius: 14px; border-color: #ffdb1a; background: #ffdb1a; color: #111!important; box-shadow: none; font-size: 16px; font-weight: 750; line-height: 1.35; white-space: normal; }
.access-page .access-form-area .text-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 8px; padding: 10px; font-size: 15px; line-height: 1.4; color: #cecece; }
.access-page :is(.access-note, .access-progress, .access-account, .access-error) { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
  .access-page .access-main { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px 0 24px; }
  .access-page .access-story { flex: 0 0 120px; width: 100%; max-width: 480px; height: 120px; min-height: 120px; padding: 18px 24px; gap: 0; align-items: center; justify-content: center; background: transparent; }
  .access-page .access-story .access-season, .access-page .access-story::after { display: none; }
  .access-page .access-hero { flex: none; margin: 0; width: max-content; max-width: 100%; }
  .access-page .access-hero h1 { font-size: 36px; line-height: 1.08; margin: 0; }
  .access-page .access-hero h1 span { display: block; }
  .access-page .access-hero h1 span::before { content: none; }
  .access-page .access-form-area { width: 100%; max-width: 480px; min-height: 0; padding: 12px 24px 16px; justify-content: flex-start; background: transparent; }
  .access-page .access-heading { margin: 24px 0; }
  .access-page .access-heading h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.7px; }
  .access-page .access-bottom.login-brand-footer { margin-top: 0; padding: 18px 24px; gap: 16px; border-color: #292929; }
}

@container access-page (max-width: 850px) {
  .access-page .access-main { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px 0 24px; }
  .access-page .access-story { flex: 0 0 120px; width: 100%; max-width: 480px; height: 120px; min-height: 120px; padding: 18px 24px; gap: 0; align-items: center; justify-content: center; background: transparent; }
  .access-page .access-story .access-season, .access-page .access-story::after { display: none; }
  .access-page .access-hero { flex: none; margin: 0; width: max-content; max-width: 100%; }
  .access-page .access-hero h1 { font-size: 36px; line-height: 1.08; margin: 0; }
  .access-page .access-hero h1 span { display: block; }
  .access-page .access-hero h1 span::before { content: none; }
  .access-page .access-form-area { width: 100%; max-width: 480px; min-height: 0; padding: 12px 24px 16px; justify-content: flex-start; background: transparent; }
  .access-page .access-heading { margin: 24px 0; }
  .access-page .access-heading h2 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.7px; }
  .access-page .access-bottom.login-brand-footer { margin-top: 0; padding: 18px 24px; gap: 16px; border-color: #292929; }
}

@media (max-width: 1100px) {
  .app-shell, .app-shell.menu-collapsed { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .app-shell > .sidebar-frame, .app-shell.menu-collapsed > .sidebar-frame {
    position: fixed;
    z-index: 20;
    left: var(--shell-gap);
    top: max(var(--shell-gap), env(safe-area-inset-top, 0px));
    width: min(280px, calc(100vw - 24px));
    height: calc(100vh - 2 * var(--shell-gap));
    height: calc(100dvh - max(var(--shell-gap), env(safe-area-inset-top, 0px)) - max(var(--shell-gap), env(safe-area-inset-bottom, 0px)));
    transform: translateX(calc(-100% - 24px));
    opacity: 1; visibility: hidden; pointer-events: none;
    transition: transform .2s ease, visibility .2s;
  }
  .app-shell.menu-open > .sidebar-frame { transform: translateX(0); visibility: visible; pointer-events: auto; box-shadow: 0 18px 48px #0007; }
  .app-shell .menu-toggle { display: inline-grid; }
  .app-shell.menu-open > .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 19; width: 100%; height: 100%; border: 0; border-radius: 0; background: #0009; cursor: pointer; }
  body:has(.app-shell.menu-open) { overflow: hidden; overscroll-behavior: none; }
  .app-shell > .workspace > .app-topbar { flex-wrap: wrap; align-content: start; gap: 8px; }
  .app-shell .app-topbar:not(.search-open) > .breadcrumb { display: flex; flex: 1 1 calc(100% - 56px); flex-wrap: wrap; min-width: 0; }
  .app-shell .app-topbar:not(.search-open) .topbar-tools { flex: 1 1 100%; max-width: 100%; flex-wrap: wrap; }
  .app-shell .app-topbar .breadcrumb h1 { white-space: normal; overflow-wrap: anywhere; }
  .app-shell .main-content :is(.toolbar, .filters, .heading-actions, .panel-head, .pagination) { min-width: 0; flex-wrap: wrap; }
  .app-shell .main-content :is(.table-wrap, .calendar-scroll, .team-planner-scroll, .fll-email-table-wrap, .pdi-history-table, .life-wheel-section) { min-width: 0; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 600px) {
  .access-page .access-top { padding: 16px; gap: 12px; }
  .access-page .access-top .wordmark { min-width: 0; }
  .access-page .access-top .team-id { display: none; }
  .access-page .access-heading h2 { font-size: 24px; }
  .app-shell { --shell-gap: 8px; }
  .app-shell > .workspace > .app-topbar { padding: 10px; }
  .app-shell .app-topbar .topbar-social { display: none; }
  .app-shell .app-topbar .breadcrumb h1 { font-size: 17px; line-height: 1.3; }
  .app-shell .app-topbar .topbar-tools { gap: 6px; }
  .app-shell .app-topbar :is(.icon-button, .language button) { min-width: 44px; min-height: 44px; }
  .app-shell .app-topbar .season-select { flex: 1 1 130px; max-width: 100%; min-width: 0; min-height: 44px; }
  .app-shell .app-topbar .unified-search.is-open { width: 100%; max-width: 100%; }
  .app-shell > .workspace > .main-frame > .main-content { padding: 10px 10px 18px; }
  .app-shell .main-content :is(.field, .form-grid > *, .filters > *, .inline-fields > *) { min-width: 0; max-width: 100%; }
  .app-shell .main-content .filters .search-wrap { width: 100%; max-width: 100%; }
  .app-shell .main-content .filters :is(input, select) { width: 100%; min-width: 0; max-width: 100%; }
  .app-shell .main-content .heading-actions { width: 100%; }
  .app-shell .main-content .heading-actions > .button { flex: 1 1 auto; white-space: normal; }
  .app-shell .main-content :is(.form-grid, .inline-fields) { grid-template-columns: minmax(0, 1fr); flex-wrap: wrap; }
  .app-shell .main-content :is(input:not([type=checkbox]):not([type=radio]), select, textarea),
  .dialog :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-width: 0; max-width: 100%; font-size: 16px; }
  .dialog { max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .dialog :is(.dialog-head, .dialog-body, .dialog-foot, fieldset, .field) { min-width: 0; }
  .dialog .dialog-head { gap: 12px; }
  .dialog .dialog-head h2 { min-width: 0; overflow-wrap: anywhere; }
  .dialog .dialog-head > button { flex-shrink: 0; }
  .dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
  .dialog .dialog-foot { flex-wrap: wrap; }
  .dialog .dialog-foot .button { min-height: 44px; white-space: normal; }
  .dialog :is(.forum-rich-toolbar, .narrative-toolbar) { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell > .sidebar-frame, .app-shell.menu-collapsed > .sidebar-frame { transition: none; }
}

/* The access panel fills a short phone viewport without stretching its content. */
@media (max-width: 1100px) {
  .access-outer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: 0; }
  .access-page { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  .access-page .access-main { flex: 1 0 auto; justify-content: center; padding-top: 12px; padding-bottom: 16px; }
  .access-page .access-heading { margin-block: 16px; }
  .access-page .access-bottom.login-brand-footer { margin-top: auto; padding-block: 12px; }
  .app-shell > .sidebar-frame, .app-shell.menu-collapsed > .sidebar-frame {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border: 0;
    border-radius: 0;
    transform: translateX(-100%);
  }
  .app-shell .sidebar-frame > .sidebar.sidebar { padding: 8px 16px 18px; }
  .app-shell .sidebar-frame > .sidebar.sidebar > .mobile-menu-header {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 4px 0 10px;
    background: var(--navigation-surface, #1b1b1f);
  }
  .app-shell .sidebar-frame .mobile-menu-header .wordmark { flex: 1 1 auto; min-width: 0; margin: 0; }
  .app-shell .sidebar-frame .mobile-menu-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid #777;
    border-radius: 12px;
    background: #2b2b30;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
  .app-shell .sidebar-frame .mobile-menu-close svg { width: 20px; height: 20px; }
  .app-shell .sidebar-frame .mobile-menu-close:focus-visible { outline: 3px solid #ffdb1a; outline-offset: 2px; }
  .app-shell .sidebar-frame .sidebar-label { font-size: 14px; letter-spacing: .08em; margin: 20px 8px 10px; }
  .app-shell .sidebar-frame .side-nav { gap: 6px; }
  .app-shell .sidebar-frame .side-nav button,
  .app-shell .sidebar-frame .nav-section-toggle {
    min-height: 52px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.3;
  }
  .app-shell .sidebar-frame .side-nav button svg { width: 22px; height: 22px; flex: 0 0 22px; }
  .app-shell .sidebar-frame .nav-section-title { font-size: 16px; }
  .app-shell .sidebar-frame .sidebar-foot { padding-bottom: 12px; }
}

@media (max-width: 1100px) and (max-height: 620px) {
  .access-page .access-main { justify-content: flex-start; }
}

@media (min-width: 1101px) {
  .app-shell .sidebar-frame .mobile-menu-header { position: sticky; top: 0; z-index: 5; flex-shrink: 0; padding-bottom: 12px; background: var(--navigation-surface, #1b1b1f); }
  .app-shell .sidebar-frame .mobile-menu-header .wordmark { margin: 0; }
  .app-shell .sidebar-frame .mobile-menu-close { display: none; }
}

/* Comfortable phone controls across modules, without changing their actions. */
@media (max-width: 760px) {
  .app-shell .sidebar-frame .side-nav button { min-height: 48px; font-size: 14px; line-height: 1.4; padding-block: 12px; }
  .app-shell .main-content { font-size: 15px; line-height: 1.55; }
  .app-shell .main-content :is(.button, .text-button, .icon-button, .segmented button),
  .dialog :is(.button, .text-button, .icon-button) { min-height: 48px; }
  .app-shell .main-content .icon-button, .dialog .icon-button { min-width: 48px; }
  .app-shell .main-content :is(.button, .text-button), .dialog .button { font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .app-shell .main-content :is(.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea, .filter-input, .filters select, .search-wrap input),
  .dialog :is(.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea) { min-height: 48px; font-size: 16px; line-height: 1.4; }
  .app-shell .main-content :is(.field label, .field-label), .dialog :is(.field label, .field-label) { font-size: 14px; line-height: 1.45; }
  .app-shell .main-content .field, .dialog .field { margin-bottom: 16px; }
  .app-shell .main-content :is(.activity-grid, .resource-grid, .board-grid, .finance-ledger-grid, .finance-request-grid) { gap: 14px; }
  .app-shell .main-content :is(.activity-card:not(.team-person-card), .resource-card, .board-card, .finance-ledger-card) { border-radius: 16px; padding: 16px; }
  .app-shell .main-content :is(.activity-card, .resource-card, .board-card, .finance-ledger-card) h3 { font-size: 17px; line-height: 1.35; }
  .app-shell .main-content :is(.activity-card, .resource-card, .board-card, .finance-ledger-card) p { font-size: 14px; line-height: 1.5; }
  .app-shell .main-content :is(.toolbar, .filters, .heading-actions, .pagination, .meeting-topbar, .activities-topbar, .activities-topbar-actions) { gap: 10px; }
  .app-shell .main-content :is(.activity-view-options, .segmented) { max-width: 100%; flex-wrap: wrap; }
  .app-shell .main-content :is(.activity-view-options, .segmented) button { min-height: 44px; white-space: normal; }
  .app-shell .main-content .finance-ledger-card dl { row-gap: 14px; }
  .app-shell .main-content :is(.table-wrap, .calendar-scroll, .team-planner-scroll, .fll-email-table-wrap, .pdi-history-table) { overscroll-behavior-x: contain; }
  .app-shell .main-content :is(.forum-rich-toolbar, .narrative-toolbar), .dialog :is(.forum-rich-toolbar, .narrative-toolbar) { gap: 6px; flex-wrap: wrap; }
  .app-shell .main-content .forum-rich-toolbar button, .dialog .forum-rich-toolbar button { min-width: 44px; min-height: 44px; }
  .dialog > #editor-form { min-width: 0; }
  .dialog > #editor-form > .dialog-foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  .dialog > #editor-form > .dialog-foot > .button { flex: 1 1 120px; }
}

@media (max-width: 600px) {
  .access-page .access-top { padding: 16px 20px; }
  .access-page .access-top .language button { min-width: 64px; min-height: 44px; font-size: 13px; }
  .access-page .access-heading h2 { font-size: 28px; }
  .access-page .access-main { flex: 0 0 auto; padding-bottom: 8px; }
  .access-page .access-form-area { padding-bottom: 4px; }
  .access-page .access-bottom.login-brand-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: center; gap: 20px 24px; padding: 20px 24px max(24px, env(safe-area-inset-bottom, 0px)); }
  .access-page .login-brand-footer .login-footer-biobuzz { grid-column: 1; grid-row: 2; justify-self: center; width: 100%; height: auto; max-width: 180px; max-height: none; }
  .access-page .login-brand-footer .login-slogan { grid-column: 1 / -1; grid-row: 1; margin: 0; width: min(100%, 300px); font-size: clamp(14px, 4.6vw, 18px); line-height: 1.5; text-align: center; white-space: normal; }
  .access-page .login-brand-footer .login-footer-domus { grid-column: 2; grid-row: 2; justify-self: center; width: 75%; height: auto; max-width: 128px; max-height: none; }
  .app-shell .main-content .meeting-filters { grid-template-columns: minmax(0, 1fr); }
  .app-shell .main-content .meeting-filters > * { grid-column: 1; }
  .app-shell .main-content :is(.finance-ledger-filters, .finance-flow-filter) { grid-template-columns: minmax(0, 1fr); }
  .app-shell .main-content .finance-ledger-filters > * { grid-column: 1; }
  .app-shell .main-content .finance-ledger-card dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) and (max-height: 520px) {
  .access-page .access-main { justify-content: flex-start; padding-block: 8px 20px; }
  .access-page .access-story { flex-basis: 104px; height: 104px; min-height: 104px; }
  .access-page .access-heading { margin-block: 18px; }
  .access-page .access-top { padding-block: 10px; }
  .app-shell > .workspace > .app-topbar { padding-block: 6px; }
}

@media (max-width: 600px) {
  .access-page .access-story { margin-inline: auto; text-align: center; }
}

@media (max-width: 600px) {
  /* Keep the access region named for assistive technology without repeating the heading visually. */
  .access-page:has(#auth-form input[autocomplete="current-password"]) .access-heading:has(#access-title) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .access-page:has(#auth-form input[autocomplete="current-password"]) .access-modes { margin-bottom: 24px; }
}

@media (max-width: 760px) {
  .fll-community .fll-email-filters :is(input, select) { min-height: 48px; font-size: 16px; line-height: 1.4; }
  .fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team) { cursor: pointer; }
}

/* Native lightboxes scroll internally; their background remains stationary. */
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden !important; overscroll-behavior: none; }
body:has(dialog[open]) .app-shell .main-content { overflow: hidden !important; overscroll-behavior: none; }

/* Disparos: toda a linha abre a prévia, com feedback temático. */
.fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team) { cursor: pointer; }
.fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team) > td {
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team):focus-within > td {
  background-color: color-mix(in srgb, var(--accent, #ffdb1a) 12%, var(--surface, #1b1b1f));
}
.fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team):focus-within > td:first-child {
  box-shadow: inset 3px 0 var(--accent, #ffdb1a);
}
@media (hover: hover) {
  .fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team):hover > td {
    background-color: color-mix(in srgb, var(--accent, #ffdb1a) 9%, var(--surface, #1b1b1f));
  }
  .fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team):hover > td:first-child {
    box-shadow: inset 3px 0 var(--accent, #ffdb1a);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fll-community .fll-email-table-wrap tbody tr:has(.fll-email-team) > td { transition: none; }
}

/* Final phone rules follow the older compact controls above. */
@media (max-width: 1100px) {
  .app-shell .sidebar-frame .side-nav button,
  .app-shell .sidebar-frame .nav-section-toggle { min-height: 52px; font-size: 16px; }
  .app-shell .sidebar-frame .nav-section-title { font-size: 16px; }
}
@media (max-width: 600px) {
  .access-page .access-main { flex: 1 0 auto; justify-content: center; }
}