/* Aglo - styled per docs/brand/brandbook.md 1.0 ("Efterglöd").
   Rules for changes: docs/brand/guidelines.md. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-600.woff2') format('woff2'); /* self-hosted, OFL */
}
:root {
  /* Efterglöd tokens (brandbook §3) */
  --bg: #16130f;      /* Natt */
  --card: #221d17;    /* Glödskugga */
  --line: #3a332a;    /* Kolkant */
  --line-strong: #4a4032;
  --text: #f3ece2;    /* Ljus */
  --muted: #a99e8e;   /* Aska */
  --ember: #e07a3f;   /* Glöd - max ~10% av en yta */
  --amber: #d9a13d;   /* Bärnsten - varma varningar */
  color-scheme: dark;
}
h1, h2, h3, .tagline, .flashback-lead, .ask-lead {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: 0.01em;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
main { flex: 1; width: 100%; max-width: 40rem; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.6rem; letter-spacing: 0.02em; margin: 0.5rem 0; }
.tagline { color: var(--muted); margin-top: 0; }
header { display: flex; align-items: center; justify-content: space-between; }
form { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
label { color: var(--muted); font-size: 0.9rem; }
input {
  padding: 0.8rem; border-radius: 0.6rem; border: 1px solid #3a332a;
  background: var(--card); color: var(--text); font-size: 1rem;
}
button {
  padding: 0.8rem 1rem; border-radius: 0.6rem; border: none;
  background: var(--ember); color: #1c130c; font-size: 1rem; font-weight: 600;
}
button.ghost { background: transparent; color: var(--muted); border: 1px solid #3a332a; }
.status { color: var(--muted); min-height: 1.5em; }
.cards { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.cards li { background: var(--card); padding: 0.9rem 1rem; border-radius: 0.7rem; }
footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 0.8rem; }

.hint { color: var(--muted); font-size: 0.9rem; margin: 0.2rem 0 0.6rem; }
/* CR-046: inloggning via leverantör. Ghost, aldrig Glöd - Glöd är ransonerad till
   en fylld knapp per vy (guidelines §1), och den är "Skicka inloggningslänk". */
#oauth-box { margin-top: 1.2rem; }
button.wide { width: 100%; }
.filebtn {
  display: inline-block; padding: 0.8rem 1rem; border-radius: 0.6rem;
  background: var(--ember); color: #1c130c; font-weight: 600; cursor: pointer;
}
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; }
.photo { background: var(--card); border-radius: 0.7rem; padding: 0.4rem; display: grid; gap: 0.3rem; }
.photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.5rem; max-width: 100%; }
.badge { font-size: 0.75rem; color: var(--muted); }
.badge.warn { color: #d9a13d; }
button.small { padding: 0.35rem 0.6rem; font-size: 0.85rem; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.back { color: var(--muted); text-decoration: none; display: inline-block; margin-top: 0.4rem; }
.cards a { color: var(--text); text-decoration: none; font-weight: 600; display: block; }
.story { white-space: pre-wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.chip { background: var(--card); border: 1px solid #3a332a; border-radius: 999px;
        padding: 0.25rem 0.7rem; font-size: 0.85rem; color: var(--muted); }
textarea { padding: 0.8rem; border-radius: 0.6rem; border: 1px solid #3a332a;
           background: var(--card); color: var(--text); font-size: 1rem; resize: vertical; }
.photo.pick label { cursor: pointer; }

.tl-host { overflow-x: auto; overflow-y: hidden; background: var(--card); border-radius: 0.7rem;
           touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-canvas { position: relative; min-height: 108px; }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid #3a332a;
           color: var(--muted); font-size: 0.7rem; padding: 0.15rem 0.3rem; white-space: nowrap; }
.tl-card { position: absolute; height: 62px; background: #2e2620; border: 1px solid #4a4032;
           border-radius: 0.55rem; padding: 0.4rem 0.55rem; color: var(--text);
           text-decoration: none; font-size: 0.85rem; overflow: hidden; }
.tl-card:active { border-color: var(--ember); }
.tl-tray { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.3rem 0; }
.tl-tray-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 0.5rem;
                 flex: 0 0 auto; touch-action: none; }
.tl-ghost { position: fixed; width: 56px; height: 56px; object-fit: cover; opacity: 0.75;
            border-radius: 0.5rem; pointer-events: none; z-index: 99; }

.flashback { background: linear-gradient(135deg, #2e2216, #221d17); border: 1px solid #4a4032;
             border-radius: 0.8rem; padding: 0.8rem 1rem; margin: 0.8rem 0;
             display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.flashback-lead { margin: 0; color: var(--ember); font-weight: 600; }
.flashback a { color: var(--text); }
.map-box { background: var(--card); border-radius: 0.8rem; padding: 0.4rem; }
.map-pin { fill: var(--ember); opacity: 0.85; }
.map-label { fill: var(--text); font-size: 11px; text-anchor: middle; }

.ask { background: linear-gradient(135deg, #241f2b, #221d17); border: 1px solid #4a4032;
       border-radius: 0.8rem; padding: 0.9rem 1rem; margin: 0.8rem 0; }
.ask-lead { margin: 0 0 0.2rem; color: var(--ember); font-weight: 600; }
.ask-text { margin: 0 0 0.7rem; font-size: 1.05rem; }
.ask-text.small { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
.ask-controls { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
#moment-voice audio { width: 100%; }
#moment-voice li { background: var(--card); border-radius: 0.7rem; padding: 0.7rem 0.9rem; }

.answer-text { background: var(--bg); border-left: 3px solid var(--ember);
               padding: 0.5rem 0.8rem; border-radius: 0 0.5rem 0.5rem 0; white-space: pre-wrap; }
.ask-controls textarea { width: 100%; }

.sugg-card { background: linear-gradient(135deg, #1d2420, #221d17); border: 1px solid #4a4032;
             border-radius: 0.8rem; padding: 0.8rem 1rem; margin: 0.5rem 0; }

.story p { color: var(--muted); line-height: 1.65; }
.story, .feed-excerpt, #moment-story { line-height: 1.65; }
.story em { color: var(--ember); font-style: normal; }
.auth-tabs { display: flex; gap: 0.5rem; margin: 1.2rem 0 0.4rem; }
.tab { background: transparent; color: var(--muted); border: 1px solid #3a332a; }
.tab.active { background: var(--card); color: var(--text); border-color: var(--ember); }

a.quiet { color: var(--muted); }

.btnlike { text-decoration: none; padding: 0.5rem 0.9rem; border-radius: 0.6rem;
           border: 1px solid #3a332a; color: var(--muted); }
.feed { display: grid; gap: 0.9rem; margin-top: 0.8rem; }
.feed-card { display: block; background: var(--card); border-radius: 0.9rem;
             overflow: hidden; color: var(--text); text-decoration: none;
             border: 1px solid #2e2820; }
.feed-card img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.feed-body { padding: 0.8rem 1rem 1rem; }
.feed-body h3 { margin: 0 0 0.25rem; }
.feed-excerpt { color: var(--muted); margin: 0.4rem 0 0.2rem; }

.invite-panel { background: var(--card); border: 1px solid #4a4032; border-radius: 0.8rem;
                padding: 0.8rem 1rem; margin: 0.6rem 0; }
.invite-link { display: block; word-break: break-all; background: var(--bg);
               padding: 0.5rem; border-radius: 0.5rem; margin: 0.4rem 0 0.7rem; font-size: 0.8rem; }
.invite-qr { margin-top: 0.7rem; background: #fff; border-radius: 0.6rem; padding: 0.4rem;
             width: fit-content; }
.invite-qr svg { display: block; }

/* /preview hero (brandbook §5): the afterglow, faces private, fades to Natt */
.hero { width: 100%; max-height: 260px; object-fit: cover; border-radius: 0.9rem;
        display: block; margin: 0.6rem 0 1rem;
        mask-image: linear-gradient(to bottom, black 60%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); }