/* Native element styles. Loaded twice on purpose:
   - into documents via the theme (mandatory, like base/body.css),
   - into every component shadow root via mirrors/elements.styles.ts (adopted by
     EdElement), where the ed-base layer loses to the component's own unlayered styles. */
@layer ed-base {
  /* region Block Text ~~~~~~~~~~~~~~~~~~~~~~ */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--ed-font-family-heading);
    font-weight: var(--ed-font-weight-heading);
    line-height: var(--ed-line-height-normal);
    color: var(--ed-color-title);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--ed-font-size-2xl);
  }

  h2 {
    font-size: var(--ed-font-size-xl);
  }

  h3 {
    font-size: var(--ed-font-size-l);
  }

  h4 {
    font-size: var(--ed-font-size-m);
  }

  h5 {
    font-size: var(--ed-font-size-s);
  }

  h6 {
    font-size: var(--ed-font-size-xs);
  }

  p {
    /*
      The pretty shorthand also resets text-wrap-mode to wrap, overriding an inherited nowrap.
      Browsers without pretty (Firefox as of 152) drop the whole declaration, so paragraphs
      there would keep the inherited nowrap while Chrome wraps — the explicit wrap fallback
      keeps the mode reset consistent everywhere.
    */
    text-wrap: wrap;
    text-wrap: pretty;
  }

  /*
    The native indent on dd comes from the document tradition of glossaries. On a screen it puts
    the value out of line with every other block, while a label and its value have to read as one
    unit. Which of the two carries the visual weight is a role and belongs to the ed-pairs
    utility, not here — a plain dl stays unstyled text.
  */
  dd {
    margin-inline-start: 0;
  }

  /* endregion */
  /* region Thematic Break ~~~~~~~~~~~~~~~~~~ */
  hr {
    margin: var(--ed-space-4) 0;
    border: none;
    border-top: solid var(--ed-border-width-1) var(--ed-color-border);
  }

  /* endregion */
  /* region Inline Text ~~~~~~~~~~~~~~~~~~~~~ */
  strong,
  b {
    font-weight: var(--ed-font-weight-bold);
  }

  em,
  i {
    font-style: italic;
  }

  u {
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  s {
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  ins {
    text-decoration-color: var(--ed-color-success-fill-normal);
    text-decoration-line: underline;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;
  }

  del {
    color: color-mix(in oklab, currentColor, transparent 10%);
    text-decoration-color: var(--ed-color-danger-fill-normal);
    text-decoration-line: line-through;
    text-decoration-thickness: 0.09375em;
  }

  mark {
    background-color: var(--ed-color-warning-fill-light);
    border-radius: var(--ed-border-radius-1x);
  }

  small {
    font-size: var(--ed-font-size-smaller);
  }

  sub,
  sup {
    font-size: var(--ed-font-size-smaller);
    line-height: 0;
  }

  sub {
    vertical-align: sub;
  }

  sup {
    vertical-align: super;
  }

  abbr[title] {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.09375em;
    text-underline-offset: 0.125em;

    cursor: help;
  }

  kbd {
    padding: 0.125em 0.25em;
    font-family: var(--ed-font-family-code);
    font-size: var(--ed-font-size-smaller);
    font-weight: var(--ed-font-weight-code);
    border: solid var(--ed-border-width-1) color-mix(in oklab, currentColor, transparent 50%);
    border-radius: var(--ed-border-radius-2x);
    box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);

    ed-icon {
      vertical-align: -2px;
    }
  }

  /* endregion */
  /* region Links ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  a {
    color: var(--ed-color-text-link);
    text-decoration: var(--ed-link-decoration-default);
    -webkit-text-decoration: var(--ed-link-decoration-default);
    text-decoration-thickness: round(0.0625em, 1px);
    text-underline-offset: 0.125em;
  }

  /* Light-DOM ancestors only: this context cannot be seen from inside a shadow root,
     so accent-context recoloring intentionally does not replicate for shadow content. */
  *:is([appearance~='accent'], .ed-accent, ed-button:not([appearance])) {
    a,
    a:hover {
      color: currentColor;
    }
  }

  @media (hover: hover) {
    a:hover {
      text-decoration: var(--ed-link-decoration-hover);
      -webkit-text-decoration: var(--ed-link-decoration-hover);
    }
  }

  a:active {
    text-decoration: var(--ed-link-decoration-hover);
    -webkit-text-decoration: var(--ed-link-decoration-hover);
    text-decoration-thickness: round(0.125em, 1px);
  }

  /* Native <button>s use the browser-specific form-control UA font-size (e.g. 13.3px in Chromium,
     ~11px in WebKit) instead of inheriting it. That makes ed-icons inside raw buttons — which size
     relative to font-size — render at different sizes per engine. Reset it so buttons pick up the
     surrounding font-size like every other element. Layered in ed-base, so a component that
     deliberately sets a button font-size still wins over this default. */
  button {
    font-size: inherit;
  }

  a:focus,
  button:focus {
    outline: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: var(--ed-focus-ring);
    outline-offset: var(--ed-focus-ring-offset);
  }

  /* endregion */
  /* region Code ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  code,
  samp,
  var {
    padding: 0.125em 0.25em;

    font-family: var(--ed-font-family-code);
    font-size: var(--ed-font-size-smaller);
    font-weight: var(--ed-font-weight-code);
    background-color: var(--ed-color-code-highlight);
    border-radius: var(--ed-border-radius-1x);
  }

  pre {
    padding: var(--ed-space-4);
    font-family: var(--ed-font-family-code);
    font-size: var(--ed-font-size-smaller);
    font-weight: var(--ed-font-weight-code);
    white-space: pre;
    background-color: var(--ed-color-code-highlight);
    border-radius: var(--ed-border-radius-2x);

    /* Remove overlapping styles for child code elements */

    & code,
    & samp,
    & var {
      padding: 0;
      font-size: 1em;
      background-color: transparent;
    }

    /* Print styles */
    @media print {
      background: none;
      border: solid var(--ed-border-width-1) var(--ed-color-border);
    }
  }
  /* endregion */
  /* region Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  table {
    width: 100%;
    border-collapse: collapse;
  }

  caption {
    color: var(--ed-color-text);
    font-size: var(--ed-font-size-smaller);
    text-align: start;
  }

  caption:has(+ *) {
    margin-block-end: var(--ed-space-2);
  }

  td,
  th {
    padding: var(--ed-space-2);
    border-block-end: solid var(--ed-border-width-1) var(--ed-color-border);
    font-weight: inherit;
    vertical-align: middle;
  }

  /* The UA centers every th. Scoped to th on purpose — td is start-aligned already — and to th
     without an `align` attribute, so a consumer's presentational hint survives on headers and data
     cells alike instead of losing to this rule on one of them. */
  th:not([align]) {
    text-align: start;
  }

  /* Column headers read from what the markup declares: a th inside `<thead>`; a th scoped to a
     column or a column group anywhere (HTML §4.9.12); or a th in a row that holds no data cell —
     the header row of a table written without `<thead>`, which the parser files under an implied
     `<tbody>`. A row header keeps the weight and background of the cells beside it. */
  thead th:not([scope='row']),
  tbody > tr:not(:has(td)) > th:not([scope='row']),
  th:is([scope='col'], [scope='colgroup']) {
    background-color: var(--ed-color-surface-default);
    border-block-start: solid var(--ed-border-width-2) var(--ed-color-border);
    border-block-end: solid var(--ed-border-width-2) var(--ed-color-border);
    font-weight: var(--ed-font-weight-header-cell);
  }

  /* A footer is set off from the body by the same wider line that separates the header from it, and
     closes the table without one below. Only the first footer row carries the separator, so a
     multi-row footer is not ruled throughout. Under border-collapse the wider line wins over the
     last body row's, so the two do not add up. */
  tfoot > tr:first-child > * {
    border-block-start: solid var(--ed-border-width-2) var(--ed-color-border);
  }

  tfoot > tr:last-child > * {
    border-block-end: none;
  }

  /* Column groups. Under the collapsing border model a border may be set on a column group and is
     drawn for the whole column (CSS 2.1 §17.6.2.1), so one declaration carries the group boundary
     through header, body and footer alike — which is what makes a grouped table readable. */
  colgroup:not(:last-of-type) {
    border-inline-end: solid var(--ed-border-width-1) var(--ed-color-border);
  }

  /* The header row directly above the leaf columns centers its group labels; the levels above it
     stay start-aligned, so the outermost group reads as a title rather than a column label. */
  thead > tr:nth-last-child(2) > th[colspan] {
    text-align: center;
  }

  /* Three header levels or more: the outermost group row is set apart from the levels below it. */
  thead:has(> tr:nth-child(3)) > tr:first-child > th {
    background-color: var(--ed-color-card-fill);
  }

  /* Opt-in reading aids. Both are pure presentation and need no script, so they belong to the
     standing table — a table that sorts or selects rows is ed-data-grid's job. Body rows only: the
     header carries its own background, and a stripe under it would fight with it. */
  table.ed-zebra-rows > tbody > tr:nth-child(odd) {
    background-color: color-mix(in oklab, var(--ed-color-card-fill) 60%, transparent);
  }

  @media (hover: hover) {
    table.ed-hover-rows > tbody > tr:hover {
      background-color: var(--ed-surface-hover);
    }
  }
  /* endregion */
}