/* short.css - public short host pages: landing, inspector and status.
 * standalone document without app chrome. single fixed look: white text
 * on black, no surfaces, no borders. reuses the core.css reset and
 * spacing tokens; overrides the theme tokens so shared rules (focus
 * ring, placeholder, selection) pick up the fixed palette. */


/* === Tokens ================================================================
 * @section tokens
 * ========================================================================== */

:root {
    color-scheme: dark;

    --bg: #090909;
    --text: #f6f6f6;
    --text-muted: #8a8a8a;
    --selection-bg: var(--gray-600);
    --selection-fg: var(--white);
    --scrollbar-thumb: var(--gray-700);
    --scrollbar-thumb-hover: var(--gray-500);

    --short-text: 1.375rem;
    --short-measure: 40rem;
    --short-field-h: 3rem;
    --short-field-bg: rgba(255, 255, 255, 0.06);
    --short-field-bg-focus: rgba(255, 255, 255, 0.1);
    --short-ease: cubic-bezier(0.2, 0, 0, 1);
}


/* === Layout ================================================================
 * @section layout
 * one centered column. the headline is the only heading.
 * ========================================================================== */

.short {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    min-height: 100dvh;
    padding: var(--sp-6);
    text-align: center;
}

.short-title {
    max-width: var(--short-measure);
    font-size: var(--short-text);
    font-weight: 400;
    line-height: 1.4;
    text-wrap: balance;
}

.short-title a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: rgba(246, 246, 246, 0.4);
    transition: text-decoration-color 150ms var(--short-ease);
}

.short-title a:hover {
    text-decoration-color: currentColor;
}


/* === Inspector form ========================================================
 * @section form
 * the submit button sits inside the field; the field is a soft fill,
 * not a bordered box.
 * ========================================================================== */

.short-form {
    display: grid;
    gap: var(--sp-3);
    width: 100%;
    max-width: 24rem;
}

.short-label {
    font-size: var(--text-base);
    color: var(--text-muted);
}

.short-field {
    position: relative;
}

.short-input {
    width: 100%;
    height: var(--short-field-h);
    padding: 0 var(--short-field-h) 0 var(--sp-4);
    font-size: var(--text-lg);
    background: var(--short-field-bg);
    border-radius: var(--radius-lg);
    transition: background-color 150ms var(--short-ease);
}

.short-input:focus {
    outline: none;
    background: var(--short-field-bg-focus);
}

.short-input:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 2px;
}

.short-submit {
    --icon-size: var(--icon-size-lg);
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    place-items: center;
    width: var(--short-field-h);
    height: var(--short-field-h);
    color: var(--text);
    border-radius: var(--radius-lg);
    opacity: 0.6;
    transition-property: opacity, scale;
    transition-duration: 150ms;
    transition-timing-function: var(--short-ease);
}

.short-submit:hover,
.short-submit:focus-visible {
    opacity: 1;
}

.short-submit:focus-visible {
    outline-offset: -2px;
}

.short-submit:active {
    scale: 0.96;
}


/* === Result ================================================================
 * @section result
 * plain text under the field: the destination link or a red notice.
 * ========================================================================== */

.short-result {
    display: block;
    font-size: var(--text-lg);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.short-result a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.short-result--error {
    color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
    .short-title a,
    .short-input,
    .short-submit {
        transition: none;
    }

    .short-submit:active {
        scale: none;
    }
}

@media (max-width: 480px) {
    .short {
        padding: var(--sp-4);
    }
}