/* HeroLog — community adventure weblog. Theme-aware default look; the exclusive
   "cartoon Hero" theme (body.cartoon) turns it into a comic-book skin, unlocked
   for Heroes and their followers. */
.herolog-body { margin: 0; background: var(--hwy-sand); color: var(--hwy-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

.hl-header { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--hwy-header-bg); color: #fff; position: sticky; top: 0; z-index: 10; }
.hl-brand { color: #fff; text-decoration: none; font-weight: 800; }
.hl-title { font-weight: 800; font-size: 18px; }
.hl-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hl-nav a { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 14px; }
.hl-cartoon-btn { background: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.hl-cartoon-btn.is-on { background: #ffd83d; color: #1b1b1b; border-color: #1b1b1b; }

.hl-main { max-width: 640px; margin: 0 auto; padding: 16px; min-height: 70vh; }
.hl-card { background: var(--hwy-card); border: 1px solid var(--hwy-line); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.hl-center { text-align: center; }
.hl-muted { color: var(--hwy-muted); }
.hl-card h1 { font-size: 22px; margin: 0 0 8px; }
.hl-card h2 { font-size: 18px; margin: 0 0 8px; }
.hl-cta { display: inline-block; background: var(--hwy-green); color: #fff; border: none; border-radius: 10px; padding: 12px 18px; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: none; }
.hl-cta:hover { filter: brightness(1.08); }

.hl-form { display: flex; flex-direction: column; gap: 10px; }
.hl-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--hwy-muted); }
.hl-form input, .hl-form textarea { font: inherit; font-size: 15px; padding: 10px; border: 1px solid var(--hwy-line); border-radius: 10px; background: var(--hwy-sand); color: var(--hwy-ink); }
.hl-form textarea { resize: vertical; }
.hl-compose-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.hl-compose-row { display: flex; gap: 8px; align-items: center; }
.hl-grow { flex: 1; }
.hl-mood { width: 92px; text-align: center; }
.hl-avatar { font-size: 26px; line-height: 1; }
.hl-file, .hl-attach { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--hwy-accent); cursor: pointer; background: var(--hwy-subtle); border-radius: 10px; padding: 8px 12px; }
.hl-attach { color: var(--hwy-muted); }
.hl-photo-preview { position: relative; margin-top: 4px; }
.hl-photo-preview img { max-width: 100%; border-radius: 12px; display: block; }
.hl-photo-preview button { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.hl-error { color: var(--hwy-error); font-size: 13px; min-height: 16px; margin: 0; }

.hl-tabs { display: flex; gap: 6px; background: var(--hwy-subtle); border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.hl-tab { flex: 1; border: none; background: none; padding: 9px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--hwy-muted); cursor: pointer; }
.hl-tab.is-active { background: var(--hwy-card); color: var(--hwy-accent); }

.hl-feed { display: flex; flex-direction: column; gap: 14px; }
.hl-post { background: var(--hwy-card); border: 1px solid var(--hwy-line); border-radius: 16px; padding: 14px 16px; }
.hl-post-head { display: flex; align-items: center; gap: 10px; }
.hl-post-who { display: flex; flex-direction: column; line-height: 1.2; }
.hl-handle { font-size: 12px; color: var(--hwy-muted); }
.hl-follow { margin-left: auto; background: var(--hwy-green); color: #fff; border: none; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.hl-follow.is-following { background: var(--hwy-subtle); color: var(--hwy-ink); }
.hl-post-title { font-size: 17px; margin: 10px 0 4px; }
.hl-mood-only { font-size: 28px; }
.hl-post-body { font-size: 15px; line-height: 1.5; margin: 6px 0; white-space: pre-wrap; }
.hl-post-photo { max-width: 100%; border-radius: 12px; display: block; margin: 8px 0; }
.hl-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 8px 0; border-radius: 12px; overflow: hidden; }
.hl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hl-trip { display: inline-block; font-size: 13px; font-weight: 700; color: var(--hwy-accent); background: var(--hwy-subtle); border-radius: 999px; padding: 5px 12px; margin: 6px 0; }
.hl-post-foot { margin-top: 8px; }
.hl-like { background: none; border: 1px solid var(--hwy-line); border-radius: 999px; padding: 5px 12px; font-size: 14px; cursor: pointer; color: var(--hwy-muted); }
.hl-like.is-liked { color: #e0245e; border-color: #e0245e; }

/* ─────────────────────────  CARTOON HERO THEME  ───────────────────────── */
body.cartoon { background: #ffe66d; background-image: radial-gradient(rgba(0,0,0,0.08) 1.5px, transparent 1.6px); background-size: 14px 14px; }
body.cartoon .hl-header { background: #d6002a; border-bottom: 4px solid #1b1b1b; }
body.cartoon .hl-card, body.cartoon .hl-post {
   border: 3px solid #1b1b1b !important;
   border-radius: 18px;
   box-shadow: 6px 6px 0 #1b1b1b;
   background: #fffbe8;
}
body.cartoon .hl-card h1, body.cartoon .hl-card h2, body.cartoon .hl-post-title {
   font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-shadow: 2px 2px 0 #ffd83d;
}
body.cartoon .hl-cta, body.cartoon .hl-follow { border: 3px solid #1b1b1b; box-shadow: 3px 3px 0 #1b1b1b; background: #2b6cff; color: #fff; text-transform: uppercase; }
body.cartoon .hl-tab.is-active { border: 2px solid #1b1b1b; }
body.cartoon .hl-title, body.cartoon .hl-brand { text-shadow: 2px 2px 0 #1b1b1b; }
body.cartoon .hl-avatar { filter: drop-shadow(2px 2px 0 #1b1b1b); }
body.cartoon .hl-trip { border: 2px solid #1b1b1b; background: #ffd83d; color: #1b1b1b; }
body.cartoon .hl-post-foot .hl-like { border: 2px solid #1b1b1b; font-weight: 800; }

/* ── Security Hero: Hall-of-Fame badge + a subtle cape glow ───────────── */
.hl-sec-badge {
   display: inline-block;
   font-size: 10.5px;
   font-weight: 800;
   line-height: 1;
   padding: 3px 8px;
   margin: 2px 0 0;
   border-radius: 999px;
   color: #fff;
   background: linear-gradient(135deg, #1f8a5b, #35c184);
   box-shadow: 0 1px 4px rgba(31, 138, 91, 0.4);
   vertical-align: middle;
   white-space: nowrap;
}
/* The "cape": a heroic emerald aura on a Security Hero's avatar. */
.hl-post:has(.hl-sec-badge) .hl-avatar,
#hlMeName .hl-sec-badge ~ .hl-sec-badge {
   filter: drop-shadow(0 0 6px rgba(53, 193, 132, 0.75));
}

/* Earned-badge strip on Hero profiles + post authors. */
.hl-badges {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 3px;
   vertical-align: middle;
   margin-left: 5px;
}
.hl-badge {
   font-size: 13px;
   line-height: 1;
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
   cursor: default;
}
.hl-badge-more {
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
   padding: 2px 5px;
   border-radius: 999px;
   background: rgba(120, 110, 160, 0.22);
   color: inherit;
   opacity: 0.8;
}

/* ── HeroLog identity (extends the cockpit/badges guide-sign language) ──────────
   The signed-out invite is an overhead guide sign; posts read like entries in a
   road logbook. ── */
#hlSignedOut {
   /* Fixed guide-sign green — the theme token goes light-mint in dark mode and
      would fail white-text contrast. */
   background: linear-gradient(178deg, #12694f, #0b3d2e);
   border: none;
   color: #fff;
   padding: 32px 30px;
   box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.9),
      inset 0 0 0 4px var(--hwy-green, #0b3d2e),
      0 24px 52px -20px color-mix(in srgb, var(--hwy-green, #0b3d2e) 82%, black);
}
#hlSignedOut h1 { color: #fff; letter-spacing: -0.3px; }
#hlSignedOut .hl-muted { color: rgba(255, 255, 255, 0.85); }
#hlSignedOut .hl-cta { background: #f4b740; color: #0b3d2e; margin-top: 6px; }
#hlSignedOut .hl-cta:hover { filter: brightness(1.05); }

/* Active tab gets the amber underline of a road marker. */
/* --hwy-accent, not --hwy-green: same guide-sign green in light, but green is a
   background token that goes too dark to read as ink on dark cards. */
.hl-tab.is-active { color: var(--hwy-accent); box-shadow: inset 0 -2px 0 #f4b740; }

/* Posts as logbook entries: author avatar as a coin, an amber route-tick on the title. */
.hl-post { box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.25); }
.hl-post .hl-avatar {
   display: inline-flex; align-items: center; justify-content: center;
   width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; font-size: 22px;
   background: color-mix(in srgb, var(--hwy-green) 8%, #fff);
   border: 1px solid color-mix(in srgb, var(--hwy-green) 25%, var(--hwy-line));
}
.hl-post-title { position: relative; padding-left: 14px; }
.hl-post-title::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 4px; border-radius: 2px; background: #f4b740; }