/* ============================================================================
   MODULES.CSS  —  @layer app.modules  —  one screen's worth of furniture.

   Profile, company, branches, messages, settings, verification: shapes that
   exist on exactly one feature's pages. A shape that shows up on a second page
   has stopped being a module and should move to components.css.
   ==========================================================================*/

@layer app.modules {

.auth-identity {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: 0 auto var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--gray-0) 72%, transparent);
  border: 1px solid var(--glass-field-border);
  border-radius: var(--r-full);
  box-shadow: var(--glass-edge);
  font-size: var(--fs-sm);
}
.auth-identity > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg);
  font-weight: var(--fw-semi);
  overflow-wrap: anywhere;
}
.auth-identity > span::before {
  content: "";
  flex: none;
  inline-size: .95rem;
  block-size: .95rem;
  background: var(--fg-subtle);
  -webkit-mask: var(--icon-mail) center / contain no-repeat;
  mask: var(--icon-mail) center / contain no-repeat;
}
.auth-identity > a {
  font-size: var(--fs-xs);
  text-decoration-color: var(--red-300);
}
.auth-identity > a:hover { text-decoration-color: currentColor; }

.profile-card {
  padding: var(--sp-2);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  color: inherit;
  text-decoration: none;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  width: 100%;
}
.profile-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 3px;
  background: linear-gradient(
    90deg,
    var(--brand),
    color-mix(in srgb, var(--brand) 34%, var(--bg)) 72%,
    transparent
  );
}

.profile-kind {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0;
}

.card-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--fg-muted);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.card-kind-icon {
  flex: none;
  inline-size: .85rem;
  block-size: .85rem;
  background-color: currentColor;
  -webkit-mask: var(--card-kind-glyph) no-repeat center / contain;
  mask: var(--card-kind-glyph) no-repeat center / contain;
}
.card-kind-icon[data-kind="personal"] { --card-kind-glyph: var(--icon-user); }
.card-kind-icon[data-kind="company"] { --card-kind-glyph: var(--icon-company); }

.profile-main {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.profile-main > .avatar-xl,
.profile-main > .company-mark-xl {
  box-shadow: none;
}
.profile-ident {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  min-inline-size: 0;
}
.profile-name {
  color: var(--gray-900);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: anywhere;
}

.profile-name[data-empty="true"] {
  color: var(--fg-subtle);
  font-weight: var(--fw-normal);
}

.profile-detail .profile-name { font-size: var(--fs-2xl); }
.profile-meta {
  margin-inline-start: var(--sp-1);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.profile-muted { color: var(--fg-subtle); }

.profile-bio {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.profile-email {
  margin-inline-start: var(--sp-1);
  color: var(--fg-subtle);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.profile-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: auto;
  padding: var(--sp-3) var(--sp-4);
  border-block-start: 1px solid color-mix(in srgb, var(--gray-0) 50%, var(--border));
}

.profile-hobbies {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-inline-size: 0;
}
.profile-hobbies-label {
  color: var(--fg-subtle);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.profile-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-inline-start: auto;
}

.profile-open {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--red-50) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-200) 74%, transparent);
  border-radius: var(--r-full);
  color: var(--brand-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  text-decoration: none;
  white-space: nowrap;
}
.profile-open:hover {
  background: color-mix(in srgb, var(--red-100) 86%, transparent);
  color: var(--brand-fg);
  text-decoration: none;
}

.profile-open::after {
  content: "";
  inline-size: .8rem;
  block-size: .8rem;
  background: currentColor;
  -webkit-mask: var(--i-chevron-right) no-repeat center / contain;
  mask: var(--i-chevron-right) no-repeat center / contain;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid color-mix(in srgb, var(--gray-0) 50%, var(--border));
}

.profile-fact {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-inline-size: 0;
}

.profile-fact-icon {
  flex: none;
  inline-size: .95rem;
  block-size: .95rem;
  background-color: var(--red-600);
  -webkit-mask: var(--fact-glyph) no-repeat center / contain;
  mask: var(--fact-glyph) no-repeat center / contain;
}
.profile-fact-icon[data-fact="role"] { --fact-glyph: var(--icon-fact-role); }
.profile-fact-icon[data-fact="nationality"] { --fact-glyph: var(--icon-fact-nationality); }
.profile-fact-icon[data-fact="education"] { --fact-glyph: var(--icon-fact-education); }
.profile-fact-icon[data-fact="address"] { --fact-glyph: var(--icon-fact-address); }
.profile-fact-icon[data-fact="region"] { --fact-glyph: var(--icon-fact-region); }
.profile-fact-icon[data-fact="crNumber"] { --fact-glyph: var(--icon-fact-cr); }
.profile-fact-icon[data-fact="area"] { --fact-glyph: var(--icon-fact-area); }
.profile-fact-icon[data-fact="phone"] { --fact-glyph: var(--icon-fact-phone); }

.profile-fact-icon[data-fact="name"] { --fact-glyph: var(--icon-fact-name); }
.profile-fact-icon[data-fact="gender"] { --fact-glyph: var(--icon-fact-gender); }
.profile-fact-icon[data-fact="birthday"] { --fact-glyph: var(--icon-fact-birthday); }
.profile-fact-icon[data-fact="interests"] { --fact-glyph: var(--icon-fact-interests); }
.profile-fact-icon[data-fact="about"] { --fact-glyph: var(--icon-fact-about); }
.profile-fact-icon[data-fact="email"] { --fact-glyph: var(--icon-fact-email); }
.profile-fact-icon[data-fact="calendar"] { --fact-glyph: var(--icon-fact-calendar); }
.profile-fact-icon[data-fact="clock"] { --fact-glyph: var(--icon-fact-clock); }
.profile-fact-icon[data-fact="sessions"] { --fact-glyph: var(--icon-fact-sessions); }
.profile-fact-icon[data-fact="tag"] { --fact-glyph: var(--icon-fact-tag); }
.profile-fact-icon[data-fact="language"] { --fact-glyph: var(--icon-fact-language); }
.profile-fact-icon[data-fact="legal"] { --fact-glyph: var(--icon-fact-legal); }
.profile-fact-icon[data-fact="country"] { --fact-glyph: var(--icon-fact-country); }
.profile-fact-icon[data-fact="city"] { --fact-glyph: var(--icon-fact-city); }
.profile-fact-icon[data-fact="postal"] { --fact-glyph: var(--icon-fact-postal); }
.profile-fact-icon[data-fact="check"] { --fact-glyph: var(--icon-fact-check); }
.profile-fact-icon[data-fact="status"] { --fact-glyph: var(--icon-fact-status); }

.profile-split {
  display: flex;
  align-items: stretch;
  gap: var(--sp-2);
}
.profile-split-main {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.profile-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-inline-size: 0;

  max-inline-size: min(15rem, 45%);
  margin: var(--sp-4);
  margin-inline-start: auto;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);

  height: fit-content;
  width: 60%;
}

.profile-side .profile-fact { align-items: normal; max-inline-size: 100%; }
.profile-side .profile-fact-value {
  min-inline-size: 0;

  overflow-wrap: anywhere;
}
.profile-side .profile-fact-icon {
  margin-top: var(--sp-05);
  inline-size: .85rem;
  block-size: .85rem;
}

.profile-fact-value[data-empty="true"] {
  color: var(--fg-subtle);
  font-weight: var(--fw-normal);
}

.profile-about {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0 var(--sp-4) var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid color-mix(in srgb, var(--gray-0) 50%, var(--border));
}
.profile-about-label {
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.profile-about-text {
  color: var(--gray-900);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.profile-card[data-state="empty"] {
  box-shadow: none;
  border-color: var(--border-strong);
}

.profile-body {

  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-5);
  padding: var(--sp-5);
}

.profile-section {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
}

.profile-section > h2 {
  margin: 0 0 var(--sp-4);
  color: var(--gray-900);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.profile-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-4);
}

body[data-profile-page="/profiles/company"] {
  --page-w: 74rem;
}
body[data-profile-page="/profiles/company"] .page {
  padding-inline: var(--sp-6);
}
body[data-profile-page="/profiles/company"] .company-workspace-identity {
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-inline-start: 3px solid var(--brand);
  background: linear-gradient(110deg, var(--red-50), var(--gray-0) 62%);
}
body[data-profile-page="/profiles/company"] .company-workspace-identity .section-card-head {
  grid-row: span 2;
}
body[data-profile-page="/profiles/company"] .company-workspace-identity .section-card-head h2 {
  margin: 0;
  font-size: var(--fs-lg);
}
body[data-profile-page="/profiles/company"] .company-workspace-identity .section-card-head p {
  max-inline-size: 36rem;
  margin-block: var(--sp-2) 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
body[data-profile-page="/profiles/company"] .company-workspace-identity .profile-list {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  gap: var(--sp-2) var(--sp-4);
}
body[data-profile-page="/profiles/company"] .company-workspace-identity .profile-field > dd {
  font-weight: var(--fw-semi);
}
body[data-profile-page="/profiles/company"] .company-identity-editor {
  grid-column: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
body[data-profile-page="/profiles/company"] .company-identity-editor > summary {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--gray-0);
  text-decoration: none;
}
body[data-profile-page="/profiles/company"] .company-identity-editor > summary:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
}
body[data-profile-page="/profiles/company"] .company-identity-editor[open] > summary {
  margin-block-end: var(--sp-3);
}
body[data-profile-page="/profiles/company"] .company-identity-editor form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-3);
  padding: 0;
}
body[data-profile-page="/profiles/company"] .company-identity-editor .profile-buttons {
  grid-column: 1 / -1;
}
body[data-profile-page="/profiles/company"] .profile-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
}
body[data-profile-page="/profiles/company"] .profile-section {
  padding: var(--sp-3) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body[data-profile-page="/profiles/company"] .profile-section > h2 {
  margin-block-end: var(--sp-3);
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid var(--border-strong);
}
body[data-profile-page="/profiles/company"] .profile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 var(--sp-4);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  margin-block-end: 0;
}
body[data-profile-page="/profiles/company"] .profile-field {
  min-inline-size: 0;
  padding-block: var(--sp-2);
  border-block-end: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
body[data-profile-page="/profiles/company"] .profile-field-wide {
  grid-column: 1 / -1;
}
body[data-profile-page="/profiles/company"] .profile-field[data-reviewed="true"] > dt::after {
  display: none;
}
body[data-profile-page="/profiles/company"] .profile-field :is(input, textarea, select),
body[data-profile-page="/profiles/company"] .profile-field .combobox {
  min-inline-size: 0;
}
@media (max-width: 44rem) {
  body[data-profile-page="/profiles/company"] .page {
    padding-inline: var(--sp-4);
  }
  body[data-profile-page="/profiles/company"] .company-workspace-identity {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4);
  }
  body[data-profile-page="/profiles/company"] .company-workspace-identity .section-card-head {
    grid-row: auto;
  }
  body[data-profile-page="/profiles/company"] .company-identity-editor {
    grid-column: 1;
  }
  body[data-profile-page="/profiles/company"] .company-identity-editor form {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-profile-page="/profiles/company"] .profile-body,
  body[data-profile-page="/profiles/company"] .profile-list {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-profile-page="/profiles/company"] .profile-section {
    padding-block: var(--sp-3);
  }
}

.profile-field {
  display: block;
  min-inline-size: 0;
}

.profile-field > dt {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-1);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.profile-field > dt > label { color: inherit; font-size: inherit; font-weight: inherit; }
.profile-field > dd {
  min-inline-size: 0;
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.profile-value { display: none; }
.profile-field > dd > .profile-value {
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.profile-field > dd > .profile-value[data-empty="true"] {
  color: var(--fg-subtle);
  font-style: italic;
}
.profile-editor[data-card-ready]:not([data-editing]):not([data-card-always]) .profile-value { display: block; }
.profile-editor[data-card-ready]:not([data-editing]):not([data-card-always]) .profile-field :is(input, textarea, select),
.profile-editor[data-card-ready]:not([data-editing]):not([data-card-always]) .field-group-phone,
.profile-editor[data-card-ready]:not([data-editing]):not([data-card-always]) .profile-field .field-hint,
.profile-editor[data-card-ready]:not([data-editing]):not([data-card-always]) .profile-picture,
.profile-editor[data-card-ready]:not([data-editing]):not([data-card-always]) .profile-buttons { display: none; }

.profile-editor[data-card-always]:not([data-editing]) .avatar-controls > button:disabled {
  cursor: default;
}

.profile-editor:not([data-card-ready]) .profile-edit,
.profile-editor[data-editing] .profile-edit { display: none; }

.profile-editor:not([data-card-ready]) [data-card-cancel] { display: none; }

.profile-field > dd > input:not([type="checkbox"]):not([type="radio"]),

.profile-field > dd > .combobox > input,
.profile-field > dd > textarea {
  inline-size: 100%;
  background: var(--glass-field-bg);
  border-color: var(--glass-field-border);
  font-weight: var(--fw-normal);
}
.profile-field > dd > input:not([type="checkbox"]):not([type="radio"]):hover,
.profile-field > dd > .combobox > input:hover,
.profile-field > dd > textarea:hover { border-color: var(--red-300); }
.profile-field > dd > input:not([type="checkbox"]):not([type="radio"]):focus,
.profile-field > dd > .combobox > input:focus,
.profile-field > dd > textarea:focus { background: var(--bg); }
.company-phone-control {
  display: grid;
  grid-template-columns: minmax(8rem, .9fr) minmax(8rem, 1.1fr);
  align-items: start;
  gap: var(--sp-2);
  min-inline-size: 0;
}
.company-phone-control > select,
.company-phone-control input { inline-size: 100%; min-inline-size: 0; }
.company-phone-number { min-inline-size: 0; }
.company-phone-number .field-hint { margin-block-start: var(--sp-1); }
.company-phone-number .phone-field-error { color: var(--danger); font-size: var(--fs-xs); }

.profile-edit {
  flex: none;
  display: grid;
  place-items: center;

  margin-inline-start: auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  min-block-size: 0;
  padding: 0;
  background: color-mix(in srgb, var(--red-50) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--red-200) 74%, transparent);
  border-radius: var(--r-full);
  box-shadow: none;
  color: var(--brand-fg);
  cursor: pointer;
}
.profile-edit::before {
  content: "";
  inline-size: .95rem;
  block-size: .95rem;
  background: currentColor;
  -webkit-mask: var(--icon-edit) no-repeat center / contain;
  mask: var(--icon-edit) no-repeat center / contain;
}
.profile-edit:hover {
  background: color-mix(in srgb, var(--red-100) 88%, transparent);
  border-color: color-mix(in srgb, var(--red-300) 78%, transparent);
}

.profile-picture .avatar-editor { margin: 0; }

.profile-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: auto;
  padding: var(--sp-4) var(--sp-5);
  border-block-start: 1px solid color-mix(in srgb, var(--gray-0) 50%, var(--border));
}
.profile-buttons {
  display: flex;
  align-items: center;
  gap: var(--sp-2);

  margin: 0 0 0 auto;
}

.meter {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sp-3);
}
.meter-ring {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.meter-ring svg {
  display: block;
  flex: none;

  block-size: 2.75rem;

  transform: rotate(-90deg);
}
.meter-track,
.meter-fill {
  fill: none;
  stroke-width: 3.4;
}
.meter-track { stroke: var(--border-strong); }

.meter-fill {
  stroke: var(--brand);
  stroke-linecap: round;
}
.meter-percent {
  color: var(--gray-900);
  font-size: var(--fs-sm);

  letter-spacing: var(--tracking-tight);
}

.meter-note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}

.profile-note {
  margin: var(--sp-2) 0 0;
  max-inline-size: 46rem;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.company-mark {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--fg-on-brand);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flat);
}
/* Busy = a picture being replaced. components.css says the same of .avatar and
   .place-photo; the value is shared through --busy-opacity so the four cannot
   drift apart. */
.company-mark[data-busy] { opacity: var(--busy-opacity); }

.company-mark > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  border-radius: 0;
}
.company-mark-lg {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  font-size: var(--fs-2xl);
}

.company-mark-xl {
  inline-size: 5.75rem;
  block-size: 5.75rem;
  border-radius: 0;
  font-size: var(--fs-3xl);
}

.x-badge[data-tone="wait"] {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 24%, transparent);
  color: var(--warning);
}
.x-badge[data-tone="alert"] {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

.review-note {
  margin-block-end: var(--sp-4);
  padding: var(--sp-4);
  background: var(--glass-alert-bg);
  border: 1px solid var(--glass-alert-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.review-note[data-tone="ok"] {
  background: var(--success-bg);
  border-color: var(--success-bd);
  color: var(--success);
}
.review-note[data-tone="wait"],
.review-note[data-tone="alert"] {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 26%, transparent);
  color: var(--warning);
}
.review-note-title {
  margin: 0 0 var(--sp-1);
  font-weight: var(--fw-semi);
}
.review-note > :last-child { margin-block-end: 0; }

.places {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block: 0;
}

.places-note {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  max-inline-size: 42rem;
}
.places[data-state="locked"] { opacity: .85; }

.place-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.place-item { margin: 0; }

.place-kind {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  inline-size: 5.75rem;
  block-size: 5.75rem;
  background: var(--grad-brand);
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 .25rem color-mix(in srgb, var(--gray-0) 82%, transparent),
    var(--glass-edge);
  color: var(--fg-on-brand);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-flat);
}

.place-kind > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.place-card[data-state="empty"] .place-kind {
  background: var(--bg-subtle);
  box-shadow: var(--glass-edge);
  color: var(--fg-subtle);
}

.place-state > h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.place-state .profile-note { margin-block-start: 0; }

.place-hint {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  max-inline-size: 32rem;
}

.place-code {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--sp-2);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--fg-muted);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.profile-verification {
  margin-block-start: var(--sp-5);
}

.profile-verification > h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.profile-verification[data-status="submitted"] .profile-note {
  color: var(--fg-muted);
}

.profile-verification form {
  margin-block-start: var(--sp-4);
}
.profile-verification .field-choice {
  margin-block-end: var(--sp-4);
}

.document-photo {
  display: grid;
  place-items: center;
  inline-size: min(86%, 22rem);
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
}

.document-photo[data-busy] { opacity: var(--busy-opacity); }

.document-photo > img {
  display: block;

  inline-size: auto;
  block-size: auto;
  max-inline-size: 100%;
  max-block-size: 22rem;
  object-fit: contain;
}
.document-photo-empty {
  padding: var(--sp-2);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  text-align: center;
}

.document-photo-editor { flex-wrap: wrap; }

.chat-more {
  margin: 0 0 var(--sp-3);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.chat-thread {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-05);
  margin: 0;
  padding: 0;
}

.chat-message { display: flex; }
.chat-message[data-who="mine"] { justify-content: flex-end; }
.chat-message[data-who="theirs"] { justify-content: flex-start; }

.chat-message[data-run="end"] { margin-block-end: var(--sp-3); }

.chat-bubble {
  position: relative;
  max-inline-size: min(42rem, 82%);

  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-edge);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

.chat-message[data-who="theirs"][data-run="end"] .chat-bubble { border-end-start-radius: var(--r-xs); }
.chat-message[data-who="theirs"][data-run="open"] .chat-bubble { border-end-start-radius: var(--r-xs); }
.chat-message[data-who="mine"][data-run="end"] .chat-bubble { border-end-end-radius: var(--r-xs); }
.chat-message[data-who="mine"][data-run="open"] .chat-bubble { border-end-end-radius: var(--r-xs); }

.chat-message[data-who="mine"] .chat-bubble {
  background: color-mix(in srgb, var(--red-50) 90%, transparent);
  border-color: color-mix(in srgb, var(--red-200) 70%, transparent);
}

.chat-time {
  display: block;
  margin-block-start: var(--sp-05);
  color: var(--fg-subtle);
  font-size: var(--fs-2xs);
  line-height: 1.2;
  text-align: end;
}
.chat-time time { color: inherit; }

.chat-day {
  display: flex;
  justify-content: center;
  margin-block: var(--sp-3) var(--sp-2);
}
.chat-day > span {
  padding: var(--sp-05) var(--sp-3);
  background: color-mix(in srgb, var(--gray-0) 76%, transparent);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  color: var(--fg-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
}

.chat-unread-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block: var(--sp-2);
  color: var(--brand-fg);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.chat-unread-line::before,
.chat-unread-line::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: color-mix(in srgb, var(--brand) 32%, transparent);
}

.chat-body {
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-empty {
  margin: 0;
  padding: var(--sp-5);
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.chat-wait {
  margin: 0;
  padding: var(--sp-5);
  background: var(--bg-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.chat-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  width: 100%;
}
.chat-field {
  display: grid;
  gap: var(--sp-2);
  min-inline-size: 0;
  margin: 0;
}
.chat-field-label {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}
.chat-field > textarea {
  inline-size: 100%;
  min-block-size: 7rem;
  padding: var(--sp-3);
  resize: vertical;
  background: var(--glass-field-bg);
  border: 1px solid var(--glass-field-border);
  border-radius: var(--r-md);
  color: var(--fg);
  font: inherit;
  line-height: var(--lh-snug);
  outline: none;
}
.chat-field > textarea:hover { border-color: var(--red-300); }
.chat-field > textarea:focus {
  background: var(--bg);
  border-color: var(--brand);
  box-shadow: var(--ring-offset);
}
.chat-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

.chat-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.25rem;
  padding: 0 var(--sp-1);
  background: var(--brand);
  border-radius: var(--r-full);
  color: var(--fg-on-brand);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  line-height: 1.25rem;
}

.settings-identity {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-6);
  padding: var(--sp-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.settings-identity-text { min-inline-size: 0; }
.settings-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  overflow-wrap: anywhere;
}
.settings-since {
  margin: var(--sp-1) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.settings-group {
  width: 100%;
  margin-block-end: var(--sp-6);
  margin-top: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}
.settings-group-title {
  margin: 0 0 var(--sp-3);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.settings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.settings-list > li { margin: 0; padding: 0; list-style: none; }
.settings-list > li::marker { content: ""; }
.settings-list > li + li { border-block-start: 1px solid var(--glass-border); }

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  color: inherit;
  text-decoration: none;
}
.settings-row:hover { background: color-mix(in srgb, var(--red-50) 55%, transparent); }
.settings-row-icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: var(--brand);
  -webkit-mask: var(--row-glyph) center / contain no-repeat;
  mask: var(--row-glyph) center / contain no-repeat;
}
.settings-row-icon[data-icon="devices"] { --row-glyph: var(--icon-devices); }
.settings-row-icon[data-icon="user"] { --row-glyph: var(--icon-user); }
.settings-row-icon[data-icon="company"] { --row-glyph: var(--icon-company); }
.settings-row-icon[data-icon="mail"] { --row-glyph: var(--icon-mail); }
.settings-row-icon[data-icon="download"] { --row-glyph: var(--icon-download); }
.settings-row-icon[data-icon="trash"] { --row-glyph: var(--icon-trash); }

.settings-row[data-static="true"] { cursor: default; }
.settings-row[data-static="true"]:hover { background: none; }

.settings-row[data-tone="danger"] .settings-row-icon { background: var(--danger); }
.settings-row[data-tone="danger"] .settings-row-title { color: var(--danger); }
.settings-row[data-tone="danger"]:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* The stock-visibility radios on business settings. The markup has always
   emitted `.setting-choice`, `.setting-choice-head` and `.setting-choice-body`,
   but no stylesheet ever defined them — so the radio, its label and its
   explanation flowed inline and the two options ran together as one paragraph
   ("Separate per branch Each branch sees… between branches. Shared, read-only
   overview Every branch can see…"). A choice is a block: radio and label on the
   first line, the explanation beneath and indented under the label. */
.setting-choice {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--field-fill-solid);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
}
.setting-choice + .setting-choice { margin-block-start: var(--sp-2); }
.setting-choice-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.setting-choice-head > label {
  font-weight: var(--fw-medium);
  color: var(--gray-900);
}
.setting-choice-body {
  display: block;
  margin-block-start: var(--sp-1);
  margin-inline-start: calc(1rem + var(--sp-2));
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.setting-choice:has(input:checked) {
  background: var(--red-50);
  border-color: var(--red-300);
}

.delete-list {
  margin: 0 0 var(--sp-4);
  padding-inline-start: var(--sp-5);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.delete-list > li { margin-block-end: var(--sp-1); }
button[data-tone="danger"] {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--fg-on-brand);
}

.settings-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-05);
  min-inline-size: 0;
}
.settings-row-title {
  color: var(--gray-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.settings-row-note {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}

.settings-row-go {
  flex: none;
  inline-size: .85rem;
  block-size: .85rem;
  background: var(--fg-subtle);
  -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
  mask: var(--i-chevron-right) center / contain no-repeat;
}

.session-list {
  width: 100%;
  margin: var(--sp-4);
  padding: 0;
  list-style: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
.session {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-4);
  list-style: none;
}
.session::marker { content: ""; }
.session + .session { border-block-start: 1px solid var(--glass-border); }

.session[data-current="true"] { background: color-mix(in srgb, var(--red-50) 45%, transparent); }
.session-icon {
  flex: none;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  background: var(--brand);
  -webkit-mask: var(--icon-devices) center / contain no-repeat;
  mask: var(--icon-devices) center / contain no-repeat;
}
.session-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-05);
  min-inline-size: 0;
}
.session-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  color: var(--gray-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.session-meta {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.session-end { flex: none; margin: 0; }
.session-end > button {
  padding: var(--sp-1) var(--sp-3);
  background: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  box-shadow: none;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.session-end > button:hover { border-color: var(--brand); color: var(--brand-fg); }
.session-end-all { margin: 0 0 var(--sp-4); }

body[data-surface="company-profile"] .page-header {
  inline-size: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}
body[data-surface="company-profile"] .page-header > :first-child {
  min-inline-size: 0;
}
body[data-surface="company-profile"] .page-header .eyebrow {
  margin-block-end: var(--sp-1);
  color: var(--fg-subtle);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
body[data-surface="company-profile"] .page-header h1 {
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
body[data-surface="company-profile"] .page-header .muted {
  margin: var(--sp-2) 0 0;
  max-inline-size: 44rem;
  color: var(--fg-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}
body[data-surface="company-profile"] .page-header .actions {
  flex: none;
}

body[data-surface="company-profile"] .page-tabs,
body[data-profile-page^="/profiles/company"] .page-tabs {
  inline-size: 100%;
  display: flex;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  background: color-mix(in srgb, var(--bg-subtle) 76%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  scrollbar-width: thin;
}
body[data-surface="company-profile"] .page-tab,
body[data-profile-page^="/profiles/company"] .page-tab {
  min-block-size: var(--nav-item-h);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
body[data-surface="company-profile"] .page-tab:hover,
body[data-profile-page^="/profiles/company"] .page-tab:hover {
  background: var(--bg);
  border-color: var(--border-subtle);
  color: var(--fg);
}
body[data-surface="company-profile"] .page-tab.active,
body[data-profile-page^="/profiles/company"] .page-tab.active {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--brand-fg);
  font-weight: var(--fw-semi);
}

@media (max-width: 34rem) {
  body[data-surface="company-profile"] .page-tabs,
  body[data-profile-page^="/profiles/company"] .page-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }
  body[data-surface="company-profile"] .page-tab,
  body[data-profile-page^="/profiles/company"] .page-tab {
    min-inline-size: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

/* Company settings composition. The runtime shares sectionCard/detailRows/stat
   primitives across company-profile subpages; this layer supplies the platform
   surface geometry without leaking into the operational workspace. */
body[data-surface="company-profile"]:has(.company-profile-settings-layout) {
  --page-w: 76rem;
}

.company-profile-settings-layout {
  display: grid;
  gap: var(--sp-4);
  inline-size: 100%;
  min-inline-size: 0;
}

.company-profile-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(24rem, 1.12fr);
  gap: var(--sp-4);
  align-items: start;
  min-inline-size: 0;
}

.company-profile-settings-column {
  display: grid;
  gap: var(--sp-4);
  min-inline-size: 0;
}

.company-profile-settings-layout .section-card {
  margin: 0;
  box-shadow: var(--sh-xs);
}

.company-profile-settings-layout .section-card-head {
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--bg-subtle) 72%, var(--bg));
}

.company-profile-settings-layout .section-card-head h2 {
  color: var(--gray-900);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
}

.company-profile-settings-layout .section-card-body {
  padding: var(--sp-4) var(--sp-5);
}

.company-profile-settings-layout .detail-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.company-profile-settings-layout .detail-row {
  display: grid;
  grid-template-columns: minmax(9rem, .8fr) minmax(0, 1.2fr);
  gap: var(--sp-3);
  min-inline-size: 0;
  padding-block: var(--sp-3);
  border-block-end: 1px solid var(--border);
}

.company-profile-settings-layout .detail-row:first-child {
  padding-block-start: 0;
}

.company-profile-settings-layout .detail-row:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.company-profile-settings-layout .detail-row dt {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

.company-profile-settings-layout .detail-row dd {
  min-inline-size: 0;
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  overflow-wrap: anywhere;
}

.company-admin-account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

.company-admin-account-stats .stat {
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  min-inline-size: 0;
  min-block-size: 7rem;
  padding: var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.company-admin-account-stats .stat > .muted:first-child {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}

.company-admin-account-stats .stat .amount {
  margin: var(--sp-1) 0;
  color: var(--gray-900);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  white-space: normal;
  overflow-wrap: anywhere;
}

.company-admin-account-stats .stat > .muted:last-child:not(:first-child) {
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.company-profile-settings-actions .form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

.company-profile-settings-actions .form-actions {
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border);
}

.company-profile-settings-actions .form-actions > .button {
  min-inline-size: 9rem;
}

@media (max-width: 62rem) {
  .company-profile-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-profile-settings-actions {
    order: -1;
  }

  .company-admin-account-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .company-profile-settings-layout {
    gap: var(--sp-3);
  }

  .company-profile-settings-column {
    gap: var(--sp-3);
  }

  .company-profile-settings-layout .section-card-head,
  .company-profile-settings-layout .section-card-body {
    padding-inline: var(--sp-4);
  }

  .company-profile-settings-layout .detail-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-1);
  }

  .company-admin-account-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-admin-account-stats .stat {
    min-block-size: auto;
  }

  .company-profile-settings-actions .form-actions > .button {
    inline-size: 100%;
  }
}

.messages-c {
  width: 100%;
  max-inline-size: 60rem;
  overflow: hidden;
  margin: 0 auto var(--sp-8);
  padding: 0;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
}

.messages-page {
  display: grid;
  gap: 0;
}

.messages-intro {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--bg-subtle) 78%, transparent);
  border-block-end: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.messages-intro > strong {
  color: var(--gray-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

/* Read messages only on entrance or a deliberate refresh click. */
.messages-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.chat-refresh-button {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  min-block-size: 2rem;
  padding: var(--sp-1) var(--sp-3);
  font: inherit;
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.chat-refresh-button:hover { border-color: var(--brand); }
.chat-refresh-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-refresh-button:disabled { opacity: .55; cursor: wait; }

.messages-page .chat-thread {
  min-block-size: 17rem;
  max-block-size: min(60dvh, 42rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--bg-subtle) 38%, transparent);
  scrollbar-gutter: stable;
}

.messages-page .chat-empty,
.messages-page .chat-wait {
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-subtle) 72%, transparent);
}

.chat-composer-slot {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-block-start: 1px solid var(--border);
}

.chat-composer-slot .chat-form {
  margin-block-start: 0;
}

@media (max-width: 44rem) {
  body[data-surface="company-profile"] .page-header {
    align-items: stretch;
    flex-direction: column;
    gap: var(--sp-3);
  }
  body[data-surface="company-profile"] .page-header .actions {
    inline-size: 100%;
  }
}

@media (max-width: 36rem) {
  .messages-c {
    margin-block-end: var(--sp-6);
    border-radius: var(--r-lg);
  }

  .messages-intro,
  .messages-page .chat-thread,
  .chat-composer-slot {
    padding-inline: var(--sp-4);
  }

  .messages-page .chat-thread {
    min-block-size: 14rem;
    max-block-size: 56dvh;
    padding-block: var(--sp-4);
  }

  .chat-bubble {
    max-inline-size: 90%;
  }
}

.profile-editor {
  width: 100%;
}

.change-panel {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: var(--r-lg);
}
.change-panel[data-status="rejected"] {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}
.change-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-2);
}
.change-head > h2 {
  margin: 0;
  color: var(--gray-900);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
}
.change-lead {
  margin: 0 0 var(--sp-3);
  color: var(--fg);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  max-inline-size: 60ch;
}
.change-note {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--gray-0) 70%, transparent);
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--r-sm);
  color: var(--gray-900);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.change-actions { margin: var(--sp-3) 0 0; }

.change-diff {
  inline-size: 100%;
  border-collapse: collapse;
  background: color-mix(in srgb, var(--gray-0) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.change-diff th,
.change-diff td {
  padding: var(--sp-2) var(--sp-3);
  border-block-start: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.change-diff thead th {
  border-block-start: 0;
  background: var(--bg-subtle);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.change-diff tbody th {
  color: var(--fg-muted);
  font-weight: var(--fw-semi);
  inline-size: 11rem;
}
.change-before { color: var(--fg-muted); }
.change-after { color: var(--gray-900); font-weight: var(--fw-semi); }
.change-empty { color: var(--fg-subtle); font-style: italic; font-weight: var(--fw-normal); }

.profile-field[data-reviewed="true"] > dt::after {
  content: "Reviewed";
  margin-inline-start: auto;
  padding: .05em .55em;
  background: var(--warning-bg);
  border-radius: var(--r-full);
  color: var(--warning);
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-wide);
}


.company-customization .workspace-theme-editor-group {
  grid-column: 1 / -1;
  min-inline-size: 0;
  margin: 0;
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--bg-subtle) 58%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.company-customization .workspace-theme-editor-group > legend {
  padding-inline: var(--sp-1);
  color: var(--gray-900);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-editor-help {
  margin: 0 0 var(--sp-3);
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.company-customization .workspace-theme-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  gap: var(--sp-3);
  min-inline-size: 0;
  align-items: start;
}

/* The old hand-built preview styling was removed. The live preview now adopts
   the production workspace stylesheet inside an isolated shadow root. */

body[data-profile-page="/profiles"] {
  --page-w: 76rem;
}

body[data-profile-page="/profiles"] .page {
  padding-inline: clamp(var(--sp-4), 3vw, var(--sp-7));
}

body[data-profile-page="/profiles"] .page-head {
  margin-block-end: var(--sp-6);
}

body[data-profile-page="/profiles"] .page-head > h1 {
  font-size: clamp(var(--fs-2xl), 4vw, 2.75rem);
}

.profiles-overview {
  display: grid;
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  min-inline-size: 0;
}

.profiles-personal-section,
.profiles-company-section {
  display: grid;
  gap: var(--sp-3);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.profiles-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-inline: var(--sp-1);
}

.profiles-section-heading > div {
  min-inline-size: 0;
}

.profiles-section-kicker {
  margin: 0 0 var(--sp-1);
  color: var(--brand-fg);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.profiles-section-heading h2 {
  margin: 0;
  color: var(--gray-900);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

.profiles-section-heading p:last-child {
  margin: var(--sp-1) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.profiles-company-list {
  display: grid;
  gap: var(--sp-4);
  min-inline-size: 0;
}

.profiles-company-list > .empty-state {
  margin: 0;
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  background:
    radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--brand) 9%, transparent), transparent 52%),
    var(--glass-bg);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
}

body[data-profile-page="/profiles"] .profile-company-summary .profile-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, .72fr);
  gap: var(--sp-3);
}

body[data-profile-page="/profiles"] .profile-company-summary .profile-side {
  inline-size: auto;
  max-inline-size: none;
  margin: var(--sp-4);
  margin-inline-start: 0;
  padding: var(--sp-3);
  background: var(--bg-subtle);
}

@media (max-width: 48rem) {
  body[data-profile-page="/profiles"] .profile-company-summary .profile-split {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-profile-page="/profiles"] .profile-company-summary .profile-side {
    margin-block-start: 0;
    margin-inline: var(--sp-4);
  }
}


/* PLATFORM PROFILE VISUAL REFINEMENT 2026-10-08 */
/* Control-plane profile/company pages only. These selectors never match the
   Super Admin surface or the operational workspace. */
:is(body[data-profile-page], body[data-surface="company-profile"]) .page {
  padding-inline: clamp(var(--sp-4), 3vw, var(--sp-7));
}

:is(body[data-profile-page], body[data-surface="company-profile"]) .page-head {
  margin-block-end: var(--sp-6);
}

:is(body[data-profile-page], body[data-surface="company-profile"]) .page-head > h1 {
  font-size: clamp(var(--fs-2xl), 3.6vw, 2.65rem);
}

:is(body[data-profile-page], body[data-surface="company-profile"]) .page-lead {
  max-inline-size: 48rem;
  line-height: 1.6;
}

body[data-profile-page] .profile-card {
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  box-shadow:
    0 1px 2px rgb(41 31 27 / .035),
    0 14px 42px rgb(41 31 27 / .055);
}

body[data-profile-page] .profile-card::before {
  inset-inline: var(--sp-4);
  block-size: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--brand) 42%, transparent),
    transparent
  );
}

body[data-profile-page] .profile-detail .profile-kind {
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  background: color-mix(in srgb, var(--bg-subtle) 54%, transparent);
  border-block-end: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

body[data-profile-page] .profile-detail .profile-main {
  gap: var(--sp-4);
  padding: var(--sp-5);
}

body[data-profile-page] .profile-detail .profile-body {
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--bg-subtle) 26%, transparent);
}

body[data-profile-page] .profile-detail .profile-section {
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--gray-0) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 82%, transparent);
}

body[data-profile-page] .profile-detail .profile-section > h2 {
  margin-block-end: var(--sp-4);
  padding-block-end: 0;
  border-block-end: 0;
}

body[data-profile-page] .profile-detail .profile-foot {
  padding: var(--sp-4) var(--sp-5);
  background: color-mix(in srgb, var(--bg-subtle) 48%, transparent);
}

body[data-profile-page="/profiles/company"] .company-workspace-identity {
  padding: var(--sp-5);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--gray-0) 94%, var(--bg-subtle));
  box-shadow:
    0 1px 2px rgb(41 31 27 / .03),
    0 10px 28px rgb(41 31 27 / .045);
}

body[data-profile-page="/profiles/company"] .company-workspace-identity .section-card-head {
  grid-row: span 2;
}

body[data-profile-page="/profiles/company"] .company-workspace-identity .profile-list {
  padding: var(--sp-3);
  background: color-mix(in srgb, var(--gray-0) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: var(--r-md);
}

body[data-profile-page="/profiles/company"] .company-workspace-identity .profile-field {
  border-block-end-color: color-mix(in srgb, var(--border) 56%, transparent);
}

body[data-surface="company-profile"] .page-tabs,
body[data-profile-page^="/profiles/company"] .page-tabs {
  gap: .25rem;
  padding: .25rem;
  background: color-mix(in srgb, var(--bg-subtle) 64%, var(--gray-0));
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 78%, transparent);
}

body[data-surface="company-profile"] .page-tab,
body[data-profile-page^="/profiles/company"] .page-tab {
  min-block-size: 2.75rem;
  padding-inline: var(--sp-3);
  border-radius: calc(var(--r-lg) - .2rem);
}

body[data-surface="company-profile"] .page-tab.active,
body[data-profile-page^="/profiles/company"] .page-tab.active {
  background: var(--gray-0);
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  color: var(--brand-fg);
  box-shadow: var(--sh-xs);
}

body[data-surface="company-profile"] .company-profile-settings-layout .section-card {
  overflow: clip;
  background: var(--gray-0);
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 2px rgb(41 31 27 / .03),
    0 10px 30px rgb(41 31 27 / .04);
}

body[data-surface="company-profile"] .company-profile-settings-layout .section-card-head {
  background: color-mix(in srgb, var(--bg-subtle) 54%, var(--gray-0));
  border-block-end-color: color-mix(in srgb, var(--border) 76%, transparent);
}

body[data-surface="company-profile"] :is(.section-card, .record-card, .settings-panel) {
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
}

@media (max-width: 44rem) {
  :is(body[data-profile-page], body[data-surface="company-profile"]) .page {
    padding-inline: var(--sp-4);
  }

  body[data-profile-page] .profile-detail .profile-kind,
  body[data-profile-page] .profile-detail .profile-main,
  body[data-profile-page] .profile-detail .profile-body,
  body[data-profile-page] .profile-detail .profile-foot {
    padding-inline: var(--sp-4);
  }

  body[data-profile-page] .profile-detail .profile-section {
    padding: var(--sp-3);
  }

  body[data-profile-page="/profiles/company"] .company-workspace-identity {
    padding: var(--sp-4);
  }

  body[data-profile-page] .profile-foot .profile-buttons {
    inline-size: 100%;
    margin-inline-start: 0;
  }

  body[data-profile-page] .profile-foot .profile-buttons > * {
    flex: 1 1 10rem;
    min-inline-size: 0;
  }

  body[data-surface="company-profile"] .page-tabs,
  body[data-profile-page^="/profiles/company"] .page-tabs {
    gap: var(--sp-1);
    padding: var(--sp-1);
  }
}

} /* @layer app.modules */



/* The company appearance editor shares the platform profile page shell. Only
   the isolated preview uses the workspace stylesheet. */
.company-customization {
  display: grid;
  grid-template-columns: minmax(22rem, 2fr) minmax(0, 3fr);
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
  align-items: start;
  min-inline-size: 0;
}
body[data-surface="company-profile"]:has(.company-customization) { --page-w: 82rem; }
.company-customization .section-card-head { padding: var(--sp-4) var(--sp-5); }
.company-customization .section-card-head h2 { font-size: var(--fs-lg); }
.company-customization .section-card-head p { max-inline-size: 54ch; font-size: var(--fs-sm); }
.company-customization .section-card-body { padding: var(--sp-4) var(--sp-5); }
.company-customization .workspace-theme-style-section,
.company-customization .workspace-theme-advanced {
  grid-column: 1 / -1;
}
.company-customization .workspace-theme-customizer-preview .section-card-head {
  padding-block: var(--sp-3);
}
.company-customization .workspace-theme-customizer-preview .section-card-body {
  padding: var(--sp-3);
}
.company-customization .form-actions { padding-block-start: var(--sp-4); }
.company-customization-controls,
.company-customization-preview {
  min-inline-size: 0;
}
.company-customization-controls { overflow: visible; }
.company-customization-preview {
  position: sticky;
  top: calc(var(--topbar-height, 64px) + var(--sp-4));
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.company-customization-controls .form-actions {
  position: sticky;
  inset-block-end: 0;
  z-index: 8;
  margin-inline: calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-5);
  background: var(--gray-0);
  border-block-start: 1px solid var(--border);
  box-shadow: 0 -6px 16px color-mix(in srgb, var(--fg) 6%, transparent);
}
@media (max-width: 62rem) {
  .company-customization {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization-preview {
    position: static;
    order: -1;
    max-block-size: none;
    overflow: visible;
    box-shadow: var(--sh-sm);
  }
  .company-customization-preview .section-card-head p { display: none; }
  .company-customization .section-card-body { padding: var(--sp-4); }
  .company-customization-controls .form-actions > button {
    max-inline-size: 100%;
    white-space: normal;
  }
}
@media (max-width: 40rem) {
  .company-customization {
    gap: var(--sp-3);
  }
  .company-customization .workspace-theme-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization-preview {
    max-block-size: none;
    overflow: visible;
  }
}

.company-customization-controls .section-card-body { overflow: visible; }
.company-customization .workspace-theme-customizer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--border);
}
.company-customization .workspace-theme-customizer-live-hint {
  max-inline-size: 54ch;
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.company-customization .workspace-theme-reset-dialog {
  inline-size: min(32rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  overflow: auto;
  margin: auto;
  padding: var(--sp-5);
  color: var(--fg);
  background: var(--surface, #fff);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hover);
}
.company-customization .workspace-theme-reset-dialog::backdrop {
  background: rgb(20 24 29 / .52);
  backdrop-filter: blur(3px);
}
.company-customization .workspace-theme-reset-copy h2 {
  margin: 0;
  font-size: var(--fs-lg);
}
.company-customization .workspace-theme-reset-copy p {
  margin: var(--sp-3) 0 0;
  line-height: 1.6;
}
.company-customization .workspace-theme-reset-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-block-start: var(--sp-5);
}
.company-identity-editor {
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--border);
}
.company-identity-editor > summary {
  width: fit-content;
  color: var(--brand-fg);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.company-identity-editor[open] > summary { margin-block-end: var(--sp-3); }
/* Company identity card: retain legacy portal's strong split composition, with
   clearer hierarchy and denser professional contact treatment. */
.profile-company-summary {
  padding: 0;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--red-50) 72%, transparent), transparent 35%),
    var(--glass-bg);
}
.profile-company-summary .profile-kind {
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid color-mix(in srgb, var(--gray-0) 45%, var(--border));
}
.profile-company-summary .profile-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.42fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
}
.profile-company-summary .profile-main {
  align-items: flex-start;
  padding: 0;
}
.profile-company-summary .profile-main > .company-mark-xl {
  flex: none;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border-radius: 0;
}
.profile-company-summary .profile-ident {
  gap: var(--sp-1);
  padding-block-start: var(--sp-1);
}
.profile-company-summary .profile-name {
  font-size: clamp(var(--fs-xl), 2.2vw, var(--fs-2xl));
}
.profile-company-summary .profile-name[dir="auto"] { unicode-bidi: plaintext; }
.profile-company-summary .profile-about {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) 0 0;
}
.profile-company-summary .profile-about-text {
  max-inline-size: 70ch;
  line-height: 1.6;
}
.profile-company-summary .profile-side {
  width: auto;
  max-inline-size: none;
  height: fit-content;
  margin: 0;
  padding: var(--sp-3);
  gap: var(--sp-3);
  background: color-mix(in srgb, var(--gray-0) 72%, transparent);
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gray-0) 82%, transparent);
}
.profile-company-summary .profile-side .profile-fact {
  width: 100%;
  align-items: flex-start;
  padding-block-end: var(--sp-2);
  border-block-end: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.profile-company-summary .profile-side .profile-fact:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}
.profile-company-summary .profile-side .profile-fact-value {
  line-height: 1.45;
}
.profile-company-summary .profile-tags {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--gray-0) 42%, transparent);
}
@media (max-width: 46rem) {
  .profile-company-summary .profile-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .profile-company-summary .profile-main > .company-mark-xl {
    inline-size: 4.75rem;
    block-size: 4.75rem;
  }
  .profile-company-summary .profile-side {
    width: 100%;
  }
  .profile-company-summary .profile-status {
    margin-inline-start: 0;
  }
}
@media (max-width: 62rem) {
  .company-customization .workspace-theme-customizer-toolbar { align-items: flex-start; }
}
@media (max-width: 40rem) {
  .company-customization .workspace-theme-customizer-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .company-customization .workspace-theme-customizer-toolbar > .button {
    inline-size: 100%;
    max-inline-size: 100%;
    margin: 0;
    white-space: normal;
  }
}


/* Company customization: the live preview is an isolated production-workspace
   viewport. Its shadow root owns the actual compiled workspace CSS; these rules
   only size and frame the host inside the control-plane editor. */
.company-customization .workspace-theme-preview {
  display: block;
  inline-size: 100%;
  block-size: min(70vh, 48rem);
  /* Parent JS owns the measured frame height; a 32rem CSS minimum
     prevented the embedded preview from matching its scroll viewport. */
  min-block-size: 0;
  overflow: auto;
  background: var(--brand-background, var(--bg-subtle));
  border: 1px solid var(--brand-border, var(--border));
  border-radius: var(--r-lg);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  box-shadow: var(--shadow);
  scrollbar-gutter: stable;
}
.company-customization .workspace-theme-style-section {
  display: grid;
  gap: var(--sp-3);
}
.company-customization .workspace-theme-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.company-customization .workspace-theme-preset-button {
  min-inline-size: 0;
  min-block-size: 5.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: .25rem;
  padding: var(--sp-3);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.company-customization .workspace-theme-preset-button:hover,
.company-customization .workspace-theme-preset-button:focus-visible {
  background: var(--bg-subtle);
  border-color: var(--brand-border, var(--border-strong));
  box-shadow: var(--shadow);
}
.company-customization .workspace-theme-preset-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.company-customization .workspace-theme-preset-button strong {
  min-inline-size: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  white-space: normal;
}
.company-customization .workspace-theme-preset-button span {
  min-inline-size: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
  white-space: normal;
}
.company-customization .workspace-theme-advanced {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-subtle) 42%, transparent);
}
.company-customization .workspace-theme-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: var(--field-h);
  padding: var(--sp-3) var(--sp-4);
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.company-customization .workspace-theme-advanced[open] > summary {
  border-block-end: 1px solid var(--border);
}
.company-customization .workspace-theme-advanced-summary {
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
}
.company-customization .workspace-theme-linked-palette {
  padding: var(--sp-4) var(--sp-4) 0;
}
.company-customization .workspace-theme-linked-palette .checkbox {
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-advanced > .workspace-theme-editor-group {
  border: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: transparent;
}
.company-customization .workspace-theme-advanced > .workspace-theme-editor-group:disabled {
  opacity: .64;
}
@media (max-width: 52rem) {
  .company-customization .workspace-theme-preview {
    block-size: min(40vh, 28rem);
    min-block-size: 17rem;
  }
}
@media (max-width: 40rem) {
  .company-customization .workspace-theme-presets {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization .workspace-theme-advanced > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--sp-1);
  }
}

/* Company appearance: one shared portal layout for the editor and preview.
   The preview itself consumes the compiled workspace CSS in a shadow root. */
body[data-surface="company-profile"]:has(.company-customization) {
  --page-w: 96rem;
}
.company-customization {
  display: grid;
  /* Appearance controls on the left, real dashboard preview on the right. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(var(--sp-4), 2vw, var(--sp-5));
  min-inline-size: 0;
  align-items: start;
}
.company-customization :where(.section-card,.workspace-theme-editor-group,.workspace-theme-fine-tuning) {
  margin-block: 0;
}
.company-customization .section-card {
  min-inline-size: 0;
  margin: 0;
}
.company-customization .section-card-head,
.company-customization .section-card-body {
  padding: var(--sp-4);
}
.company-customization .section-card-head p { max-inline-size: 75ch; }
.company-customization .company-customization-preview {
  position: static;
  top: auto;
  max-block-size: none;
  overflow: visible;
  box-shadow: none;
}
.company-customization .workspace-theme-preview-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.company-customization .workspace-theme-preview-scale {
  margin-inline-start: auto;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.company-customization .workspace-theme-preview-dock {
  position: relative;
  display: block;
  min-inline-size: 0;
  inline-size: 100%;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
.company-customization .workspace-theme-preview {
  display: block;
  position: relative;
  min-block-size: 0;
  max-block-size: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: scale(var(--theme-preview-scale, 1));
  transform-origin: top left;
}
.company-customization .workspace-theme-preview-note {
  margin: var(--sp-2) 0 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.company-customization .company-customization-controls {
  overflow: visible;
}
.company-customization .company-customization-controls .form-grid {
  display: grid;
  /* Each entire section owns a row. Two columns here collapsed the color
     palette to 180px, then squeezed its four inputs into two more columns. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.company-customization .company-customization-controls .form-grid > .workspace-theme-editor-group,
.company-customization .company-customization-controls .form-grid > .workspace-theme-style-section {
  grid-column: auto;
  min-inline-size: 0;
}
.company-customization .company-customization-controls .form-grid > .workspace-theme-advanced {
  grid-column: 1 / -1;
}
.company-customization .workspace-theme-editor-group {
  min-inline-size: 0;
  padding: var(--sp-4);
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.company-customization .workspace-theme-editor-group > legend {
  padding-inline: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
.company-customization .workspace-theme-style-section {
  display: grid;
  gap: var(--sp-3);
}
.company-customization .workspace-theme-editor-section-title {
  margin: 0;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.company-customization .workspace-theme-preset-button {
  min-inline-size: 0;
  min-block-size: 4.25rem;
  padding: var(--sp-3);
  border-radius: var(--r-md);
}
.company-customization .workspace-theme-preset-button.is-active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface,#fff));
  box-shadow: inset 0 0 0 1px var(--brand);
}
.company-customization .workspace-theme-preset-button.is-active strong {
  color: var(--brand);
}
.company-customization .workspace-theme-fine-tuning {
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface, #fff);
}
.company-customization .workspace-theme-fine-tuning > summary {
  min-block-size: 42px;
  padding: var(--sp-3);
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
.company-customization .workspace-theme-fine-tuning[open] > summary {
  border-block-end: 1px solid var(--border);
}
.company-customization .workspace-theme-fine-tuning > .workspace-theme-editor-group {
  margin: var(--sp-3);
  padding: var(--sp-3);
}
.company-customization .workspace-theme-customizer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
  padding: 0 0 var(--sp-3);
  border-block-end: 1px solid var(--border);
}
.company-customization .company-customization-controls .form-actions {
  position: static;
  inset: auto;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) 0 0;
  background: transparent;
  border-top: 1px solid var(--border);
  box-shadow: none;
}
body[data-surface="company-profile"] > .workspace-theme-preview-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  inline-size: min(96vw, 1220px);
  block-size: min(94dvh, 900px);
  max-inline-size: none;
  max-block-size: none;
  padding: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface, #fff);
  color: var(--fg);
  box-shadow: var(--shadow-hover);
}
body[data-surface="company-profile"] > .workspace-theme-preview-dialog::backdrop {
  background: rgb(20 24 29 / .55);
}
body[data-surface="company-profile"] > .workspace-theme-preview-dialog .workspace-theme-preview-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-block-size: 48px;
  padding: 0 var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
}
body[data-surface="company-profile"] > .workspace-theme-preview-dialog .workspace-theme-preview-expanded-slot {
  block-size: calc(100% - 48px);
  min-inline-size: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
}
body[data-surface="company-profile"] > .workspace-theme-preview-dialog .workspace-theme-preview {
  display: block;
  max-block-size: none;
  overflow: visible;
  transform: none !important;
}
@media (max-width: 62rem) {
  .company-customization .company-customization-controls .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 40rem) {
  .company-customization .workspace-theme-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization .workspace-theme-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .company-customization .workspace-theme-preview-controls {
    gap: var(--sp-2);
  }
  .company-customization .workspace-theme-preview-controls > .button {
    inline-size: 100%;
  }
  .company-customization .workspace-theme-preview-scale {
    margin-inline-start: 0;
  }
}



/* Company themes live outside the form grid. Each preview card must own its
   height and content: no text can paint across neighboring cards or sections. */
.company-customization .company-customization-controls .workspace-theme-gallery {
  display: block;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface, #fff);
}
.company-customization .workspace-theme-gallery-intro {
  display: grid;
  gap: var(--sp-1);
  margin-block-end: var(--sp-3);
}
.company-customization .workspace-theme-gallery-intro > strong {
  display: block;
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.4;
}
.company-customization .workspace-theme-gallery-intro p {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.company-customization .workspace-theme-gallery-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: stretch;
  gap: var(--sp-3);
  inline-size: 100%;
  min-inline-size: 0;
}
.company-customization .workspace-theme-gallery-option {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--sp-2);
  inline-size: 100%;
  block-size: auto;
  min-block-size: 9.25rem;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface, #fff);
  color: var(--fg);
  font: inherit;
  text-align: start;
  white-space: normal;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.company-customization .workspace-theme-gallery-option > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}
.company-customization .workspace-theme-gallery-option:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}
.company-customization .workspace-theme-gallery-option:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.company-customization .workspace-theme-gallery-option.is-active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.company-customization .workspace-theme-gallery-swatches {
  display: flex;
  flex: 0 0 auto;
  block-size: 3rem;
  inline-size: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.company-customization .workspace-theme-gallery-swatch {
  display: block;
  flex: 1 1 0;
  min-inline-size: 0;
  block-size: 100%;
}
.company-customization .workspace-theme-gallery-swatch:nth-child(4) { flex: 0 0 17%; }
.company-customization .workspace-theme-gallery-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-1);
  inline-size: 100%;
  text-align: start;
}
.company-customization .workspace-theme-gallery-label strong {
  min-inline-size: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  white-space: normal;
}
.company-customization .workspace-theme-gallery-label small {
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-gallery-description {
  display: block;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
  overflow-wrap: break-word;
  white-space: normal;
}
@media (max-width: 36rem) {
  .company-customization .company-customization-controls .workspace-theme-gallery {
    padding: var(--sp-3);
  }
  .company-customization .workspace-theme-gallery-options {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization .workspace-theme-gallery-option {
    min-block-size: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .company-customization .workspace-theme-gallery-option { transition: none; }
}

/* Owner-managed Admin sign-in is an intentionally compact disclosed flow. */
.company-admin-flow { display:grid; gap:var(--sp-4); inline-size:100%; min-inline-size:0; }
.company-admin-flow > .section-card { margin:0; }
.company-admin-manage { display:grid; gap:var(--sp-3); min-inline-size:0; }
.company-admin-manage-heading h2 { margin:0 0 var(--sp-1); font-size:var(--fs-lg); color:var(--gray-900); }
.company-admin-manage-heading p { margin:0; color:var(--fg-muted); font-size:var(--fs-sm); }
.company-admin-action { min-inline-size:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg); }
.company-admin-action > summary { cursor:pointer; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:var(--fw-semi); color:var(--gray-900); }
.company-admin-action > summary:focus-visible { outline:2px solid var(--focus, var(--accent)); outline-offset:2px; }
.company-admin-action[open] > summary { border-block-end:1px solid var(--border); }
.company-admin-action > .section-card { margin:0; border:0; border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:none; }
.company-admin-action :is(input, select, button) { max-inline-size:100%; }


/* Side-by-side workspace appearance editor. Keep the preview's real dashboard
   next to its controls; only stack when the workspace itself gets too narrow. */
.company-customization .company-customization-controls,
.company-customization .company-customization-preview {
  min-inline-size: 0;
}
.company-customization .company-customization-controls {
  grid-column: 1;
}
.company-customization .company-customization-preview {
  grid-column: 2;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h, 58px) + var(--sp-3));
  margin: 0;
}
.company-customization .company-customization-controls .form-grid > .workspace-theme-style-section {
  grid-column: 1 / -1;
  min-inline-size: 0;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface, #fff);
}
.company-customization .workspace-theme-style-section > .workspace-theme-editor-section-title {
  display: block;
  margin: 0;
  padding: 0 0 var(--sp-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.45;
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-presets {
  display: grid;
  /* Never force two unreadable cards inside a narrow settings pane. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  grid-auto-rows: auto;
  gap: var(--sp-3);
  inline-size: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  align-items: stretch;
}
.company-customization .workspace-theme-preset-button {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-inline-size: 0;
  min-block-size: 9rem;
  block-size: auto;
  max-block-size: none;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4);
  overflow: visible;
  font-weight: var(--fw-normal, 400);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface, #fff);
  color: var(--fg);
  white-space: normal;
  text-align: start;
  cursor: pointer;
}
.company-customization .workspace-theme-preset-button > strong {
  display: block;
  min-inline-size: 0;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
  font-weight: var(--fw-semi);
}
.company-customization .workspace-theme-preset-button > span {
  display: block;
  min-inline-size: 0;
  margin: 0;
  color: var(--fg-muted);
  font-weight: var(--fw-normal, 400);
  font-size: var(--fs-xs);
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: break-word;
}
.company-customization .workspace-theme-style-section > .workspace-theme-editor-group {
  margin: 0;
  padding: var(--sp-3);
  background: var(--bg-subtle);
}
@media (max-width: 72rem) {
  .company-customization {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization .company-customization-controls,
  .company-customization .company-customization-preview {
    grid-column: 1;
  }
  .company-customization .company-customization-preview {
    position: static;
    top: auto;
  }
}
@media (max-width: 36rem) {
  .company-customization .company-customization-controls .form-grid > .workspace-theme-style-section {
    padding: var(--sp-3);
  }
  .company-customization .workspace-theme-presets {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-customization .workspace-theme-preset-button {
    min-block-size: 0;
    padding: var(--sp-3);
  }
}


/* The portal's normal account-canvas max-width was leaving a large unused
   screen edge. Only the appearance editor needs the full remaining workspace. */
body[data-surface="company-profile"]:has(.company-customization) > main.account-page {
  inline-size: 100%;
  max-inline-size: none;
  padding-inline: clamp(var(--sp-4), 2vw, var(--sp-6));
}
.company-customization .workspace-theme-editor-help {
  margin-block: var(--sp-2) var(--sp-3);
  line-height: 1.5;
}
.company-customization .workspace-theme-style-section > .workspace-theme-editor-group {
  margin: 0;
}
@media (max-width: 72rem) {
  body[data-surface="company-profile"]:has(.company-customization) > main.account-page {
    padding-inline: var(--sp-4);
  }
}