/* TinyLink.in — site styles
   Fonts: Bricolage Grotesque (display + body), JetBrains Mono (URLs only) */

:root {
    --paper: #f2f5f9;
    --surface: #ffffff;
    --ink: #0c2038;
    --ink-soft: #46586d;
    --blue: #1c62b5;
    --blue-soft: #8fb2dc;
    --orange: #f26a1b;
    --line: #d3dce8;
    --danger: #b3261e;
    --danger-bg: #fdecea;
    --warn-bg: #fff3e0;

    --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --radius: 14px;
    --gutter: 20px;
    --measure: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Frame ---------- */

.site-header,
.page,
.site-footer {
    width: 100%;
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-header { padding-block: 28px 0; }

.wordmark {
    font-size: 1.5rem;
    font-weight: 800;
    font-stretch: 85%;
    letter-spacing: -0.03em;
    color: var(--blue);
    text-decoration: none;
}
.wordmark-dot { color: var(--orange); }
.wordmark:hover { color: var(--blue); }

.page { flex: 1; padding-block: clamp(32px, 8vw, 72px) 48px; }

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 24px;
    padding-block: 24px 32px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.9375rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero-title {
    margin: 0 0 16px;
    font-size: clamp(2.75rem, 11vw, 5.25rem);
    font-weight: 800;
    font-stretch: 78%;
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.hero-title--small {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    font-stretch: 85%;
    margin-top: 36px;
}

.hero-lede {
    margin: 0 0 28px;
    max-width: 34em;
    color: var(--ink-soft);
    font-size: 1.1875rem;
}

/* The one motion moment: a long link collapses, the short link takes its place. */
.cut {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 32px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    min-height: 28px;
}
.cut-long {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--orange);
    max-width: 100%;
    animation: cut-long 1.1s 0.5s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
.cut-short {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-weight: 500;
    opacity: 0;
    animation: cut-short 0.5s 1.3s ease-out forwards;
}

@keyframes cut-long {
    to { max-width: 0; opacity: 0; margin-right: -10px; }
}
@keyframes cut-short {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Form ---------- */

.shorten { margin: 0; }

.field { margin: 0 0 4px; }
.field > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9375rem;
}

.shorten-row { display: flex; gap: 10px; }

.input {
    width: 100%;
    min-width: 0;
    padding: 0 16px;
    height: 56px;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1rem; /* 16px minimum stops iOS zooming into the field */
    transition: border-color 0.15s;
}
.input::placeholder { color: #7d8ea3; }
.input:hover { border-color: var(--blue-soft); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(28, 98, 181, 0.16); }
.input--url { height: 64px; border-color: var(--ink); }
.input--url:hover { border-color: var(--ink); }
.input--mono,
.input--url { font-family: var(--font-mono); font-size: 0.9375rem; }
.input--url { font-size: 1rem; }
.input.input-validation-error { border-color: var(--danger); }

.input-prefix { display: flex; align-items: stretch; }
.input-prefix .prefix {
    display: flex;
    align-items: center;
    padding: 0 0 0 14px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
}
.input-prefix .input { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; padding-left: 2px; }

.field-error,
.field-validation-error {
    display: block;
    margin-top: 6px;
    color: var(--danger);
    font-weight: 500;
    font-size: 0.9375rem;
}

.hint { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.875rem; }

.options { margin-top: 20px; }
.options summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    cursor: pointer;
    color: var(--blue);
    font-weight: 600;
    list-style: none;
}
.options summary::-webkit-details-marker { display: none; }
.options summary::before {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s;
}
.options[open] summary::before { transform: rotate(45deg); }
.options summary:hover { color: var(--ink); }

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 8px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.options-grid .input { height: 48px; }
.options-grid .input-prefix .prefix { background: var(--paper); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    padding: 0 28px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    font-size: 1.0625rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--blue); color: #fff; }
.btn--primary:disabled { opacity: 0.7; cursor: progress; }

.btn--signal { background: var(--orange); color: var(--ink); height: 52px; }
.btn--signal:hover { background: #ff8440; color: var(--ink); }
.btn--signal.is-copied { background: #fff; color: var(--ink); }

.btn--ghost { height: 52px; border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }
.btn--ghost:hover { border-color: #fff; color: #fff; }

.linkbtn {
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--blue-soft);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.linkbtn:hover { color: #fff; }

/* ---------- Notices ---------- */

.notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: var(--radius);
    font-weight: 500;
}
.notice--error { background: var(--danger-bg); color: var(--danger); }
.notice--warn { background: var(--warn-bg); color: #7a3e00; }
.result .notice--warn { margin-top: 16px; }

/* ---------- Result ---------- */

.result {
    margin: 0 0 8px;
    padding: clamp(20px, 5vw, 36px);
    background: var(--ink);
    color: #fff;
    border-radius: 20px;
}
.result-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--blue-soft);
}
.result-link { margin-top: 12px; }
.result-url {
    display: block;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(1.375rem, 6.4vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.result-url:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; }
.result-host { color: var(--blue-soft); font-weight: 500; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.result-alt { margin: 20px 0 0; color: var(--blue-soft); font-size: 0.9375rem; overflow-wrap: anywhere; }
.result-alt a { color: #fff; font-family: var(--font-mono); font-size: 0.875rem; }

/* ---------- Tool, ad, misc ---------- */

.tool {
    margin-top: clamp(40px, 8vw, 72px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.tool h2 { margin: 0 0 6px; font-size: 1.25rem; font-stretch: 90%; }
.tool p { margin: 0 0 16px; max-width: 38em; color: var(--ink-soft); }
.bookmarklet {
    display: inline-block;
    padding: 10px 18px;
    border: 2px dashed var(--blue);
    border-radius: 999px;
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    cursor: grab;
}
.bookmarklet:hover { background: var(--surface); color: var(--blue); }
/* Bookmarks can't be dragged on touch devices */
@media (hover: none) { .tool { display: none; } }

.ad { margin-top: 40px; max-width: 100%; overflow: hidden; text-align: center; }

.warning { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.warning .hero-title { margin-top: 0; }
.warning-icon { flex: none; color: var(--danger); margin-top: 6px; }

.plain-list { margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.875rem; }
.plain-list li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---------- Small screens ---------- */

@media (max-width: 600px) {
    :root { --gutter: 16px; }
    body { font-size: 1rem; }
    .shorten-row { flex-direction: column; }
    .btn--primary { width: 100%; }
    .options-grid { grid-template-columns: 1fr; padding: 16px; }
    .result-actions .btn { flex: 1 1 auto; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .cut-long { animation: none; max-width: 0; opacity: 0; margin-right: -10px; }
    .cut-short { animation: none; opacity: 1; }
    * { transition: none !important; }
}