/* =========================================================================
   Design system - 2010 revival
   The look of the social web circa 2010: a grey page, white content boxes with
   hairline borders, glossy gradient chrome, small corners, and Lucida Grande /
   Tahoma type at the small sizes that era used.

   Light is the ONLY theme. 2010 had no dark mode, and carrying one would mean
   every glossy gradient and inset highlight needing a second, contradictory
   definition. color-scheme is pinned to light so form controls match.

   Legacy variable names are aliased at the end of :root so any rule written
   against the old system keeps working unchanged.

   NOTE: never write a slash-star sequence inside a comment - it terminates
   early and silently swallows the following rule block.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---- Brand ---- */
  /* Deep petrol teal, not the era's famous blue. The 2010 grammar this design is
     built on -- glossy two-stop gradients, hard mid-lines, small corners -- is what
     dates it; the hue is free. Teal on a warm page reads unmistakably period
     without reading as one particular social network.
     The name --violet is kept because a hundred rules reference it. */
  --violet: #1d5c63;
  --purple: #14464c;
  --pink: #c2185b;
  --coral: #d9534f;

  --brand: var(--violet);
  --brand-strong: #14464c;
  --brand-soft: #e2ecec;
  --brand-ring: rgba(29, 92, 99, 0.45);

  /* A warm accent with no counterpart in the blue palette -- it is what stops the
     page reading as "some blue social site". 5:1 on the page, 7.3:1 on a card. */
  --accent: #7d4b0c;
  --accent-soft: #f2e6d2;

  /* Links on a white box, measured against the grey page as well -- the sidebar
     sits on --bg, not on white. 7.1:1 there. */
  --brand-text: #14464c;
  --badge-nsfw-bg: #b0173f;

  /* Glossy fills. Every button and bar in 2010 was a two-stop vertical gradient
     with a lighter top edge -- that is the whole visual grammar. */
  --gradient-brand: linear-gradient(to bottom, #2b7880 0%, #1d5c63 50%, #185057 51%, #14464c 100%);
  --gradient-aurora: linear-gradient(to bottom, #2b7880 0%, #14464c 100%);
  --gradient-text: none;
  --gradient-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  --gradient-chrome: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 48%, #ebebeb 52%, #dedede 100%);
  /* The title bar every module wears. Warm to match the page field rather than the
     blue-grey it inherited from the old palette. */
  --gradient-titlebar: linear-gradient(to bottom, #f7f5f1 0%, #e9e5dd 100%);

  /* ---- Surfaces ---- */
  /* Warm greige rather than blue-grey. Changing the field a page sits on shifts
     its whole character more than any single component does. */
  --bg: #d9d6cf;
  --bg-subtle: #f1efea;
  --surface: #ffffff;
  --surface-2: #faf9f7;
  --line: #cbc6bd;
  --line-strong: #a8a196;
  --ink: #1c1e21;
  /* Measured against the grey page field, not against white: secondary labels in
     the sidebar sit on --bg, where the lighter tone only reached 4.24:1. */
  --ink-muted: #525863;

  /* ---- "Glass" ---- */
  /* Nothing here is glass any more -- the tokens are kept because a hundred
     rules reference them, and they now resolve to the flat panel treatment the
     era actually used. Frosted translucency did not exist in 2010. */
  --glass-bg: #f7f8fa;
  --glass-bg-strong: #ffffff;
  --glass-border: #c4cad4;
  --glass-blur: none;
  --glass-highlight: inset 0 1px 0 #ffffff;
  --nav-bg: #14464c;

  --danger: #c9302c;
  --success: #2a6a2b;
  --warning: #c77c05;

  /* ---- Radii ---- */
  /* 3 to 6 pixels was the whole range. Anything rounder reads as a later decade,
     so even the large tokens stay small; only --r-full stays a pill, for the
     handful of places that need one. */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 5px;
  --r-xl: 6px;
  --r-2xl: 8px;
  --r-full: 999px;

  /* ---- Elevation ---- */
  /* Tight and dark, sitting right under the element -- not the wide soft haze of
     modern design. */
  --sh-1: 0 1px 1px rgba(0, 0, 0, 0.12);
  --sh-2: 0 1px 3px rgba(0, 0, 0, 0.18);
  --sh-3: 0 2px 6px rgba(0, 0, 0, 0.26);
  --sh-brand: 0 1px 3px rgba(0, 0, 0, 0.3);
  --sh-brand-lg: 0 2px 6px rgba(0, 0, 0, 0.36);
  --ring: 0 0 0 2px var(--brand-ring);

  /* ---- Type ---- */
  /* Fixed pixel sizes, not fluid clamps. Type in 2010 did not scale with the
     viewport; an 11px label was 11px on every screen, and that rigidity is a
     large part of why the era looks the way it does. */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  --font-sans: 'Lucida Grande', 'Lucida Sans Unicode', 'Segoe UI', Tahoma, Verdana,
    Geneva, Arial, sans-serif;

  /* ---- Motion ---- */
  /* Short and linear. Spring easing is a much later idea; a 2010 hover was an
     instant swap or a brief fade. */
  --ease-out: ease-out;
  --ease-spring: ease-out;
  --dur-fast: 0.08s;
  --dur: 0.12s;
  --dur-slow: 0.2s;

  /* ---- Legacy aliases: keep, older rules reference these ---- */
  --color-bg: var(--bg);
  --color-bg-subtle: var(--bg-subtle);
  --color-surface: var(--surface);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-primary: var(--brand);
  --color-primary-hover: var(--brand-strong);
  --color-primary-soft: var(--brand-soft);
  --color-accent: var(--pink);
  --color-danger: var(--danger);
  --color-success: var(--success);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --shadow-sm: var(--sh-1);
  --shadow-card: var(--sh-2);
  --shadow-hover: var(--sh-3);
  --shadow-primary: var(--sh-brand);
  --ring-focus: var(--ring);
  --ease: var(--ease-out);
  --dur: 0.12s;
  --gradient-primary: var(--gradient-brand);
  --gradient-cover: var(--gradient-aurora);
  --amber: var(--warning);
}



/* ===================== Reset ===================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* The era's page background: a flat grey wash with a single soft vertical
   gradient at the top, the way a 2010 site sat its white content boxes on a
   coloured field. The animated aurora blobs that used to live here were a
   modern-design device and had no place in this skin. */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, #c9d0dc 0%, var(--bg) 100%);
}



@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  body::before,
  body::after {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.035em;
  font-weight: 700;
}

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.028em;
}

h3 {
  font-size: var(--text-lg);
}

p {
  margin: 0 0 1em;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--brand);
  color: #fff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  background-clip: content-box;
}

/* ===================== Entrance animations ===================== */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shimmer {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

/* ===================== Skeleton loaders ===================== */

.skeleton,
.skeleton-text,
.skeleton-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--bg-subtle) 25%,
    var(--surface-2) 37%,
    var(--bg-subtle) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-md);
}

.skeleton-text {
  height: 0.85em;
  margin-bottom: 0.5em;
  border-radius: var(--r-sm);
}

.skeleton-card {
  height: 220px;
  border-radius: var(--r-lg);
}

/* ===================== Buttons ===================== */

.button-primary,
button[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  /* Two-stop gradient with a hard mid-line, a dark 1px edge and a shadow cut into
     the text. That combination -- not the colour -- is what dates a button to this
     era; a flat fill would read as modern no matter what palette it used. */
  background: var(--gradient-brand);
  color: #fff;
  border: 1px solid #123c41;
  padding: 4px 12px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 20px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.button-primary:hover,
button[type='submit']:hover {
  background: linear-gradient(to bottom, #3a8f97 0%, #2b7880 50%, #236a71 51%, #1a5860 100%);
}

/* Pressed state is the gradient inverted plus an inner shadow, so the control
   physically sinks. Modern buttons scale or dim instead. */
.button-primary:active,
button[type='submit']:active {
  background: linear-gradient(to bottom, #14464c 0%, #1a5860 49%, #1d5c63 50%, #2b7880 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.button-primary:disabled,
button[type='submit']:disabled {
  background: #b9b9c4;
  border-color: #9c9caa;
  color: #f0f0f4;
  text-shadow: none;
  box-shadow: none;
  cursor: default;
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* The grey "chrome" button of the period: near-white at the top, mid-grey at
     the bottom, a hard line through the middle and dark text lifted by a white
     highlight beneath it. */
  background: var(--gradient-chrome);
  color: #333;
  border: 1px solid #a8a8a8;
  padding: 4px 12px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: bold;
  line-height: 20px;
  text-shadow: 0 1px 0 #fff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}

.button-secondary:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 48%, #f0f0f0 52%, #e4e4e4 100%);
  border-color: #8f8f8f;
  color: #111;
}

.button-secondary.active {
  background: linear-gradient(to bottom, #dedede 0%, #ebebeb 49%, #f2f2f2 50%, #ffffff 100%);
  border-color: #8f8f8f;
  color: #111;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.16);
}

.button-secondary:active {
  background: linear-gradient(to bottom, #dedede 0%, #ebebeb 49%, #f2f2f2 50%, #ffffff 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.22);
}

.link-button,
button.link-button[type='submit'] {
  background: none;
  background-image: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  overflow: visible;
  isolation: auto;
  transform: none;
  transition: color var(--dur) var(--ease-out);
}

.link-button::before,
.link-button::after,
button.link-button[type='submit']::before,
button.link-button[type='submit']::after {
  content: none;
}

.link-button:hover,
button.link-button[type='submit']:hover {
  color: var(--brand-text);
  transform: none;
  filter: none;
  box-shadow: none;
}

.inline-form {
  display: inline;
}

/* ===================== Forms ===================== */

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
textarea,
select {
  width: 100%;
  padding: 0.85em 1.1em;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass-bg);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

input[type='text']:hover,
input[type='email']:hover,
input[type='password']:hover,
input[type='number']:hover,
textarea:hover,
select:hover {
  border-color: var(--line-strong);
  background: var(--glass-bg-strong);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='number']:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: var(--ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.7;
}

input[type='file'] {
  width: 100%;
  padding: 1.1em;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

input[type='file']:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

input[type='file']::file-selector-button {
  margin-right: 1em;
  padding: 0.5em 1.1em;
  border: none;
  border-radius: var(--r-full);
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-xs);
  cursor: pointer;
}

input[type='color'] {
  width: 3.6rem;
  height: 2.7rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--glass-bg);
  cursor: pointer;
}

input[type='checkbox'] {
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--brand);
  cursor: pointer;
}

textarea {
  resize: vertical;
  min-height: 5em;
}

.field {
  margin-bottom: 1.3em;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: 0.5em;
  letter-spacing: -0.012em;
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: 0.4em;
  line-height: 1.55;
}

/* ===================== Surfaces ===================== */

.card {
  position: relative;
  /* The white content box on a grey field: opaque, a hairline border, a small
     corner and almost no shadow. The lift and the entrance animation both go --
     boxes in 2010 sat still. */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 10px 12px;
}

.empty-state {
  text-align: center;
  padding: 4.5em 1.5em;
  color: var(--ink-muted);
  background: var(--glass-bg);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-xl);
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

/* ===================== Flash ===================== */

.flash-stack {
  max-width: 760px;
  margin: 0 auto 1.5em;
}

.flash {
  padding: 0.95em 1.25em;
  border-radius: var(--r-md);
  margin-bottom: 0.65em;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid transparent;
  animation: rise-in var(--dur) var(--ease-out) both;
}

.flash-error {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
  color: var(--danger);
}

.flash-success {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--success);
}

.flash-info {
  background: var(--brand-soft);
  border-color: var(--brand-ring);
  color: var(--ink);
}

/* ===================== Auth ===================== */

.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.5em 0;
  min-height: 62vh;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: 2.5em 2.25em;
  border-radius: var(--r-2xl);
  background: var(--glass-bg-strong);
  box-shadow: var(--sh-3), var(--glass-highlight);
}

.auth-card h1 {
  font-size: var(--text-xl);
  margin-bottom: 1.2em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.auth-card button[type='submit'] {
  width: 100%;
  margin-top: 0.6em;
  padding: 0.95em 1.5em;
  font-size: var(--text-base);
}

.auth-switch {
  margin-top: 1.6em;
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: center;
}

.auth-switch a {
  color: var(--brand-text);
  font-weight: 600;
}

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
}

.label-row label {
  margin-bottom: 0;
}

.forgot-link {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.5em;
}

.forgot-link:hover {
  color: var(--brand-text);
}

.auth-switch a:hover {
  opacity: 0.8;
}

/* ===================== Errors ===================== */

.error-page {
  text-align: center;
  padding: 6em 1.5em;
}

.error-page h1 {
  font-size: var(--text-3xl);
  margin-bottom: 0.25em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.error-stack {
  text-align: left;
  max-width: 800px;
  margin: 1.75em auto;
  padding: 1.4em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
  font-size: var(--text-xs);
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===================== Phones ===================== */

@media (max-width: 768px) {
  /* iOS Safari zooms the whole page in when a focused field's font-size is under
     16px, and never zooms back out -- the page just stays magnified and the layout
     appears broken. The type tokens land around 15.4px on a phone, just inside the
     trigger. 16px exactly is the documented threshold, so this is the minimum that
     stops it rather than an arbitrary bump. */
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='search'],
  input[type='number'],
  input[type='tel'],
  input[type='url'],
  input[type='date'],
  textarea,
  select {
    font-size: 16px;
  }

  /* The navbar search sets its own size via `.navbar-search input`, which ties the
     rule above on specificity (0,1,1 each) and wins only because layout.css is
     linked after base.css. Qualifying with the class settles it outright instead of
     depending on link order. */
  .navbar-search input[type='search'] {
    font-size: 16px;
  }

  /* Comfortable thumb targets. Apple asks for 44px, Android for 48dp; several
     controls here were rendering at 25-31px, which is a miss-and-retry every time.
     Applied by padding rather than height so nothing is forced to stretch. */
  button,
  input[type='submit'],
  .button-primary,
  .button-secondary {
    min-height: 44px;
  }

  /* Standalone text links in navigation and footers, which are the smallest of all.
     Inline links inside paragraphs are deliberately untouched -- padding them out
     would space the prose oddly. */
  .navbar-links > a,
  .footer-links a,
  .auth-switch a,
  .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Long words and URLs (usernames, filenames, pasted links) must not force the
     page sideways on a narrow screen. */
  body {
    overflow-wrap: break-word;
  }
}

/* Available to screen readers, absent from the page. Used for labels that a
   sighted user reads from context -- a "Position for kate" label beside a number
   box would be noise on screen but is the only thing naming the field otherwise.
   Not `display: none`, which would hide it from assistive tech as well. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}