` elements in bold, so `font-weight: bolder;` is set by default. */
font-weight: bolder;
}
:where(dd) {
/* The `margin-inline-start` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset. */
margin-inline-start: unset;
}
:where(pre) {
/*
* Since `text-spacing-trim` can affect spacing in `` elements even with its initial value, the final rendering may depend on the user's font settings.
* To ensure consistent alignment, `space-all` is explicitly specified and inheritance is prevented.
*/
text-spacing-trim: space-all;
/* Set to `no-autospace` as it can cause misalignment with monospaced fonts. */
text-autospace: no-autospace;
}
/* ======================================================
// MARK: Text-level semantics
// ====================================================== */
:where(em:lang(ja)) {
/* In Japanese, emphasis is commonly represented by bold text, so `font-weight: bolder;` is set by default. */
font-weight: bolder;
}
:where(:is(i, cite, em, dfn, var):lang(ja)) {
/* Italic style is not common in Japanese, so the `font-style` is reset. */
font-style: unset;
}
:where(code, kbd, samp) {
/*
* Set a monospace font family referencing Tailwind.
* @see https://tailwindcss.com/docs/font-family
*/
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* Font feature settings can have adverse effects on monospaced fonts, so their values are explicitly set to `initial` to prevent inheritance. */
font-feature-settings: initial;
font-variation-settings: initial;
/* Resets the `font-size` specified in the UA stylesheet to allow inheritance. */
font-size: unset;
/*
* Disables font ligatures for programming fonts (like Fira Code)
* to prevent character combinations like `=>` from being rendered as a single symbol (e.g., `竍蛋).
*/
font-variant-ligatures: none;
}
:where(abbr[title]) {
/*
* The `` element with the `title` attribute isn't helpful regarding accessibility because support is inconsistent, and it's only accessible to some users.
* This rule shows a dotted underline on abbreviations in all browsers (there's a bug in Safari) and changes the cursor.
* @see https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
*/
text-decoration-line: underline;
text-decoration-style: dotted;
cursor: help;
}
:where(time) {
/* Set to `no-autospace` because date notations in typography do not include spaces. */
text-autospace: no-autospace;
}
@media (forced-colors: active) {
:where(mark) {
/*
* In forced-colors mode, the color of the mark element may not change, which can be problematic. Use system colors in forced-colors mode.
* @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
*/
background-color: Highlight;
color: HighlightText;
}
}
@media print {
:where(mark) {
/*
* Not all printers support color, and users might print in grayscale.
* It's worth adding a non-disruptive style that scales with the text, as an alternative to relying only on background color.
* @see https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkPrint
*/
border-width: 1px;
border-style: dotted;
}
}
/* ======================================================
// MARK: Links
// ====================================================== */
:where(a:any-link) {
/* The default `color` from the UA stylesheet is rarely used as is, so it's reset to allow inheritance. */
color: unset;
/*
* While link underlines can be useful, they are often obstructive.
* They are disabled by default.
* If needed, restore them using `text-decoration-line: revert;`.
*/
text-decoration-line: unset;
/* Set the underline thickness to the font's default thickness. */
text-decoration-thickness: from-font;
}
/* ======================================================
// MARK: Embedded content
// ====================================================== */
:where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
/* Automatically adjust block size based on content. */
block-size: auto;
/* Prevents overflow by setting the maximum width to `100%`. */
max-inline-size: 100%;
/* Prevents extra space from appearing at the bottom of the element. */
vertical-align: bottom;
}
:where(iframe) {
/* The `border` specified in the UA stylesheet is often unnecessary, so it is reset. */
border: unset;
}
/* ======================================================
// MARK: Tabular data
// ====================================================== */
:where(table) {
/* Collapse borders for a more refined table design. */
border-collapse: collapse;
}
:where(caption, th) {
/* The `text-align` specified in the UA stylesheet is often unnecessary, so it is reset. */
text-align: unset;
}
:where(caption) {
/* Prevents the last line of text from ending with a single word, which can look awkward (known as an orphan). */
text-wrap: pretty;
}
/* ======================================================
// MARK: Forms
// ====================================================== */
:where(button, input, select, textarea),
::file-selector-button {
/*
* These elements are often styled with a border, so a `1px` border is applied by default for consistency.
* This ensures readability even for unstyled elements.
* When resetting, it's recommended to use `border-color: transparent` instead of `border: none` to account for forced color modes.
*/
border-width: 1px;
border-style: solid;
/* These styles specified in the UA stylesheet are often unnecessary, so they are reset to allow for inheritance. */
border-color: unset;
border-radius: unset;
color: unset;
font: unset;
letter-spacing: unset;
text-align: unset;
}
:where(input:is([type=radio i], [type=checkbox i])) {
/* The `margin` specified in the User Agent (UA) stylesheet is often unnecessary, so it is reset here. */
margin: unset;
}
:where(input[type=file i]) {
/* The `border` is often unnecessary, so it is reset here. */
border: unset;
}
:where(input[type=search i]) {
/* Remove the rounded corners of search inputs on macOS and normalize the background color. */
-webkit-appearance: textfield;
}
@supports (-webkit-touch-callout: none) {
:where(input[type=search i]) {
/* normalize the background color on iOS. */
background-color: Canvas;
}
}
:where(input:is([type=tel i],
[type=url i],
[type=email i],
[type=number i]):not(:placeholder-shown)) {
/*
* Certain input types need to maintain left alignment even in right-to-left (RTL) languages.
* However, this only applies when the value is not empty, as the placeholder should be right-aligned.
* @see https://rtlstyling.com/posts/rtl-styling#form-inputs
*/
direction: ltr;
}
:where(textarea) {
/* The `margin-block` specified in Firefox's UA stylesheet is often unnecessary, so it is reset. */
margin-block: unset;
/* Allows vertical resizing for `