/* Approved mineral canvas and navy navigation. Loaded after legacy modules. */
:root {
  color-scheme: light;
  --ql-navy: #102d4d;
  --ql-ink: #183148;
  --ql-muted: #526778;
  --ql-raised: #dce6ee;
  --ink-900: #183148;
  --ink-700: #344e64;
  --ink-500: #526778;
  --canvas: #e7edf2;
  --surface: #f4f6f7;
  --surface-soft: #dce6ee;
  --line: #c4d1dc;
  --cobalt-50: #d9e7f7;
  --focus-fill: #dce6ee;
  --ink-deep: #102d4d;
  --radius-control: 4px;
  --org-canvas: #e7edf2;
  --org-line: #c4d1dc;
  --org-surface-hover: #dce6ee;
  --org-radius: 4px;
  --org-radius-large: 5px;
  --content-max: 1590px;
  --topbar-height: 70px;
  --proficiency-level-4-bg: #102d4d;
  --proficiency-level-4-text: #f4f6f7;
}
body { -webkit-font-smoothing: antialiased; }
.app-site { color: var(--ql-ink); }
.app-site :is(h1,h2,h3,h4) { letter-spacing: -.025em; font-weight: 600; }
.app-site .app-heading h1, .app-site .app-main > h1 { font-size: 30px; line-height: 1.22; }
.app-site .app-heading p { font-size: 14px; line-height: 1.65; max-width: 78ch; }
.app-site .app-heading { margin-bottom: 28px; }
.app-site .section-head h2 { font-size: 20px; }
.app-site .app-main { padding: 30px 32px 40px; margin-inline: auto; }
.app-site .app-topbar { padding-inline: 32px; background: var(--ql-raised); }
.app-site .sidebar { background: var(--ql-navy); padding: 26px 18px 20px; }
.app-site .sidebar-brand { margin-bottom: 12px; font-size: 16px; }
.app-site .sidebar-brand .brand-light { color: #d3e1ef; }
.app-site .workspace-label { color: #b9cce0; opacity: 1; padding: 12px 11px 24px; }
.app-site .sidebar nav { gap: 5px; }
.app-site .sidebar nav > a, .app-site .sidebar-site-link {
  min-height: 44px; border-radius: 4px; color: #d1deec;
  font-size: 14px; font-weight: 400; opacity: 1; line-height: 1.4;
}
.app-site .sidebar nav > a:hover, .app-site .sidebar-site-link:hover { background: #204263; color: #fff; }
.app-site .sidebar nav > a[aria-current] { background: #2b537f; color: #fff; font-weight: 500; }
.app-site .sidebar nav > a[aria-current]::before { inset: 13px 9px 13px auto; width: 3px; background: #a6cbff; }
.app-site .sidebar nav > a[aria-current] { padding-right: 20px; }
.app-site .nav-group-label { font: 500 12px/1.4 var(--font-ui); letter-spacing: 0; text-transform: lowercase; color: #b9cce0; opacity: 1; padding-top: 24px; }
.app-site .nav-group-label::first-letter { text-transform: uppercase; }
.app-site .sidebar-account { border-color: #3d5974; }
.app-site .sidebar .account-initial { background: #365c80; color: #eef5fc; }
.app-site .sidebar .account-copy small { color: #b9cce0; opacity: 1; }
.app-site .sidebar a:focus-visible, .app-site .sidebar button:focus-visible { outline-color: #a7c9ff; }
.app-site .sidebar-signout:hover { background: #204263; }
.app-site .workspace-footer { font-size: 12px; padding: 16px 32px; }
.app-site th { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ql-muted); white-space: normal; line-height: 1.4; }
.app-site thead { background: var(--ql-raised); }
.app-site td { padding-block: 12px; font-size: 14px; }
.app-site tbody tr:hover { background: #dce6ee80; }
.app-site .table-wrap { border-top: 0; }
.app-site .table-title { min-width: 144px; }
.app-site .facts-row { gap: 20px; }
.app-site .facts-row > div { border-left: 1px solid var(--line); padding-left: 20px; }
.app-site .facts-row > div:first-child { border-left: 0; padding-left: 0; }
.app-site .attention-count, .app-site .facts-row dd { font-size: 32px; }
.app-site .workspace-form { max-width: 1140px; }
.app-site .form-section { padding-block: 24px; }
.app-site .form-section-heading h2 { font-size: 18px; }
.app-site .form-section-heading p { line-height: 1.6; }
.app-site :is(.panel,.workspace-section,.framework-section) { box-shadow: none; }
.app-site .toolbar { gap: 16px; }
.app-site .badge { border-radius: 4px; }
.app-site .account-summary { background: transparent; border: 0; border-left: 1px solid var(--line); padding: 0 0 0 28px; }
.app-site .learning-columns { gap: 36px; }
.app-site .learning-columns .activity-list { margin-bottom: 32px; }
.app-site .account-details { overflow-wrap: anywhere; }
.app-site input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
.app-site select,
.app-site textarea {
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
  padding: 10px 12px; min-height: 44px; color: var(--ql-ink);
}
:is(.app-site,.public-site,.auth-site) .password-row input { padding-right: 64px !important; }
:is(.app-site,.public-site,.auth-site) input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):focus,
:is(.app-site,.public-site,.auth-site) select:focus,
:is(.app-site,.public-site,.auth-site) textarea:focus {
  border-color: transparent; outline: none; box-shadow: none; background: var(--ql-raised);
}
:is(.app-site,.public-site,.auth-site) .invalid :is(input,select,textarea) { border-color: var(--danger); }
/* Keep borderless active fields, with a separate visible keyboard focus cue. */
:is(.app-site,.public-site,.auth-site) .field:has(:is(input,select,textarea):focus-visible) > label,
:is(.app-site,.public-site,.auth-site) label:has(> :is(input,select,textarea):focus-visible) {
  text-decoration: underline; text-underline-offset: 4px;
}
.app-site .field > label { font-size: 12px; }
.app-site .btn, .auth-site .btn, .public-site .btn { box-shadow: none; }
.app-site .btn:not(.secondary):not(.tertiary), .public-site .btn:not(.secondary):not(.tertiary), .auth-site .btn:not(.secondary):not(.tertiary) { color: #fff; }
.app-site .text-link { font-size: 13px; }
@media (min-width: 1600px) { .app-site .app-main, .app-site .app-topbar, .app-site .workspace-footer { padding-inline: 44px; } }
@media (max-width: 1150px) { .app-site .app-main { padding: 27px 24px 35px; } .app-site .app-topbar, .app-site .workspace-footer { padding-inline: 24px; } }
@media (min-width: 601px) and (max-width: 896px) { .app-site .sidebar { padding-inline: 8px; } .app-site .sidebar nav > a[aria-current]::before { display: none; } }
@media (max-width: 600px) {
  .app-site .app-main { padding: 24px 18px 30px; }
  .app-site .app-topbar, .app-site .workspace-footer { padding-inline: 18px; }
  .app-site .app-heading h1, .app-site .app-main > h1 { font-size: 27px; }
  .app-site .sidebar { padding-inline: 18px; }
  .app-site .account-summary { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .app-site .facts-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-site .facts-row > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .app-site .workspace-footer { flex-wrap: wrap; gap: 4px 12px; }
}
.app-site .nav-group-label.product-name { text-transform: none; }
.app-site .sidebar { overscroll-behavior-y: contain; }
.app-site .sidebar > * { flex-shrink: 0; }
/* Tablet users get the same labelled navigation drawer as phone users. */
@media (max-width: 896px) {
  .app-site .sidebar { width: var(--sidebar-width) !important; max-width: 100vw; padding-inline: 18px; transform: translateX(-100%); visibility: hidden; }
  .app-site .sidebar.mobile-open { transform: translateX(0); visibility: visible; }
  .app-site .sidebar .sidebar-copy { display: initial; }
  .app-site .sidebar .account-copy { display: grid; }
  .app-site .sidebar nav > a, .app-site .sidebar-site-link { justify-content: flex-start; padding-inline: 12px !important; }
  .app-site .sidebar-brand { justify-content: flex-start; }
  .app-site .sidebar-account { flex-wrap: nowrap; justify-content: flex-start; }
  .app-site .workspace-body, .app-site .workspace-flashes,
  .app-site.sidebar-is-collapsed .workspace-body, .app-site.sidebar-is-collapsed .workspace-flashes { margin-left: 0; }
  .app-site .workspace-toggle { display: inline-flex !important; }
  .app-site .sidebar-collapse { display: none !important; }
  .app-site .workspace-backdrop { position: fixed; inset: 0; z-index: var(--header-layer); border: 0; background: var(--ink-900); opacity: var(--scrim-opacity); }
}
/* Give mobile copy the full content width before asking it to wrap. */
.app-site .btn { flex-shrink: 0; }
.app-site :is(.workspace-section,.form-section-heading,.form-section-fields,.app-heading > div) { min-width: 0; }
@media (max-width: 896px) {
  .app-site .app-heading { flex-direction: column; align-items: stretch; gap: 16px; }
  .app-site .app-heading > div { width: 100%; }
  .app-site .app-heading > :is(.btn,.text-link,.page-meta) { align-self: flex-start; }
  .app-site .learning-columns { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .app-site .account-summary { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .app-site :is(.form-section,.publication-section) { grid-template-columns: minmax(0,1fr); gap: 16px; }
}
@media (max-width: 600px) {
  .app-site :is(.app-heading,.form-section-heading,.section-head) :is(h1,h2,h3) {
    overflow-wrap: normal; word-break: normal; hyphens: none;
  }
  .app-site .app-heading p { overflow-wrap: break-word; }
  .app-site .attention-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .app-site .attention-copy { flex: auto; width: 100%; }
  .app-site .attention-row .row-action { margin-left: 0; align-self: flex-start; }
  .app-site .btn { max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; }
  .app-site .form-footer > .btn { flex-basis: 100%; }
  .app-site .page-meta, .app-site .section-meta { white-space: normal; }
  .app-site .section-head { align-items: flex-start; flex-wrap: wrap; }
  .app-site .section-head > h2 { flex: 1 1 100%; }
  .app-site .section-head > .text-link { flex: 0 0 auto; }
}
@media print {
  body.app-site { background: #fff; color: #183148; }
  .app-site .account-summary { border: 0; padding: 0; }
  .app-site .app-main { max-width: none; margin: 0; padding: 0; }
  .app-site thead { background: #eef2f5; }
}