/* ============================================================
   NOOK COMPONENTS
   Buttons, inputs, cards, badges, tabs, modals, toasts,
   progress, avatars, empty states.
   ============================================================ */

/* ============================================================
   1. BUTTONS
   ------------------------------------------------------------
   The Nook button is paper first, glass second. It has a thin
   warm border, a soft warm shadow, an inner top highlight (the
   way light catches a ceramic lip), lifts 1px on hover and
   compresses on press. Radius is 8px — tactile, not a pill.
   ============================================================ */

.n-btn {
  --btn-bg: var(--nook-surface);
  --btn-fg: var(--nook-ink);
  --btn-bd: var(--nook-border-strong);
  --btn-sh: var(--nook-shadow-1);
  --btn-hl: var(--nook-shadow-in);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nook-s-2);

  padding: 11px 18px;
  min-height: 42px;

  font-family: var(--nook-font-body);
  font-size: 13.5px;
  font-weight: 550;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;

  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--nook-r-md);
  box-shadow: var(--btn-sh), var(--btn-hl);

  cursor: pointer;
  user-select: none;
  transition:
    transform var(--nook-t-fast) var(--nook-ease-out),
    box-shadow var(--nook-t-base) var(--nook-ease-out),
    background-color var(--nook-t-base) var(--nook-ease),
    border-color var(--nook-t-base) var(--nook-ease),
    color var(--nook-t-base) var(--nook-ease);
}

.n-btn:hover:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(-1px);
  box-shadow: var(--nook-shadow-3), var(--btn-hl);
}
.n-btn:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(0.5px) scale(0.988);
  box-shadow: var(--nook-shadow-1), var(--btn-hl);
  transition-duration: 60ms;
}

.n-btn:disabled,
.n-btn[aria-disabled='true'] {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Primary: brick. The one loud thing on the page. --- */
.n-btn--primary {
  --btn-bg: var(--nook-brick);
  --btn-fg: #FFF6F2;
  --btn-bd: var(--n-brick-600);
  --btn-sh: var(--nook-shadow-2);
  --btn-hl: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.n-btn--primary:hover:not(:disabled) { --btn-bg: var(--n-brick-600); }

/* --- Ink: espresso. Quiet authority, used for confirmations. --- */
.n-btn--ink {
  --btn-bg: var(--nook-espresso);
  --btn-fg: var(--nook-on-dark);
  --btn-bd: var(--nook-espresso);
  --btn-sh: var(--nook-shadow-2);
  --btn-hl: var(--nook-shadow-in-dark);
}
.n-btn--ink:hover:not(:disabled) { --btn-bg: var(--n-espresso-700); }

/* --- Secondary: paper. The default. --- */
.n-btn--secondary {
  --btn-bg: var(--nook-surface);
  --btn-bd: var(--nook-border-strong);
}
.n-btn--secondary:hover:not(:disabled) {
  --btn-bd: var(--nook-espresso);
  --btn-bg: var(--nook-surface);
}

/* --- Ghost: no chrome until touched. --- */
.n-btn--ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-sh: none;
  --btn-hl: none;
}
.n-btn--ghost:hover:not(:disabled) {
  --btn-bg: rgba(36, 26, 18, 0.055);
  box-shadow: none;
}
.n-btn--ghost:active:not(:disabled) { box-shadow: none; }

/* --- Glass: for use over photography and dark ground. --- */
.n-btn--glass {
  --btn-bg: var(--nook-glass);
  --btn-fg: var(--nook-ink-strong);
  --btn-bd: rgba(255, 255, 255, 0.55);
  --btn-sh: var(--nook-shadow-2);
  --btn-hl: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
}
.n-btn--glass:hover:not(:disabled) { --btn-bg: var(--nook-glass-strong); }

.n-btn--glass-dark {
  --btn-bg: var(--nook-glass-dark);
  --btn-fg: var(--nook-on-dark);
  --btn-bd: rgba(255, 255, 255, 0.24);
  --btn-hl: var(--nook-shadow-in-dark);
  -webkit-backdrop-filter: var(--nook-blur);
  backdrop-filter: var(--nook-blur);
}
.n-btn--glass-dark:hover:not(:disabled) { --btn-bd: rgba(255, 255, 255, 0.42); }

/* --- Danger --- */
.n-btn--danger {
  --btn-bg: var(--nook-surface);
  --btn-fg: var(--n-brick-700);
  --btn-bd: var(--n-brick-300);
}
.n-btn--danger:hover:not(:disabled) {
  --btn-bg: var(--n-brick-500);
  --btn-fg: #FFF6F2;
  --btn-bd: var(--n-brick-500);
}

/* --- Sizes --- */
.n-btn--sm { padding: 7px 12px; min-height: 32px; font-size: 12.5px; border-radius: var(--nook-r-sm); gap: 6px; }
.n-btn--lg { padding: 15px 26px; min-height: 52px; font-size: 15px; border-radius: var(--nook-r-lg); }
.n-btn--block { display: flex; width: 100%; }

/* --- Icon-only --- */
.n-btn--icon {
  padding: 0;
  width: 42px;
  min-height: 42px;
  border-radius: var(--nook-r-md);
}
.n-btn--icon.n-btn--sm { width: 32px; min-height: 32px; }
.n-btn--icon.n-btn--lg { width: 52px; min-height: 52px; }

.n-btn .n-ico { flex: none; }

/* --- Button group: segmented, shares borders --- */
.n-btn-group {
  display: inline-flex;
  background: var(--nook-surface);
  border: 1px solid var(--nook-border-strong);
  border-radius: var(--nook-r-md);
  padding: 3px;
  gap: 3px;
  box-shadow: var(--nook-shadow-in);
}
.n-btn-group > button {
  padding: 7px 14px;
  min-height: 32px;
  font-size: 12.5px;
  font-weight: 550;
  border-radius: var(--nook-r-sm);
  color: var(--nook-muted);
  transition: background-color var(--nook-t-base) var(--nook-ease),
              color var(--nook-t-base) var(--nook-ease);
}
.n-btn-group > button:hover { color: var(--nook-ink); }
.n-btn-group > button[aria-pressed='true'],
.n-btn-group > button.is-active {
  background: var(--nook-espresso);
  color: var(--nook-on-dark);
}

/* ============================================================
   2. PILLS / CHIPS / TABS
   ============================================================ */

.n-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nook-ink);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-pill);
  cursor: pointer;
  transition: all var(--nook-t-base) var(--nook-ease);
}
.n-pill:hover { border-color: var(--nook-border-strong); }
.n-pill[aria-pressed='true'], .n-pill.is-active {
  background: var(--nook-espresso);
  color: var(--nook-on-dark);
  border-color: var(--nook-espresso);
}
.n-pill:disabled { opacity: 0.4; cursor: not-allowed; }

/* Tabs — underline, editorial, not a segmented control. */
.n-tabs {
  max-width: 100%;
  display: flex;
  gap: var(--nook-s-6);
  border-bottom: 1px solid var(--nook-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.n-tabs::-webkit-scrollbar { display: none; }
.n-tab {
  position: relative;
  padding: var(--nook-s-3) 2px calc(var(--nook-s-3) + 1px);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--nook-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--nook-t-base) var(--nook-ease);
}
.n-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--nook-brick);
  transform: scaleX(0);
  transition: transform var(--nook-t-base) var(--nook-ease-out);
}
.n-tab:hover { color: var(--nook-ink); }
.n-tab[aria-selected='true'] { color: var(--nook-ink-strong); }
.n-tab[aria-selected='true']::after { transform: scaleX(1); }

/* ============================================================
   3. BADGES
   ============================================================ */

.n-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--nook-r-sm);
  background: var(--nook-surface-alt);
  color: var(--nook-muted);
  border: 1px solid var(--nook-border);
  white-space: nowrap;
}
.n-badge--brick { background: var(--n-brick-100); color: var(--n-brick-700); border-color: transparent; }
.n-badge--olive { background: var(--n-olive-100); color: var(--n-olive-700); border-color: transparent; }
.n-badge--amber { background: var(--n-amber-100); color: var(--n-amber-600); border-color: transparent; }
.n-badge--ink   { background: var(--nook-espresso); color: var(--nook-on-dark); border-color: transparent; }

/* Live dot — used by "Live at Nook" and order status. */
.n-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--n-olive-400);
  flex: none;
  position: relative;
}
.n-dot--live::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--n-olive-400);
  animation: n-pulse 2.4s var(--nook-ease-out) infinite;
}
.n-dot--amber { background: var(--nook-amber); }
.n-dot--amber.n-dot--live::after { border-color: var(--nook-amber); }
.n-dot--brick { background: var(--nook-brick); }
.n-dot--brick.n-dot--live::after { border-color: var(--nook-brick); }
.n-dot--muted { background: var(--nook-muted-soft); }

@keyframes n-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.7);  opacity: 0; }
  100% { transform: scale(1.7);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .n-dot--live::after { animation: none; opacity: 0.5; }
}

/* ============================================================
   4. FORM CONTROLS
   ============================================================ */

.n-field { display: block; }
.n-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nook-muted);
  margin-bottom: var(--nook-s-2);
}

.n-input,
.n-select,
.n-textarea {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--nook-font-body);
  color: var(--nook-ink);
  background: var(--nook-surface);
  border: 1px solid var(--nook-border-strong);
  border-radius: var(--nook-r-md);
  box-shadow: inset 0 1px 2px rgba(36, 26, 18, 0.04);
  transition: border-color var(--nook-t-base) var(--nook-ease),
              box-shadow var(--nook-t-base) var(--nook-ease);
}
.n-textarea { min-height: 120px; resize: vertical; line-height: 1.55; }

.n-input::placeholder,
.n-textarea::placeholder { color: var(--nook-muted-soft); }

.n-input:hover, .n-select:hover, .n-textarea:hover { border-color: var(--nook-muted-soft); }

.n-input:focus-visible,
.n-select:focus-visible,
.n-textarea:focus-visible {
  border-color: var(--nook-brick);
  box-shadow: inset 0 1px 2px rgba(36, 26, 18, 0.04), 0 0 0 3px var(--n-brick-100);
}

.n-input[aria-invalid='true'],
.n-textarea[aria-invalid='true'] { border-color: var(--nook-brick); }

.n-select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A7D68' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.n-hint  { font-size: 12px; color: var(--nook-muted); margin-top: 6px; }
.n-error { font-size: 12px; color: var(--n-brick-700); margin-top: 6px; }

/* Switch */
.n-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--nook-s-3);
  cursor: pointer;
}
.n-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.n-switch-track {
  width: 40px; height: 23px;
  flex: none;
  border-radius: var(--nook-r-pill);
  background: var(--nook-cream-deep);
  border: 1px solid var(--nook-border-strong);
  position: relative;
  transition: background-color var(--nook-t-base) var(--nook-ease),
              border-color var(--nook-t-base) var(--nook-ease);
}
.n-switch-track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--nook-paper);
  box-shadow: var(--nook-shadow-2);
  transition: transform var(--nook-t-base) var(--nook-ease-out);
}
.n-switch input:checked + .n-switch-track {
  background: var(--nook-olive);
  border-color: var(--nook-olive);
}
.n-switch input:checked + .n-switch-track::after { transform: translateX(17px); }
.n-switch input:focus-visible + .n-switch-track { box-shadow: var(--nook-ring); }

/* Checkbox / radio (custom, warm) */
.n-check { display: inline-flex; align-items: flex-start; gap: var(--nook-s-3); cursor: pointer; }
.n-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.n-check-box {
  width: 19px; height: 19px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--nook-border-strong);
  border-radius: var(--nook-r-sm);
  background: var(--nook-surface);
  position: relative;
  transition: all var(--nook-t-base) var(--nook-ease);
}
.n-check input:checked + .n-check-box {
  background: var(--nook-espresso);
  border-color: var(--nook-espresso);
}
.n-check input:checked + .n-check-box::after {
  content: '';
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 9px;
  border: solid var(--nook-on-dark);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(43deg);
}
.n-check input:focus-visible + .n-check-box { box-shadow: var(--nook-ring); }

/* ============================================================
   5. CARDS & PANELS
   ------------------------------------------------------------
   Used sparingly. Most Nook surfaces are rules + whitespace,
   not boxes. A card must earn its border.
   ============================================================ */

.n-panel {
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-lg);
  padding: var(--nook-s-6);
}
.n-panel--flush { padding: 0; overflow: hidden; }
.n-panel--lg { padding: var(--nook-s-8); }
.n-panel--sunk { background: var(--nook-bg-sunk); border-color: transparent; }
.n-panel--ink {
  background: var(--nook-surface-ink);
  color: var(--nook-on-dark);
  border-color: transparent;
}
.n-panel--raised { box-shadow: var(--nook-shadow-3); }

/* Interactive card (link/button) — lifts, never glows. */
.n-card-link {
  display: block;
  text-align: left;
  width: 100%;
  transition: transform var(--nook-t-base) var(--nook-ease-out),
              box-shadow var(--nook-t-base) var(--nook-ease-out),
              border-color var(--nook-t-base) var(--nook-ease);
}
.n-card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--nook-shadow-3);
  border-color: var(--nook-border-strong);
}
.n-card-link:active { transform: translateY(0); }

/* A "listing row" — the workhorse. Rules, not boxes. */
.n-listrow {
  display: flex;
  align-items: center;
  gap: var(--nook-s-4);
  padding: var(--nook-s-4) 0;
  border-bottom: 1px solid var(--nook-border);
}
.n-listrow:last-child { border-bottom: 0; }
.n-listrow--pad { padding-inline: var(--nook-s-5); }

/* ============================================================
   6. PROGRESS
   ============================================================ */

.n-meter {
  height: 5px;
  background: var(--nook-cream-deep);
  border-radius: var(--nook-r-pill);
  overflow: hidden;
}
.n-meter-fill {
  height: 100%;
  background: var(--nook-olive);
  border-radius: inherit;
  transition: width var(--nook-t-slow) var(--nook-ease-out);
}
.n-meter--brick .n-meter-fill { background: var(--nook-brick); }
.n-meter--amber .n-meter-fill { background: var(--nook-amber); }
.n-meter--lg { height: 9px; }
.n-meter--thin { height: 3px; }

/* ============================================================
   7. AVATAR
   ============================================================ */

.n-avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--nook-olive);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nook-font-display);
  font-size: 13px;
  font-weight: 600;
  font-variation-settings: 'opsz' 20, 'SOFT' 20, 'WONK' 0;
  overflow: hidden;
  user-select: none;
}
.n-avatar--sm { width: 26px; height: 26px; font-size: 11px; }
.n-avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.n-avatar--xl { width: 88px; height: 88px; font-size: 32px; }
.n-avatar--brick { background: var(--nook-brick); }
.n-avatar--amber { background: var(--n-amber-600); }
.n-avatar--clay  { background: var(--n-clay-500); }
.n-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   8. MODAL / SHEET
   ============================================================ */

.n-modal-bg {
  position: fixed;
  inset: 0;
  z-index: var(--nook-z-modal);
  background: rgba(26, 18, 11, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nook-s-6);
  animation: n-fade var(--nook-t-base) var(--nook-ease-out) both;
}
@keyframes n-fade { from { opacity: 0 } to { opacity: 1 } }

.n-modal {
  width: 100%;
  max-width: 520px;
  max-height: min(86vh, 860px);
  display: flex;
  flex-direction: column;
  background: var(--nook-surface);
  border: 1px solid var(--nook-border);
  border-radius: var(--nook-r-xl);
  box-shadow: var(--nook-shadow-4);
  overflow: hidden;
  animation: n-modal-in var(--nook-t-slow) var(--nook-ease-out) both;
}
@keyframes n-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.n-modal--wide { max-width: 720px; }
.n-modal--sm   { max-width: 400px; }

.n-modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--nook-s-4);
  padding: var(--nook-s-6) var(--nook-s-6) var(--nook-s-4);
}
.n-modal-body {
  padding: 0 var(--nook-s-6) var(--nook-s-6);
  overflow-y: auto;
  flex: 1;
}
.n-modal-foot {
  display: flex;
  gap: var(--nook-s-3);
  padding: var(--nook-s-4) var(--nook-s-6);
  border-top: 1px solid var(--nook-border);
  background: var(--nook-surface-alt);
}
.n-modal-foot .n-btn { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .n-modal, .n-modal-bg { animation: none; }
}

/* Mobile: modals become bottom sheets. */
@media (max-width: 560px) {
  .n-modal-bg { align-items: flex-end; padding: 0; }
  .n-modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--nook-r-xl) var(--nook-r-xl) 0 0;
    animation-name: n-sheet-in;
  }
  @keyframes n-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
}

/* ============================================================
   9. TOASTS
   ============================================================ */

#nook-toasts {
  position: fixed;
  right: var(--nook-s-6);
  bottom: var(--nook-s-6);
  z-index: var(--nook-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--nook-s-2);
  align-items: flex-end;
  pointer-events: none;
}
@media (max-width: 768px) {
  #nook-toasts {
    right: var(--nook-s-4);
    left: var(--nook-s-4);
    bottom: calc(var(--nook-tabbar-h) + var(--nook-s-4));
    align-items: stretch;
  }
}

.n-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--nook-s-3);
  max-width: 380px;
  padding: 12px 16px;
  background: var(--nook-espresso);
  color: var(--nook-on-dark);
  border-radius: var(--nook-r-md);
  box-shadow: var(--nook-shadow-4), var(--nook-shadow-in-dark);
  font-size: 13.5px;
  animation: n-toast-in var(--nook-t-slow) var(--nook-ease-out) both;
}
.n-toast.is-out { animation: n-toast-out var(--nook-t-base) var(--nook-ease-in) both; }
.n-toast .n-ico { color: var(--nook-amber); flex: none; }

@keyframes n-toast-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes n-toast-out {
  to { opacity: 0; transform: translateY(6px) scale(0.98); }
}

/* ============================================================
   10. EMPTY / LOADING / ERROR STATES
   ============================================================ */

.n-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--nook-s-4);
  padding: var(--nook-s-16) var(--nook-s-6);
}
.n-empty .n-mark { opacity: 0.32; }
.n-empty-title {
  font-family: var(--nook-font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.24;
  letter-spacing: -0.014em;
  font-weight: 460;
  font-variation-settings: 'opsz' 48, 'SOFT' 38, 'WONK' 1;
  max-width: 22ch;
  color: var(--nook-ink-strong);
}
.n-empty p { color: var(--nook-muted); font-size: 13.5px; max-width: 40ch; }

/* Skeleton — a warm paper shimmer, not a grey pulse. */
.n-skel {
  background: linear-gradient(
    100deg,
    var(--nook-cream-deep) 20%,
    var(--n-cream-100) 40%,
    var(--nook-cream-deep) 60%
  );
  background-size: 220% 100%;
  border-radius: var(--nook-r-sm);
  animation: n-skel 1.5s linear infinite;
}
@keyframes n-skel { to { background-position: -120% 0; } }
.n-skel--text { height: 12px; margin-block: 6px; }
.n-skel--line { height: 1em; }
@media (prefers-reduced-motion: reduce) {
  .n-skel { animation: none; }
}

/* The Nook mark, drawing itself — our loading indicator. */
.n-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nook-s-4);
  padding: var(--nook-s-16);
  color: var(--nook-muted);
  font-size: 13px;
}
.n-loading .n-mark-draw path,
.n-loading .n-mark-draw rect {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: n-draw 1.6s var(--nook-ease) infinite;
}
@keyframes n-draw {
  0%   { stroke-dashoffset: 120; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -120; }
}

/* ============================================================
   11. THE NOOK MARK
   ------------------------------------------------------------
   A square room with one corner folded — the nook. Drawn in
   CSS so it can inherit colour anywhere.
   ============================================================ */

.n-mark {
  width: 18px; height: 18px;
  position: relative;
  display: inline-block;
  border: 1.4px solid currentColor;
  border-radius: 3px;
  flex: none;
}
.n-mark::after {
  content: '';
  position: absolute;
  top: -1.4px; right: -1.4px;
  width: 9px; height: 9px;
  background: var(--nook-brick);
  border-radius: 0 3px 0 6px;
}
.n-mark--lg { width: 34px; height: 34px; border-width: 2px; border-radius: 6px; }
.n-mark--lg::after { width: 17px; height: 17px; border-radius: 0 5px 0 11px; top: -2px; right: -2px; }
.n-mark--xl { width: 64px; height: 64px; border-width: 3px; border-radius: 10px; }
.n-mark--xl::after { width: 32px; height: 32px; border-radius: 0 8px 0 20px; top: -3px; right: -3px; }
.n-mark--amber::after { background: var(--nook-amber); }
.n-mark--olive::after { background: var(--nook-olive); }

/* ============================================================
   12. ICONS
   ============================================================ */

.n-ico {
  width: 18px; height: 18px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.n-ico--sm { width: 15px; height: 15px; stroke-width: 1.6; }
.n-ico--lg { width: 24px; height: 24px; stroke-width: 1.35; }
.n-ico--xl { width: 32px; height: 32px; stroke-width: 1.2; }

/* ============================================================
   13. SCROLL AREA
   ============================================================ */

.n-scroll-x {
  display: flex;
  gap: var(--nook-s-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--nook-border-strong) transparent;
  padding-bottom: var(--nook-s-2);
  -webkit-overflow-scrolling: touch;
}
.n-scroll-x > * { scroll-snap-align: start; flex: none; }
.n-scroll-x::-webkit-scrollbar { height: 6px; }
.n-scroll-x::-webkit-scrollbar-thumb {
  background: var(--nook-border-strong);
  border-radius: var(--nook-r-pill);
}
.n-scroll-x::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   14. ACCORDION
   ============================================================ */

.n-acc { border-top: 1px solid var(--nook-border); }
.n-acc-item { border-bottom: 1px solid var(--nook-border); }
.n-acc-trigger {
  display: flex;
  align-items: baseline;
  gap: var(--nook-s-5);
  width: 100%;
  padding: var(--nook-s-5) 0;
  text-align: left;
  cursor: pointer;
  color: var(--nook-ink-strong);
}
.n-acc-trigger:hover .n-acc-q { color: var(--nook-brick); }
.n-acc-q {
  flex: 1;
  font-family: var(--nook-font-display);
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 520;
  line-height: 1.32;
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 28, 'SOFT' 22, 'WONK' 0;
  transition: color var(--nook-t-base) var(--nook-ease);
}
.n-acc-num {
  font-family: var(--nook-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--nook-muted-soft);
  flex: none;
  width: 26px;
}
.n-acc-sign {
  flex: none;
  width: 14px; height: 14px;
  position: relative;
  align-self: center;
}
.n-acc-sign::before,
.n-acc-sign::after {
  content: '';
  position: absolute;
  background: var(--nook-muted);
  transition: transform var(--nook-t-base) var(--nook-ease-out),
              opacity var(--nook-t-base) var(--nook-ease);
}
.n-acc-sign::before { top: 6.5px; left: 0; width: 14px; height: 1.4px; }
.n-acc-sign::after  { left: 6.5px; top: 0; width: 1.4px; height: 14px; }
.n-acc-trigger[aria-expanded='true'] .n-acc-sign::after { transform: rotate(90deg); opacity: 0; }

.n-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--nook-t-slow) var(--nook-ease-out);
}
.n-acc-panel > div { overflow: hidden; }
.n-acc-item.is-open .n-acc-panel { grid-template-rows: 1fr; }
.n-acc-answer {
  padding: 0 0 var(--nook-s-5) calc(26px + var(--nook-s-5));
  color: var(--nook-muted);
  font-size: 14.5px;
  line-height: 1.62;
  max-width: 62ch;
}
@media (max-width: 560px) {
  .n-acc-answer { padding-left: 0; }
}