/* ============================================================
   BESPOKE NOOK BLOCKS
   ============================================================ */

/* ---------------- Section header ---------------- */

.n-sechead { margin-bottom: var(--nook-s-10); }
.n-sechead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nook-s-6);
  margin-top: var(--nook-s-3);
}
.n-sechead-row::before { content: none; }

@media (max-width: 620px) {
  .n-sechead-row { flex-direction: column; align-items: flex-start; gap: var(--nook-s-4); }
  .n-sechead { margin-bottom: var(--nook-s-8); }
}

/* ---------------- Today block ----------------
   A ruled strip, not three cards. The rules do the dividing. */

.n-today {
  border-top: 2px solid var(--nook-ink-strong);
  border-bottom: 1px solid var(--nook-border);
  padding-top: var(--nook-s-5);
}
.n-today-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nook-s-6);
  flex-wrap: wrap;
  padding-bottom: var(--nook-s-6);
}
.n-today-greet {
  font-family: var(--nook-font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 480;
  font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 1;
  margin-top: var(--nook-s-2);
  color: var(--nook-ink-strong);
}

.n-today-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--nook-border);
}
.n-today-cell {
  padding: var(--nook-s-6) var(--nook-s-6) var(--nook-s-6) 0;
  border-right: 1px solid var(--nook-border);
}
.n-today-cell:last-child { border-right: 0; }
.n-today-cell + .n-today-cell { padding-left: var(--nook-s-6); }

.n-cell-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nook-muted-soft);
  margin-bottom: var(--nook-s-4);
}
.n-cell-unit { font-size: 14px; color: var(--nook-muted); font-family: var(--nook-font-body); letter-spacing: 0; }
.n-cell-strong { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.n-cell-note {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--nook-muted); margin-top: 5px;
}
.n-cell-note .n-ico { color: var(--nook-brick); }
.n-cell-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--nook-brick-text);
  margin-top: var(--nook-s-3);
  transition: gap var(--nook-t-base) var(--nook-ease-out);
}
.n-cell-link:hover { gap: 7px; }

@media (max-width: 860px) {
  .n-today-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .n-today-cell:nth-child(2) { border-right: 0; }
  .n-today-cell:nth-child(3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--nook-border);
    padding-left: 0;
  }
}
@media (max-width: 560px) {
  .n-today-grid { grid-template-columns: minmax(0, 1fr); }
  .n-today-cell { border-right: 0; padding: var(--nook-s-5) 0; border-top: 1px solid var(--nook-border); }
  .n-today-cell:first-child { border-top: 0; }
  .n-today-cell + .n-today-cell { padding-left: 0; }
  .n-today-head { padding-bottom: var(--nook-s-5); }
  .n-today-head .n-row { width: 100%; }
  .n-today-head .n-btn { flex: 1; }
}

/* ---------------- Live at Nook ----------------
   Dark, ambient. The one dark panel on the home page. */

.n-live {
  background: var(--nook-espresso-ink);
  color: var(--nook-on-dark);
  border-radius: var(--nook-r-xl);
  padding: var(--nook-s-8);
  overflow: hidden;
  position: relative;
}
.n-live::after {
  /* a soft warm glow, like a lamp in the corner of the room */
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(217, 162, 75, 0.16), transparent 62%);
  pointer-events: none;
}
.n-live-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nook-s-5);
  flex-wrap: wrap;
  position: relative;
}
.n-live-sentence {
  font-family: var(--nook-font-display);
  font-size: 17px;
  color: var(--nook-on-dark-muted);
  font-variation-settings: 'opsz' 24, 'SOFT' 34, 'WONK' 0;
}
.n-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nook-s-6);
  margin-top: var(--nook-s-8);
  position: relative;
}
.n-live-stat { display: flex; flex-direction: column; gap: var(--nook-s-2); }
.n-live-stat .n-numeral { color: var(--nook-on-dark); }
.n-live-stat .n-numeral.is-word { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em; }
.n-live-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--nook-on-dark-muted);
}

.n-live-foot {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--nook-s-5);
  margin-top: var(--nook-s-8);
  padding-top: var(--nook-s-6);
  border-top: 1px solid var(--nook-border-dark);
  position: relative;
}
.n-live-zone { display: flex; flex-direction: column; gap: 7px; }
.n-live-zone-name { font-size: 11.5px; color: var(--nook-on-dark-muted); }
.n-live-zone-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255, 252, 246, 0.14);
  overflow: hidden;
}
.n-live-zone-bar > span {
  display: block; height: 100%;
  background: var(--nook-amber);
  transition: width var(--nook-t-slow) var(--nook-ease-out);
}
.n-live-zone-n { font-size: 11px; color: var(--nook-on-dark-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .n-live { padding: var(--nook-s-6); border-radius: var(--nook-r-lg); }
  .n-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nook-s-5); }
  .n-live-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .n-live-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Stats ---------------- */

.n-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--nook-s-8);
}
.n-stat {
  display: flex;
  flex-direction: column;
  gap: var(--nook-s-2);
  padding-top: var(--nook-s-4);
  border-top: 1px solid var(--nook-border);
}
.n-stat-value { display: flex; align-items: baseline; gap: 3px; }
.n-stat-unit {
  font-family: var(--nook-font-body);
  font-size: 14px; font-weight: 500;
  color: var(--nook-muted); letter-spacing: 0;
}
.n-stat-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--nook-muted);
}
.n-stat-note { font-size: 12.5px; color: var(--nook-muted-soft); }

/* ---------------- Timeline ---------------- */

.n-timeline { position: relative; }
.n-tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: start;
  gap: var(--nook-s-4);
  padding: var(--nook-s-4) 0;
}
.n-tl-item::before {
  /* the connecting line */
  content: '';
  position: absolute;
  left: 16px; top: 34px; bottom: -8px;
  width: 1px;
  background: var(--nook-border);
}
.n-tl-item:last-child::before { display: none; }

.n-tl-node {
  width: 33px; height: 33px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  color: var(--nook-muted);
  position: relative; z-index: 1;
}
.n-tl-title { font-size: 14px; font-weight: 550; line-height: 1.35; }
.n-tl-meta  { font-size: 12.5px; color: var(--nook-muted); margin-top: 2px; }
.n-tl-time  { font-size: 11.5px; color: var(--nook-muted-soft); white-space: nowrap; padding-top: 2px; }

@media (max-width: 480px) {
  .n-tl-item { grid-template-columns: 30px minmax(0, 1fr); }
  .n-tl-time { grid-column: 2; }
  .n-tl-item::before { left: 14px; }
  .n-tl-node { width: 29px; height: 29px; }
}

/* ---------------- Rewards bar ---------------- */

.n-rewardbar {
  padding: var(--nook-s-6);
  background: var(--n-amber-100);
  border-radius: var(--nook-r-lg);
  border: 1px solid var(--n-amber-200);
}
.n-rewardbar.is-compact { padding: var(--nook-s-5); }
.n-rewardbar .n-cell-label { color: var(--n-amber-600); }

/* ---------------- Chart ---------------- */

.n-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 130px;
}
.n-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 8px;
}
.n-chart-bar {
  width: 100%;
  max-width: 40px;
  background: var(--nook-olive);
  border-radius: var(--nook-r-xs) var(--nook-r-xs) 0 0;
  transition: height var(--nook-t-slow) var(--nook-ease-out), background-color var(--nook-t-base) var(--nook-ease);
  min-height: 2px;
}
.n-chart-col:last-child .n-chart-bar { background: var(--nook-brick); }
.n-chart-col.is-empty .n-chart-bar { background: var(--nook-cream-deep); }
.n-chart-col:hover .n-chart-bar { filter: brightness(1.08); }
.n-chart-x { font-size: 11px; color: var(--nook-muted-soft); font-weight: 550; }

/* ---------------- Order status ---------------- */

.n-orderstrip {
  padding: var(--nook-s-5);
  border: 1px solid var(--nook-border);
  border-left: 3px solid var(--nook-amber);
  border-radius: var(--nook-r-md);
  background: var(--nook-surface);
}
.n-orderstrip.is-ready { border-left-color: var(--nook-olive); }
.n-orderstrip.is-collected { border-left-color: var(--nook-border-strong); opacity: 0.7; }

.n-orderline {
  display: flex;
  align-items: center;
  margin-top: var(--nook-s-5);
}
.n-orderline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
}
.n-orderline-step::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 1px;
  background: var(--nook-border);
}
.n-orderline-step:first-child::before { left: 4px; }
.n-orderline-step:last-child::before { right: calc(100% - 8px); }
.n-orderline-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--nook-cream-deep);
  border: 1px solid var(--nook-border-strong);
  position: relative; z-index: 1;
}
.n-orderline-step.is-done .n-orderline-dot { background: var(--nook-olive); border-color: var(--nook-olive); }
.n-orderline-label { font-size: 11px; color: var(--nook-muted-soft); }
.n-orderline-step.is-done .n-orderline-label { color: var(--nook-ink); font-weight: 550; }

/* ---------------- Photo ---------------- */

.n-photo { margin: 0; }
.n-photo-frame {
  overflow: hidden;
  border-radius: var(--nook-r-lg);
  background: var(--nook-cream-deep);
}
.n-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--nook-t-slow) var(--nook-ease-out);
}
.n-photo:hover .n-photo-frame img { transform: scale(1.02); }
.n-photo figcaption {
  margin-top: var(--nook-s-3);
  padding-top: var(--nook-s-3);
  border-top: 1px solid var(--nook-border);
  font-size: 12.5px;
  color: var(--nook-muted);
}

/* ---------------- Empty state variants ---------------- */

.n-empty.is-compact { padding: var(--nook-s-10) var(--nook-s-4); }
.n-empty-ico { color: var(--nook-muted-soft); opacity: 0.6; }

/* ---------------- Auth modal divider ---------------- */

.n-auth-or {
  display: flex;
  align-items: center;
  gap: var(--nook-s-4);
  margin: var(--nook-s-5) 0;
  color: var(--nook-muted-soft);
  font-size: 12px;
}
.n-auth-or::before, .n-auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nook-border);
}

/* ---------------- Image failure fallback ----------------
   A missing photograph falls back to the Nook mark on paper,
   never a broken-image icon or an empty grey box. */

.is-imgfail {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--nook-cream-deep) 0 10px,
      var(--n-cream-200) 10px 20px
    );
}
.is-imgfail::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 2px solid var(--nook-muted-soft);
  border-radius: 6px;
  opacity: 0.5;
}
.is-imgfail::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 15px; height: 15px;
  margin: -15px 0 0 0;
  background: var(--nook-brick);
  border-radius: 0 5px 0 10px;
  opacity: 0.45;
  z-index: 1;
}

/* ---------------- First-run invitation ----------------
   Sits above the Today block for a visitor who has not been through
   onboarding. An offer, not an interruption. */

.n-setup-strip {
  display: flex;
  align-items: center;
  gap: var(--nook-s-4);
  padding: var(--nook-s-4) var(--nook-s-5);
  margin-bottom: var(--nook-s-5);
  background: var(--n-amber-100);
  border: 1px solid var(--n-amber-200);
  border-radius: var(--nook-r-md);
  font-size: 13.5px;
  transition: border-color var(--nook-t-base) var(--nook-ease),
              transform var(--nook-t-base) var(--nook-ease-out);
}
.n-setup-strip:hover { border-color: var(--n-amber-500); transform: translateY(-1px); }
.n-setup-strip .n-mark { color: var(--n-amber-600); }
.n-setup-strip .n-cell-link { margin-top: 0; white-space: nowrap; }

@media (max-width: 620px) {
  .n-setup-strip { flex-wrap: wrap; gap: var(--nook-s-3); }
  .n-setup-strip .n-spacer { display: none; }
}