/* Fernando Kylas Brand System. base.css
   Rules only: the reasoning is in the repository, at lab/publication-engine/platform/design-system/css/base.css.
   Nothing else is altered. No value, selector or declaration differs
   from source. See publications/brand-system/build/assemble.py. */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--fk-space-8);

  font-feature-settings: "kern" 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--fk-surface);
  color: var(--fk-text-primary);
  font-family: var(--fk-font-text);
  font-weight: var(--fk-body-weight);
  font-size: var(--fk-body-size);
  line-height: var(--fk-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }

button, input, select, textarea, optgroup {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 { color: var(--fk-text-primary); text-wrap: balance; }

h1 {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-report-title-weight);
  font-size: var(--fk-report-title-size);
  line-height: var(--fk-report-title-lh);
  letter-spacing: var(--fk-report-title-track);
}
h2 {
  font-family: var(--fk-font-display);
  font-weight: var(--fk-section-title-weight);
  font-size: var(--fk-section-title-size);
  line-height: var(--fk-section-title-lh);
  letter-spacing: var(--fk-section-title-track);
}
h3 {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-subsection-weight);
  font-size: var(--fk-subsection-size);
  line-height: var(--fk-subsection-lh);
  letter-spacing: var(--fk-subsection-track);
}
h4 {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-card-title-weight);
  font-size: var(--fk-card-title-size);
  line-height: var(--fk-card-title-lh);
  letter-spacing: var(--fk-card-title-track);
}
h5 {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-body-weight);
  font-size: var(--fk-body-size);
  line-height: var(--fk-body-lh);
}
h6 {
  font-family: var(--fk-font-text);
  font-weight: var(--fk-label-weight);
  font-size: var(--fk-label-size);
  line-height: var(--fk-label-lh);
  letter-spacing: var(--fk-label-track);
  text-transform: uppercase;
  color: var(--fk-text-tertiary);
}

p { max-width: var(--fk-measure-context, var(--fk-measure)); }
p + p { margin-top: var(--fk-flow); }

strong, b { font-weight: var(--fk-weight-medium); }
em, i { font-style: italic; }
small { font-size: var(--fk-caption-size); }
sup, sub { line-height: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--fk-border-strong);
  transition: text-decoration-color var(--fk-dur) var(--fk-ease);
}
a:hover { text-decoration-color: var(--fk-accent); }

ul, ol { max-width: var(--fk-measure-context, var(--fk-measure)); padding-left: var(--fk-space-5); }
li + li { margin-top: var(--fk-flow-tight); }
li::marker { color: var(--fk-text-tertiary); }

dd { max-width: var(--fk-measure-context, var(--fk-measure)); }

figcaption { max-width: var(--fk-measure-context, var(--fk-measure)); }

blockquote { max-width: var(--fk-measure-context, var(--fk-measure-wide)); }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
}
caption { text-align: left; }
th { text-align: left; font-weight: var(--fk-weight-medium); }
th, td {
  padding: var(--fk-space-3) var(--fk-space-4);
  border-bottom: var(--fk-hairline);
  vertical-align: top;
}
thead th {
  font-family: var(--fk-font-text);
  font-size: var(--fk-label-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fk-text-tertiary);
  border-bottom: var(--fk-rule);
}

td.fk-num, th.fk-num, .fk-num { font-variant-numeric: tabular-nums; }
td.fk-num, th.fk-num { text-align: right; }

hr {
  border: 0;
  border-top: var(--fk-hairline);
  margin-block: var(--fk-space-8);
}

pre {
  font-family: var(--fk-font-text);
  font-variant-numeric: tabular-nums;
}

code, kbd, samp {
  font-family: var(--fk-font-text);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  background: var(--fk-surface-raised);
  border: var(--fk-hairline);
  border-radius: var(--fk-radius-sm);
  padding: 0.1em 0.35em;
}

:is(
  .fk-caption,
  .fk-metadata,
  .fk-footnote,
  .fk-figure__caption, figcaption,
  .fk-label,
  .fk-text-tertiary,
  th
) :is(code, kbd, samp) {
  color: var(--fk-text-tertiary-raised);
}

:focus-visible {
  outline: 2px solid var(--fk-focus-ring);
  outline-offset: 2px;
  border-radius: var(--fk-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--fk-accent); color: var(--fk-c-ink-1); }

:where(body *) {
  scrollbar-width: thin;
  scrollbar-color: var(--fk-scrollbar-thumb) transparent;
}

body *::-webkit-scrollbar {
  block-size: var(--fk-scrollbar-size);
  inline-size: var(--fk-scrollbar-size);
}

body *::-webkit-scrollbar-track {
  background: transparent;
  border-block-start: 1px solid var(--fk-scrollbar-track);
}

body *::-webkit-scrollbar-thumb {
  background: var(--fk-scrollbar-thumb);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 0;
}
body *::-webkit-scrollbar-thumb:hover  { background: var(--fk-scrollbar-thumb-hover);
                                         background-clip: padding-box; }
body *::-webkit-scrollbar-thumb:active { background: var(--fk-scrollbar-thumb-hover);
                                         background-clip: padding-box; }
body *::-webkit-scrollbar-corner { background: transparent; }

@media (forced-colors: active) {
  :where(body *) { scrollbar-width: auto; scrollbar-color: auto; }
  body *::-webkit-scrollbar-track { border-block-start: 0; }
  body *::-webkit-scrollbar-thumb { background: revert; border: 0; }
}

.fk-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-block-end: var(--fk-space-2);
}

.fk-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.fk-skip-link {
  position: absolute;
  left: var(--fk-space-4); top: -4rem;
  z-index: 100;
  background: var(--fk-text-primary);
  color: var(--fk-surface);
  padding: var(--fk-space-3) var(--fk-space-4);
  border-radius: var(--fk-radius-md);
  text-decoration: none;
  transition: top var(--fk-dur) var(--fk-ease);
}
.fk-skip-link:focus { top: var(--fk-space-4); }

.fk-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

.fk-table-wrap > table { margin-block: 0; }

.fk-table {  }

.fk-table--compact :is(th, td) {
  padding: var(--fk-space-2) var(--fk-space-3);
  font-size: var(--fk-footnote-size);
}

.fk-metrics {
  display: grid;

  grid-template-columns: minmax(0, 1fr);
  gap: var(--fk-space-6);
  margin: 0;
  --fk-measure-context: none;
}
@media (min-width: 40rem) { .fk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fk-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fk-metric {
  border-block-start: var(--fk-hairline);
  padding-block-start: var(--fk-space-4);
}

.fk-metric__label {
  margin: 0;
  margin-block-start: var(--fk-space-3);
  display: block;
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  font-weight: var(--fk-weight-medium);
}

.fk-metric__note {
  display: block;
  margin-block-start: var(--fk-space-2);
  font-size: var(--fk-caption-size);
  line-height: var(--fk-caption-lh);
  letter-spacing: var(--fk-caption-track);
  font-weight: var(--fk-caption-weight);
  color: var(--fk-text-secondary);
}

.fk-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--fk-space-2);

  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--fk-font-text);
  font-weight: var(--fk-weight-medium);
  font-size: var(--fk-body-s-size);
  line-height: var(--fk-body-s-lh);
  letter-spacing: var(--fk-body-s-track);
  padding: var(--fk-space-3) var(--fk-space-5);
  border: 1px solid var(--fk-border-strong);
  border-radius: var(--fk-radius-md);
  background: none;
  color: var(--fk-text-primary);
  cursor: pointer;
  text-decoration: none;

  transition: background var(--fk-dur) var(--fk-ease),
              border-color var(--fk-dur) var(--fk-ease),
              color var(--fk-dur) var(--fk-ease);
}

.fk-btn,
.fk-btn:link,
.fk-btn:visited,
.fk-btn:hover,
.fk-btn:focus,
.fk-btn:focus-visible,
.fk-btn:active { text-decoration: none; }

.fk-btn:hover {
  background: var(--fk-text-secondary);
  border-color: var(--fk-text-secondary);
  color: var(--fk-surface);
}

.fk-btn--primary {
  background: var(--fk-text-primary);
  color: var(--fk-surface);
  border-color: var(--fk-text-primary);
}

.fk-btn--primary:hover {
  background: var(--fk-text-secondary);
  border-color: var(--fk-text-secondary);
}

.fk-btn--ghost { border-color: transparent; }
.fk-btn--sm {
  padding: var(--fk-space-2) var(--fk-space-3);
  font-size: var(--fk-footnote-size);
}

.fk-themetoggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: calc(var(--fk-space-4) + var(--fk-space-5));
  block-size: calc(var(--fk-space-4) + var(--fk-space-5));
  padding: 0;
  background: transparent;

  border: 0;
  border-radius: var(--fk-radius-pill);
  color: var(--fk-text-primary);
  cursor: pointer;
  transition: background var(--fk-dur) var(--fk-ease), color var(--fk-dur) var(--fk-ease);
}

.fk-themetoggle:hover { background: var(--fk-border); }

.fk-themetoggle:active {
  background: var(--fk-text-secondary);
  color: var(--fk-surface);
}

.fk-themetoggle::after {
  content: attr(data-tip-to-dark);
  position: absolute;
  inset-block-start: calc(100% + var(--fk-space-2));
  inset-inline-end: 0;
  z-index: 30;
  padding: var(--fk-space-2) var(--fk-space-3);
  font-family: var(--fk-font-text);
  font-size: var(--fk-footnote-size);
  font-weight: var(--fk-weight-regular);
  line-height: 1.3;
  letter-spacing: 0.006em;
  white-space: nowrap;
  background: var(--fk-text-primary);
  color: var(--fk-surface);
  border-radius: var(--fk-radius-sm);
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--fk-dur) var(--fk-ease),
              transform var(--fk-dur) var(--fk-ease);
}
[data-theme="dark"] .fk-themetoggle::after { content: attr(data-tip-to-light); }

.fk-themetoggle:hover::after,
.fk-themetoggle:focus-visible::after {
  opacity: 1;
  transform: none;
}
.fk-themetoggle__mark {
  inline-size: 1rem;
  block-size: 1rem;
  border: 1px solid currentColor;
  border-radius: var(--fk-radius-pill);

  background: linear-gradient(to right, currentColor 0 50%, transparent 50% 100%);
  flex: none;
  transition: transform var(--fk-dur) var(--fk-ease);
}

[data-theme="dark"] .fk-themetoggle__mark { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .fk-themetoggle__mark { transition: none; }
}

.fk-bleed {
  margin-inline: calc(var(--fk-page-edge) * -1);
  padding-inline: var(--fk-page-edge);
}

.fk-bleed__inner {
  margin-inline: auto;
  max-width: var(--fk-content-max);
}

@media print {
  .fk-bleed { margin-inline: 0; padding-inline: 0; }
}

.fk-print-only { display: none; }
@media print {
  .fk-no-print { display: none !important; }
  .fk-print-only { display: revert; }
}