/* ============================================================
   PAGE LAYOUTS — part two
   Rewards, Membership, Community, Events, My Nook, Profile,
   Settings, FAQ, About, Contact.
   ============================================================ */

/* ================= REWARDS ================= */

.n-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--nook-s-10);
  padding: var(--nook-s-8);
  background: var(--nook-espresso-ink);
  color: var(--nook-on-dark);
  border-radius: var(--nook-r-xl);
  position: relative;
  overflow: hidden;
}
.n-balance::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -6%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(217, 162, 75, 0.18), transparent 62%);
  pointer-events: none;
}
.n-balance > * { position: relative; }
.n-balance .n-numeral { color: var(--nook-on-dark); }
.n-balance-num { margin-top: var(--nook-s-3); }
.n-balance-next { display: flex; flex-direction: column; justify-content: center; }
.n-balance-reward {
  font-family: var(--nook-font-display);
  font-size: 24px;
  font-weight: 520;
  font-variation-settings: 'opsz' 32, 'SOFT' 26, 'WONK' 0;
  margin-top: 6px;
  color: var(--nook-on-dark);
}

.n-rewards-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--nook-s-12);
  padding-top: var(--nook-s-12);
}

/* ---- Ladder ---- */

.n-ladder { position: relative; padding-left: var(--nook-s-8); }
.n-ladder-rail {
  position: absolute;
  left: 11px; top: 12px; bottom: 12px;
  width: 2px;
  background: var(--nook-cream-deep);
  border-radius: 1px;
}
.n-ladder-fill {
  width: 100%;
  background: var(--nook-amber);
  border-radius: 1px;
  transition: height var(--nook-t-slow) var(--nook-ease-out);
}
.n-ladder-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--nook-s-4);
  align-items: center;
  padding: var(--nook-s-5) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-ladder-item:last-child { border-bottom: 0; }
.n-ladder-node {
  position: absolute;
  left: calc(var(--nook-s-8) * -1 + 4px);
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--nook-cream);
  border: 2px solid var(--nook-border-strong);
  display: flex; align-items: center; justify-content: center;
}
.n-ladder-item.is-reached .n-ladder-node {
  background: var(--nook-amber);
  border-color: var(--nook-amber);
}
.n-ladder-item.is-reached .n-ladder-node .n-ico {
  width: 10px; height: 10px; stroke-width: 3;
  color: var(--nook-espresso-ink);
}
.n-ladder-item:not(.is-reached) .n-ladder-body { opacity: 0.62; }
.n-ladder-name {
  font-family: var(--nook-font-display);
  font-size: 17px;
  font-weight: 560;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
}
.n-ladder-item .n-numeral { color: var(--n-amber-600); }

.n-earn { border-top: 2px solid var(--nook-ink-strong); }
.n-earn-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--nook-s-3);
  align-items: center;
  padding: var(--nook-s-4) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-earn-ico { color: var(--nook-muted); display: flex; }
.n-earn-label { font-size: 13.5px; }
.n-earn-pts {
  font-family: var(--nook-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--nook-olive);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .n-balance { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-6); padding: var(--nook-s-6); }
  .n-rewards-grid { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-10); }
}

/* ================= MEMBERSHIP ================= */

.n-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nook-s-5);
  align-items: start;
}
.n-plan-card,
.n-plans > .n-plan {
  position: relative;
  padding: var(--nook-s-6);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  transition: transform var(--nook-t-base) var(--nook-ease-out),
              box-shadow var(--nook-t-base) var(--nook-ease-out);
}
.n-plans > .n-plan:hover { transform: translateY(-3px); box-shadow: var(--nook-shadow-3); }
.n-plans > .n-plan.is-popular {
  border-color: var(--nook-espresso);
  border-width: 2px;
  box-shadow: var(--nook-shadow-3);
}
.n-plans > .n-plan.is-current { border-color: var(--nook-olive); }
.n-plan-flag {
  position: absolute;
  top: -11px; left: var(--nook-s-6);
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--nook-espresso);
  color: var(--nook-on-dark);
  border-radius: var(--nook-r-sm);
}
.n-plan-price { margin-top: var(--nook-s-5); display: flex; align-items: baseline; gap: 2px; }
.n-plan-unit { font-size: 13px; color: var(--nook-muted); }
.n-plan-hours {
  margin-top: var(--nook-s-4);
  padding: 10px 13px;
  background: var(--nook-surface-alt);
  border-radius: var(--nook-r-sm);
  font-size: 13px;
  font-weight: 600;
}
.n-plan-list { margin-top: var(--nook-s-5); display: flex; flex-direction: column; gap: 9px; }
.n-plan-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; line-height: 1.45;
}
.n-plan-list .n-ico { color: var(--nook-olive); margin-top: 2px; }
.n-plan-list li.is-no { color: var(--nook-muted-soft); }
.n-plan-list li.is-no .n-ico { color: var(--nook-muted-soft); }

.n-compare-wrap { overflow-x: auto; }
.n-compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 13.5px; }
.n-compare th, .n-compare td {
  padding: var(--nook-s-4);
  text-align: left;
  border-bottom: 1px solid var(--nook-border);
  vertical-align: top;
}
.n-compare thead th {
  font-family: var(--nook-font-display);
  font-size: 17px;
  font-weight: 560;
  border-bottom: 2px solid var(--nook-ink-strong);
}
.n-compare tbody th { font-weight: 550; color: var(--nook-muted); width: 30%; }
.n-compare .n-yes { color: var(--nook-olive); }
.n-compare .n-no { color: var(--nook-muted-soft); }

.n-rec {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--nook-s-10);
  padding: var(--nook-s-8);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  align-items: center;
}
.n-rec-field + .n-rec-field { margin-top: var(--nook-s-6); }
.n-rec-val { font-size: 13px; font-weight: 600; color: var(--nook-brick-text); }
.n-rec-out {
  padding: var(--nook-s-6);
  background: var(--nook-surface-alt);
  border-radius: var(--nook-r-md);
  border-left: 3px solid var(--nook-brick);
}

@media (max-width: 1024px) {
  .n-plans { grid-template-columns: minmax(0, 1fr); }
  .n-rec { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-6); padding: var(--nook-s-6); }
}

/* ================= COMMUNITY ================= */

.n-community-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--nook-s-12);
  padding-top: var(--nook-s-12);
}

.n-board { border-top: 2px solid var(--nook-ink-strong); }
.n-board-row {
  display: grid;
  grid-template-columns: 30px 26px 1fr 90px auto;
  gap: var(--nook-s-3);
  align-items: center;
  padding: var(--nook-s-3) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-board-row.is-me {
  background: var(--n-amber-100);
  margin-inline: calc(var(--nook-s-3) * -1);
  padding-inline: var(--nook-s-3);
  border-radius: var(--nook-r-sm);
}
.n-board-rank {
  font-family: var(--nook-font-display);
  font-size: 14px; font-weight: 600;
  color: var(--nook-muted-soft);
  font-variant-numeric: tabular-nums;
}
.n-board-name { font-size: 14px; font-weight: 550; }
.n-board-bar { height: 3px; background: var(--nook-cream-deep); border-radius: 2px; overflow: hidden; }
.n-board-bar > span { display: block; height: 100%; background: var(--nook-olive); }
.n-board-row.is-me .n-board-bar > span { background: var(--nook-brick); }
.n-board-hrs { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.n-challenge + .n-challenge {
  margin-top: var(--nook-s-6);
  padding-top: var(--nook-s-6);
  border-top: 1px solid var(--nook-border);
}

.n-privacy { padding: var(--nook-s-5); background: var(--nook-surface-alt); border-radius: var(--nook-r-md); }
.n-privacy-row, .n-set-row {
  display: flex;
  align-items: center;
  gap: var(--nook-s-4);
  padding: var(--nook-s-3) 0;
}
.n-privacy-row + .n-privacy-row { border-top: 1px solid var(--nook-border); }

.n-achievements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--nook-s-4);
}
.n-achievement {
  display: flex;
  align-items: center;
  gap: var(--nook-s-4);
  padding: var(--nook-s-4);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-md);
  background: var(--nook-surface);
}
.n-achievement.is-locked { opacity: 0.5; background: transparent; border-style: dashed; }
.n-achievement-ico {
  width: 42px; height: 42px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--nook-surface-alt);
  color: var(--nook-muted);
}
.n-achievement.is-unlocked .n-achievement-ico { background: var(--n-amber-100); color: var(--n-amber-600); }
.n-achievement-name { font-size: 14px; font-weight: 600; }

@media (max-width: 1024px) {
  .n-community-grid { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-10); }
}
@media (max-width: 480px) {
  .n-board-row { grid-template-columns: 26px 24px 1fr auto; }
  .n-board-bar { display: none; }
}

/* ================= EVENTS ================= */

.n-events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--nook-s-6);
}
.n-event {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--nook-ink-strong);
  padding-top: var(--nook-s-4);
}
.n-event.is-joined { border-top-color: var(--nook-olive); }
.n-event-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: var(--nook-r-md);
  overflow: hidden;
  background: var(--nook-cream-deep);
}
.n-event-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--nook-t-slow) var(--nook-ease-out);
}
.n-event-photo:hover img { transform: scale(1.04); }
.n-event-date {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 11px;
  background: var(--nook-glass-strong);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
  border-radius: var(--nook-r-sm);
  line-height: 1;
}
.n-event-day {
  font-family: var(--nook-font-display);
  font-size: 20px; font-weight: 600;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
}
.n-event-mon {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--nook-muted); margin-top: 3px;
}
.n-event-body { padding-top: var(--nook-s-4); display: flex; flex-direction: column; flex: 1; }
.n-event-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nook-s-4);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--nook-s-4);
}
.n-event-foot .n-micro { display: inline-flex; align-items: center; gap: 5px; }

.n-event-detail {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--nook-s-12);
  padding-top: var(--nook-s-6);
}
.n-crumb { padding-top: var(--nook-s-8); }
.n-crumb a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--nook-muted); font-weight: 550;
}
.n-crumb a:hover { color: var(--nook-ink); }

@media (max-width: 900px) {
  .n-event-detail { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-8); }
}

/* ================= MY NOOK ================= */

.n-today-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nook-s-10);
  align-items: center;
}
.n-today-ring { position: relative; display: grid; place-items: center; }
.n-today-ring-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.n-mynook-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--nook-s-12);
  padding-top: var(--nook-s-12);
}

.n-dayplan { border-top: 1px solid var(--nook-border); }
.n-dayplan-item {
  display: grid;
  grid-template-columns: 54px 30px 1fr;
  gap: var(--nook-s-3);
  align-items: center;
  padding: var(--nook-s-3) 0;
  border-bottom: 1px solid var(--nook-border);
  position: relative;
}
.n-dayplan-time {
  font-size: 12px; font-weight: 600;
  color: var(--nook-muted); font-variant-numeric: tabular-nums;
}
.n-dayplan-node {
  width: 29px; height: 29px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--nook-border);
  background: var(--nook-surface);
  color: var(--nook-muted);
}
.n-dayplan-item.is-done .n-dayplan-node {
  background: var(--n-olive-100);
  border-color: var(--n-olive-300);
  color: var(--nook-olive);
}
.n-dayplan-item.is-suggested { opacity: 0.62; }
.n-dayplan-item.is-suggested .n-dayplan-node { border-style: dashed; }
.n-dayplan-label { font-size: 14px; font-weight: 550; }
.n-dayplan-meta { font-size: 12px; color: var(--nook-muted); margin-top: 1px; }

.n-upcoming { display: flex; flex-direction: column; gap: var(--nook-s-3); }
.n-upcoming-card {
  display: block;
  padding: var(--nook-s-4) var(--nook-s-5);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-md);
  transition: border-color var(--nook-t-base) var(--nook-ease),
              transform var(--nook-t-base) var(--nook-ease-out);
}
.n-upcoming-card:hover { border-color: var(--nook-border-strong); transform: translateX(2px); }
.n-upcoming-card .n-cell-label { margin-bottom: var(--nook-s-3); }
.n-upcoming-ico { color: var(--nook-brick); display: flex; margin-top: 2px; }

.n-usuals { display: flex; flex-direction: column; }
.n-usual {
  display: block;
  padding: var(--nook-s-4) 0;
  border-bottom: 1px solid var(--nook-border);
  transition: padding-left var(--nook-t-base) var(--nook-ease-out);
}
.n-usual:hover { padding-left: 6px; }
.n-usual .n-cell-label { margin-bottom: 6px; }
.n-usual .n-ico { color: var(--nook-muted); }

@media (max-width: 1024px) {
  .n-mynook-grid { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-10); }
}
@media (max-width: 560px) {
  .n-today-stats { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-6); justify-items: start; }
}

/* ================= PROFILE ================= */

.n-profile-head {
  display: flex;
  align-items: center;
  gap: var(--nook-s-6);
  flex-wrap: wrap;
}
.n-profile-form {
  display: flex;
  gap: var(--nook-s-3);
  align-items: flex-end;
  max-width: 520px;
}

@media (max-width: 560px) {
  .n-profile-form { flex-direction: column; align-items: stretch; }
}

/* ================= SETTINGS ================= */

.n-settings {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--nook-s-12);
  padding-top: var(--nook-s-10);
}
.n-set-nav {
  position: sticky;
  top: calc(var(--nook-nav-h) + var(--nook-s-5));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.n-set-nav a {
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--nook-muted);
  border-radius: var(--nook-r-sm);
  border-left: 2px solid transparent;
  transition: all var(--nook-t-base) var(--nook-ease);
}
.n-set-nav a:hover {
  color: var(--nook-ink);
  background: var(--nook-surface-alt);
  border-left-color: var(--nook-border-strong);
}

.n-set-main { max-width: 640px; }
.n-set-section { padding-bottom: var(--nook-s-10); scroll-margin-top: calc(var(--nook-nav-h) + 20px); }
.n-set-title {
  font-family: var(--nook-font-display);
  font-size: 20px;
  font-weight: 560;
  font-variation-settings: 'opsz' 28, 'SOFT' 22, 'WONK' 0;
  padding-bottom: var(--nook-s-3);
  border-bottom: 2px solid var(--nook-ink-strong);
  margin-bottom: var(--nook-s-2);
}
.n-set-row + .n-set-row { border-top: 1px solid var(--nook-border); }
.n-set-label { font-size: 14px; font-weight: 550; }
.n-set-block { padding: var(--nook-s-4) 0; border-top: 1px solid var(--nook-border); }

@media (max-width: 900px) {
  .n-settings { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-6); }
  .n-set-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: var(--nook-s-3);
    border-bottom: 1px solid var(--nook-border);
  }
  .n-set-nav a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
}

/* ================= FAQ / ABOUT / CONTACT ================= */

.n-faq-cta {
  display: flex;
  align-items: center;
  gap: var(--nook-s-5);
  flex-wrap: wrap;
  padding: var(--nook-s-6);
  background: var(--nook-surface-alt);
  border-radius: var(--nook-r-lg);
}

.n-about-gallery {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--nook-s-4);
}
.n-about-story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--nook-s-12);
}
.n-about-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--nook-s-5);
}
.n-floorplan--static { pointer-events: none; }

.n-legend-swatch.zone-quiet     { background: var(--n-olive-300); border-color: var(--n-olive-600); }
.n-legend-swatch.zone-window    { background: var(--n-amber-500); border-color: var(--n-amber-600); }
.n-legend-swatch.zone-community { background: var(--n-brick-300); border-color: var(--n-brick-500); }
.n-legend-swatch.zone-lounge    { background: var(--n-clay-500); border-color: var(--n-clay-500); }
.n-legend-swatch.zone-booth     { background: var(--n-slate-500); border-color: var(--n-slate-500); }

.n-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--nook-s-6);
}
.n-amenity { display: flex; gap: var(--nook-s-4); align-items: flex-start; }
.n-amenity-ico {
  width: 44px; height: 44px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-md);
  color: var(--nook-olive);
  background: var(--nook-surface);
}
.n-about-find {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--nook-s-12);
  padding: var(--nook-s-8);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
}

.n-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--nook-s-12);
  padding-top: var(--nook-s-10);
}
.n-contact-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nook-s-4); }
.n-contact-side { padding-left: var(--nook-s-8); border-left: 1px solid var(--nook-border); }
.n-contact-detail {
  display: flex;
  gap: var(--nook-s-4);
  align-items: flex-start;
  padding: var(--nook-s-4) 0;
  border-bottom: 1px solid var(--nook-border);
  transition: padding-left var(--nook-t-base) var(--nook-ease-out);
}
a.n-contact-detail:hover { padding-left: 5px; }
.n-contact-ico {
  width: 32px; height: 32px;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--nook-surface-alt);
  color: var(--nook-muted);
}
.n-contact-social { padding-top: var(--nook-s-5); }
.n-contact-social .n-cell-label { margin-bottom: var(--nook-s-3); }
.n-contact-note {
  margin-top: var(--nook-s-6);
  padding: var(--nook-s-4);
  background: var(--nook-surface-alt);
  border-radius: var(--nook-r-sm);
  border-left: 2px solid var(--nook-amber);
}
.n-contact-sent {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--nook-s-10) 0;
}
.n-contact-sent .n-row { justify-content: center; }

@media (max-width: 1024px) {
  .n-about-story, .n-about-find, .n-contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-8); }
  .n-contact-side {
    padding-left: 0; border-left: 0;
    padding-top: var(--nook-s-8); border-top: 1px solid var(--nook-border);
  }
}
@media (max-width: 700px) {
  .n-about-gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .n-about-photo-lead { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .n-contact-cols { grid-template-columns: minmax(0, 1fr); }
}