/* =====================================================================
   7ti.me public page styles (shared by index / result)
   - Zero deps, no CDN, no web fonts: system font stack only.
   - The random gradient is the core of brand identity: full-bleed gradient
     background, recolored on every load. Colors are generated by page JS
     (adjacent-hue pairing + dark constraint: white text contrast >= 4.5:1),
     written to --grad / --brand / --brand-2.
   - Locked to a single screen: neither mobile portrait nor desktop may scroll
     (very short viewports have a compression fallback).
   - RTL: always use logical properties (inline/start/end); ar/ur mirror cleanly.
   ===================================================================== */

:root {
  /* White panels (components floating on the gradient) */
  --surface: #ffffff;
  --surface-2: #fafafa;
  --ink: #18181b;
  --ink-2: #3f3f46;
  --muted: #52525b;
  --placeholder: #5f5f68; /* >= 4.5:1 against #fff */
  --line: rgba(24, 24, 27, 0.12);
  --line-strong: rgba(24, 24, 27, 0.30);
  --danger: #b42318;
  --ok: #067647;

  /* Text on the gradient (background is constrained dark, so white is safe) */
  --on-grad: #ffffff;
  --on-grad-dim: rgba(255, 255, 255, 0.82);
  --on-grad-faint: rgba(255, 255, 255, 0.66);

  /* Brand gradient (overwritten by JS; this is a dark neutral fallback, white text safe) */
  --grad: linear-gradient(135deg, #3f3f46, #18181b);
  --brand: #27272a;
  --brand-2: #18181b;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r: 16px;
  --r-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.10);
  --shadow: 0 2px 6px rgba(24, 24, 27, 0.12), 0 18px 44px -20px rgba(24, 24, 27, 0.45);

  --z-topbar: 10;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--on-grad);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Full-bleed gradient base + top-left soft light (fixed layers: stable on iOS, no seams however tall the content) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--grad);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 12% -4%, rgba(255, 255, 255, 0.16), transparent 55%);
  pointer-events: none;
}

/* Page skeleton: three single-screen bands (topbar / stage / footer), content sized to fit one screen */
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar: brand mark + language switch (transparent, floats on the gradient) ---------- */
.topbar {
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.7rem, 0.5rem + 0.8vw, 1.1rem) clamp(1rem, 0.5rem + 2.5vw, 2.25rem);
  animation: fade 0.6s var(--ease-out) both;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--on-grad);
}

.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-sm);
  flex: none;
}

.brand-name {
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* ---------- Stage (vertically centered content) ---------- */
.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 0.5rem + 1.5vw, 2rem) clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}

.panel {
  width: 100%;
  max-width: 46rem;
  text-align: center;
}

/* ---------- Home tagline (supporting role: small, single-line preferred, doesn't crowd the input) ---------- */
.tagline {
  margin: 0 auto clamp(1rem, 0.8rem + 1vw, 1.6rem);
  max-inline-size: 60ch;
  font-size: clamp(1rem, 0.92rem + 0.55vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--on-grad);
  text-wrap: balance;
  animation: rise 0.55s var(--ease-out) 0.04s both;
}
/* Taglines segmented by full-width space (e.g. haiku): wrap only between segments, never mid-phrase */
.tagline .seg { display: inline-block; }

/* ---------- Shorten input group (lead role: big pill, input + submit) ---------- */
.composer {
  margin: 0;
  animation: rise 0.55s var(--ease-out) 0.09s both;
}

.field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--surface);
  border: none;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s var(--ease-out);
}
.field:focus-within {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), var(--shadow);
}

#url-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink);
  padding: 0.85rem 1rem;
  /* URLs are inherently LTR: empty/placeholder follows page direction, Latin input goes LTR automatically */
  unicode-bidi: plaintext;
}
#url-input::placeholder { color: var(--placeholder); opacity: 1; }

/* Primary button: brand gradient (white text, dark constraint guarantees contrast) */
.submit {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: calc(var(--r) - 5px);
  background: var(--grad);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s var(--ease-out), filter 0.15s var(--ease-out);
}
.submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.submit:active { transform: translateY(0); filter: brightness(0.98); }
.submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--brand) 55%, transparent);
}

.submit .label { display: inline-block; }
.submit .spinner {
  display: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
form.is-loading .submit { pointer-events: none; filter: brightness(0.95); }
form.is-loading .submit .label { display: none; }
form.is-loading .submit .spinner { display: inline-block; }
form.is-loading #url-input { color: var(--muted); }

/* ---------- Messages (error / rate-limit / self-shorten quip): white card floating on the gradient ---------- */
.msg {
  margin: 0.9rem auto 0;
  max-width: 40rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.95rem;
  color: var(--danger);
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  text-wrap: pretty;
}
.msg[hidden] { display: none; }

#turnstile-box:not(:empty) { margin-top: 1rem; }

/* ---------- Result page (compact single column: fits one screen) ---------- */
.result-title {
  margin: 0 0 clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
  font-weight: 780;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--on-grad);
  text-wrap: balance;
  animation: pop 0.5s var(--ease-out) 0.04s both;
}

.linkcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-inline: auto;
  max-width: 34rem;
  padding: clamp(0.8rem, 0.6rem + 0.8vw, 1.1rem);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  text-align: start;
  animation: rise 0.5s var(--ease-out) 0.1s both;
}

.short {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  word-break: break-all;
  line-height: 1.25;
  /* Short URL is always LTR, even on RTL pages */
  direction: ltr;
  unicode-bidi: isolate;
}
.short:hover { text-decoration: underline; }
.short:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.12s var(--ease-out);
}
.copy:hover { background: var(--surface-2); border-color: var(--brand); color: var(--ink); }
.copy:active { transform: scale(0.97); }
.copy:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);
}
.copy svg { width: 1.05em; height: 1.05em; flex: none; }
.copy .ic-check { display: none; }
.copy.copied {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line-strong));
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
.copy.copied .ic-copy { display: none; }
.copy.copied .ic-check { display: inline-block; }

.expiry {
  margin: clamp(0.7rem, 0.5rem + 0.6vw, 1rem) 0 0;
  font-size: 0.95rem;
  color: var(--on-grad-dim);
  animation: rise 0.5s var(--ease-out) 0.16s both;
}
.expiry .exp-label { font-weight: 600; color: var(--on-grad); }
.expiry time {
  font-family: var(--font-mono);
  color: var(--on-grad);
  margin-inline-start: 0.4rem;
  direction: ltr;
  unicode-bidi: isolate;
}

.qr-wrap {
  margin: clamp(0.8rem, 0.6rem + 0.8vw, 1.2rem) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  animation: rise 0.5s var(--ease-out) 0.22s both;
}
.qr-box {
  display: inline-flex;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}
/* QR size follows viewport height: shrinks on short screens to keep a single screen */
.qr-box svg { display: block; width: clamp(104px, 19dvh, 150px); height: auto; }
.qr-hint { font-size: 0.85rem; color: var(--on-grad-dim); }

/* "Shorten another": white primary button on the gradient (brand-colored text) */
.another {
  margin: clamp(0.9rem, 0.7rem + 0.9vw, 1.4rem) auto 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 20rem;
  border: none;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--brand);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
  animation: rise 0.5s var(--ease-out) 0.28s both;
}
.another:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.another:active { transform: translateY(0); }
.another:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), var(--shadow-sm);
}

/* ---------- Footer ---------- */
.foot {
  padding: 0.9rem 1.25rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--on-grad-faint);
}
.foot p { margin: 0; }
.foot a { color: var(--on-grad-faint); text-decoration: none; }
.foot a:hover { color: var(--on-grad-dim); text-decoration: underline; }

/* ---------- Mobile (375 acceptance; vertical stack) ---------- */
@media (max-width: 560px) {
  .field {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  #url-input { padding: 0.8rem 0.75rem; text-align: start; }
  .submit { width: 100%; padding: 0.9rem 1rem; }

  .linkcard {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }
  .linkcard .short { text-align: center; }
  .copy { justify-content: center; width: 100%; }
}

/* ---------- Short-viewport fallback (landscape phones etc.): compress further, still one screen ---------- */
@media (max-height: 560px) {
  .tagline { margin-block-end: 0.7rem; }
  .qr-wrap { display: none; } /* No room for QR on landscape phones: short URL and copy remain fully usable */
  .result-title { margin-block-end: 0.6rem; }
  .foot { padding: 0.5rem 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}