/* LÜLI semantic type roles. Loaded last on both /app/ and /admin/ so the
   extracted legacy CSS keeps its historical order while shared roles win. */
:root {
  --type-family-body: var(--font-sans);
  --type-family-display: var(--font-display);
  --type-family-label: var(--font-mono);
  --type-size-hero: clamp(36px, 3.3vw, 48px);
  --type-size-page: 40px;
  --type-size-pane-page: 30px;
  --type-size-feature: 24px;
  --type-size-section: 22px;
  --type-size-item: 14px;
  --type-size-lead: 14px;
  --type-size-body: 14px;
  --type-size-control: 13px;
  --type-size-support: 12px;
  --type-size-label: 11px;
  --type-leading-display: 1.2;
  --type-leading-body: 1.65;
  --type-leading-support: 1.55;
  /* Page-head geometry, measured from the bottom of the 58px global nav. */
  --page-head-inset-block: 52px;
  --page-head-inset-inline: 24px;
  --page-head-title-to-lead: 12px;
}

body[data-luli-surface] {
  font-family: var(--type-family-body);
  font-size: var(--type-size-body);
  line-height: var(--type-leading-body);
}
body[data-luli-surface] :is(button, input, select, textarea) {
  font-family: var(--type-family-body);
}

/* Brand display: the homepage hero and large editorial marketing statements
   intentionally outrank a page title, but use the same display family. */
#assistant .hero h1 {
  font-family: var(--type-family-display);
  font-size: var(--type-size-hero);
  line-height: 1.22;
}
#assistant .headline {
  font-family: var(--type-family-display);
  font-size: var(--type-size-section);
  line-height: var(--type-leading-display);
}
.mkt-process-grid h3 {
  font-family: var(--type-family-display);
  font-size: var(--type-size-feature);
  line-height: 1.25;
}

/* Equal-level destinations share a content origin, not only a type scale.
   Limit this to standalone pages: the same sections also mount in a narrow
   conversation pane with their own layout and padding. */
main.wrap > #resumes,
main.wrap > #history {
  padding-top: var(--page-head-inset-block);
  padding-inline: var(--page-head-inset-inline);
}
main.wrap > #history > .opportunity-page {
  width: 100%;
  max-width: 1010px;
}
main.wrap > #resumes .rl-head h1,
main.wrap > #history .opportunity-head h1 {
  margin-bottom: var(--page-head-title-to-lead);
}

/* Top-level destinations: match the 40px / 32px My Resumes title. More
   specific embedded-pane rules may deliberately use the smaller panel tier. */
#resumes .rl-head h1,
#history .opportunity-head h1,
#history .opportunity-detail-head h1,
.account-page-head h1,
.career-documents-title h1,
.page-title h1 {
  font-family: var(--type-family-display);
  font-size: var(--type-size-page);
  font-weight: 600;
  line-height: var(--type-leading-display);
  letter-spacing: -.04em;
}
#resumes .rl-head p,
#history .opportunity-head p,
#history .opportunity-detail-head > div > p:not(.op-company),
.career-documents-title p,
.account-page-head p {
  font-size: var(--type-size-lead);
  line-height: var(--type-leading-body);
}

/* In the conversation workspace the job page is a side pane, not a second
   full-width destination. Match the existing compact resume pane tier. */
.workspace-job-surface #history .opportunity-head h1,
.workspace-job-surface #history .opportunity-detail-head h1 {
  font-size: var(--type-size-pane-page);
}

/* Headings inside a page: section, feature card, and dialog remain distinct
   from the page title; equivalent panels share a type role. */
.career-section h3,
.content-section h2,
.opportunity-panel h3,
.rl-inspector h2,
.workspace-preview-head h2,
.material-list-head h2,
.job-1p0 h2 {
  font-family: var(--type-family-display);
  font-size: var(--type-size-section);
  font-weight: 600;
  line-height: 1.3;
}
.rl-empty h2,
.opportunity-collection .opportunity-card h2,
.opportunity-panel h2,
.rl-small-dialog h2,
.attachment-dialog-head h2,
.workspace-document-title h2,
.workspace-dialog h2 {
  font-family: var(--type-family-display);
  font-size: var(--type-size-feature);
  font-weight: 600;
  line-height: 1.3;
}

/* Same-duty controls and item text in the library, opportunity and profile
   surfaces. Compact document toolbar actions keep the support tier. */
header nav button,
.rl-filter,
.opportunity-filters .filter,
.opportunity-tabs .tab,
.career-profile-nav button,
.career-profile-toolbar .career-tab,
.rl-button,
.op-button,
.workspace-button,
.workspace-primary,
.attachment-button {
  font-family: var(--type-family-body);
  font-size: var(--type-size-control);
  line-height: 1.4;
}
.rl-actions .rl-button,
.rl-editor-head-actions .rl-button,
.rl-dialog--workspace .rl-editor-head-actions .rl-button,
.workspace-document-card button,
.workspace-task-nav .workspace-task,
.job-1p0 button,
.material-card button {
  font-size: var(--type-size-support);
  line-height: 1.45;
}
.rl-title-copy strong,
.op-thread-row b,
.workspace-document-card h3,
.material-card h3,
.recent-item h3,
.attachment-info strong {
  font-family: var(--type-family-body);
  font-size: var(--type-size-item);
  font-weight: 600;
  line-height: 1.5;
}
.rl-title-copy small,
.op-thread-row small,
.workspace-document-card p,
.material-card p,
.attachment-info small,
.attachment-hint {
  font-size: var(--type-size-support);
  line-height: var(--type-leading-support);
}
.rl-table-head,
.opportunity-list-head,
.opportunity-summary,
.rl-summary,
.op-meta,
.workspace-task small,
.attachment-status {
  font-size: var(--type-size-support);
  line-height: var(--type-leading-support);
}
.page-kicker,
.rl-head .page-kicker,
.mkt-kicker,
.workspace-sidebar-kicker,
.workspace-document-kicker,
.rl-inspector-kicker,
.op-panel-label {
  font-family: var(--type-family-label);
  font-size: var(--type-size-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
}

/* Small, readable information: a 10px thumbnail is fine; a real interface
   caption is not. These are UI labels, not text inside the edited document. */
.rl-job small,
.rl-updated,
.rl-bottom-note,
.rl-card-footer > span,
.rl-inspector p,
.rl-save-state,
.rl-editor-foot,
.rl-editor-foot .rl-button,
.opportunity-card-foot,
.op-fit-row small,
.op-resume-row small,
.op-thread-note,
.op-list-identity small,
.op-list-status small,
.career-entry small,
.material-card .material-meta,
.job-strategy-grid :is(li, p),
.workspace-task-item,
.workspace-task-item b,
.workspace-sidebar-footer,
.workspace-preview-section :is(span, small),
.auth-footnote,
.account-trigger-copy small,
.account-menu-group small,
.settings-form small,
.session-item span,
.activity-item :is(span, time),
.notification-item :is(span, time),
.attachment-image-caption,
.luli-chat-identity small {
  font-size: var(--type-size-support);
  line-height: var(--type-leading-support);
}
.auth-brand-copy > span,
.auth-heading > span,
.account-kicker,
.settings-title > span,
.plan-card > div > span,
.brand-lockup span,
.mkt-tags b,
.rl-card-type,
.workspace-preview-state,
.requirement-chip small,
.resume-source-option small {
  font-family: var(--type-family-label);
  font-size: var(--type-size-label);
  line-height: 1.4;
}

/* The admin console is denser than the editorial pages, not a second brand. */
body[data-luli-surface="admin"] .page-head h1 {
  font-family: var(--type-family-display);
  font-size: var(--type-size-page);
  font-weight: 600;
  line-height: var(--type-leading-display);
}
body[data-luli-surface="admin"] .page-head p {
  font-size: var(--type-size-lead);
  line-height: var(--type-leading-body);
}
body[data-luli-surface="admin"] :is(.card-title h2, .card-title h3, .card-heading h2) {
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  :root {
    --type-size-hero: clamp(30px, 8vw, 39px);
    --type-size-page: 32px;
    --type-size-pane-page: 26px;
    --type-size-section: 20px;
    --type-size-feature: 22px;
    /* Parent .wrap already supplies 16px of the 20px mobile gutter. */
    --page-head-inset-block: 32px;
    --page-head-inset-inline: 4px;
  }
  header nav button { font-size: var(--type-size-support); }
  /* Search gets its own row so the 16px field does not clip its prompt. */
  #resumes .rl-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
  }
  #resumes .rl-search { grid-column: 1 / -1; min-width: 0; width: 100%; }
  #resumes .rl-search input { width: 100%; min-width: 0; }
  #resumes .rl-sort { grid-column: 1; }
  #resumes .rl-view-switch { grid-column: 2; }
  /* Do not scale thumbnails or user-authored A4 / Quill document typography. */
  body[data-luli-surface="app"] :is(.rl-search input, .auth-form input, .opportunity-search input) {
    font-size: 16px;
  }
}