/* UUID Generator */

/* The UUID: text, not a field, so the box grows to fit it. One UUID is large and centred, sized to stay on one
   line on a phone; a list is smaller, one per line, and scrolls past 20 lines. While it is empty it keeps the
   height of one line, in em so it shrinks with the text on a phone */
#ug_output {
    min-height: calc(1.5em + 2rem + 2 * var(--bs-border-width));
    font-size: clamp(0.8125rem, 3.4vw, 1.25rem);
    line-height: 1.5;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

#ug_output.ug-list {
    max-height: calc(20 * 0.875rem * 1.6 + 2rem + 2 * var(--bs-border-width));
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: left;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Version 5 without a name: the box says what it is waiting for */
#ug_output.ug-waiting::before {
    content: attr(data-empty);
    font-family: var(--bs-body-font-family);
    font-size: 0.875rem;
    color: var(--ck-text-3);
}

/* Number fields without the browser's up/down buttons, as on the calculators (tool.css scopes its own rule to
   .tool-calculator, which a code tool isn't inside) */
#ug_tool input[type="number"]::-webkit-outer-spin-button,
#ug_tool input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#ug_tool input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The switches share the height of the small fields beside them, so they sit on the fields' centre line */
.ug-switches {
    min-height: calc(0.875rem * 1.5 + 0.5rem + 2 * var(--bs-border-width));
}

#ug_tool .form-switch {
    margin-bottom: 0;
}

#ug_tool .form-switch .form-check-input {
    cursor: pointer;
}

#ug_tool .form-check-label .font-monospace {
    margin-left: 0.25rem;
}

/* What a checked UUID is: a long value breaks anywhere rather than widening the page */
.ug-table {
    table-layout: fixed;
    font-size: 0.875rem;
}

.ug-table > :not(caption) > * > * {
    padding: 0.375rem 0.5rem;
    overflow-wrap: anywhere;
}

.ug-table th {
    width: 32%;
    color: var(--ck-text-2);
    font-weight: 500;
}