/* Lore — layout: header, nav, footer, tab bar. */

.lore-header {
	position: sticky; top: 0; z-index: var(--z-header);
	height: var(--header-h);
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}
.lore-header__inner {
	/* max-width/margin/padding-left/right: shared .lore-container rule (base.css) */
	height: 100%;
	display: flex; align-items: center; gap: var(--space-4);
}
.lore-header__logo { color: var(--ember); flex: none; display: flex; align-items: center; min-height: 44px; }
.lore-logo { height: 26px; width: auto; }

.lore-header__nav { display: none; align-items: center; gap: var(--space-2); }
@media (min-width: 900px) { .lore-header__nav { display: flex; } }

.lore-nav-item { position: relative; }
.lore-nav-link {
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: 0; cursor: pointer; padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md); font-weight: 600;
	/* R5 token parity: Wattpad's nav links are 16px/600 (spec §C.2); ours
	   was 14.4px. */
	font-size: 1rem;
}
.lore-nav-link:hover { background: var(--paper-alt); }

.lore-mega-menu {
	position: absolute; top: calc(100% + 8px); left: 0;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); padding: var(--space-4); min-width: 260px; z-index: var(--z-menu);
}
.lore-mega-menu[hidden] { display: none; }
.lore-menu { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.lore-menu li a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: .9rem; }
.lore-menu li a:hover { background: var(--paper-alt); color: var(--ember-text); }

.lore-header__search {
	flex: 1 1 auto; max-width: 420px; margin: 0 auto; position: relative; display: none;
}
@media (min-width: 700px) { .lore-header__search { display: block; } }
.lore-header__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none; }
.lore-header__search input {
	width: 100%; height: 44px;
	/* R5 token parity (spec §C.7): Wattpad's header search is 320x42, radius
	   6px, NOT a pill — was var(--radius-pill) here, a real mismatch. */
	border-radius: var(--radius-sm); border: 1px solid var(--line);
	background: var(--paper-alt); padding: 0 var(--space-4) 0 40px; font-size: .9rem; color: var(--ink);
}
.lore-header__search input:focus { background: var(--white); border-color: var(--teal); }

.lore-header__actions {
	display: flex; align-items: center; gap: var(--space-1); flex: none;
	/* Round 2 audit E-12: on mobile (nav + search both display:none below
	   their breakpoints) this was the only other flex child of
	   .lore-header__inner besides the logo, and with no justify-content
	   the row stayed left-aligned next to the logo instead of being pushed
	   to the header's right edge, so the parent's own right padding never
	   applied to it. margin-left:auto pushes it flush against that
	   padding; the explicit padding-right here is a second, independent
	   guarantee of a real gutter for the right-most control even if a
	   future change fills the row enough to overflow, plus the safe-area
	   inset for notched/rounded-corner phones (contract §5). */
	margin-left: auto;
	padding-right: max(var(--space-1), env(safe-area-inset-right, 0px));
}

/* Round 2 audit E-12 continued: even with the coin-count collapsed to an
   icon (base.css, <=420px) the logged-in header's full icon row (language +
   coins + library + bell + avatar) still slightly overflowed at the
   narrowest supported width (360px, contract §"MOBILE ... no horizontal
   scroll at 360-430px") — and an overflowing flex row eats its own trailing
   padding/margin entirely (confirmed live), which is what actually produced
   the zero-gutter symptom. Tighten the header's own horizontal rhythm at
   this width rather than shrinking any touch target below the 44px floor. */
@media (max-width: 420px) {
	.lore-header__inner { gap: var(--space-3); padding: 0 var(--space-3); }
	.lore-header__actions { gap: 0; }
}
/* R4 responsive audit (item 2): the header still overflowed
   .lore-header__inner at 320px even with the E-12 fixes above, in BOTH
   auth states, measured live:
     - logged out (lang switcher + "Log in" + "Sign up"): logo(113.75) +
       gap(12) + actions(194.7) = 320.4, already past the 296px available
       inside the viewport's own 12+12 padding.
     - logged in (lang + coins + library + bell + avatar, 5x44px icon
       buttons — a hard floor, none of them can shrink below the 44px tap
       target): 12+113.75+12+220+12 = 369.75, a full 42px real page-level
       horizontal scroll (confirmed live: documentElement.scrollWidth 362
       at a 320 viewport, bodyOverflowX already hidden so it's clipped
       rather than scrollable, but the header row itself still visibly
       overflowed).
   The 5-icon logged-in row is the harder constraint, so this tier is sized
   for that: wordmark down to 16px tall (aspect-ratio preserved, width:
   auto — still legible, just small, only below 380px), row gap and side
   padding both down to --space-2. None of this touches any tap target's
   own size (the .lore-btn--sm padding trim only affects its own left/right
   padding, not min-height). Logged-in total becomes 8+70+8+220+8=314px,
   6px of headroom left inside a 320px viewport. */
@media (max-width: 380px) {
	.lore-header__logo .lore-logo { height: 16px; }
	.lore-header__inner { gap: var(--space-2); padding: 0 var(--space-2); }
	.lore-header__actions .lore-btn--sm { padding: 0 10px; }
}
.lore-icon-btn--badge { position: relative; }
.lore-avatar-btn { background: none; border: 0; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.lore-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }

.lore-dropdown {
	position: absolute; top: calc(100% + 8px); right: 0;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); min-width: 220px; padding: var(--space-2); z-index: var(--z-menu);
}
.lore-dropdown[hidden] { display: none; }
.lore-dropdown a, .lore-dropdown button {
	display: flex; align-items: center; gap: var(--space-3);
	width: 100%; padding: var(--space-3); border-radius: var(--radius-md);
	background: none; border: 0; cursor: pointer; text-align: left; font-size: .9rem;
}
.lore-dropdown a:hover, .lore-dropdown button:hover { background: var(--paper-alt); }
.lore-dropdown__notice { background: var(--ember-light); color: var(--ember-dark); border-radius: var(--radius-md); padding: var(--space-3); font-size: .8rem; margin-bottom: var(--space-2); }
.lore-dropdown__logout { color: var(--danger); }

.lore-toasts {
	position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 12px); transform: translateX(-50%);
	z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px);
}
@media (min-width: 700px) { .lore-toasts { bottom: 24px; } }
.lore-toast {
	background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg); font-size: .875rem; display: flex; align-items: center; gap: 8px;
	animation: lore-toast-in .18s ease;
}
.lore-toast--error { background: var(--danger); }
.lore-toast--success { background: var(--teal-dark); }
@keyframes lore-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.lore-unverified-banner {
	display: flex; align-items: center; justify-content: center; gap: var(--space-3);
	flex-wrap: wrap; background: var(--ember-light); color: var(--ember-dark);
	padding: var(--space-2) var(--space-4); font-size: .85rem; text-align: center;
}

.lore-main { min-height: 60vh; padding-bottom: calc(var(--tabbar-h) + var(--space-8) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .lore-main { padding-bottom: var(--space-10); } }

/* Footer */
.lore-footer { background: var(--paper-alt); border-top: 1px solid var(--line); padding: var(--space-10) var(--space-4) calc(var(--tabbar-h) + var(--space-6)); }
@media (min-width: 900px) { .lore-footer { padding-bottom: var(--space-10); } }
.lore-footer__inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.lore-footer__logo { color: var(--ember); display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--space-2); }
.lore-footer__tagline { color: var(--ink-faint); font-size: .9rem; }
.lore-footer__menu { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); padding: 0; margin: var(--space-4) 0; }
.lore-footer__menu a { font-size: .85rem; color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; padding: 4px 8px; }
.lore-footer__menu a:hover { color: var(--ember-text); }
.lore-footer__copy { font-size: .75rem; color: var(--ink-faint); }

/* Mobile bottom tab bar */
.lore-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar);
	display: flex; height: var(--tabbar-h);
	background: var(--white); border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 900px) { .lore-tabbar { display: none; } }
.lore-tabbar__item {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; color: var(--ink-faint); font-size: .75rem; font-weight: 600; min-height: 44px;
}
.lore-tabbar__item .lore-icon { width: 22px; height: 22px; }
.lore-tabbar__item.is-active { color: var(--ember-text); }

/* ===== BEGIN notification badge CSS (tab-bar only — header bell badge
   already styled by base.css's .lore-badge + layout.css's own
   .lore-icon-btn--badge above; this block only adds the tab-bar variant). =====
   The Profile tab item stacks an icon above a text label (flex-direction:
   column, see .lore-tabbar__item above), so .lore-badge's plain
   `position:absolute` (relative to the nearest positioned ancestor) would
   anchor to the whole item — including the "Profile" text below the icon —
   and drift off the icon at some widths. .lore-tabbar__icon-wrap gives the
   badge a tight, icon-only positioning context instead, keeping the tab bar
   at its existing 5 items with no layout shift. */
.lore-tabbar__icon-wrap { position: relative; display: inline-flex; }
/* R4 responsive audit (item 3): -6px/-8px let the badge poke a full third of
   the 22px icon's own width past .lore-tabbar__icon-wrap's right edge
   (measured overflow 8px, every mobile width). A small corner overlap is
   still the right look for a notification dot, just not that much of one —
   tightened to -2px, which sits inside the harness's (and every browser's)
   sub-pixel rounding tolerance while still reading as "badge at the
   icon's corner". */
.lore-badge--tabbar { top: -2px; right: -2px; }
/* ===== END notification badge CSS ===== */