/* ============================================================
   SHELL — header, panels, mobile tab bar, footer
   ============================================================ */

/* ---------------- Header ---------------- */

.n-header {
  position: sticky;
  top: 0;
  z-index: var(--nook-z-nav);
  background: var(--nook-glass-strong);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
  border-bottom: 1px solid var(--nook-border);
}

.n-navbar {
  max-width: var(--nook-max-wide);
  margin-inline: auto;
  padding: 0 var(--nook-gutter);
  height: var(--nook-nav-h);
  display: flex;
  align-items: center;
  gap: var(--nook-s-8);
}

.n-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.n-brand .n-mark { color: var(--nook-ink-strong); }

.n-navlinks {
  display: flex;
  align-items: center;
  gap: var(--nook-s-6);
  flex: 1;
}
.n-navlinks a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--nook-muted);
  padding: 6px 0;
  transition: color var(--nook-t-base) var(--nook-ease);
}
.n-navlinks a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--nook-brick);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nook-t-base) var(--nook-ease-out);
}
.n-navlinks a:hover { color: var(--nook-ink); }
.n-navlinks a.is-active { color: var(--nook-ink-strong); font-weight: 600; }
.n-navlinks a.is-active::after { transform: scaleX(1); }

.n-navright {
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
  flex: none;
  position: relative;
}

.n-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: var(--nook-r-pill);
  background: var(--n-amber-100);
  color: var(--n-amber-600);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  transition: border-color var(--nook-t-base) var(--nook-ease);
}
.n-points:hover { border-color: var(--n-amber-200); }

.n-icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nook-r-md);
  color: var(--nook-ink);
  transition: background-color var(--nook-t-base) var(--nook-ease);
}
.n-icon-btn:hover { background: rgba(36, 26, 18, 0.055); }

.n-notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: var(--nook-r-pill);
  background: var(--nook-brick);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  border: 1.5px solid var(--nook-cream);
}

.n-avatar[aria-expanded] { cursor: pointer; }

/* ---------------- Pop panels ---------------- */

.n-panel-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  box-shadow: var(--nook-shadow-4);
  overflow: hidden;
  display: none;
  animation: n-pop-in var(--nook-t-base) var(--nook-ease-out) both;
}
.n-panel-pop.is-open { display: block; }
@keyframes n-pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.n-notif-panel { width: 340px; }

.n-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nook-s-3);
  padding: var(--nook-s-4) var(--nook-s-5);
  border-bottom: 1px solid var(--nook-border);
}

.n-linkish {
  font-size: 12px;
  color: var(--nook-brick-text);
  font-weight: 550;
  cursor: pointer;
}
.n-linkish:hover { text-decoration: underline; }

.n-pop-links { padding: var(--nook-s-2); }
.n-pop-link {
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--nook-r-sm);
  font-size: 13.5px;
  color: var(--nook-ink);
  cursor: pointer;
  transition: background-color var(--nook-t-fast) var(--nook-ease);
}
.n-pop-link:hover { background: var(--nook-surface-alt); }
.n-pop-link .n-ico { color: var(--nook-muted); }

.n-pop-foot { border-top: 1px solid var(--nook-border); padding: var(--nook-s-2); }
.n-pop-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--nook-s-10) var(--nook-s-5); color: var(--nook-muted-soft);
}

.n-notif-list { max-height: 380px; overflow-y: auto; }
.n-notif {
  display: flex;
  gap: var(--nook-s-3);
  padding: var(--nook-s-4) var(--nook-s-5);
  border-bottom: 1px solid var(--nook-border);
  align-items: flex-start;
}
.n-notif:last-of-type { border-bottom: 0; }
.n-notif .n-dot { margin-top: 6px; }
.n-notif.is-read { opacity: 0.6; }
.n-notif-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.n-notif-body  { font-size: 12.5px; color: var(--nook-muted); line-height: 1.45; margin-top: 2px; }
.n-notif-time  { font-size: 11px; color: var(--nook-muted-soft); margin-top: 4px; }
.n-notif-clear { display: block; width: 100%; padding: 12px; text-align: center; border-top: 1px solid var(--nook-border); }

/* ---------------- Mobile tab bar ---------------- */

.n-tabbar { display: none; }

@media (max-width: 768px) {
  .n-navlinks { display: none; }
  .n-nav-cta  { display: none; }
  .n-navbar   { gap: var(--nook-s-4); justify-content: space-between; }
  .n-navright { gap: var(--nook-s-2); }

  .n-panel-pop {
    position: fixed;
    top: var(--nook-nav-h);
    left: var(--nook-s-3);
    right: var(--nook-s-3);
    width: auto;
    max-height: calc(100vh - var(--nook-nav-h) - var(--nook-tabbar-h) - 24px);
    overflow-y: auto;
  }

  .n-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--nook-z-tabbar);
    height: var(--nook-tabbar-h);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    background: var(--nook-glass-strong);
    -webkit-backdrop-filter: var(--nook-blur);
    backdrop-filter: var(--nook-blur);
    border-top: 1px solid var(--nook-border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .n-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    font-size: 10px;
    font-weight: 550;
    letter-spacing: 0.01em;
    color: var(--nook-muted);
    transition: color var(--nook-t-base) var(--nook-ease);
  }
  .n-tab-item.is-active { color: var(--nook-ink-strong); }
  .n-tab-item.is-active .n-ico { color: var(--nook-brick); }

  /* The middle "Book" tab is raised — the one action worth a thumb. */
  .n-tab-item.is-primary {
    position: relative;
  }
  .n-tab-item.is-primary .n-ico {
    width: 40px; height: 40px;
    padding: 10px;
    margin-top: -18px;
    border-radius: var(--nook-r-lg);
    background: var(--nook-brick);
    color: #fff;
    stroke-width: 1.4;
    box-shadow: var(--nook-shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 2px solid var(--nook-cream);
  }
  .n-tab-item.is-primary.is-active .n-ico { background: var(--n-brick-600); }
}

/* ---------------- Footer ---------------- */

.n-footer {
  background: var(--nook-espresso-ink);
  color: var(--nook-on-dark);
  padding-block: var(--nook-s-20) var(--nook-s-8);
  margin-top: var(--nook-s-24);
}
@media (max-width: 768px) {
  .n-footer { margin-bottom: var(--nook-tabbar-h); }
}

.n-foot-top {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--nook-s-16);
  padding-bottom: var(--nook-s-12);
}
.n-foot-tag {
  font-family: var(--nook-font-display);
  font-size: 20px;
  line-height: 1.3;
  font-variation-settings: 'opsz' 30, 'SOFT' 34, 'WONK' 1;
  color: var(--nook-on-dark);
  margin-top: var(--nook-s-5);
  max-width: 24ch;
}
.n-foot-addr {
  margin-top: var(--nook-s-5);
  font-size: 13px;
  line-height: 1.7;
  color: var(--nook-on-dark-muted);
}

.n-foot-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nook-s-8);
}
.n-foot-col h3 { margin-bottom: var(--nook-s-4); }
.n-foot-col li + li { margin-top: 10px; }
.n-foot-col a {
  font-size: 13.5px;
  color: var(--nook-on-dark-muted);
  transition: color var(--nook-t-base) var(--nook-ease);
}
.n-foot-col a:hover { color: var(--nook-on-dark); }

.n-foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nook-s-4);
  flex-wrap: wrap;
  padding-top: var(--nook-s-6);
  border-top: 1px solid var(--nook-border-dark);
  font-size: 12px;
  color: var(--nook-on-dark-muted);
}

.n-lang-select {
  appearance: none;
  background: transparent;
  border: 1px solid var(--nook-border-dark);
  border-radius: var(--nook-r-sm);
  color: var(--nook-on-dark-muted);
  font-size: 12px;
  padding: 6px 28px 6px 10px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23B3A890' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.n-lang-select:hover { color: var(--nook-on-dark); border-color: rgba(255, 252, 246, 0.32); }
.n-lang-select option { color: var(--nook-ink); }

@media (max-width: 1024px) {
  .n-foot-top { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-10); }
}
@media (max-width: 620px) {
  .n-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nook-s-8) var(--nook-s-6); }
  .n-footer { padding-block: var(--nook-s-16) var(--nook-s-6); }
}