.textcolumns {
  --col-width: 30ch;

  column-width: var(--col-width);
  column-gap: var(--gap);
  margin-block: var(--gap);

  & :first-child { margin-block-start: 0 !important }

  &:is(dl) {
    @supports (break-after: avoid-column) {
      & dt {
        break-after: avoid-column;
        break-inside: avoid-column;
        orphans: 2;
        widows: 2;
      }
      & dd {
        break-before: avoid-column;
        break-inside: avoid-column;
        orphans: 2;
        widows: 2;
      }
    }

    > div:has(dt):has(dd) {
      break-inside: avoid-column;
    }
  }
}



.text-align\:center {
    text-align: center;
}

.center {
    display: grid;
    place-items: center;
}
.align-content\:center { align-content: center }
.align-content\:end    { align-content: end    }

/**/

.container {
	max-inline-size: var(--eff-line-length);
	margin-inline: auto;
}

.fullbleed:not([specificity-hack]) {
    /* NOTE: Specificity hack needed for e.g. <table class="fullbleed table"> */
    position: relative;
    max-width: none;
    width: var(--full-width);
    left: 50%;
    transform: translateX(calc(-.5 * var(--full-width)));

    border-radius: 0;
    border-inline: none;
}

.fullscreen {
    height: 100vh;

    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50vw);

    border-radius: 0;
    border-inline: none;
}

.width\:100\%  { width:100%;  max-width: 100%  }
.height\:100\% { height:100%; max-height: 100% }

/**/

/* margin-trim had better be implemented soon */
:is(
    body,
    .box,
    [role=menu],
    .sidebar-layout > header,
    [role=tabpanel],
    figure,
    details,
    dialog,
    aside,
    fieldset,
    dd,
    td,
    th
) {
    &>:first-child:first-child:first-child:first-child,
    &>:first-child>:first-child:first-child:first-child,
    &>:first-child>:first-child>:first-child:first-child,
    &>:first-child>:first-child>:first-child>:first-child { margin-block-start: 0; }


    &>:last-child:last-child:last-child:last-child,
    &>:last-child>:last-child:last-child:last-child,
    &>:last-child>:last-child>:last-child:last-child,
    &>:last-child>:last-child>:last-child>:last-child { margin-block-end: 0; }
}

/**/

.padding\:0 { padding: 0 }
.padding { padding: var(--gap) }
.padding-block\:0 { padding-block: 0 }
.padding-block { padding-block: var(--gap) }
.padding-block-start\:0 { padding-block-start: 0 }
.padding-block-start { padding-block-start: var(--gap) }
.padding-block-end\:0 { padding-block-end: 0 }
.padding-block-end { padding-block-end: var(--gap) }
.padding-inline\:0 { padding-inline: 0 }
.padding-inline { padding-inline: var(--gap) }
.padding-inline-start\:0 { padding-inline-start: 0 }
.padding-inline-start { padding-inline-start: var(--gap) }
.padding-inline-end\:0 { padding-inline-end: 0 }
.padding-inline-end { padding-inline-end: var(--gap) }

.padding-start\:0 { padding-block-start: 0; padding-inline-start: 0 }
.padding-start { padding-block-start: var(--gap); padding-inline-start: var(--gap) }
.padding-end\:0 { padding-block-end: 0; padding-inline-end: 0 }
.padding-end { padding-block-end: var(--gap); padding-inline-end: var(--gap) }


/* NOTE:
 * Specificity hack is needed when parent container has e.g. .flex-row.
 * TODO: Eventually use cascade layers to avoid this hack.
 *
 * In order to support e.g. class="margin:0 margin-block-end:auto",
 * we must be careful what order we define these utils in. */

.margin\:0:not([specificity-hack]) { margin: 0 }
.margin:not([specificity-hack]) { margin: var(--gap) }

.margin-block\:0:not([specificity-hack]) { margin-block: 0 }
.margin-block:not([specificity-hack]) { margin-block: var(--gap) }
.margin-block\:auto:not([specificity-hack]) { margin-block: auto }

.margin-block-start\:0:not([specificity-hack]) { margin-block-start: 0 }
.margin-block-start:not([specificity-hack]) { margin-block-start: var(--gap) }
.margin-block-start\:auto:not([specificity-hack]) { margin-block-start: auto }

.margin-block-end\:0:not([specificity-hack]) { margin-block-end: 0 }
.margin-block-end:not([specificity-hack]) { margin-block-end: var(--gap) }
.margin-block-end\:auto:not([specificity-hack]) { margin-block-end: auto }

.margin-inline\:0:not([specificity-hack]) { margin-inline: 0 }
.margin-inline:not([specificity-hack]) { margin-inline: var(--gap) }
.margin-inline\:auto:not([specificity-hack]) { margin-inline: auto }

.margin-inline-start\:0:not([specificity-hack]) { margin-inline-start: 0 }
.margin-inline-start:not([specificity-hack]) { margin-inline-start: var(--gap) }
.margin-inline-start\:auto:not([specificity-hack]) { margin-inline-start: auto }

.margin-inline-end\:0:not([specificity-hack]) { margin-inline-end: 0 }
.margin-inline-end:not([specificity-hack]) { margin-inline-end: var(--gap) }
.margin-inline-end\:auto:not([specificity-hack]) { margin-inline-end: auto }

.margin-start\:0:not([specificity-hack]) {
  margin-block-start: 0;
  margin-inline-start: 0;
}
.margin-start:not([specificity-hack]) {
  margin-block-start: var(--gap);
  margin-inline-start: var(--gap);
}
.margin-start\:auto:not([specificity-hack]) {
  margin-block-start: auto;
  margin-inline-start: auto;
}

.margin-end\:0:not([specificity-hack]) {
  margin-block-end: 0;
  margin-inline-end: 0;
}
.margin-end:not([specificity-hack]) {
  margin-block-end: var(--gap);
  margin-inline-end: var(--gap);
}
.margin-end\:auto:not([specificity-hack]) {
  margin-block-end: auto;
  margin-inline-end: auto;
}


.flow-gap {
    & > :not(:last-child) {
        margin-bottom: var(--gap);
    }
}

/**/

.inline { display: inline }
.block { display: block }
.contents { display: contents }

.table {
    display: table;
    width: 100%;
    margin: 0;
}

.row, .rows > * {
    display: table-row;

    &:not(:last-child):not([specificity-hack]) > * {
        margin-bottom: var(--gap);
    }

    & > *:not([specificity-hack]) {
        display: table-cell;
        vertical-align: top;
    }

    & > * + *:not([specificity-hack]) {
        margin-inline-start: var(--gap);
        display: inline-block;
    }
}

/**/

.big, .\<big\> {
    font-size: 1.4em;
    line-height: calc(1.5 * var(--rhythm, 1rlh));
}

/**/

.nested-list :where(ul, ol, dl) { margin-block: 0 }

/**/

.fixed  { position: fixed  }
.sticky { position: sticky }

.top    { top:    0 }
.right  { right:  0 }
.bottom { bottom: 0 }
.left   { left:   0 }

.float\:left  { float: left  }
.float\:right { float: right }

.overflow\:auto     { overflow: auto;     }
.overflow\:scroll   { overflow: scroll;   }
.overflow-x\:scroll { overflow-x: scroll; }
.overflow-y\:scroll { overflow-y: scroll; }
.overflow\:clip     { overflow: clip;     }
.overflow-x\:clip   { overflow-x: clip;   }
.overflow-y\:clip   { overflow-y: clip;   }

/**/

@media print {
  :root {
    --bg: transparent;
    --fg: black;
    color-scheme: light;
  }
  .titlebar,
  role[menuitem] {
    /* These use `color: var(--bg);` */
    --bg: white;
    text-shadow: none;
  }

  main, .container {
    max-inline-size: unset;
    width: auto;
  }

  h1, h2, h3, h4, h5, h6,
  table, tr, th, td,
  blockquote,
  pre, code,
  ol, li, dt, dd,
  .box, dialog, details, summary,
  img, figure, figcaption,
  video, audio, object, embed,
  fieldset, legend,
  input, textarea, select, button,
  header, footer, nav, aside, search,
  section {
    break-inside: avoid-page;
  }
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid-page;
  }
  p {
    orphans: 2;
    widows: 2;
  }

  a:not([href^="#"]):not(:has(> *))::after {
    content: " (" attr(href) ")";
    font-size: 80%;
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  @supports selector(::details-content) {
    details::details-content {
      content-visibility: visible;
    }
  }
}
