/* NorBit — a ticket stub.
   Warm receipt paper, deep ink, and one signal orange for the short link and
   every action. Addresses are set in mono, because they are things to read
   exactly. The short link is the one loud thing on any page. */

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}

:root {
    --paper: #f5f2ea;
    --paper-2: #ebe6da;       /* recessed: inactive switches, chart track */
    --sheet: #fffdf8;
    --ink: #1b1a2e;
    --ink-2: #5b586e;
    --rule: #ddd6c6;
    --rule-2: #bfb6a2;
    --signal: #e4501b;        /* the short link, and every action */
    --signal-deep: #c13f10;
    --signal-wash: #fde8de;
    --qr: #1b1a2e;
    --stamp: #b42318;
    --ok: #1e7a4e;
    --warn-bg: #fff4d6;
    --warn-ink: #6e4400;
    --focus: 0 0 0 3px rgba(228, 80, 27, .35);
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
    font-family: "Schibsted Grotesk", system-ui, sans-serif;
    font-size: 17px; line-height: 1.55;
    background: var(--paper); color: var(--ink);
    min-height: 100vh;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 24px 48px; }
a { color: var(--signal-deep); text-underline-offset: 3px; }
[hidden], .hidden { display: none !important; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: -.01em; }
.muted { color: var(--ink-2); }
.noscript { padding: 12px 24px; background: var(--warn-bg); color: var(--warn-ink); text-align: center; }

/* header ------------------------------------------------------------------ */
header.site {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px;
    padding: 20px 0; margin-bottom: 36px;
}
.brand {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: -.015em;
}
.brand-mark { display: block; }
header.site nav { display: flex; gap: 22px; }
header.site nav a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
header.site nav a:hover { color: var(--signal-deep); }
header.site nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }

/* hero -------------------------------------------------------------------- */
.hero { max-width: 780px; margin-bottom: 28px; }
.display {
    font-weight: 850; font-size: clamp(2.5rem, 6.4vw, 4.4rem);
    line-height: 1; letter-spacing: -.035em; margin-bottom: 18px;
}
/* "made short": the words sit on a folded tab of the signal colour, the way
   a long link is folded down into a short one. */
.fold {
    position: relative; display: inline-block; padding: 0 .14em .04em;
    background: var(--signal); color: #fff; border-radius: 4px;
    transform: rotate(-1.2deg);
}
.fold::after {
    content: ''; position: absolute; right: -.01em; top: 0;
    border-style: solid; border-width: 0 .26em .26em 0;
    border-color: var(--paper) var(--paper) var(--signal-deep) var(--signal-deep);
    border-top-right-radius: 3px;
}
.lede { color: var(--ink-2); font-size: 1.12rem; max-width: 60ch; }
.lede .mono { color: var(--ink); }
.eyebrow { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }

/* sheets ------------------------------------------------------------------ */
.sheet {
    background: var(--sheet); border: 1.5px solid var(--rule-2); border-radius: 12px;
    margin-bottom: 28px;
}
.section-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; }

/* controls ---------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 18px; border-radius: 8px; border: 1.5px solid var(--ink);
    background: var(--sheet); color: var(--ink); font: inherit; font-weight: 700; line-height: 1.2;
    cursor: pointer; text-decoration: none; touch-action: manipulation; white-space: nowrap;
}
.btn:hover { background: var(--paper-2); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.btn-quiet { border-color: var(--rule-2); color: var(--ink-2); background: transparent; font-weight: 600; }
.btn-quiet:hover { color: var(--ink); }
.btn-danger { border-color: var(--stamp); color: var(--stamp); }
.btn-danger:hover { background: #fdecea; }
.btn-lg { padding: 14px 26px; font-size: 1.08rem; }
.btn.done { border-color: var(--ok); color: var(--ok); background: #e9f6ef; }
.btn-primary.done { background: var(--ok); border-color: var(--ok); color: #fff; }

.link-btn {
    background: none; border: 0; padding: 0; font: inherit; font-size: .92rem; font-weight: 650;
    color: var(--signal-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--ink); }
.link-btn:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 3px; }

input:not([type="radio"]):not([type="file"]) {
    width: 100%; min-width: 0; padding: 11px 13px; border: 1.5px solid var(--rule-2); border-radius: 8px;
    font: inherit; background: #fff; color: var(--ink);
}
input:not([type="radio"]):focus { outline: none; border-color: var(--signal); box-shadow: var(--focus); }
input.mono { font-family: var(--mono); font-size: .95rem; }
.error { color: var(--stamp); font-weight: 600; margin-top: 10px; }
.ok-note { color: var(--ok); font-weight: 600; margin-top: 10px; }
.hint { margin-top: 6px; font-size: .86rem; color: var(--ink-2); }

.link-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* the shorten form -------------------------------------------------------- */
.shorten { padding: 24px 26px; }
.shorten-main { display: flex; gap: 10px; }
.shorten-main input { font-size: 1.08rem; padding: 13px 15px; border-color: var(--ink); }
.alias { margin-top: 12px; }
.alias summary { cursor: pointer; color: var(--ink-2); font-weight: 600; font-size: .94rem; width: max-content; }
.alias summary:hover { color: var(--ink); }
/* The ending: a box like the URL field above, holding the fixed prefix and,
   straight after it, the part you type, so the two read as one link. */
.alias-row {
    display: flex; align-items: center; margin-top: 10px; max-width: 520px;
    padding: 0 14px 0 12px;
    border: 1.5px solid var(--rule-2); border-radius: 8px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.alias-row:focus-within { border-color: var(--signal); box-shadow: var(--focus); }
.alias-prefix { color: var(--ink-2); white-space: nowrap; font-size: 1rem; }
.alias-row input:not([type="radio"]):not([type="file"]) {
    flex: 1; min-width: 0; padding: 11px 0 11px 1px;
    border: 0; border-radius: 0; background: transparent;
    font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--ink);
}
.alias-row input:not([type="radio"]):not([type="file"]):focus { box-shadow: none; }
.alias-row input::placeholder { color: var(--rule-2); font-weight: 400; }

/* checking the link: a shield over the form ------------------------------ */
.shorten { position: relative; }
/* The form grows to fit the shield while it shows: the unsafe message and
   its button are taller than the form they cover. */
.shorten:has(> .checking:not([hidden])) { min-height: 260px; }
.checking {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 16px; text-align: center;
    background: var(--sheet); border-radius: 12px;
    animation: checking-in .18s ease-out;
    --shield: var(--ok); --shield-wash: #e9f6ef;
}
.checking[hidden] { display: none; }
.checking[data-state="unsafe"] { --shield: var(--stamp); --shield-wash: #fdecea; }
@keyframes checking-in { from { opacity: 0; } to { opacity: 1; } }

.shield-wrap { position: relative; width: 64px; height: 64px; margin-bottom: 6px; color: var(--shield); }
/* A slow pulse behind the shield while it works. */
.shield-wrap::before {
    content: ''; position: absolute; inset: 4px; border-radius: 50%;
    background: var(--shield); opacity: 0;
    animation: shield-pulse 1.6s ease-out infinite;
}
.checking:not([data-state="checking"]) .shield-wrap::before { animation: none; }
@keyframes shield-pulse { 0% { transform: scale(.7); opacity: .28; } 100% { transform: scale(1.6); opacity: 0; } }

.shield { position: relative; display: block; width: 64px; height: 64px; overflow: visible; }
.shield-body { fill: var(--shield-wash); stroke: var(--shield); stroke-width: 3; stroke-linejoin: round; transition: fill .25s, stroke .25s; }
.shield-scan { color: var(--shield); animation: shield-scan 1.1s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes shield-scan { from { transform: translateY(0); } to { transform: translateY(78px); } }
.shield-dots { fill: none; stroke: var(--shield); stroke-width: 4.5; stroke-linecap: round; animation: shield-dots 1.1s steps(1) infinite; }
@keyframes shield-dots { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.shield-tick, .shield-cross {
    fill: none; stroke: var(--shield); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 48; stroke-dashoffset: 48; opacity: 0;
}
.checking:not([data-state="checking"]) .shield-scan,
.checking:not([data-state="checking"]) .shield-dots { display: none; }
.checking[data-state="safe"] .shield-tick,
.checking[data-state="unsafe"] .shield-cross { opacity: 1; animation: shield-draw .45s ease-out forwards; }
@keyframes shield-draw { to { stroke-dashoffset: 0; } }
.checking[data-state="safe"] .shield { animation: shield-pop .45s ease-out; }
.checking[data-state="unsafe"] .shield { animation: shield-shake .4s ease-in-out; }
@keyframes shield-pop { 50% { transform: scale(1.1); } }
@keyframes shield-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.checking-title { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.checking[data-state="safe"] .checking-title { color: var(--ok); }
.checking[data-state="unsafe"] .checking-title { color: var(--stamp); }
.checking-text { color: var(--ink-2); font-size: .94rem; max-width: 52ch; }
.checking .btn { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
    .checking, .shield-wrap::before, .shield-scan, .shield-dots, .shield { animation: none !important; }
    .shield-scan { display: none; }
    .checking[data-state] .shield-tick, .checking[data-state] .shield-cross { animation: none; stroke-dashoffset: 0; }
}

/* the result -------------------------------------------------------------- */
.result {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px;
    padding: 26px;
}
.short-link { margin: 4px 0 14px; font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.short-link a { color: var(--signal-deep); text-decoration: none; }
.short-link a:hover { text-decoration: underline; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.result-qr { text-align: center; }
.result-qr img { display: block; width: 200px; height: 200px; border: 1.5px solid var(--rule); border-radius: 8px; background: #fff; }
.result-qr figcaption { margin-top: 8px; color: var(--ink-2); }
.result-foot { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--rule); }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; margin-top: 18px; }
.facts dt { color: var(--ink-2); }
.facts dd { overflow-wrap: anywhere; }

.keybox {
    margin-top: 18px; padding: 14px 16px; border-radius: 8px;
    background: var(--warn-bg); color: var(--warn-ink); font-size: .92rem;
}
.keybox strong { color: #4f3000; }
.keybox a { color: #4f3000; }
.copy-field { display: flex; gap: 8px; margin-top: 10px; }
.copy-field input { font-size: .82rem; padding: 8px 10px; background: #fffaf0; }

/* share row: Copy, WhatsApp, Telegram, Messenger, More… (app/static/js/ui.js) */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.share-row:empty { display: none; }
.share-label { font-size: .9rem; color: var(--ink-2); margin-right: 2px; }
.share-row .btn { padding: 7px 13px; font-size: .9rem; }
.share-row .btn svg { flex: none; }

/* decode box -------------------------------------------------------------- */
.decode-box {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 36px; align-items: center;
    margin: 44px 0 36px; padding-top: 28px; border-top: 1.5px solid var(--ink);
}
.decode-form { display: flex; flex-wrap: wrap; gap: 10px; }
.decode-form input { flex: 1 1 220px; }
.decode-form .error { flex-basis: 100%; margin-top: 0; }

/* number tiles ------------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 14px 16px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 10px; }
.tile dt { font-size: .86rem; color: var(--ink-2); font-weight: 600; }
.tile dd {
    font-size: clamp(1.4rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px;
}
.tiles-link dd { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.tile dd.bump { animation: bump .6s ease-out; }
@keyframes bump { 0% { color: var(--signal); } 100% { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .tile dd.bump { animation: none; } }

.how-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 36px; margin-top: 44px; }
.how-strip div { border-top: 1.5px solid var(--ink); padding-top: 12px; }
.how-strip h3 { font-size: 1.02rem; font-weight: 750; margin-bottom: 4px; }
.how-strip p { color: var(--ink-2); font-size: .95rem; }

/* the decode page --------------------------------------------------------- */
.hero-link { max-width: none; }
.link-title { font-size: clamp(1.6rem, 5vw, 2.8rem); font-weight: 750; line-height: 1.15; overflow-wrap: anywhere; margin: 4px 0 14px; color: var(--signal-deep); }
.goes { font-weight: 700; color: var(--ink-2); }
.target {
    margin: 4px 0 6px; padding: 12px 14px; max-width: 100%;
    background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 8px;
    color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.45;
}
.target-domain { color: var(--ink); font-weight: 800; background: var(--signal-wash); border-radius: 3px; padding: 0 2px; }
.target-note { font-size: .86rem; }
.utm { margin-top: 8px; }
.utm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; max-width: 760px; }
.utm-grid label { display: grid; gap: 4px; font-size: .86rem; font-weight: 650; color: var(--ink-2); }
.utm-grid input { font-size: .95rem; padding: 9px 11px; }
/* campaign tags on a link's page: a tag strip clipped to the destination box */
.utm-panel {
    margin: -7px 0 8px; padding: 16px 16px 12px;
    background: var(--sheet); border: 1.5px solid var(--ink); border-top: 1.5px dashed var(--rule-2);
    border-radius: 0 0 8px 8px;
}
.target:has(+ .utm-panel) { border-radius: 8px 8px 0 0; margin-bottom: 6px; }
.utm-head { display: grid; gap: 2px; margin-bottom: 12px; }
.utm-title { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
.utm-head p { font-size: .9rem; }
.utm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.utm-item { position: relative; padding: 10px 12px 10px 16px; background: var(--paper); border-radius: 6px; overflow: hidden; }
.utm-item::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--signal); }
.utm-item dt, .utm-item dd { display: grid; gap: 1px; }
.utm-label { font-weight: 750; font-size: .92rem; }
.utm-why { font-size: .78rem; color: var(--ink-2); }
.utm-item dd { margin-top: 6px; }
.utm-value { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; color: var(--signal-deep); }
.utm-key { font-family: var(--mono); font-size: .72rem; color: var(--ink-2); }
.utm-exact { margin-top: 12px; font-size: .86rem; }
.utm-exact summary { cursor: pointer; color: var(--ink-2); font-weight: 600; width: max-content; }
.utm-exact summary:hover { color: var(--ink); }
.utm-exact p { margin-top: 6px; overflow-wrap: anywhere; color: var(--ink-2); }
.my-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.my-tags span { font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: var(--signal-wash); color: var(--signal-deep); }
.my-tags b { font-weight: 700; color: var(--ink); }
@media (max-width: 560px) { .utm-grid { grid-template-columns: 1fr 1fr; } }
.target-note .changed { color: var(--warn-ink); font-weight: 650; }
.banner {
    margin-top: 16px; padding: 12px 16px; border-radius: 8px;
    background: var(--warn-bg); color: var(--warn-ink); font-weight: 600;
}
.banner.bad { background: #fdecea; color: var(--stamp); }

.stats-sheet { padding: 24px 26px; }
.stats-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.switch { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 8px; overflow: hidden; }
.switch button {
    padding: 6px 14px; border: 0; background: transparent; font: inherit; font-weight: 650; font-size: .9rem;
    color: var(--ink-2); cursor: pointer;
}
.switch button + button { border-left: 1.5px solid var(--ink); }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.switch button:focus-visible { outline: none; box-shadow: inset var(--focus); }

.chart { margin-top: 18px; }
.chart-box svg { display: block; width: 100%; height: 160px; }
.chart-max, .chart-axis { font-size: .8rem; color: var(--ink-2); }
.chart-max { margin-bottom: 6px; text-align: right; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--rule); }
.chart-box .bar-direct { fill: var(--signal); }
.chart-box .bar-qr { fill: var(--qr); }
.chart-box .track { fill: var(--paper-2); }
.chart-legend { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .86rem; color: var(--ink-2); }
.key { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-left: 10px; }
.key:first-child { margin-left: 0; }
.key-direct { background: var(--signal); }
.key-qr { background: var(--qr); }

.owner { margin-top: 26px; padding-top: 22px; border-top: 1.5px dashed var(--rule-2); }
.breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 30px; margin-top: 10px; }
.breakdown h3 { font-size: .96rem; font-weight: 750; margin-bottom: 8px; }
.bars { list-style: none; display: grid; gap: 7px; }
.bars li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 3px 8px; font-size: .9rem; border-radius: 4px; overflow: hidden; }
.bars li span { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars li b { position: relative; font-variant-numeric: tabular-nums; }
.bars .fill { position: absolute; inset: 0 auto 0 0; background: var(--signal-wash); }
.bars .empty-note { color: var(--ink-2); padding-left: 0; }
.owner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }

.qr-sheet { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 30px; align-items: center; padding: 24px 26px; }
.qr-img { display: block; width: 220px; height: 220px; border: 1.5px solid var(--rule); border-radius: 8px; background: #fff; }

.report { margin-top: 8px; color: var(--ink-2); }
.report summary { cursor: pointer; font-weight: 600; font-size: .92rem; width: max-content; }
.report summary:hover { color: var(--stamp); }
.report-form { margin-top: 12px; max-width: 560px; }
.report-form fieldset { border: 0; display: grid; gap: 6px; margin: 12px 0 14px; color: var(--ink); }
.report-form label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.report-form input[type="radio"] { accent-color: var(--signal); width: 17px; height: 17px; }
.report-page { padding: 24px 26px; max-width: 640px; }
.report-page .report-form { margin-top: 0; }
.report-page .field label, .report-page legend { display: block; font-weight: 700; margin-bottom: 6px; }
.report-page fieldset { margin-top: 18px; }
.report-done p + p { margin-top: 6px; }
.report-terms { margin-top: -10px; }
@media (max-width: 560px) { .report-page { padding: 18px 16px; } }

/* my links ---------------------------------------------------------------- */
.empty { padding: 28px; text-align: center; color: var(--ink-2); background: var(--sheet); border: 1.5px dashed var(--rule-2); border-radius: 12px; }
.my-list { list-style: none; display: grid; gap: 14px; }
.my-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: start;
    padding: 18px 20px; background: var(--sheet); border: 1.5px solid var(--rule-2); border-radius: 12px;
}
.my-short { font-weight: 700; font-size: 1.12rem; overflow-wrap: anywhere; }
.my-short a { color: var(--signal-deep); text-decoration: none; }
.my-short a:hover { text-decoration: underline; }
.my-target { color: var(--ink-2); font-size: .88rem; overflow-wrap: anywhere; }
.my-count { text-align: right; }
.my-count b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.my-count span { font-size: .84rem; color: var(--ink-2); }
.my-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .88rem; color: var(--ink-2); }
.my-item .share-row { grid-column: 1 / -1; margin-top: 4px; }
.status { font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: .8rem; }
.status-paused { background: var(--warn-bg); color: var(--warn-ink); }
.status-disabled, .status-missing { background: #fdecea; color: var(--stamp); }
.status-flagged { background: var(--warn-bg); color: var(--warn-ink); }

/* how it works ------------------------------------------------------------ */
.how { margin-top: 12px; }
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 44px; }
.how-grid div { border-top: 1.5px solid var(--ink); padding-top: 12px; }
.how-grid dt { font-weight: 750; margin-bottom: 4px; }
.how-grid dd { color: var(--ink-2); font-size: .96rem; max-width: 62ch; }

@media (max-width: 820px) {
    .result { grid-template-columns: 1fr; }
    .result-qr { justify-self: start; text-align: left; }
    .decode-box { grid-template-columns: 1fr; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .how-strip, .how-grid, .breakdown { grid-template-columns: 1fr; }
    .qr-sheet { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .container { padding: 0 16px 40px; }
    header.site { margin-bottom: 24px; }
    header.site nav { gap: 16px; }
    .shorten, .result, .stats-sheet, .qr-sheet { padding: 18px 16px; }
    .shorten-main { flex-direction: column; }
    .result-actions .btn, .link-actions .btn { flex: 1 1 100%; }
    .qr-img { width: 180px; height: 180px; }
}

/* footer ------------------------------------------------------------------ */
footer.smallprint {
    /* copyright | links, centred | Ko-fi: the middle column stays centred
       whatever the widths on either side. */
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px;
    margin-top: 56px;
    padding: 16px 0 4px;
    border-top: 1.5px solid var(--rule);
    color: var(--ink-2);
    font-size: .85rem;
}
footer.smallprint > p { justify-self: start; }
footer.smallprint .ko-fi { justify-self: end; }
.footer-links { display: flex; gap: 18px; justify-self: center; }
footer.smallprint p { margin: 0; }
footer.smallprint a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
footer.smallprint a:hover { color: var(--signal-deep); border-bottom-color: var(--signal-deep); }
footer.smallprint .ko-fi a.kofi-button {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 150px; justify-content: center;
    padding: 2px 12px; line-height: 36px;
    background: var(--signal); color: #fff;
    border: 0; border-radius: 12px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, .2);
    font-size: 14px; font-weight: 600; white-space: nowrap;
}
footer.smallprint .ko-fi a.kofi-button:hover { background: var(--signal-deep); color: #fff; }
.kofi-cup { width: 19px; height: 15px; object-fit: contain; animation: kofi-wiggle 3s infinite; }
@keyframes kofi-wiggle {
    0%, 60% { transform: rotate(0) scale(1); }
    75% { transform: rotate(0) scale(1.12); }
    80% { transform: rotate(0) scale(1.1); }
    84%, 92% { transform: rotate(-10deg) scale(1.1); }
    88%, 96% { transform: rotate(10deg) scale(1.1); }
    100% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .kofi-cup { animation: none; } }
@media (max-width: 560px) {
    footer.smallprint { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    footer.smallprint > p, footer.smallprint .ko-fi { justify-self: center; }
}

/* developers ------------------------------------------------------------- */
.api-key { padding: 24px 26px; }
.api-key-form { display: grid; gap: 14px; }
.api-key-row { display: flex; gap: 10px; }
.api-key-result .copy-field input { font-size: .95rem; padding: 11px 13px; background: #fff; border-color: var(--ink); }
.key-unsaved { margin-top: 10px; padding: 9px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 650; font-size: .92rem; }
.key-unsaved.saved { background: #e9f6ef; color: var(--ok); }
@media (max-width: 560px) { .api-key-result .copy-field { flex-wrap: wrap; } .api-key-result .copy-field input { flex-basis: 100%; } }
.api-key-result .hint code, .api-section code, .endpoint code { font-family: var(--mono); font-size: .88em; }
.api-section { margin-top: 40px; }
.api-facts { margin-top: 22px; }
.code {
    margin: 8px 0 14px; padding: 14px 16px; overflow-x: auto;
    background: var(--ink); color: #f5f2ea; border-radius: 8px;
    font-family: var(--mono); font-size: .84rem; line-height: 1.5;
}
.code code { font-size: inherit; }
/* endpoints: an accordion of native <details>, one row per method + path */
.endpoints-hint { margin: -2px 0 14px; font-size: .94rem; }
.endpoints { border: 1.5px solid var(--rule-2); border-radius: 12px; background: var(--sheet); overflow: hidden; }
.endpoint + .endpoint { border-top: 1px solid var(--rule); }
.endpoint-title {
    display: grid; grid-template-columns: 74px minmax(0, auto) minmax(0, 1fr) auto 18px; align-items: center; gap: 12px;
    padding: 14px 18px; cursor: pointer; list-style: none;
    transition: background-color .12s;
}
.endpoint-title::-webkit-details-marker { display: none; }
.endpoint-title:hover { background: var(--paper); }
.endpoint-title:focus-visible { outline: none; box-shadow: inset var(--focus); }
.endpoint-title::after {
    content: ''; width: 8px; height: 8px; justify-self: end;
    border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
.endpoint[open] > .endpoint-title::after { transform: rotate(-135deg) translateY(-2px); }
.endpoint[open] > .endpoint-title { background: var(--paper); border-bottom: 1px solid var(--rule); }
.endpoint-title code { font-family: var(--mono); font-weight: 700; font-size: .98rem; color: var(--ink); overflow-wrap: anywhere; }
.endpoint-title .verb { justify-self: start; text-align: center; min-width: 62px; }
.endpoint-summary { font-weight: 600; color: var(--ink-2); font-size: .94rem; }
.no-key { grid-column: 4; font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e9f6ef; color: var(--ok); white-space: nowrap; }
.endpoint-title::after { grid-column: 5; grid-row: 1; }
.endpoint-body { padding: 16px 18px 6px; }
.endpoint-body p { max-width: 75ch; color: var(--ink-2); margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .endpoint-title::after { transition: none; } }
@media (max-width: 680px) {
    .endpoint-title { grid-template-columns: 64px minmax(0, 1fr) 18px; gap: 4px 10px; padding: 12px 14px; }
    .endpoint-title code { grid-column: 2; }
    .endpoint-summary { grid-column: 2; grid-row: 2; }
    .no-key { grid-column: 2; grid-row: 3; justify-self: start; }
    .endpoint-title::after { grid-column: 3; grid-row: 1; }
    .endpoint-body { padding: 14px 14px 4px; }
}
.verb { font-family: var(--mono); font-size: .76rem; font-weight: 800; padding: 3px 8px; border-radius: 5px; color: #fff; background: var(--ink-2); }
.verb-get { background: var(--ok); }
.verb-post { background: var(--signal-deep); }
.verb-delete { background: var(--stamp); }
.tag-note { font-weight: 650; color: var(--ok) !important; }
.code-label { margin: 12px 0 0 !important; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.status { font-family: var(--mono); font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--paper-2); color: var(--ink); text-transform: none; letter-spacing: 0; }
.params { width: 100%; max-width: 760px; border-collapse: collapse; margin: 8px 0 12px; font-size: .92rem; }
.params th, .params td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.params th { font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.req { font-size: .76rem; color: var(--stamp); font-weight: 700; }
.opt { font-size: .76rem; color: var(--ink-2); }
.body-fields { max-width: none; }
.body-fields td:first-child { white-space: nowrap; }
.body-fields td.type { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); white-space: nowrap; }
.body-fields tr.nested td:first-child { padding-left: 26px; }
.body-fields tr.nested td:first-child code::before { content: '↳ '; color: var(--rule-2); }
.body-fields .limits { color: var(--ink-2); font-size: .86rem; }
.body-type { font-family: var(--mono); font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--paper-2); color: var(--ink); text-transform: none; letter-spacing: 0; }
@media (max-width: 680px) {
    .body-fields, .body-fields tbody, .body-fields tr, .body-fields td { display: block; }
    .body-fields thead { display: none; }
    .body-fields tr { padding: 8px 0; border-bottom: 1px solid var(--rule); }
    .body-fields td { border: 0; padding: 2px 0; }
    .body-fields td:first-child { white-space: normal; }
    .body-fields tr.nested { padding-left: 16px; }
    .body-fields tr.nested td:first-child { padding-left: 0; }
}
@media (max-width: 560px) {
    .api-key { padding: 18px 16px; }
    .api-key-row { flex-direction: column; }
}

/* the warning in front of a reported link -------------------------------- */
.warning-icon { width: 64px; height: 64px; margin-bottom: 14px; }
.warning-icon svg { display: block; width: 64px; height: 64px; overflow: visible; }
.warning-icon .shield-body { fill: var(--warn-bg); stroke: #b26b00; stroke-width: 3; stroke-linejoin: round; }
.warning-mark { fill: none; stroke: #b26b00; stroke-width: 5; stroke-linecap: round; }
.warning-page .btn-quiet { text-decoration: underline; text-underline-offset: 3px; }
.warning-page .hint { margin-top: 18px; }
.warning-page .goes { margin-top: 24px; }
.report-reasons { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.report-reasons li { padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--warn-bg); color: var(--warn-ink); font-weight: 650; font-size: .92rem; }
.report-reasons b { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #b26b00; color: #fff; text-align: center; font-size: .8rem; }

/* terms -------------------------------------------------------------------- */
.terms { max-width: 72ch; }
.terms h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; margin: 30px 0 8px; padding-top: 12px; border-top: 1.5px solid var(--ink); }
.terms p, .terms li { color: var(--ink-2); }
.terms ul { padding-left: 1.2em; display: grid; gap: 6px; margin: 8px 0; }
.terms p + p { margin-top: 8px; }
.terms-hint { margin-top: 10px; }