/* Shared shell and opt-in components; legacy page selectors stay page-owned. */
body.sai-shell { font-family: var(--sai-font); color: var(--sai-ink); background: var(--sai-surface); }
:is(.sai-header, .sai-footer, .sai-button),
:is(.sai-header, .sai-footer) * { box-sizing: border-box; }
.sai-container { width: min(var(--sai-max), calc(100% - 2 * var(--sai-gutter))); margin-inline: auto; min-width: 0; }
:where(.sai-header, .sai-footer) a:not(.sai-button) { color: inherit; text-decoration: none; }
.sai-header :is(h1, h2, h3, p, figure, dl, dd), .sai-footer :is(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
:is(.sai-header, .sai-footer) :is(a, button):focus-visible,
.sai-button:focus-visible { outline: 2px solid var(--sai-action); outline-offset: 2px; }
/* Reusable button primitives. */
.sai-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; max-width: 100%; padding: 12px 24px; border: 1px solid var(--sai-action); border-radius: var(--sai-radius); background: var(--sai-action); color: var(--sai-surface); font: 600 var(--sai-text-body)/1.5 var(--sai-font); text-align: center; text-decoration: none; word-break: keep-all; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; }
.sai-button:hover { background: var(--sai-action-hover); border-color: var(--sai-action-hover); }
.sai-button--outline { background: var(--sai-surface); color: var(--sai-ink); border-color: var(--sai-line); }
.sai-button--outline:hover { background: var(--sai-selected); color: var(--sai-action); border-color: var(--sai-action); }
:is(.sai-button) svg, :is([data-arrow], [data-check]) svg { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 768px) {
  .sai-footer-main { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sai-footer-links { justify-content: flex-start; }
  .sai-footer-bottom { flex-direction: column; gap: 8px; }
  #site-footer.sai-footer { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sai-menu-button span, .sai-button { transition: none; }
}

/* Two page-hero types. Information pages: white with a bottom rule. Action pages (find, request): blue surface. */
.sai-hero-info { background: var(--sai-surface); border-bottom: 1px solid var(--sai-line); }
.sai-hero-action { background: var(--sai-blue); border-bottom: 0; }
.sai-hero-action p { color: var(--sai-body); }

/* Disabled buttons: one look everywhere. Pale surface, readable text (5.23:1), no hover change. */
:is(button, .button, .sai-button, .btn, [role="button"]):disabled,
:is(button, .button, .sai-button, .btn, [role="button"])[aria-disabled="true"] {
  background: var(--sai-disabled-bg) !important; color: var(--sai-disabled-text) !important; border-color: var(--sai-disabled-line) !important;
  cursor: not-allowed !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; text-decoration: none !important;
}
:is(.text-button, .link-button):disabled { background: transparent !important; border-color: transparent !important; }

/* Form controls: one height, border, focus ring, error colour and label-help-error spacing. */
:is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .filter-field, .platform-filter, .form-grid, .sort-label) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  display: block; width: 100%; min-width: 0; max-width: 100%; min-height: var(--sai-control-height); padding: 12px var(--sai-control-pad-x);
  border: 1px solid var(--sai-control-line); border-radius: var(--sai-radius); background: var(--sai-field); color: var(--sai-ink);
  font: 400 var(--sai-text-body)/var(--sai-leading-snug) var(--sai-font); transition: border-color var(--sai-motion), background-color var(--sai-motion);
}
:is(.sai-draft-field, .editor-fields, .account-field, .inbox-form, .filter-field, .platform-filter, .form-grid) :where(select) { padding-right: 40px; }
:is(.sai-draft-field, .editor-fields, .inbox-form, .form-grid) :where(textarea) { min-height: 128px; resize: vertical; overflow-wrap: anywhere; }
:is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .filter-field, .platform-filter, .form-grid) :where(input, select, textarea):hover:not(:disabled):not([readonly]) { border-color: var(--sai-ink); }
:is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .filter-field, .platform-filter, .form-grid, .sort-label) :where(input, select, textarea):focus-visible { outline: 2px solid var(--sai-action); outline-offset: 2px; border-color: var(--sai-action); }
:is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .form-grid) :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--sai-danger); }
:is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .filter-field, .platform-filter, .form-grid) :where(input, textarea)::placeholder { color: var(--sai-muted); opacity: 1; }
:is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .form-grid) :where(input, select, textarea):disabled { background: var(--sai-disabled-bg); color: var(--sai-disabled-text); border-color: var(--sai-disabled-line); cursor: not-allowed; }
:is(.sai-draft-field > label, .account-field label, .inbox-form label, .dialog-field label, .field-label, .editor-fields label, .form-grid label) { font-size: var(--sai-text-small); font-weight: 600; line-height: var(--sai-leading-snug); }
:is(.sai-draft-field-note, .sai-draft-help, .editor-field-note, .editor-fields small, .account-hint, .dialog-hint, .filter-note) { font-size: var(--sai-text-small); line-height: 1.7; color: var(--sai-muted); }
:is(.sai-draft-field-note, .editor-field-note, .editor-fields small, .account-hint, .dialog-hint) { margin-top: var(--sai-space-1); }
:is(.sai-draft-error, .account-error, .inbox-error, .validation-error, .confirm-dialog-error, .editor-inline-error) { color: var(--sai-danger); font-size: var(--sai-text-small); font-weight: 600; line-height: var(--sai-leading-snug); margin-top: var(--sai-space-1); }
:is(.sai-draft-checks, .editor-check-group, .editor-choice-group, .specialties, .form-checks, .account-check, .proposal-consent) input:is([type="checkbox"], [type="radio"]) { width: 20px; height: 20px; min-height: 20px; flex: none; margin: 0; padding: 0; accent-color: var(--sai-action); }

/* Status: small text with a dot. The word carries the meaning; the dot only repeats it. */
.status-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sai-action); vertical-align: middle; }
.status-dot[data-state="off"] { background: transparent; border: 1.5px solid var(--sai-muted); box-sizing: border-box; }
.row-status { display: flex; align-items: center; margin-top: 8px; font-size: var(--sai-text-caption); line-height: var(--sai-leading-snug); color: var(--sai-body); }
/* Rows and cards share one quiet hover and focus: a border or background change over 160ms. */
:is(.network-card, .profile-card, .inbox-item, .my-profile, .platform-row, .opportunity-item, .resource-item) { transition: border-color var(--sai-motion), background-color var(--sai-motion); }
.tabular, :is(time, .sai-badge, .result-count, .directory-count, .inbox-time, .account-code) { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  :is(.network-card, .profile-card, .inbox-item, .my-profile, .platform-row, .opportunity-item, .resource-item),
  :is(.sai-draft-field, .editor-fields, .editor-single-field, .account-field, .inbox-form, .dialog-field, .filter-field, .platform-filter, .form-grid) :is(input, select, textarea) { transition: none; }
}


/* W3 common site shell. Keep dimensions in sync with app/globals.css. */
#site-header.sai-header{position:sticky;top:0;z-index:40;margin:0;border:0;border-bottom:1px solid #E6E6E6;border-radius:0;background:#fff;box-shadow:none;backdrop-filter:none;color:#111;font-size:16px;line-height:1.65;letter-spacing:normal}
#site-header.sai-header .sai-masthead{width:min(calc(100% - 48px),1200px);margin-inline:auto;min-width:0;height:80px;min-height:80px;display:flex;align-items:center;gap:24px;padding:0}
.sai-brand{display:inline-flex;align-items:center;gap:12px;font-size:24px;font-weight:700;letter-spacing:-.04em;line-height:1.65;flex:none;min-height:44px;color:#111;text-decoration:none}
.sai-brand img{display:block;width:32px;height:32px;flex:none}
.sai-desktop-nav{display:flex;align-items:center;gap:32px;margin-left:auto;padding:0;font-size:14px;font-weight:500}
.sai-header-actions{display:flex;align-items:center;gap:24px;min-width:80px;justify-content:flex-end}
.sai-desktop-nav>a,.sai-participate{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;color:#111;border:0;border-radius:8px;background:transparent;padding:0}
.sai-participate{padding-inline:12px}
.sai-desktop-nav>a:hover,.sai-participate:hover{color:#1854CF}
.sai-participate:hover{background:#F7F7F7}
.sai-desktop-nav a[aria-current=page],.sai-header-actions a[aria-current=page],.sheet-navigation a[aria-current=page]{color:#1854CF;text-decoration:underline;text-underline-offset:6px;font-weight:500}
.sai-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:8px;padding:0 6px;border-radius:999px;background:#1854CF;color:#fff;font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
#site-header.sai-header .sai-menu-button{display:none!important;width:44px;height:44px;min-height:44px;min-width:44px;flex:none;align-items:center;justify-content:center;padding:0;border:0;border-radius:8px;background:transparent;color:#111}
#site-header.sai-header .sai-menu-button svg{width:24px;height:24px}
#site-header.sai-header :is(a,button):focus-visible,#site-footer.sai-footer a:focus-visible{outline:2px solid #1854CF;outline-offset:2px}
#site-footer.sai-footer{background:#fff;color:#111;border-top:1px solid #E6E6E6;padding:48px 0 24px;font-size:16px;line-height:1.65;letter-spacing:normal}
#site-footer.sai-footer>.sai-container{width:min(calc(100% - 48px),1200px);margin-inline:auto;min-width:0}
#site-footer.sai-footer .sai-footer-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:48px;align-items:start;padding:0}
#site-footer.sai-footer .sai-footer-brand p{font-size:14px;line-height:1.65;color:#6B6B6B;margin:16px 0 0}
#site-footer.sai-footer .sai-footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 32px;min-width:0;font-size:14px}
#site-footer.sai-footer .sai-footer-links a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;font-size:14px;font-weight:400;color:#111;text-decoration:none;white-space:nowrap}
#site-footer.sai-footer .sai-footer-links a:hover{color:#1854CF}
#site-footer.sai-footer .sai-footer-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;margin-top:40px;padding-top:24px;border-top:1px solid #E6E6E6;color:#6B6B6B;font-size:12px;line-height:1.65}
#site-footer.sai-footer .sai-footer-bottom p{max-width:680px;margin:0;font-size:12px;line-height:1.65;color:#6B6B6B;word-break:keep-all;overflow-wrap:break-word}
#site-footer.sai-footer .sai-footer-bottom>span{flex:none;font-size:12px;line-height:1.65;color:#6B6B6B;white-space:nowrap}
@media(max-width:767px){
 #site-header.sai-header .sai-masthead{width:calc(100% - 32px);height:64px;min-height:64px;justify-content:space-between}
 #site-header.sai-header .sai-desktop-nav,#site-header.sai-header .sai-header-actions{display:none}
 #site-header.sai-header .sai-menu-button{display:inline-flex!important;margin-left:auto}
 #site-footer.sai-footer>.sai-container{width:calc(100% - 32px)}
 #site-footer.sai-footer .sai-footer-main{grid-template-columns:minmax(0,1fr);gap:32px}
 #site-footer.sai-footer .sai-footer-links{justify-content:flex-start;gap:8px 24px}
 #site-footer.sai-footer .sai-footer-bottom{flex-direction:column;gap:16px}
}

.sai-skip{position:fixed;top:-80px;left:16px;z-index:100;background:#fff;padding:8px 16px;border:1px solid #E6E6E6;border-radius:8px}.sai-skip:focus{top:16px}
/* v4a-exception: a side sheet rounds only its open edge (12px 0 0 12px), and the dialog scrim is the one dimming overlay (content overlay, not a palette colour). */
.sai-mobile-navigation{position:fixed;inset:0 0 0 auto;width:min(88vw,360px);max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:24px;border:0;border-left:1px solid #E6E6E6;border-radius:12px 0 0 12px;background:#fff;color:#111;box-shadow:var(--sai-shadow-1);overflow-y:auto}
.sai-mobile-navigation::backdrop{background:rgb(0 0 0 / .5)}
.sai-mobile-navigation h2{font-size:16px;line-height:1.5;font-weight:600;padding-right:48px;letter-spacing:normal}
.sai-mobile-navigation p{font-size:14px;line-height:1.5;color:#6B6B6B;margin-top:6px}
.sai-mobile-navigation .sai-container{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:24px}
.sai-mobile-navigation a{display:flex;align-items:center;min-height:48px;padding:12px 8px;border-bottom:1px solid #E6E6E6;font-size:16px;line-height:1.5}
.sai-mobile-navigation a[aria-current=page]{color:#1854CF;text-decoration:underline;text-underline-offset:6px}
.sai-mobile-navigation a:hover{background:#F7F7F7}
.sai-menu-close{position:absolute;top:16px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:8px;font-size:24px;line-height:1;color:#111}
#site-header [data-shell-account="mobile"]{display:contents}
#site-header [data-shell-account][hidden]{display:none}
#site-header .sai-shell-session-retry{min-width:44px;min-height:44px;cursor:pointer;font-family:inherit}
#site-header .sai-mobile-navigation .sai-shell-session-retry{display:flex;align-items:center;padding:12px 8px;font-size:16px;line-height:1.5}
@media(max-width:1023px){
 #site-header.sai-header .sai-desktop-nav,#site-header.sai-header .sai-header-actions{display:none}
 #site-header.sai-header .sai-menu-button{display:inline-flex!important;margin-left:auto}
}
body.sai-shell:has(.sai-mobile-navigation[open]){overflow:hidden}
html{scroll-padding-top:96px}

/* Page-owned button aliases retain their variants while sharing the accent. */
.sai-shell .info-page .button:not(.button-outline){background:var(--sai-action);border-color:var(--sai-action)}
.sai-shell .info-page .button:not(.button-outline):hover{background:var(--sai-action-hover);border-color:var(--sai-action-hover)}
.sai-shell :is(.review-card,.account-panel,.confirm-dialog,.inbox-dialog,.folio-proposal){border-radius:var(--sai-radius-card)}