/* Shared product typography and controls. Text sizes are intentional tokens, not scaled page zoom. */
:root {
  --app-text: #1f334f;
  --app-muted: #53657e;
  --app-border: #d8e2ef;
  --app-accent: #3159be;
}
.app {
  font-size: 16px;
  line-height: 1.6;
  color: var(--app-text);
  background: #f5f7fb;
}
.app h1 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.app h2 {
  font-size: 23px;
  line-height: 1.35;
}
.app h3 {
  font-size: 19px;
  line-height: 1.4;
}
.app p,
.app td,
.app input,
.app textarea,
.app select {
  font-size: 16px;
}
.app label,
.app th,
.app .button,
.app .nav-item {
  font-size: 15px;
}
.app small,
.app .muted,
.app .field > span,
.app .badge,
.app .detail-facts,
.app .talent-meta,
.app .availability,
.app .card-price small,
.app .chat-list-item span,
.app .chat-list-item small,
.app .chat-message small,
.app .resource-code,
.app .list-row small,
.app .form-section-label,
.app .download-row,
.app .review-details span,
.app .nav-count,
.app .wizard-meta {
  font-size: 14px !important;
  line-height: 1.5;
}
.app .nav-group .nav-caption,
.app .eyebrow,
.app .sidebar-footer,
.app .demo-label {
  font-size: 12px;
  line-height: 1.5;
}
.app .nav-item {
  min-height: 46px;
}
.app .field > span,
.app label > span {
  color: #3c506e;
  font-weight: 600;
}
.app .muted,
.app small {
  color: var(--app-muted);
}
.app td {
  padding: 16px;
}
.app th {
  padding: 14px 16px;
  text-transform: none;
  color: #53657e;
  background: #f5f8fd;
}
.app input,
.app select,
.app textarea {
  border-color: var(--app-border);
  border-radius: 8px;
  min-height: 46px;
  line-height: 1.5;
  padding: 11px 13px;
  color: #243b5c;
  background: white;
}
.app textarea {
  resize: vertical;
}
.app input:focus,
.app select:focus,
.app textarea:focus {
  outline: 3px solid #dce7ff;
  border-color: #3159be;
}
.app input[type='checkbox'] {
  min-height: 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  accent-color: #3159be;
}
.app .button {
  min-height: 44px;
  padding: 11px 17px;
  border-radius: 8px;
  font-weight: 650;
}
.app .button.danger,
.button.danger {
  color: #9f2435;
  background: #fff1f2;
  border: 1px solid #f3c8cf;
}
.app .panel {
  border-color: #dce4f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px #18386203;
}
.app .page-heading {
  margin-bottom: 24px;
}
.app .page-heading p {
  margin-top: 8px;
  max-width: 820px;
  font-size: 16px;
  color: #53657e;
}
.app .row-actions {
  flex-wrap: wrap;
  gap: 10px;
}
.app .sidebar {
  width: 252px;
}
.app .workspace {
  margin-left: 252px;
}
.app .sidebar .brand {
  font-size: 26px;
}
.app .sidebar .workspace-switch strong {
  font-size: 14px;
}
.app .sidebar .workspace-switch small {
  font-size: 13px !important;
}
.app .template-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.app .tabs {
  flex-wrap: wrap;
  gap: 8px 16px;
  border: 0;
}
.app .tabs button {
  border: 1px solid #dce4f2;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 14px;
  background: white;
  color: #4d6282;
}
.app .tabs button.active {
  background: #eaf0ff;
  color: #254fae;
  border-color: #9bb4e6;
}
.app .form-grid {
  gap: 18px;
}
.app .field {
  margin-bottom: 18px;
}
.modal {
  font-size: 16px;
  line-height: 1.6;
  max-width: min(940px, 100%);
  padding: 28px;
}
.modal h2 {
  font-size: 26px;
}
.modal > header p {
  font-size: 15px;
  color: #53657e;
}
.modal .field > span {
  font-size: 15px;
  font-weight: 600;
}
.modal input,
.modal select,
.modal textarea {
  font-size: 16px;
  min-height: 46px;
}
.modal .field small,
.modal .muted {
  font-size: 14px;
}
.modal .checkbox {
  font-size: 15px;
  line-height: 1.6;
}
.modal .checkbox input {
  min-height: 20px;
}
.modal .button {
  min-height: 44px;
  font-size: 15px;
}
.modal .form-section-label {
  font-size: 13px;
}
.app .list-toolbar {
  background: #fff;
  padding: 16px;
  border: 1px solid #dce4f0;
  border-radius: 12px;
  margin-bottom: 0;
}
.app .list-toolbar input,
.app .list-toolbar select {
  font-size: 15px;
}
.app .list-pagination {
  margin-block: 12px 22px;
}
.app .stat-card > strong {
  font-size: 34px;
}
.app .resume-preview {
  font:
    15px/1.8 'DM Sans',
    Arial,
    sans-serif;
  background: #f7f9fc;
  border: 1px solid #e1e7f1;
  color: #304968;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.form-step-progress {
  display: flex;
  gap: 8px;
  margin: 8px 0 24px;
  flex-wrap: wrap;
}
.form-step-progress button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d7e1f1;
  border-radius: 8px;
  padding: 9px 12px;
  background: white;
  color: #566b8b;
  font-size: 14px;
  min-height: 44px;
}
.form-step-progress button span {
  display: grid;
  place-items: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background: #edf2fb;
  font-size: 13px;
  font-weight: 700;
}
.form-step-progress button[aria-current='step'] {
  background: #eaf0ff;
  border-color: #92afe5;
  color: #244da7;
}
.form-step-progress button[aria-current='step'] span {
  background: #3159be;
  color: white;
}
.form-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.form-step legend {
  font-size: 23px;
  color: #203d69;
  font-weight: 700;
  margin-bottom: 8px;
}
.form-step .step-hint {
  font-size: 14px;
  color: #607695;
  margin: 0 0 22px;
}
.step-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #e0e7f2;
  margin-top: 20px;
}
.step-actions [role='status'] {
  color: #64748b;
  font-size: 14px;
}
.form-review dl {
  margin: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-review dl > div {
  border: 1px solid #dce4f1;
  border-radius: 8px;
  padding: 14px;
  overflow-wrap: anywhere;
}
.form-review dt {
  font-size: 13px;
  font-weight: 650;
  color: #627695;
  margin-bottom: 6px;
}
.form-review dd {
  margin: 0;
  font-size: 16px;
  white-space: pre-wrap;
}
.form-error-summary {
  padding: 16px;
  border: 1px solid #ecc1c8;
  border-left: 4px solid #b13d51;
  background: #fff5f6;
  border-radius: 8px;
  color: #7d2233;
  margin: 0 0 20px;
  font-size: 15px;
}
.form-error-summary ul {
  margin-bottom: 0;
}
.field-error {
  display: block;
  color: #a52a40;
  font-size: 14px;
  margin: 6px 0 0;
}
[aria-invalid='true'] {
  border-color: #b23c50 !important;
  outline-color: #ffe0e5 !important;
}
.optional-source {
  border: 1px solid #dce4f2;
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 20px;
}
.optional-source summary {
  cursor: pointer;
  font-size: 15px;
  color: #3159be;
  font-weight: 600;
}
.skill-suggestions {
  background: white;
  border: 1px solid #b8cbed;
  border-radius: 9px;
  box-shadow: 0 8px 20px #17376312;
  margin-top: 6px;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.skill-suggestions button {
  text-align: left;
  padding: 10px;
  border: 0;
  background: white;
  border-radius: 6px;
  min-height: 50px;
  cursor: pointer;
}
.skill-suggestions button:hover,
.skill-suggestions button[aria-selected='true'] {
  background: #edf3ff;
}
.skill-suggestions strong {
  font-size: 15px;
  display: block;
  color: #24486f;
}
.skill-suggestions button span {
  font-size: 12px;
  display: block;
  color: #5f7393;
}
.skill-suggestions p {
  font-size: 14px !important;
  padding: 10px;
  grid-column: 1/-1;
}
.email-preview {
  width: 100%;
  height: 75vh;
  border: 1px solid #dce4f0;
  border-radius: 10px;
}
.modal-actions {
  gap: 12px;
}
.app .nav-group .nav-item {
  padding-block: 11px;
}
@media (max-width: 1000px) {
  .app .workspace {
    margin-left: 0;
  }
  .app .sidebar {
    width: min(300px, calc(100vw - 32px));
  }
  .app main {
    padding: 24px 20px;
  }
}
@media (max-width: 600px) {
  .app h1 {
    font-size: 27px;
  }
  .app h2,
  .modal h2 {
    font-size: 22px;
  }
  .app .field > span,
  .modal .field > span {
    font-size: 15px;
  }
  .form-review dl {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: 22px 16px;
  }
  .form-step-progress {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .form-step-progress button {
    font-size: 13px;
    padding: 8px;
  }
  .skill-suggestions {
    grid-template-columns: 1fr;
  }
  .app .list-toolbar {
    padding: 12px;
  }
  .app main {
    padding: 20px 16px;
  }
  .app td {
    font-size: 15px;
  }
  .app .page-heading {
    align-items: flex-start;
  }
  .step-actions {
    flex-wrap: wrap;
  }
  .step-actions .button {
    flex: 1;
  }
}
.modal p {
  font-size: 16px;
  line-height: 1.65;
}
.modal > header p {
  font-size: 15px;
}
.modal .wizard-meta,
.modal .wizard-meta span,
.modal .resource-progress button,
.modal .wizard-pricing-note,
.modal .wizard-job p,
.app .stat-card > div > span,
.app .workspace-activity small,
.app .chat-date {
  font-size: 14px !important;
}
.resource-progress {
  overflow-x: auto;
}
.resource-progress ol {
  min-width: 600px;
}
.app .skill-tags > span,
.modal .skill-tags > span,
.app .supplier > span,
.app .card-price > small,
.app .talent-card-footer .badge,
.app .chat-list-item strong {
  font-size: 14px !important;
  line-height: 1.5;
}
.app .card-price > strong {
  font-size: 20px;
}
.app .skill-tags {
  gap: 7px;
}
.app .skill-tags > span {
  padding: 5px 8px;
}
.app td strong,.app .list-row strong,.app .review-details strong,.modal .review-details strong{font-size:16px!important;line-height:1.5}.app .stat-card>span,.app .file-row>span,.modal .file-row>span,.app .trust-strip,.app .trust-strip span,.app .chat-context,.app .chat-context span{font-size:14px!important}.app .user-menu strong{font-size:14px}.app .user-menu .avatar{font-size:14px}