/* NUTRITION RAGE — 03 COMPONENTS — Buttons, pills, cards, forms, tables, badges, skeletons, — chips, tooltips, the placeholder frame. — Anything reusable that is not page furniture lives here. */

/* ---------------------------------------------------------------------
   CONTROLS

   A button is a machined part. The default control is graphite with a
   hairline edge, and green arrives only when the control is ACTIVATED —
   hover, focus, press.

   This used to be the other way round: `.nr-btn` was a solid green fill,
   so every card, pager, filter and form put a slab of the accent colour on
   screen. Twelve products meant twelve green blocks, and the 70/20/7/3
   discipline was a comment rather than a fact. Green is the 3%. It has to
   be spent on the one action that commits.

   `.nr-btn--commit` is that one action: add to cart, checkout, enter the
   system. One per screen. Text on green is ALWAYS --nr-on-rage, never white.
   ------------------------------------------------------------------ */
.nr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;min-height:44px;
  border-radius:var(--nr-r-sm);
  background:var(--nr-control);color:var(--nr-paper);
  font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  text-align:center;border:1px solid var(--nr-line-2);
  cursor:pointer;position:relative;
  transition:background var(--nr-fast) var(--nr-ease),
             border-color var(--nr-fast) var(--nr-ease),
             transform var(--nr-fast) var(--nr-ease),
             box-shadow var(--nr-fast) var(--nr-ease),
             color var(--nr-fast) var(--nr-ease);
}
/* Activation: the edge charges, the surface lifts. No fill change. */
.nr-btn:hover{
  background:var(--nr-control-hi);color:var(--nr-paper);
  border-color:var(--nr-rage);
  box-shadow:0 0 0 1px var(--nr-rage-dim),0 10px 30px rgba(0,0,0,.45);
}
.nr-btn:active{transform:translateY(1px);background:var(--nr-control-lo)}
.nr-btn:disabled,.nr-btn[aria-disabled="true"],.nr-btn.is-disabled{
  opacity:.4;pointer-events:none;box-shadow:none;border-color:var(--nr-line);
}
.nr-btn svg{width:16px;height:16px;flex-shrink:0}

/* The committing action. Green because it completes something. */
.nr-btn--commit,.nr-btn--primary{
  background:var(--nr-rage);color:var(--nr-on-rage);
  border-color:transparent;font-weight:800;
}
.nr-btn--commit:hover,.nr-btn--primary:hover{
  background:var(--nr-rage-hi);color:var(--nr-on-rage);
  border-color:transparent;
  box-shadow:0 10px 30px rgba(140,255,62,.20);
}
.nr-btn--commit:active,.nr-btn--primary:active{background:var(--nr-rage)}

.nr-btn--ghost{
  background:transparent;color:var(--nr-mute);
  border-color:var(--nr-line);
}
.nr-btn--ghost:hover{
  background:rgba(255,255,255,.04);color:var(--nr-paper);
  border-color:var(--nr-line-2);
  box-shadow:none;
}

/*
 * WhatsApp keeps its identity in the icon, not in a full-bleed fill. A
 * saturated WhatsApp green button next to a Nutrition Rage green button is
 * two different greens shouting at each other, and in a stack of branch
 * actions it was the loudest thing on the page.
 */
.nr-btn--wa{background:var(--nr-control);color:var(--nr-paper);border-color:var(--nr-line-2)}
.nr-btn--wa svg{color:var(--nr-wa)}
.nr-btn--wa:hover{
  background:var(--nr-control-hi);color:var(--nr-paper);
  border-color:var(--nr-wa);
  box-shadow:0 0 0 1px rgba(37,211,102,.18),0 10px 30px rgba(0,0,0,.45);
}

.nr-btn--sm{padding:8px 14px;font-size:12px;min-height:36px}
.nr-btn--lg{padding:14px 26px;font-size:14.5px;min-height:50px}
.nr-btn--wide{width:100%;justify-content:center;padding:13px 20px}
.nr-btn--icon{padding:0;width:44px;min-height:44px;flex-shrink:0}

.nr-btn.is-busy{color:transparent;pointer-events:none}
.nr-btn.is-busy::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(7,18,11,.35);border-top-color:var(--nr-on-rage);
  animation:nr-spin .7s linear infinite;
}
.nr-btn--ghost.is-busy::after{border-color:rgba(255,255,255,.25);border-top-color:var(--nr-paper)}
@keyframes nr-spin{to{transform:rotate(360deg)}}

/* text link with an arrow */
.nr-link{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--nr-rage-hi);font-size:13px;font-weight:650;
}
.nr-link svg{width:14px;height:14px;transition:transform var(--nr-fast) var(--nr-ease)}
.nr-link:hover svg{transform:translateX(3px)}

/* Status pills — always a leading dot */
.nr-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;
  background:rgba(255,255,255,.08);color:var(--nr-mute);
  /*
   * A status pill carries a sentence, not a word: "Closed · opens tomorrow
   * 09:00" is 30 characters. With white-space:nowrap and no width cap it
   * simply ran out of its card and off the side of the branch list. It now
   * wraps and stays inside whatever holds it; the dot stays on the first
   * line because the flex row aligns to the top.
   */
  max-width:100%;white-space:normal;text-align:left;
  align-items:flex-start;line-height:1.45;
}
.nr-pill::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex-shrink:0;
  /* Nudged onto the cap height of the first line, now that the label wraps. */
  margin-top:.42em;
}
.nr-pill--ok{background:transparent;border-color:var(--nr-rage);color:var(--nr-rage)}
.nr-pill--warn{background:rgba(240,200,126,.16);color:var(--nr-warn)}
.nr-pill--bad{background:rgba(240,155,132,.16);color:var(--nr-bad)}
.nr-pill--info{background:rgba(255,255,255,.08);color:var(--nr-mute)}
.nr-pill--plain::before{display:none}

/* bare status dot, used in the store bar, cart lines and product cards */
.nr-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;
  background:var(--nr-rage);box-shadow:0 0 0 3px rgba(140,255,62,.22);
}
.nr-dot--warn{background:var(--nr-warn);box-shadow:0 0 0 3px rgba(240,200,126,.2)}
.nr-dot--bad{background:var(--nr-bad);box-shadow:0 0 0 3px rgba(240,155,132,.2)}
.nr-dot--sm{width:5px;height:5px;box-shadow:none}

/* Cards and panels */
.nr-card{
  background:var(--nr-ink-3);
  border:1px solid var(--nr-line);
  border-radius:var(--nr-r);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--nr-med) var(--nr-ease),
             transform var(--nr-med) var(--nr-ease-out),
             box-shadow var(--nr-med) var(--nr-ease-out);
}
.nr-card__body{padding:14px 15px;display:flex;flex-direction:column;flex:1}
.nr-card__title{font-size:13.5px;font-weight:730;letter-spacing:-.02em;margin-bottom:4px}
.nr-card__meta{font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);color:var(--nr-mute-2)}
.nr-card--link:hover{
  border-color:rgba(140,255,62,.34);
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(140,255,62,.08);
}

.nr-panel{
  background:var(--nr-ink-2);
  border:1px solid var(--nr-line);
  border-radius:var(--nr-r);
  padding:18px;
}
.nr-panel--green{
  border-color:rgba(140,255,62,.3);
  background:var(--nr-ink-4);
}
.nr-panel--green .nr-panel__title{color:var(--nr-rage-hi)}
.nr-panel__title{font-size:13px;font-weight:730;margin-bottom:4px;letter-spacing:-.02em}
.nr-panel__text{font-size:12.5px;color:rgba(244,246,243,.72);line-height:1.5}

/* goal tile — the radial corner glow from the deck */
.nr-tile{
  position:relative;overflow:hidden;
  border:1px solid var(--nr-line);border-radius:11px;
  padding:16px 15px;background:var(--nr-ink-3);
  display:block;min-height:78px;
  transition:border-color var(--nr-med) var(--nr-ease),transform var(--nr-med) var(--nr-ease-out);
}
.nr-tile::after{
  content:"";position:absolute;right:-24px;bottom:-24px;
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle,rgba(140,255,62,.24),transparent 70%);
  transition:transform var(--nr-med) var(--nr-ease-out);
}
.nr-tile:hover{border-color:rgba(140,255,62,.36);transform:translateY(-2px)}
.nr-tile:hover::after{transform:scale(1.35)}
.nr-tile__name{display:block;font-size:13.5px;font-weight:730;letter-spacing:-.02em;margin-bottom:3px;position:relative}
.nr-tile__count{font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);color:var(--nr-mute-2);position:relative}

/* brand plate */
.nr-brand{
  border:1px solid var(--nr-line);border-radius:9px;
  padding:16px 8px;text-align:center;background:var(--nr-ink-3);
  font-size:11px;font-weight:700;letter-spacing:-.01em;
  color:rgba(244,246,243,.72);
  transition:border-color var(--nr-med) var(--nr-ease),color var(--nr-med) var(--nr-ease),background var(--nr-med) var(--nr-ease);
}
.nr-brand:hover{border-color:rgba(140,255,62,.4);color:var(--nr-paper);background:var(--nr-ink-4)}
.nr-brand small{
  display:block;font-family:var(--nr-mono);font-size:var(--nr-fs-8_5);
  color:var(--nr-mute-2);margin-top:3px;font-weight:600;
}

/* ---------------------------------------------------------------------
   THE PRODUCT WELL

   A photograph and the fallback icon are not the same object and must not
   be sized by the same rule.

   This frame was written around the placeholder SVG — a small line-drawn
   tub that is *meant* to sit modestly in the middle of an empty box. Real
   product photography then inherited `width:56%`, so every tub on the shop
   floated at just over half the width of its own card with a wide margin of
   nothing around it. The products are the stars of this site; they were
   being rendered as thumbnails.

   So: the icon keeps its modest size, and photographs fill the frame.
   ------------------------------------------------------------------ */
.nr-ph{
  aspect-ratio:1/1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  /* #0A1710 is a green-black, and the radial on top of it was green at 15%.
     Together they made every product well the greenest large surface on the
     site. Neutral graphite with a white key light instead. */
  background:
    radial-gradient(80% 70% at 50% 20%,rgba(255,255,255,.06),transparent 70%),
    var(--nr-ink-3);
}

/* Photography: fills the well, contained so nothing is ever cropped off a
   label the customer is trying to read. The small inset stops a tub's edge
   touching the frame, which reads as a mistake rather than as a bleed. */
.nr-ph>img{
  width:100%;height:100%;display:block;opacity:1;
  object-fit:contain;object-position:center;
  padding:4%;
  transition:transform var(--nr-med) var(--nr-ease-out);
}

/* The fallback icon. Deliberately small — it is signage, not a product. */
.nr-ph>svg{
  width:44%;height:auto;display:block;opacity:.5;
  transition:transform var(--nr-med) var(--nr-ease-out);
}

.nr-ph--sm{border-radius:var(--nr-r-xs)}
.nr-ph--sm>img{padding:8%}
.nr-ph--sm>svg{width:52%}
.nr-ph--wide{aspect-ratio:16/9}
.nr-ph--wide>img{padding:4%}
.nr-ph--wide>svg{width:30%}

.nr-card--link:hover .nr-ph>svg,
.nr-card--link:hover .nr-ph>img{transform:scale(1.04)}

.nr-ph__badge{
  position:absolute;top:9px;left:9px;z-index:2;
  font-family:var(--nr-mono);font-size:var(--nr-fs-8_5);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  /* An outlined technical marker. A filled green flag on every third card
     turned the grid into a wall of accent colour. */
  padding:3px 7px;border-radius:var(--nr-r-sm);
  background:color-mix(in srgb,var(--nr-ink) 78%,transparent);
  color:var(--nr-rage);border:1px solid var(--nr-rage);
  backdrop-filter:blur(4px);
}
/* The two actions that live ON a product image, stacked. The wrapper carries
   the position so each button is just a button — which is what lets a second
   one sit under the first without either knowing about the other. */
.nr-pc__acts{position:absolute;top:8px;right:8px;z-index:2;display:grid;gap:6px}
.nr-pc__acts .nr-ph__fav{position:static;top:auto;right:auto}
/* Compare is the quieter of the two: it holds the outline until it is on. */
.nr-ph__fav--cmp[aria-pressed="true"]{
  background:var(--nr-rage);color:var(--nr-on-rage);
}
.nr-ph__fav[aria-pressed="true"]{color:var(--nr-rage)}
.nr-ph__fav--cmp[aria-pressed="true"]{color:var(--nr-on-rage)}

.nr-ph__fav{
  position:absolute;top:8px;right:8px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;
  color:var(--nr-paper);
  transition:background var(--nr-fast) var(--nr-ease),color var(--nr-fast) var(--nr-ease);
}
.nr-ph__fav svg{width:14px;height:14px;opacity:.8}
.nr-ph__fav:hover{background:rgba(0,0,0,.72);color:var(--nr-rage-hi)}
.nr-ph__fav.is-active{color:var(--nr-rage);background:var(--nr-ink-4);box-shadow:inset 0 0 0 1px var(--nr-rage)}
.nr-ph__fav.is-active svg{opacity:1;fill:currentColor}

/* Forms */
.nr-field{margin-bottom:14px}
.nr-label{
  display:block;font-size:12px;font-weight:650;
  color:var(--nr-mute);margin-bottom:6px;letter-spacing:-.005em;
}
.nr-label .required{color:var(--nr-bad)}

.nr-input,
input[type="text"],input[type="email"],input[type="url"],input[type="password"],
input[type="search"],input[type="number"],input[type="tel"],input[type="date"],
select,textarea{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--nr-line);
  border-radius:var(--nr-r-sm);
  padding:11px 13px;min-height:44px;
  font-size:13.5px;color:var(--nr-paper);
  transition:border-color var(--nr-fast) var(--nr-ease),background var(--nr-fast) var(--nr-ease);
  appearance:none;-webkit-appearance:none;
}
textarea{min-height:120px;line-height:1.55;resize:vertical}
.nr-input::placeholder,input::placeholder,textarea::placeholder{color:var(--nr-mute-2)}
.nr-input:hover,input:hover,select:hover,textarea:hover{border-color:var(--nr-line-2)}
.nr-input:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--nr-rage);
  background:var(--nr-ink-4);
  outline:none;
}
.nr-input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--nr-rage-hi);outline-offset:1px;
}
.nr-input.is-error,input.is-error{border-color:var(--nr-bad)}
.nr-help{font-size:11.5px;color:var(--nr-mute-2);margin-top:5px}
.nr-error{font-size:11.5px;color:var(--nr-bad);margin-top:5px}

select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9A8E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
  padding-right:36px;cursor:pointer;
}
select option{background:var(--nr-ink-2);color:var(--nr-paper)}

.nr-check{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;color:var(--nr-mute);
  padding:5px 0;cursor:pointer;min-height:32px;
}
.nr-check input{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;min-height:0;padding:0;flex-shrink:0;
  border:1px solid var(--nr-line-2);border-radius:4px;
  background:transparent;position:relative;cursor:pointer;
}
.nr-check input[type="radio"]{border-radius:50%}
.nr-check input:checked{background:var(--nr-rage);border-color:var(--nr-rage)}
.nr-check input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:5px;top:1px;
  width:4px;height:8px;
  border:solid var(--nr-on-rage);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.nr-check input[type="radio"]:checked{
  background:radial-gradient(circle,var(--nr-rage) 45%,transparent 48%);
  border-color:var(--nr-rage);
}
.nr-check:hover{color:var(--nr-paper)}
.nr-check__count{margin-left:auto;font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);color:var(--nr-mute-2)}

/* search input with a leading glyph */
.nr-searchbox{position:relative;display:flex;align-items:center;width:100%}
.nr-searchbox svg{
  position:absolute;left:12px;width:16px;height:16px;
  color:var(--nr-mute-2);pointer-events:none;
}
.nr-searchbox .nr-input,.nr-searchbox input{padding-left:36px}

/* Chips */
.nr-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(140,255,62,.34);
  background:transparent;color:var(--nr-rage);
  border-radius:20px;padding:5px 12px;
  font-size:11.5px;font-weight:650;white-space:nowrap;
  min-height:32px;
}
.nr-chip--quiet{
  border-color:var(--nr-line);background:transparent;color:var(--nr-mute);
}
.nr-chip--quiet:hover{border-color:var(--nr-line-2);color:var(--nr-paper)}
.nr-chip__x{
  display:inline-flex;width:14px;height:14px;opacity:.7;
}
.nr-chip__x:hover{opacity:1}
.nr-chips{display:flex;gap:8px;flex-wrap:wrap}

/* Badges */
.nr-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--nr-r-sm);
  background:var(--nr-rage);color:var(--nr-on-rage);
  font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);font-weight:800;line-height:1;
}
.nr-badge--off{background:rgba(255,255,255,.10);color:var(--nr-mute)}

.nr-tag{
  display:inline-flex;align-items:center;
  font-family:var(--nr-mono);font-size:var(--nr-fs-8_5);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:var(--nr-r-sm);
  background:transparent;color:var(--nr-rage);
  border:1px solid var(--nr-rage);
}
.nr-tag--off{background:transparent;border-color:rgba(240,155,132,.4);color:var(--nr-bad)}

/* The amber cut-off strip */
.nr-cutoff{
  display:flex;align-items:center;gap:8px;
  font-family:var(--nr-mono);font-size:11px;
  color:var(--nr-warn);
  background:rgba(240,200,126,.10);
  border:1px solid rgba(240,200,126,.24);
  border-radius:var(--nr-r-sm);
  padding:9px 12px;
}
.nr-cutoff svg{width:14px;height:14px;flex-shrink:0}

/* progress meter — free delivery threshold */
.nr-progress__label{
  display:flex;justify-content:space-between;gap:10px;
  font-size:11.5px;color:var(--nr-mute);margin-bottom:7px;
}
.nr-progress__track{
  height:5px;background:rgba(255,255,255,.09);
  border-radius:3px;overflow:hidden;
}
.nr-progress__fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--nr-rage-lo),var(--nr-rage-hi));
  transition:width var(--nr-slow) var(--nr-ease-out);
}
.nr-progress__note{font-size:11px;color:var(--nr-rage-hi);margin-top:7px}

/* Tables */
.nr-table{width:100%;border-collapse:collapse;font-size:12.5px}
.nr-table th,.nr-table td{
  padding:11px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--nr-line);
}
.nr-table thead th{
  background:var(--nr-ink-3);vertical-align:bottom;
  font-size:11px;font-weight:730;letter-spacing:-.01em;
}
.nr-table--spec th:first-child,
.nr-table--spec td:first-child{
  width:160px;font-family:var(--nr-mono);font-size:var(--nr-fs-9_5);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--nr-mute-2);font-weight:700;
}
.nr-table .is-best{color:var(--nr-rage-hi);font-weight:800}
.nr-table tr.is-today{background:var(--nr-ink-4);box-shadow:inset 2px 0 0 var(--nr-rage)}
/* Two names for one thing. `.nr-table-scroll` is used by the account Progress
   template and had NO rule at all, so that table simply ran off the side of a
   phone. Aliased rather than renamed: both names are already in shipped
   markup.

   The mask is the affordance. A table that scrolls sideways with no visible
   edge reads as a table that is cut off — which is exactly how the account
   tabs were reported before they were made to wrap. */
.nr-table__wrap,.nr-table-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  min-width:0;max-width:100%;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
}
@media (max-width:900px){
  .nr-table__wrap,.nr-table-scroll,.nr-label__scroll{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  }
  /* At the end of the scroll there is nothing more to hint at, so the fade
     goes away rather than dimming the last column for no reason. */
  .nr-table__wrap:not(:hover){scroll-snap-type:none}
}

/* Skeletons */
@keyframes nr-shimmer{
  0%{background-position:-320px 0}
  100%{background-position:320px 0}
}
.nr-skel{
  display:block;border-radius:var(--nr-r-xs);
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.05) 100%);
  background-size:640px 100%;
  animation:nr-shimmer 1.3s linear infinite;
  min-height:12px;
}
.nr-skel--line{height:11px;margin-bottom:8px}
.nr-skel--line:last-child{width:62%;margin-bottom:0}
.nr-skel--title{height:16px;width:70%;margin-bottom:12px}

/* Tooltips */
.nr-tip{position:relative;display:inline-flex}
.nr-tip__bubble{
  position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translate(-50%,4px);
  background:var(--nr-ink-4);
  border:1px solid var(--nr-line-2);
  border-radius:var(--nr-r-xs);
  padding:7px 11px;
  font-size:11.5px;font-weight:600;color:var(--nr-paper);
  white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;z-index:60;
  box-shadow:0 12px 30px rgba(0,0,0,.5);
  transition:opacity var(--nr-fast) var(--nr-ease),transform var(--nr-fast) var(--nr-ease),visibility var(--nr-fast);
}
.nr-tip__bubble::after{
  content:"";position:absolute;top:100%;left:50%;
  transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--nr-line-2);
}
.nr-tip:hover .nr-tip__bubble,
.nr-tip:focus-within .nr-tip__bubble{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}

/* Notices and empty states */
.nr-note{
  border-left:2px solid var(--nr-rage);
  padding:4px 0 4px 16px;
  font-size:14px;line-height:1.6;
  color:rgba(244,246,243,.72);max-width:74ch;
}
.nr-note b{color:var(--nr-paper);font-weight:680}

.nr-empty{
  text-align:center;padding:clamp(38px,7vw,80px) 20px;
  border:1px dashed var(--nr-line-2);border-radius:var(--nr-r);
}
.nr-empty__title{font-size:19px;font-weight:750;letter-spacing:-.025em;margin-bottom:8px}
.nr-empty__text{font-size:13.5px;color:var(--nr-mute);max-width:46ch;margin:0 auto 20px}

/* Breadcrumbs and pagination */
.nr-crumbs{
  font-family:var(--nr-mono);font-size:var(--nr-fs-10_0);
  letter-spacing:.06em;color:var(--nr-mute-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  padding-block:14px;text-transform:uppercase;
}
.nr-crumbs a{color:var(--nr-mute-2)}
.nr-crumbs a:hover{color:var(--nr-rage-hi)}
.nr-crumbs__sep{opacity:.5}
.nr-crumbs [aria-current]{color:var(--nr-mute)}

.nr-pager{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  justify-content:center;padding-block:34px;
}
.nr-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--nr-line);border-radius:var(--nr-r-sm);
  font-size:13px;font-weight:650;color:var(--nr-mute);
  transition:border-color var(--nr-fast) var(--nr-ease),color var(--nr-fast) var(--nr-ease);
}
.nr-pager .page-numbers:hover{border-color:var(--nr-line-2);color:var(--nr-paper)}
.nr-pager .page-numbers.current{
  /* The current page is a state, not a call to action. It reads as
     selected — green edge, green figure — without becoming a green tile. */
  background:var(--nr-ink-4);border-color:var(--nr-rage);
  color:var(--nr-rage);font-weight:800;
}
.nr-pager .page-numbers.dots{border-color:transparent}

/* Article / editor content */
.nr-entry{font-size:16px;line-height:1.7;color:rgba(244,246,243,.84)}
.nr-entry>*+*{margin-top:1.05em}
/* wpautop wraps a shortcode-only page in paragraphs and leaves empty ones
   behind — around the installer comment on the My Account page, for one. An
   empty <p> is invisible but still takes a line-height and a 1.05em sibling
   margin, which is where the band of dead space above the account tabs came
   from. */
.nr-entry p:empty{display:none}
.nr-entry>.nr-account{margin-top:var(--nr-s5)}
.nr-entry h2{margin-top:1.6em;font-size:clamp(22px,2.6vw,30px)}
.nr-entry h3{margin-top:1.4em;font-size:clamp(18px,2vw,22px)}
.nr-entry ul,.nr-entry ol{padding-left:1.3em}
/* Prose lists breathe. COMPONENT LISTS DO NOT.

   This is the same fault as `p+p` on form rows, in the same file. `.nr-entry`
   wraps page content, and the My Account tabs are a <ul> rendered inside it —
   so every tile except the first got a .4em top margin, which pushed it down
   AND stopped it stretching to the grid row's height. Dashboard came out 54px
   tall and Orders 48px, sitting 7px lower: "alignment is off on dashboard and
   orders", and it was.

   Scoped the same way unclassed anchors are, a few lines above: a list with a
   class is a component and looks after its own spacing. */
.nr-entry ul:not([class]) li+li,
.nr-entry ol:not([class]) li+li{margin-top:.4em}
.nr-entry ul{list-style:disc}
.nr-entry ol{list-style:decimal}
.nr-entry img,.nr-entry figure{border-radius:var(--nr-r)}
.nr-entry figcaption{font-size:12.5px;color:var(--nr-mute-2);margin-top:8px}
.nr-entry pre{
  background:var(--nr-ink-2);border:1px solid var(--nr-line);
  border-radius:var(--nr-r-sm);padding:16px;overflow-x:auto;
}