/* AuthPlane structure from the read-only Flair One ERP; existing brand tokens. */
body:not([data-access="authenticated"]) .app-shell,
body:not([data-access="authenticated"]) #drawer,
body:not([data-access="authenticated"]) #drawer-backdrop { display: none !important; }
body[data-access="authenticated"] .access-shell { display: none; }
/* Exact AuthPlane / planes.css proportions and Champ materials, scoped locally. */
.access-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px,1fr) minmax(0,1.05fr); background: var(--field-bg) var(--field-pattern) center / cover no-repeat; }
.access-side { padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; color: var(--field-ink); }
.access-side>img { height: 34px; width: auto; align-self: flex-start; }
.access-claim { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.access-side h2 { margin: 0; font: var(--t-mast); letter-spacing: var(--tracking-mast); color: var(--field-ink); }
.access-side p { margin: 0; font: var(--t-body-lg); color: var(--field-ink); opacity: .9; }
.access-side .access-foot { font: var(--t-caption); opacity: .85; }
.access-main { display: flex; align-items: center; justify-content: center; padding: 32px 24px; min-width: 0; }
.access-card { width: 100%; max-width: 440px; padding: 34px 32px 30px; background: var(--surface); border: 0; border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--surface-border),var(--shadow-float); }
.access-symbol { display: block; height: 40px; width: auto; margin-bottom: 20px; }
.access-card h1 { margin: 0; font: var(--t-record-title); letter-spacing: var(--tracking-title); }
.access-card #access-lead { margin: 6px 0 0; font: var(--t-body); color: var(--text-2); }
.access-card form { margin-top: 22px; display: grid; gap: var(--form-gap); }
.access-card label,.account-menu-panel label,.account-invite label,.account-dialog label,#account-invite-result label { display: grid; gap: 6px; color: var(--text-2); font: var(--t-label); }
.account-menu-panel select,.account-invite input,.account-invite select,.account-dialog input,#account-invite-url { width: 100%; min-width: 0; height: var(--control-h); padding: 0 12px; border: 1px solid var(--line-control); border-radius: var(--r-field); background: var(--surface); color: var(--ink); font: var(--t-body); }
.access-control { display: flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 12px; border-radius: var(--r-field); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-control); color: var(--text); transition: box-shadow var(--m-fast) var(--ease); }
.access-control:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.access-control:focus-within { box-shadow: inset 0 0 0 1.5px var(--focus),0 0 0 3px var(--cobalt-100); }
.access-card .access-control input { flex: 1; min-width: 0; width: 100%; height: var(--control-h); border: 0; border-radius: 0; background: transparent; outline: none; padding: 0; font: var(--t-body); color: var(--text); box-shadow: none; }
.access-card .access-control input:focus-visible { box-shadow: none; outline: none; }
.access-control>svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-3); }
.access-control .access-eye { display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); flex-shrink: 0; margin-right: -6px; padding: 0; border: 0; border-radius: var(--r-field); color: var(--text-3); background: transparent; }
.access-eye:hover { background: var(--surface-2); color: var(--ink); }
.access-eye svg { width: 16px; height: 16px; }
.access-eye [data-eye-off],.access-eye[aria-pressed="true"] [data-eye-on] { display: none; }
.access-eye[aria-pressed="true"] [data-eye-off] { display: block; }
.access-card .button { width: 100%; min-height: var(--control-h-lg); padding: 0 20px; font-size: 15px; border-radius: var(--r-pill); }
.access-status:not(:empty) { padding: 12px; border-left: 3px solid var(--danger); background: var(--danger-bg); color: var(--danger); }
.access-status { margin: 0; font: var(--t-caption); }
.access-status:empty { display: none; }
#access-password-help { margin: -6px 0 0; font: var(--t-caption); }
.access-card-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.access-card-foot:not(:has(button:not(.hidden))) { display: none; }
.topbar-account { display: flex; align-items: center; gap: 20px; min-width: 0; }
.sidebar nav { min-height: 0; overflow-y: auto; scrollbar-width: none; grid-auto-rows: minmax(68px,max-content); }
.sidebar-account { margin-top: auto; padding-top: 12px; width: 100%; flex: none; border-top: 1px solid var(--spine-hover); }
.sidebar-account .sidebar-bottom { justify-content: center; margin-top: 12px; }
#account-menu { position: relative; width: 100%; }
#account-menu > summary { display: grid; justify-items: center; align-content: center; gap: 6px; width: 100%; min-height: 68px; padding: 8px 2px; cursor: pointer; list-style: none; border-radius: var(--r-sweep-s); color: var(--spine-muted); }
#account-menu > summary::-webkit-details-marker { display: none; }
#account-menu > summary:hover, #account-menu[open] > summary { background: var(--spine-hover); color: var(--spine-ink); }
#account-menu > summary:focus-visible { outline: 2px solid var(--spine-active); outline-offset: 2px; }
body[data-view="profile"] #account-menu > summary { background: var(--spine-active); color: var(--spine-active-ink); }
body[data-view="profile"] .account-avatar { border-color: currentColor; background: transparent; color: inherit; }
.account-avatar { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--spine-muted); border-radius: 50%; background: var(--spine-hover); color: var(--spine-ink); font: 500 12px/1 var(--font); }
.account-trigger-label { font: 500 11px/14px var(--font); }
#account-company-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; }
.account-menu-panel { position: absolute; left: calc(100% + 16px); bottom: 0; z-index: 30; width: 336px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.account-menu-heading { display: flex; align-items: center; gap: 8px; }
.account-menu-heading .pill { flex: none; font: var(--t-caption); }
.account-menu-panel p { margin: 0; overflow-wrap: anywhere; }
#account-identity { font: var(--t-caption); color: var(--text-3); }
.account-switch-hint { font: var(--t-caption); }
.account-company-switch { display: grid; gap: 12px; }
.account-menu-actions { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--rule); }
.account-menu-action { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r-field); background: transparent; color: var(--ink); font: var(--t-label); text-align: left; cursor: pointer; }
.account-menu-action:hover { background: var(--neutral-100); }
.account-menu-action:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.account-action-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; color: var(--text-3); }
.account-logout { border-top: 1px solid var(--rule); border-radius: 0; padding-top: 14px; }
#account-menu-status:empty { display: none; }
#account-menu-status { font: var(--t-caption); color: var(--danger); }
.account-team-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.account-team-table th,.account-team-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.account-team-table th { font: var(--t-caption); color: var(--text-3); border-bottom-color: var(--rule-strong); }
.account-team-table td small { display: block; color: var(--text-3); margin-top: 3px; }
.account-team-table select { max-width: 170px; padding: 7px; border: 1px solid var(--line-control); border-radius: 6px; background: var(--surface); }
.account-team-table .drawer-actions { margin: 0; }
.account-invite { display: grid; grid-template-columns: 1fr 180px auto; align-items: end; gap: 16px; margin: 24px 0 12px; }
.account-history { padding-top: 20px; border-top: 1px solid var(--line); }
.account-history summary { cursor: pointer; font-size: 13px; color: var(--text-2); }
#account-audit p { display: flex; gap: 12px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; margin: 0; }
#account-audit time { color: var(--text-3); flex-shrink: 0; }
.account-dialog { max-width: 500px; width: calc(100% - 32px); padding: var(--panel-pad); border: 1px solid var(--line); border-radius: var(--r-dialog); color: var(--ink); }
.account-dialog::backdrop { background: rgba(24,35,65,.35); }
.account-dialog h2 { font: var(--t-record-title); letter-spacing: var(--tracking-title); }
[data-role="reader"] .read-only-hint { display: block; }
@media(max-width:1023px) { .access-shell { grid-template-columns: 1fr; } .access-side { padding: 24px 24px 0; justify-content: flex-start; gap: 20px; } .access-side h2 { font: 600 30px/36px var(--font); } .access-foot { display: none; } .access-main { align-items: flex-start; padding-top: 16px; } .topbar-account .sync-info { display: none; } }
@media(max-width:767px) { .access-side { padding: 20px 20px 0; } .access-claim { display: none; } .access-main { padding: 12px; } .access-card { padding: 26px 20px 24px; border-radius: var(--r-card); } .access-card .access-control input { font-size: 16px; } .account-invite { grid-template-columns: 1fr; } .account-team-table,.account-team-table tbody,.account-team-table tr,.account-team-table td { display: block; } .account-team-table thead { display: none; } .account-team-table td { border: 0; padding: 8px 0; } .account-team-table tr { padding: 12px 0; border-top: 1px solid var(--line); } }

/* The same control and action family as ERP primitives.css. */
#account-team h2 { margin: 0 0 4px; font: var(--t-section-title); letter-spacing: -.01em; }
#account-team .button,.account-dialog .button,.account-menu-panel .button { min-height: var(--control-h-lg); padding: 0 20px; font-size: 15px; border-radius: var(--r-sweep-s); }
.account-dialog .button-secondary,.account-menu-panel .button-secondary { border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
#account-team .button:disabled,.account-dialog .button:disabled,.access-card .button:disabled { opacity: 1; background: var(--disabled-bg); color: var(--disabled-text); box-shadow: none; }

/* Recovery uses the same AuthPlane card, controls and restrained status surfaces. */
.access-card-foot { flex-wrap: wrap; gap: 12px 20px; }
.access-status[data-tone="success"]:not(:empty) { border-left-color: var(--link); background: var(--cobalt-100); color: var(--ink); }

/* Personal settings reuse the ERP settings rail, flat panels and action hierarchy. */
body[data-view="account"] #account-menu > summary { background: var(--spine-active); color: var(--spine-active-ink); }
body[data-view="account"] .account-avatar { background: transparent; color: inherit; border-color: currentColor; }
#view-account .profile-card { margin-top: 0; }
#view-account .profile-card h2 { margin-top: 0; font: var(--t-section-title); }
#view-account .profile-card .form-grid { margin: 24px 0 16px; }
#view-account [role="status"]:empty { display: none; }
#view-account [role="status"] { color: var(--text-2); font: var(--t-body); }
.personal-session-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.personal-session-row strong { margin-right: 12px; font: var(--t-label); }
.personal-session-row p { margin: 6px 0 0; color: var(--text-3); font: var(--t-caption); }
@media(max-width:767px) { .personal-session-row { align-items: flex-start; flex-wrap: wrap; } #view-account .form-footer { align-items: stretch; } }

/* Durable operations use the same flat rows and quiet typography as the dossier list. */
.dossier-jobs-panel { margin: 24px 0; border: 1px solid var(--rule); border-radius: var(--r-inner); background: var(--surface); padding: 20px 24px; }
.dossier-jobs-panel[hidden] { display: none; }
.dossier-jobs-panel header { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding-bottom: 12px; }
.dossier-jobs-panel h2 { margin: 3px 0 0; font: var(--t-section-title); }
.dossier-jobs-panel summary { font: var(--t-label); cursor: pointer; padding: 8px 0; }
.dossier-job-row { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,2fr) auto; gap: 24px; align-items: center; border-top: 1px solid var(--rule); padding: 16px 0; }
.dossier-job-identity { display: grid; gap: 6px; font: var(--t-body); }
.dossier-job-identity span,.dossier-job-progress { color: var(--text-2); font: var(--t-caption); }
.dossier-job-progress progress { display: block; margin-top: 8px; width: 100%; height: 5px; accent-color: var(--link); }
.dossier-job-progress p { margin-bottom: 0; overflow-wrap: anywhere; }
.dossier-job-actions { display: flex; align-items: center; gap: 12px; }
@media(max-width:900px) { .dossier-job-row { grid-template-columns: 1fr; gap: 12px; } .dossier-jobs-panel header { align-items: flex-start; flex-direction: column; gap: 8px; } }
/* Short personal forms keep their actions in the normal reading flow. */
#view-account .company-content .form-footer { position: static; padding-bottom: 0; }
.dossier-job-actions .button[aria-disabled="true"],.preview-export .button[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-text); cursor: default; }