/* ============================================================
   ROUTE-LEVEL LAYOUTS
   ============================================================ */

/* ================= HOME ================= */

/* ---- Hero: asymmetric, photo-led. Not a centred hero. ---- */

.n-hero {
  padding-top: var(--nook-s-16);
  padding-bottom: var(--nook-s-8);
}
.n-hero-grid {
  display: grid;
  grid-template-columns: 6.2fr 5.8fr;
  gap: var(--nook-s-16);
  align-items: center;
}
.n-hero-copy { max-width: 34rem; }
.n-hero-actions { gap: var(--nook-s-3); flex-wrap: wrap; }

.n-hero-meta {
  display: flex;
  gap: var(--nook-s-8);
  margin-top: var(--nook-s-12);
  padding-top: var(--nook-s-5);
  border-top: 1px solid var(--nook-border);
}
.n-hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.n-hero-meta-item span:last-child {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--nook-muted);
}

.n-hero-art { position: relative; }
.n-hero-photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--nook-r-xl);
  overflow: hidden;
  background: var(--nook-cream-deep);
  box-shadow: var(--nook-shadow-4);
}
.n-hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.n-hero-tag {
  position: absolute;
  left: calc(var(--nook-s-6) * -1);
  bottom: var(--nook-s-10);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--nook-glass-strong);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--nook-r-pill);
  box-shadow: var(--nook-shadow-3);
  font-size: 13px;
  font-weight: 550;
}

@media (max-width: 1024px) {
  .n-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-10); }
  .n-hero-copy { max-width: none; }
  .n-hero-photo { aspect-ratio: 16 / 10; }
  .n-hero-tag { left: var(--nook-s-5); bottom: var(--nook-s-5); }
  .n-hero { padding-top: var(--nook-s-10); }
}
@media (max-width: 560px) {
  .n-hero-meta { gap: var(--nook-s-6); margin-top: var(--nook-s-8); }
  .n-hero-actions .n-btn { flex: 1; justify-content: center; }
}

/* ---- Pillars: uneven, alternating heights ---- */

.n-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nook-s-5);
}
.n-pillar {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--nook-ink-strong);
  padding-top: var(--nook-s-4);
  transition: transform var(--nook-t-base) var(--nook-ease-out);
}
.n-pillar:nth-child(even) { margin-top: var(--nook-s-10); }
.n-pillar:hover { transform: translateY(-4px); }
.n-pillar-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--nook-r-md);
  background: var(--nook-cream-deep);
  margin-bottom: var(--nook-s-4);
}
.n-pillar-photo img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--nook-t-slow) var(--nook-ease-out); }
.n-pillar:hover .n-pillar-photo img { transform: scale(1.04); }
.n-pillar-body { display: flex; flex-direction: column; gap: var(--nook-s-2); }
.n-pillar-body .n-ico { color: var(--nook-brick); }
.n-pillar-body .n-cell-link { margin-top: var(--nook-s-2); }

@media (max-width: 1024px) {
  .n-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nook-s-6); }
  .n-pillar:nth-child(even) { margin-top: 0; }
  .n-pillar-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .n-pillars { grid-template-columns: minmax(0, 1fr); }
  .n-pillar-photo { aspect-ratio: 16 / 9; }
}

/* ---- How it works ---- */

.n-how { background: var(--nook-bg-sunk); }
.n-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nook-s-6);
  counter-reset: step;
}
.n-step { position: relative; padding-right: var(--nook-s-6); }
.n-step-body { margin-top: var(--nook-s-4); display: flex; flex-direction: column; gap: var(--nook-s-2); }
.n-step-arrow {
  position: absolute;
  right: -6px; top: 22px;
  color: var(--nook-border-strong);
}
@media (max-width: 900px) {
  .n-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nook-s-8); }
  .n-step-arrow { display: none; }
}
@media (max-width: 520px) {
  .n-steps { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-6); }
  .n-step { padding-right: 0; border-top: 1px solid var(--nook-border); padding-top: var(--nook-s-4); }
}

/* ---- Why Nook ---- */

.n-why { padding-block: var(--nook-s-24); }
.n-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--nook-s-16);
}
.n-why-list { margin-top: var(--nook-s-8); }
.n-why-item {
  padding: var(--nook-s-5) 0;
  border-top: 1px solid var(--nook-border);
}
.n-why-title {
  font-family: var(--nook-font-display);
  font-size: 18px;
  font-weight: 560;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
  margin-bottom: 5px;
}
.n-why-statement {
  padding: var(--nook-s-8);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  border-left: 3px solid var(--nook-brick);
}
.n-why-photo { margin-top: var(--nook-s-6); }

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

/* ---- FAQ preview ---- */

.n-faq-narrow { max-width: 780px; }

/* ---- Closing ---- */

.n-closing {
  padding-block: var(--nook-s-24);
  background: var(--nook-bg-sunk);
  text-align: center;
}
.n-closing-inner {
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.n-closing .n-lead { margin-inline: auto; }

/* ================= SHARED PAGE HEAD ================= */

.n-pagehead {
  padding-top: var(--nook-s-12);
  padding-bottom: var(--nook-s-8);
  border-bottom: 1px solid var(--nook-border);
}
.n-pagehead-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nook-s-6);
  flex-wrap: wrap;
}
.n-pagehead .n-lead { margin-top: var(--nook-s-4); }

@media (max-width: 560px) {
  .n-pagehead { padding-top: var(--nook-s-8); }
}

/* ================= ONBOARDING ================= */

.n-onb {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--nook-s-8) var(--nook-gutter) var(--nook-s-16);
  background:
    radial-gradient(ellipse at 70% 0%, var(--n-amber-100), transparent 55%),
    var(--nook-bg);
}
.n-onb-inner { width: 100%; max-width: 720px; }
.n-onb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--nook-s-12);
}
.n-onb-stage { min-height: 420px; }
.n-onb-step { animation: n-route-in var(--nook-t-slow) var(--nook-ease-out) both; }

.n-onb-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nook-s-3);
  margin-top: var(--nook-s-8);
}
.n-onb-options.is-goals { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.n-onb-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nook-s-3);
  padding: var(--nook-s-5);
  min-height: 108px;
  text-align: left;
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  box-shadow: var(--nook-shadow-in);
  cursor: pointer;
  transition:
    border-color var(--nook-t-base) var(--nook-ease),
    background-color var(--nook-t-base) var(--nook-ease),
    transform var(--nook-t-fast) var(--nook-ease-out),
    box-shadow var(--nook-t-base) var(--nook-ease-out);
}
.n-onb-opt:hover { transform: translateY(-2px); box-shadow: var(--nook-shadow-3); border-color: var(--nook-border-strong); }
.n-onb-opt:active { transform: translateY(0) scale(0.99); }
.n-onb-opt .n-ico { color: var(--nook-muted); }
.n-onb-opt.is-selected {
  border-color: var(--nook-espresso);
  background: var(--nook-surface);
  box-shadow: var(--nook-shadow-2), inset 0 0 0 1px var(--nook-espresso);
}
.n-onb-opt.is-selected .n-ico { color: var(--nook-brick); }
.n-onb-opt-label { font-size: 14px; font-weight: 550; line-height: 1.3; }
.n-onb-unit { font-family: var(--nook-font-body); font-size: 13px; color: var(--nook-muted); letter-spacing: 0; font-weight: 500; }
.n-onb-check {
  position: absolute;
  top: 12px; right: 12px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--nook-espresso);
  color: var(--nook-on-dark);
}
.n-onb-check .n-ico { color: inherit; width: 12px; height: 12px; stroke-width: 2.4; }

.n-onb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nook-s-4);
  margin-top: var(--nook-s-10);
}
.n-flip { transform: rotate(180deg); }

.n-onb-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: var(--nook-s-8);
}
.n-onb-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nook-border-strong);
  transition: all var(--nook-t-base) var(--nook-ease);
}
.n-onb-dots span.is-on { width: 20px; border-radius: 3px; background: var(--nook-brick); }
.n-onb-dots span.is-done { background: var(--nook-muted-soft); }

.n-onb-done { text-align: center; display: flex; flex-direction: column; align-items: center; }
.n-onb-summary {
  display: flex;
  gap: var(--nook-s-12);
  justify-content: center;
  margin-top: var(--nook-s-10);
  padding-top: var(--nook-s-8);
  border-top: 1px solid var(--nook-border);
}
.n-onb-summary dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--nook-muted); margin-bottom: var(--nook-s-2);
}
.n-onb-summary dd { margin: 0; }

@media (max-width: 620px) {
  .n-onb-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-onb-options.is-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-onb-summary { gap: var(--nook-s-8); }
  .n-onb { padding-top: var(--nook-s-5); }
  .n-onb-head { padding-bottom: var(--nook-s-8); }
}

/* ================= FOCUS ================= */

.n-focus { padding-top: var(--nook-s-10); }
.n-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--nook-s-16);
  align-items: start;
}
.n-focus-main { display: flex; flex-direction: column; align-items: center; }

.n-focus-modes {
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
  flex-wrap: wrap;
  justify-content: center;
}

.n-focus-dial-wrap {
  width: 100%;
  max-width: 360px;
  margin-block: var(--nook-s-8);
  position: relative;
}
.n-dial { width: 100%; height: auto; overflow: visible; }
.n-dial text { user-select: none; }

/* A soft radial warmth behind the dial while a session runs. */
.n-focus-dial-wrap::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 67, 43, 0.09), transparent 66%);
  opacity: 0;
  transition: opacity var(--nook-t-slow) var(--nook-ease);
  pointer-events: none;
}
.n-focus.is-running .n-focus-dial-wrap::before { opacity: 1; }
.n-focus.is-break .n-focus-dial-wrap::before {
  background: radial-gradient(circle, rgba(69, 79, 58, 0.10), transparent 66%);
  opacity: 1;
}

.n-focus-controls {
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
  flex-wrap: wrap;
  justify-content: center;
}
.n-focus-controls .n-btn--lg { min-width: 158px; }

.n-focus-inputs { width: 100%; max-width: 460px; margin-top: var(--nook-s-10); }
.n-focus-task { text-align: center; }
.n-focus-notes { margin-top: var(--nook-s-4); }
.n-focus-notes summary {
  font-size: 12.5px;
  color: var(--nook-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.n-focus-notes summary::-webkit-details-marker { display: none; }
.n-focus-notes summary::before {
  content: '+';
  font-size: 14px;
  color: var(--nook-muted-soft);
}
.n-focus-notes[open] summary::before { content: '–'; }

/* ---- Aside ---- */

.n-focus-aside { display: flex; flex-direction: column; gap: var(--nook-s-6); }
.n-focus-side  { display: flex; flex-direction: column; gap: var(--nook-s-8); }

.n-soundbar {
  padding: var(--nook-s-5);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
}

.n-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: var(--nook-cream-deep);
  cursor: pointer;
}
.n-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--nook-espresso);
  border: 2px solid var(--nook-paper);
  box-shadow: var(--nook-shadow-2);
}
.n-range::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--nook-espresso);
  border: 2px solid var(--nook-paper);
  box-shadow: var(--nook-shadow-2);
}

.n-focus-goal,
.n-focus-history,
.n-focus-stats,
.n-focus-shortcuts { padding-top: var(--nook-s-5); border-top: 1px solid var(--nook-border); }
.n-focus-goal { border-top: 2px solid var(--nook-ink-strong); }

.n-minitable { margin: 0; }
.n-minitable-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nook-s-4);
  padding: 9px 0;
  border-bottom: 1px dotted var(--nook-border);
}
.n-minitable-row:last-child { border-bottom: 0; }
.n-minitable dt { font-size: 13px; color: var(--nook-muted); margin: 0; }
.n-minitable dd { font-size: 13.5px; font-weight: 600; margin: 0; text-align: right; }

.n-kbd {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--nook-font-mono);
  font-size: 11px;
  background: var(--nook-surface-alt);
  border: 1px solid var(--nook-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--nook-r-sm);
  color: var(--nook-ink);
}

/* ---- Session log ---- */

.n-session-log { max-width: 720px; }
.n-session-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--nook-s-4);
  align-items: baseline;
  padding: var(--nook-s-4) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-session-item .n-numeral { color: var(--nook-brick); }
.n-session-note {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--nook-muted);
  padding: var(--nook-s-3) var(--nook-s-4);
  margin-top: var(--nook-s-2);
  background: var(--nook-surface-alt);
  border-left: 2px solid var(--nook-border-strong);
  border-radius: 0 var(--nook-r-sm) var(--nook-r-sm) 0;
}

/* ---- Completion modal ---- */

.n-complete { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: var(--nook-s-4); }
.n-complete-min { margin-top: var(--nook-s-4); }
.n-complete-rows {
  width: 100%;
  margin-top: var(--nook-s-6);
  padding-top: var(--nook-s-5);
  border-top: 1px solid var(--nook-border);
  display: flex;
  flex-direction: column;
  gap: var(--nook-s-3);
}
.n-complete-row {
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
  font-size: 14px;
  font-weight: 550;
}
.n-complete-row .n-ico { color: var(--nook-amber); }
.n-complete-row.is-achievement .n-ico { color: var(--nook-olive); }

/* ---- Deep Work ---- */

body.n-deep-active .n-header,
body.n-deep-active .n-tabbar,
body.n-deep-active #nook-footer { display: none; }
body.n-deep-active { padding-bottom: 0; }

.n-focus.is-deep {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--nook-espresso-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nook-s-8);
  overflow-y: auto;
}
.n-focus.is-deep .n-focus-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.n-focus.is-deep .n-focus-aside,
.n-focus.is-deep .n-focus-log,
.n-focus.is-deep .n-focus-inputs { display: none; }
.n-focus.is-deep .n-focus-dial-wrap { max-width: 440px; }
.n-focus.is-deep .n-dial text { fill: var(--nook-on-dark) !important; }
.n-focus.is-deep .n-dial line { stroke: rgba(255, 252, 246, 0.18) !important; }
.n-focus.is-deep .n-dial circle:first-of-type { stroke: rgba(255, 252, 246, 0.10); }
.n-focus.is-deep .n-btn-group {
  background: transparent;
  border-color: var(--nook-border-dark);
}
.n-focus.is-deep .n-btn-group > button { color: var(--nook-on-dark-muted); }
.n-focus.is-deep .n-btn-group > button.is-active {
  background: var(--nook-on-dark);
  color: var(--nook-espresso-ink);
}
.n-focus.is-deep .n-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--nook-on-dark);
  --btn-bd: var(--nook-border-dark);
}
.n-focus.is-deep .n-btn--ghost { --btn-fg: var(--nook-on-dark-muted); }

@media (max-width: 1024px) {
  .n-focus-grid { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-10); }
  .n-focus-aside { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .n-focus-dial-wrap { max-width: 280px; margin-block: var(--nook-s-6); }
  .n-focus-controls { width: 100%; }
  .n-focus-controls .n-btn--lg { flex: 1; min-width: 0; }
  .n-focus { padding-top: var(--nook-s-6); }
}

/* ================= SPACE ================= */

.n-space-live {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--nook-muted);
  font-weight: 550;
}

.n-space-controls {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: var(--nook-s-6);
  align-items: start;
  padding: var(--nook-s-6) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-ctrl { display: flex; flex-direction: column; gap: var(--nook-s-3); }
.n-ctrl .n-cell-label { margin-bottom: 0; }
.n-space-date { width: 152px; padding: 7px 11px; font-size: 12.5px; border-radius: var(--nook-r-pill); }
.n-ctrl .n-select { width: 108px; }

@media (max-width: 1024px) {
  .n-space-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--nook-s-5); }
  .n-ctrl--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .n-space-controls { grid-template-columns: minmax(0, 1fr); }
}

.n-space-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--nook-s-8);
  align-items: start;
  padding-top: var(--nook-s-8);
}

/* ---- The plan ---- */

.n-plan-host {
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  padding: var(--nook-s-5);
  overflow-x: auto;
}
.n-floorplan { width: 100%; min-width: 560px; height: auto; }

.n-plan-wall {
  fill: var(--nook-surface-alt);
  stroke: var(--nook-espresso);
  stroke-width: 3;
}
.n-plan-window { fill: var(--nook-amber); opacity: 0.55; }
.n-plan-door   { fill: var(--nook-cream); stroke: var(--nook-border-strong); stroke-width: 1.5; }
.n-plan-note {
  fill: var(--nook-muted-soft);
  font-family: var(--nook-font-body);
  font-weight: 600;
  letter-spacing: 2.4px;
}

.n-fixture rect {
  fill: var(--nook-cream-deep);
  stroke: var(--nook-border-strong);
  stroke-width: 1.4;
}
.n-fixture text {
  fill: var(--nook-muted);
  font-family: var(--nook-font-body);
  font-weight: 600;
  letter-spacing: 0.6px;
}
.n-fixture.is-bar rect   { fill: var(--n-clay-500); opacity: 0.16; stroke: var(--n-clay-500); }
.n-fixture.is-bar text   { fill: var(--n-clay-500); }
.n-fixture.is-table rect { fill: var(--n-amber-200); stroke: var(--n-amber-600); }
.n-fixture.is-table text { fill: var(--n-amber-600); }
.n-fixture.is-plant rect { fill: var(--n-olive-300); stroke: var(--n-olive-600); }
.n-fixture.is-shelf rect { fill: var(--nook-cream-deep); }

/* ---- Seats ---- */

.n-seat { cursor: pointer; outline: none; }
.n-seat-desk {
  fill: var(--nook-paper);
  stroke: var(--nook-border-strong);
  stroke-width: 1.6;
  transition: fill var(--nook-t-base) var(--nook-ease),
              stroke var(--nook-t-base) var(--nook-ease);
}
.n-seat-chair {
  fill: var(--nook-cream-deep);
  stroke: var(--nook-border-strong);
  stroke-width: 1.4;
  transition: fill var(--nook-t-base) var(--nook-ease);
}
.n-seat-id {
  fill: var(--nook-muted);
  font-family: var(--nook-font-body);
  font-weight: 650;
  letter-spacing: 0.4px;
  pointer-events: none;
  transition: fill var(--nook-t-base) var(--nook-ease);
}

.n-seat.is-free:hover .n-seat-desk {
  fill: var(--n-olive-100);
  stroke: var(--nook-olive);
}
.n-seat.is-free:hover .n-seat-chair { fill: var(--n-olive-300); }

.n-seat.is-taken { cursor: not-allowed; }
.n-seat.is-taken .n-seat-desk {
  fill: var(--nook-cream-deep);
  stroke: var(--nook-border);
  stroke-dasharray: 3 3;
}
.n-seat.is-taken .n-seat-chair { fill: var(--nook-border-strong); stroke: var(--nook-border-strong); }
.n-seat.is-taken .n-seat-id { fill: var(--nook-muted-soft); opacity: 0.6; }

.n-seat.is-selected .n-seat-desk {
  fill: var(--nook-brick);
  stroke: var(--n-brick-700);
  stroke-width: 2;
}
.n-seat.is-selected .n-seat-chair { fill: var(--n-brick-300); stroke: var(--n-brick-700); }
.n-seat.is-selected .n-seat-id { fill: #FFF6F2; }

.n-seat.is-mine .n-seat-desk { fill: var(--n-amber-200); stroke: var(--n-amber-600); stroke-width: 2; }
.n-seat.is-mine .n-seat-chair { fill: var(--nook-amber); stroke: var(--n-amber-600); }
.n-seat.is-mine .n-seat-id { fill: var(--n-amber-600); }

.n-seat:focus-visible .n-seat-desk {
  stroke: var(--nook-brick);
  stroke-width: 3;
  filter: drop-shadow(0 0 0 2px var(--nook-cream));
}

/* Zone filter dims everything else rather than hiding it —
   the room stays legible. */
.n-plan-host.is-filtered .n-seat { opacity: 0.22; pointer-events: none; }
.n-plan-host[data-zone='quiet']     .n-seat.zone-quiet,
.n-plan-host[data-zone='window']    .n-seat.zone-window,
.n-plan-host[data-zone='community'] .n-seat.zone-community,
.n-plan-host[data-zone='lounge']    .n-seat.zone-lounge,
.n-plan-host[data-zone='booth']     .n-seat.zone-booth { opacity: 1; pointer-events: auto; }

/* ---- Legend ---- */

.n-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nook-s-5);
  margin-top: var(--nook-s-5);
  padding-top: var(--nook-s-4);
  border-top: 1px solid var(--nook-border);
}
.n-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--nook-muted);
}
.n-legend-swatch {
  width: 14px; height: 11px;
  border-radius: 3px;
  border: 1.5px solid var(--nook-border-strong);
  background: var(--nook-paper);
}
.n-legend-swatch.is-taken { background: var(--nook-cream-deep); border-style: dashed; }
.n-legend-swatch.is-selected { background: var(--nook-brick); border-color: var(--n-brick-700); }
.n-legend-swatch.is-mine { background: var(--n-amber-200); border-color: var(--n-amber-600); }

/* ---- Detail ---- */

.n-space-side { position: sticky; top: calc(var(--nook-nav-h) + var(--nook-s-5)); }
.n-space-detail {
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  overflow: hidden;
}
.n-seatcard { padding: var(--nook-s-6); }
.n-seat-amen { margin-top: var(--nook-s-6); padding-top: var(--nook-s-5); border-top: 1px solid var(--nook-border); }
.n-seat-amen ul { display: flex; flex-direction: column; gap: 9px; }
.n-seat-amen li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--nook-ink);
}
.n-seat-amen .n-ico { color: var(--nook-olive); }
.n-seat-summary { margin-top: var(--nook-s-6); padding-top: var(--nook-s-5); border-top: 1px solid var(--nook-border); }

/* ---- Zone cards ---- */

.n-zonecards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--nook-s-5);
}
.n-zonecard {
  padding: var(--nook-s-5);
  border-top: 2px solid var(--nook-border-strong);
}
.n-zonecard.zone-quiet     { border-top-color: var(--nook-olive); }
.n-zonecard.zone-window    { border-top-color: var(--nook-amber); }
.n-zonecard.zone-community { border-top-color: var(--nook-brick); }
.n-zonecard.zone-lounge    { border-top-color: var(--n-clay-500); }
.n-zonecard.zone-booth     { border-top-color: var(--n-slate-500); }
.n-zonecard .n-micro { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 1024px) {
  .n-space-grid { grid-template-columns: minmax(0, 1fr); }
  .n-space-side { position: static; }
}

/* ================= BOOKINGS ================= */

.n-tab-count {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: var(--nook-r-pill);
  background: var(--nook-cream-deep);
  color: var(--nook-muted);
  vertical-align: 1px;
}
.n-tab[aria-selected='true'] .n-tab-count { background: var(--nook-espresso); color: var(--nook-on-dark); }

.n-bookings-list { display: flex; flex-direction: column; }
.n-booking {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--nook-s-6);
  align-items: center;
  padding: var(--nook-s-5) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-booking.is-cancelled { opacity: 0.55; }
.n-booking.is-cancelled .n-booking-what h3 { text-decoration: line-through; }

.n-booking-when {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: var(--nook-s-5);
  border-right: 1px solid var(--nook-border);
}
.n-booking-date {
  font-family: var(--nook-font-display);
  font-size: 17px;
  font-weight: 560;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
}
.n-booking-time { font-size: 12.5px; color: var(--nook-muted); font-variant-numeric: tabular-nums; }
.n-booking-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.n-qr {
  display: inline-flex;
  padding: var(--nook-s-5);
  background: var(--nook-paper-alt, #fff);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-md);
}

@media (max-width: 860px) {
  .n-booking { grid-template-columns: minmax(0, 1fr); gap: var(--nook-s-4); }
  .n-booking-when {
    flex-direction: row; align-items: baseline; gap: var(--nook-s-3);
    border-right: 0; padding-right: 0;
  }
  .n-booking-actions { justify-content: flex-start; }
}

/* ================= CAFÉ ================= */

.n-cafe-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: var(--nook-s-8);
  align-items: start;
  padding-top: var(--nook-s-8);
}
.n-cafe-side { position: sticky; top: calc(var(--nook-nav-h) + var(--nook-s-5)); }
.n-cafe-search { width: 220px; padding: 8px 13px; font-size: 13px; border-radius: var(--nook-r-pill); }
.n-cafe-filters { border-bottom: 1px solid var(--nook-border); padding-bottom: var(--nook-s-5); }

.n-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--nook-s-5);
}
.n-menuitem { position: relative; }
.n-menuitem-main {
  display: block;
  width: 100%;
  text-align: left;
  border-top: 1px solid var(--nook-border);
  padding-top: var(--nook-s-4);
  transition: border-color var(--nook-t-base) var(--nook-ease);
}
.n-menuitem-main:hover { border-color: var(--nook-espresso); }
.n-menuitem-photo {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--nook-r-md);
  overflow: hidden;
  background: var(--nook-cream-deep);
  margin-bottom: var(--nook-s-4);
}
.n-menuitem-photo img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--nook-t-slow) var(--nook-ease-out); }
.n-menuitem-main:hover .n-menuitem-photo img { transform: scale(1.05); }
.n-menuitem-flag {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--nook-glass-strong);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
  border-radius: var(--nook-r-sm);
  color: var(--nook-brick-text);
}
.n-menuitem-name {
  font-family: var(--nook-font-display);
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.008em;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
}
.n-menuitem-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.n-menuitem-price s { color: var(--nook-muted-soft); font-weight: 400; margin-right: 2px; }
.n-menuitem-desc { font-size: 12.5px; color: var(--nook-muted); line-height: 1.5; margin-top: 5px; }

.n-fav {
  position: absolute;
  top: calc(var(--nook-s-4) + 10px);
  right: 10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--nook-glass-strong);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
  color: var(--nook-muted);
  transition: color var(--nook-t-base) var(--nook-ease), transform var(--nook-t-fast) var(--nook-ease-out);
}
.n-fav:hover { transform: scale(1.08); }
.n-fav.is-on { color: var(--nook-amber); }

/* ---- Cart ---- */

.n-cart {
  padding: var(--nook-s-5);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
}
.n-cart-lines { margin-top: var(--nook-s-3); }
.n-cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--nook-s-3);
  align-items: center;
  padding: var(--nook-s-3) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-cart-name { font-size: 13.5px; font-weight: 550; }
.n-cart-opts { font-size: 11.5px; color: var(--nook-muted); }
.n-cart-price { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.n-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-pill);
  padding: 2px;
}
.n-qty button {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--nook-muted);
  transition: background-color var(--nook-t-fast) var(--nook-ease);
}
.n-qty button:hover { background: var(--nook-surface-alt); color: var(--nook-ink); }
.n-qty span { min-width: 20px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.n-cart-fulfil { margin-top: var(--nook-s-5); padding-top: var(--nook-s-4); border-top: 1px solid var(--nook-border); }
.n-cart-total { margin-top: var(--nook-s-5); padding-top: var(--nook-s-4); border-top: 2px solid var(--nook-ink-strong); }
.n-cart-saved { font-size: 12.5px; color: var(--nook-olive); margin-bottom: var(--nook-s-2); }

/* ---- Item modal ---- */

.n-itemmodal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--nook-s-6); }
.n-itemmodal-photo { border-radius: var(--nook-r-md); overflow: hidden; background: var(--nook-cream-deep); aspect-ratio: 4/5; }
.n-itemmodal-photo img { width: 100%; height: 100%; object-fit: cover; }
.n-item-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--nook-s-5); }
.n-modal-foot .n-qty { flex: none; }

@media (max-width: 620px) {
  .n-itemmodal { grid-template-columns: minmax(0, 1fr); }
  .n-itemmodal-photo { aspect-ratio: 16/9; }
}

.n-orderhistory .n-listrow { gap: var(--nook-s-5); }

@media (max-width: 1024px) {
  .n-cafe-grid { grid-template-columns: minmax(0, 1fr); }
  .n-cafe-side { position: static; order: -1; }
}
@media (max-width: 560px) {
  .n-cafe-search { width: 100%; }
  .n-cafe-filters .n-row--between { flex-direction: column; align-items: stretch; }
  .n-cafe-filters .n-row--between > * { width: 100%; }
  .n-menu { grid-template-columns: minmax(0, 1fr); }
}