/* pissrevir.online — gemensam stil för alla sidor.
   Riktning: "anrik lokaltidning som fått en riktigt bra app".
   Det gamla (Georgia, kursiv, gräddvitt papper, bärnsten) är identiteten —
   det moderna (hierarki, kortspråk, mikrointeraktioner) är hantverket.
   Sidspecifika stilar ligger kvar inline i respektive sida. */

:root {
  /* Papperet */
  --papper: #fffdf6;        /* sidbakgrund — gräddvitt tidningspapper */
  --papper-kort: #fdfaf0;   /* kort/sektioner — svagt sepiatonat */
  --papper-mork: #f7f1e1;   /* markerade ytor (din rad, citatrutor) */

  /* Tryckfärgen */
  --black: #2b2b2b;         /* bläcksvart — rubriker, viktig text */
  --brodtext: #4a4538;      /* mjukare brödtext */
  --dampad: #7a715e;        /* sekundärtext, metadata */

  /* Accenten */
  --accent: #f4a300;        /* bärnsten — identitetsfärgen */
  --accent-mork: #c98500;   /* hover/active på bärnsten */
  --accent-djup: #b07400;   /* bärnsten som textfärg (läsbar på papper) */

  /* Signalfärger i vintageton — tryckfärg, inte neon */
  --tegel: #a23b2e;         /* fel, avslag, destruktivt */
  --mossa: #3e6b4f;         /* bekräftelser, godkänt */

  /* Topplistans ädelmetaller, dämpade */
  --guld: #b07400;
  --silver: #7d7d7d;
  --brons: #8c5a2b;

  /* Kanter och lyft */
  --kant-svag: rgba(43, 43, 43, 0.35);
  --skugga: 0 1px 3px rgba(43, 35, 18, 0.12); /* lyft papper, inte material design */
}

/* ---------- Grund & typografi ---------- */

body {
  font-family: Georgia, serif;
  max-width: 28rem;
  margin: 3rem auto;
  padding: 0 1rem;
  background: var(--papper);
  color: var(--brodtext);
  line-height: 1.55;
}
@media (max-width: 30rem) {
  body { margin-top: 1.5rem; }
}

h1 {
  font-style: italic;
  color: var(--black);
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 0 0 0.3rem;
}
h1 span { color: var(--accent); }

/* Sektionsrubriker som tidningsavdelningar: versaler i liten grad,
   letterspacing, tunn guldlinje. Vintage som ger tydlighet. */
h2 {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--black);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.3rem;
  margin: 2rem 0 0.8rem;
}

a { color: var(--black); text-decoration-color: var(--accent); }
a:hover { color: var(--accent-djup); }

/* Sidhuvudet: navraden bär den tunna guldlinjen. */
nav {
  margin: 0.5rem 0 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--accent);
  font-size: 0.95rem;
}
nav a { color: var(--black); }
nav a[aria-current="page"] { font-weight: bold; text-decoration: none; }

#status { font-weight: bold; min-height: 1.4em; color: var(--black); }
.meta { color: var(--dampad); font-size: 0.9rem; }
.tom { color: var(--dampad); font-style: italic; }
.hidden { display: none !important; }

/* Diskret sidfot med rättsliga länkar (integritet + villkor). */
.rattslank { margin-top: 2rem; color: var(--dampad); font-size: 0.85rem; }
.rattslank a { color: var(--dampad); }

/* Ägarens/spelarens profilfärg som prick. */
.farg {
  display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%;
  margin-right: 0.4rem; border: 1px solid var(--black); vertical-align: baseline;
}

/* ---------- Knappar ---------- */
/* Hierarki: primär (fylld bärnsten), sekundär (outline — standard för
   nakna <button>), destruktiv (tegelröd outline som fylls vid hover). */

/* Mobil: webbläsarens grå tap-blink ersätts av egna :active-states nedan —
   tryckfeedback i papperets eget formspråk i stället för systemöverlägg. */
a, button, .cta, summary, label, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  font-family: Georgia, serif;
  font-size: 0.95rem;
  color: var(--black);
  background: var(--papper);
  border: 1px solid var(--black);
  border-radius: 2px;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
}
button:hover, button:active { background: var(--papper-mork); }

.knapp-primar {
  background: var(--accent);
  border-color: var(--accent-mork);
  font-weight: bold;
}
.knapp-primar:hover, .knapp-primar:active { background: var(--accent-mork); }

.cta {
  display: block; text-align: center;
  background: var(--accent); color: var(--black);
  font-weight: bold; text-decoration: none;
  border: 1px solid var(--accent-mork); border-radius: 2px;
  box-shadow: var(--skugga);
  padding: 0.8rem 1.2rem; margin: 1rem 0;
}
.cta:hover, .cta:active { background: var(--accent-mork); color: var(--black); }

.knapp-fara, .rapportera, .avsla {
  background: var(--papper);
  color: var(--tegel);
  border: 1px solid var(--tegel);
}
.knapp-fara:hover, .rapportera:hover, .avsla:hover,
.knapp-fara:active, .rapportera:active, .avsla:active {
  background: var(--tegel);
  color: var(--papper);
}

.godkann {
  background: var(--mossa);
  color: var(--papper);
  border: 1px solid var(--mossa);
}
.godkann:hover, .godkann:active { background: #335a42; }

/* Tumvänliga träffytor på pekskärm. */
@media (pointer: coarse) {
  button, .cta { min-height: 44px; }
}

/* Synligt tangentbordsfokus — accentring på allt fokuserbart. */
:focus-visible {
  outline: 2px solid var(--accent-djup);
  outline-offset: 2px;
}

/* ---------- Formulär ---------- */

fieldset {
  background: var(--papper-kort);
  border: 1px solid var(--kant-svag);
  border-radius: 3px;
  box-shadow: var(--skugga);
  padding: 0.9rem 1rem 1.1rem;
  margin: 0 0 1.5rem;
}
legend {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--black);
  padding: 0 0.4rem;
}

label { display: block; margin-top: 0.7rem; color: var(--black); font-size: 0.95rem; }

input[type="text"], input[type="email"], input[type="password"], textarea, select {
  font-family: Georgia, serif;
  font-size: 1rem;
  color: var(--black);
  background: #fff;
  border: 1px solid var(--kant-svag);
  border-radius: 2px;
  padding: 0.5rem;
  box-sizing: border-box;
}
input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; }
input:focus, textarea:focus, select:focus { border-color: var(--accent-djup); }

/* Fel intill fältet/posten — tegelrött, aldrig bootstrap-rött. */
.avslag, .rapport-svar { color: var(--tegel); font-size: 0.9rem; margin: 0.3rem 0 0; }

/* ---------- Kortspråket ---------- */
/* Tunn mörk kant, diskret skugga, svagt rundade hörn (tryck, inte piller). */

article, .kort {
  background: var(--papper-kort);
  border: 1px solid var(--kant-svag);
  border-radius: 3px;
  box-shadow: var(--skugga);
  padding: 0.8rem;
  margin-bottom: 1.2rem;
  /* Mobil: en recension på 500 tecken utan mellanslag får brytas i stället
     för att tvinga fram horisontell scroll på 360 px-skärmar. */
  overflow-wrap: anywhere;
}
article img {
  max-width: 100%;
  display: block;
  border: 1px solid var(--kant-svag);
  border-radius: 2px;
}

/* Listor som rader av kort: topplistor, mina markeringar. */
.kort-lista { padding-left: 0; }
ul.kort-lista { list-style: none; }
ol.kort-lista { list-style-position: inside; }
.kort-lista li {
  background: var(--papper-kort);
  border: 1px solid var(--kant-svag);
  border-radius: 3px;
  box-shadow: var(--skugga);
  padding: 0.5rem 0.7rem;
  margin: 0.5rem 0;
}

/* ---------- Vintage-stämplar ---------- */
/* Statusar som små stämplar: letterspaced versaler, tunn ram i
   statusfärgen, lätt roterade. */

.stampel {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: bold;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dampad);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.05em 0.45em;
  transform: rotate(-1deg);
  vertical-align: middle;
  white-space: nowrap;
}
.stampel-vantar { color: var(--accent-djup); }    /* vädras i kön */
.stampel-publicerad { color: var(--mossa); }
.stampel-avslagen { color: var(--tegel); }

/* ---------- Mikrointeraktioner ---------- */
/* Subtila och snabba — och bara för den som inte bett om mindre rörelse. */

@media (prefers-reduced-motion: no-preference) {
  button, .cta, a {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  button:active, .cta:active { transform: translateY(1px); }

  @keyframes tonas-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
  }
  /* Hämtat innehåll landar mjukt: flödesposter, modereringskort, listrader. */
  article, .kort-lista li { animation: tonas-in 180ms ease-out; }
}