/*
 * =========================================================
 * UI-LANG TIP
 * =========================================================
 *
 * ui-lang-tip.css
 *
 * Semantic primitives for compact, programmatically generated
 * UI content.
 *
 *
 * ---------------------------------------------------------
 * PURPOSE
 * ---------------------------------------------------------
 *
 * Normal HTML documents use margins on headings, paragraphs,
 * lists, etc. to communicate document structure.
 *
 * Small programmatic UI fragments are different.
 *
 * They are compact visual components such as:
 *
 *   - contextual menu descriptions
 *   - tooltips
 *   - feed messages
 *   - command hints
 *   - status explanations
 *   - compact notifications
 *
 * The .tip semantic declares this intention.
 *
 *
 * ---------------------------------------------------------
 * VOCABULARY
 * ---------------------------------------------------------
 *
 * .tip
 *     Declares compact UI content.
 *
 * .tip-sm
 * .tip-md
 * .tip-lg
 * .tip-xl
 *     Select the typographic scale of the compact content.
 *
 * .icon
 *     Declares a Unicode character as a visual icon.
 *
 * .lines
 *     Declares a compact vertical sequence of text lines.
 *
 *
 * Layout remains the responsibility of ui-lang-flex.css.
 * Visual presentation remains the responsibility of
 * application CSS.
 *
 *
 * ========================================================= */


/* =========================================================
   TIP
   =========================================================
 *
 * Declares compact UI content.
 *
 * The component itself does not introduce document-style
 * vertical spacing.
 */

.tip {
    margin: 0;
}


/* =========================================================
   TIP SIZES
   =========================================================
 *
 * Sizes apply to the entire tip.
 *
 * Because the values are relative, all text and Unicode icons
 * inside the tip scale together.
 *
 * .tip-md is the natural/default scale.
 */

.tip-sm {
    font-size: 0.85em;
}

.tip-md {
    font-size: 1.35em;
}

.tip-lg {
    font-size: 1.75em;
}

.tip-xl {
    font-size: 3.0em;
}


/* =========================================================
   LINES
   =========================================================
 *
 * Creates a compact vertical sequence without the margins
 * normally associated with document typography.
 */

.lines {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* Allow text blocks to shrink inside flex layouts. */

.tip > .lines {
    min-width: 0;
}


/* Remove document-style vertical margins from common
 * block-level text elements used inside compact UI.
 */

.lines > :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p
) {
    margin-block: 0;
}


/* Lists remain compact when used inside a tip. */

.lines > :where(ul, ol) {
    margin-block: 0;
}


/* Quotations remain compact when used inside a tip. */

.lines > blockquote {
    margin-block: 0;
}


/* =========================================================
   ICON
   =========================================================
 *
 * .icon identifies a visual Unicode character.
 *
 * It deliberately does not define a font size.
 *
 * The icon inherits the size of its surrounding .tip.
 */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    line-height: 1;
}


/* =========================================================
   DESIGN BOUNDARY
   =========================================================
 *
 * This stylesheet does not define:
 *
 *   - colors
 *   - fonts
 *   - borders
 *   - shadows
 *   - backgrounds
 *   - application-specific spacing
 *   - hover states
 *
 * ui-lang-tip.css defines only the semantics and compact
 * typography of programmatic UI content.
 *
 * ui-lang-flex.css defines its layout.
 *
 * Application CSS defines its visual appearance.
 *
 * ========================================================= */