/*
 * RumRunner - the only custom stylesheet in this app.
 *
 * assets/css/style.css is PRE-COMPILED Tailwind with no build step in this repo
 * (no tailwind.config.js, no node_modules, no CSS script in package.json), so a
 * Tailwind class that is not already compiled does nothing. The compiled set is
 * listed in docs/CLASS_WHITELIST.txt.
 *
 * This file exists only for components that genuinely do not exist in the
 * template. Every rule below must be justified in docs/BUILD_LOG.md.
 * If a Tailwind class already does the job, use the class, not this file.
 */

/* ---------------------------------------------------------------------------
 * 1. Live indicator pulse
 * Justification: `animate-pulse` is NOT compiled into style.css (verified
 * against docs/CLASS_WHITELIST.txt). The Live chip in the context strip needs
 * a pulsing dot on every one of the 14 pages.
 * ------------------------------------------------------------------------ */
@keyframes rum-pulse {
    0%,
    100% { opacity: 1; }
    50%  { opacity: 0.35; }
}

.rum-pulse {
    animation: rum-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ---------------------------------------------------------------------------
 * 2. Monospace fixture values
 * Justification: `font-mono` is NOT compiled into style.css. Paths, visitor
 * ids, site keys, stack frames and the tracker snippet all need a monospace
 * face to be readable.
 * ------------------------------------------------------------------------ */
.rum-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
 * 3. Numeric table columns
 * Justification: `tabular-nums` is NOT compiled into style.css. The mockup
 * encodes right-aligned numeric columns as a flag on every table header, so
 * this is used across all 14 screens.
 * ------------------------------------------------------------------------ */
.rum-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Table cells are centred by default in .table; numeric cells override. */
.table th.rum-num,
.table td.rum-num {
    text-align: right;
}

/* ---------------------------------------------------------------------------
 * 4. Brand palette re-point  (Wave 4)
 *
 * assets/css/style.css is pre-compiled Tailwind with no build step, so its
 * primary-* utilities carry LITERAL rgb() values and cannot be rebranded by
 * changing a custom property. Overriding --clr-primary alone reaches only the
 * .btn-cstm-* / .bg-cstm-* family; our pages use the Tailwind primary-* classes
 * too, so half the UI would have stayed on the old palette.
 *
 * These rules RE-POINT existing utilities. No new class is introduced and
 * style.css is not touched. This file loads last, so the cascade resolves here.
 *
 * Generated from style.css by mapping each rule's OWN colour value onto the
 * brand ramp, so hover and focus states keep their darker step instead of
 * flattening to the base. Ramp is the sampled logo orange #FD7200 mixed toward
 * white for 50-500 and toward black for 700-900.
 * ------------------------------------------------------------------------ */
.btn-primary-600:hover,
.btn-primary:hover {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
.btn-outline-primary,
.btn-outline-primary-600 {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
.\!border-primary-600 {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
}
.\!border-primary-700 {
  border-color: rgb(223 100 0 / var(--tw-border-opacity));
}
.border-primary-200 {
  border-color: rgb(254 218 189 / var(--tw-border-opacity));
}
.border-primary-300 {
  border-color: rgb(254 196 148 / var(--tw-border-opacity));
}
.border-primary-400 {
  border-color: rgb(254 165 92 / var(--tw-border-opacity));
}
.border-primary-50 {
  border-color: rgb(255 244 235 / var(--tw-border-opacity));
}
.border-primary-600 {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
}
.\!bg-primary-600 {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
.\!bg-primary-700 {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
.bg-primary-100 {
  background-color: rgb(255 235 219 / var(--tw-bg-opacity));
}
.bg-primary-200 {
  background-color: rgb(254 218 189 / var(--tw-bg-opacity));
}
.bg-primary-300 {
  background-color: rgb(254 196 148 / var(--tw-bg-opacity));
}
.bg-primary-400 {
  background-color: rgb(254 165 92 / var(--tw-bg-opacity));
}
.bg-primary-50 {
  background-color: rgb(255 244 235 / var(--tw-bg-opacity));
}
.bg-primary-500 {
  background-color: rgb(253 135 38 / var(--tw-bg-opacity));
}
.bg-primary-600 {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
.bg-primary-600\/10 {
  background-color: rgb(253 114 0 / 0.1);
}
.bg-primary-600\/20 {
  background-color: rgb(253 114 0 / 0.2);
}
.bg-primary-600\/25 {
  background-color: rgb(253 114 0 / 0.25);
}
.bg-primary-700 {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
.bg-primary-800 {
  background-color: rgb(190 86 0 / var(--tw-bg-opacity));
}
.bg-primary-900 {
  background-color: rgb(157 71 0 / var(--tw-bg-opacity));
}
.from-primary-500 {
  --tw-gradient-to: rgb(253 135 38 / 0);
}
.from-primary-600\/10 {
  --tw-gradient-from: rgb(253 114 0 / 0.1);
  --tw-gradient-to: rgb(253 114 0 / 0);
}
.from-primary-700 {
  --tw-gradient-to: rgb(223 100 0 / 0);
}
.to-primary-600\/50 {
  --tw-gradient-to: rgb(253 114 0 / 0.5);
}
.text-primary-600 {
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
.hover\:border-primary-600:hover {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
}
.hover\:\!bg-primary-800:hover {
  background-color: rgb(190 86 0 / var(--tw-bg-opacity));
}
.hover\:bg-primary-100:hover {
  background-color: rgb(255 235 219 / var(--tw-bg-opacity));
}
.hover\:bg-primary-50:hover {
  background-color: rgb(255 244 235 / var(--tw-bg-opacity));
}
.hover\:bg-primary-600:hover {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
.hover\:bg-primary-600\/20:hover {
  background-color: rgb(253 114 0 / 0.2);
}
.hover\:bg-primary-700:hover {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
.hover\:text-primary-600:hover {
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
.hover\:text-primary-700:hover {
  color: rgb(223 100 0 / var(--tw-text-opacity));
}
.focus\:bg-primary-600:focus {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
.focus\:\!ring-primary-300:focus {
  --tw-ring-color: rgb(254 196 148 / var(--tw-ring-opacity));
}
.focus\:ring-primary-300:focus {
  --tw-ring-color: rgb(254 196 148 / var(--tw-ring-opacity));
}
.focus\:ring-primary-500:focus {
  --tw-ring-color: rgb(253 135 38 / var(--tw-ring-opacity));
}
.group:hover .group-hover\:bg-primary-600 {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:text-primary-600 {
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
.peer:checked~.peer-checked\:border-primary-600 {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
}
.peer:checked~.peer-checked\:bg-primary-600 {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
.peer:checked~.peer-checked\:text-primary-600 {
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
:is(.dark .dark\:border-primary-600) {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
}
:is(.dark .dark\:border-primary-600\/50) {
  border-color: rgb(253 114 0 / 0.5);
}
:is(.dark .dark\:\!bg-primary-600) {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
:is(.dark .dark\:\!bg-primary-700) {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
:is(.dark .dark\:bg-primary-600) {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
:is(.dark .dark\:bg-primary-600\/10) {
  background-color: rgb(253 114 0 / 0.1);
}
:is(.dark .dark\:bg-primary-600\/25) {
  background-color: rgb(253 114 0 / 0.25);
}
:is(.dark .dark\:bg-primary-100) {
  background-color: rgb(255 235 219 / var(--tw-bg-opacity));
}
:is(.dark .dark\:bg-primary-600\/20) {
  background-color: rgb(253 114 0 / 0.2);
}
:is(.dark .dark\:text-primary-400) {
  color: rgb(254 165 92 / var(--tw-text-opacity));
}
:is(.dark .dark\:text-primary-500) {
  color: rgb(253 135 38 / var(--tw-text-opacity));
}
:is(.dark .dark\:text-primary-600) {
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
:is(.dark .dark\:hover\:border-primary-600:hover) {
  border-color: rgb(253 114 0 / var(--tw-border-opacity));
}
:is(.dark .dark\:hover\:\!bg-primary-700:hover) {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
:is(.dark .dark\:hover\:bg-primary-600:hover) {
  background-color: rgb(253 114 0 / var(--tw-bg-opacity));
}
:is(.dark .dark\:hover\:bg-primary-700:hover) {
  background-color: rgb(223 100 0 / var(--tw-bg-opacity));
}
:is(.dark .dark\:hover\:bg-primary-800\/25:hover) {
  background-color: rgb(190 86 0 / 0.25);
}
:is(.dark .dark\:hover\:text-primary-600:hover) {
  color: rgb(253 114 0 / var(--tw-text-opacity));
}
:is(.dark .dark\:focus\:ring-primary-600:focus) {
  --tw-ring-color: rgb(253 114 0 / var(--tw-ring-opacity));
}
:is(.dark .dark\:focus\:ring-primary-800:focus) {
  --tw-ring-color: rgb(190 86 0 / var(--tw-ring-opacity));
}

/* ---------------------------------------------------------------------------
 * 5. Filled brand surfaces  (Wave 8, replaces the Wave 5 slate-ink attempt)
 *
 * White on the brand orange #FD7200 is 2.77:1, below the 4.5:1 AA floor. Wave 5
 * solved that by darkening the INK to slate; it passed but read heavy. This
 * solves it on the BACKGROUND instead and restores white ink.
 *
 * Computed, not chosen by eye: scaling the brand orange toward black until white
 * clears 4.5:1 lands on #C25700 (brand x0.766, 4.51:1). The hover step continues
 * to #AC4D00 (x0.678, 5.50:1), which is visibly darker again.
 *
 * FILLED SURFACES ONLY. The brand orange is untouched everywhere else: icons,
 * links, chart series, badges, progress bars and the logo all keep #FD7200. That
 * is why this darkens specific filled selectors rather than --clr-primary.
 * ------------------------------------------------------------------------ */
:root {
  --btn-primary-bg: #C25700;        /* white 4.51:1 */
  --btn-primary-bg-hover: #AC4D00;  /* white 5.50:1 */
}

.btn-cstm-primary,
.dark .btn-cstm-primary {
  background-color: var(--btn-primary-bg);
  color: var(--txt-white) !important;
}

.btn-cstm-primary:hover,
.dark .btn-cstm-primary:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--txt-white) !important;
}

.btn-primary,
.btn-primary-600 {
  background-color: var(--btn-primary-bg);
  color: var(--txt-white);
}

.btn-primary:hover,
.btn-primary-600:hover {
  background-color: var(--btn-primary-bg-hover);
  color: var(--txt-white);
}

/*
 * Compounds of two existing classes, so no new class enters the markup. These
 * cover the selected date-range control and the active pagination page.
 */
.bg-primary-600.text-white,
.bg-cstm-primary.text-white {
  background-color: var(--btn-primary-bg);
  color: var(--txt-white);
}

/*
 * Active sidebar item. custom-style.css fills it with var(--bg-primary) and puts
 * white on top, which is the same 2.77:1 problem on a filled surface.
 */
.cstm-sidebar-menu li > a.active-page,
.cstm-sidebar-menu li > a.active-page:hover {
  background-color: var(--btn-primary-bg) !important;
  color: var(--txt-white) !important;
  /* width:max-content; */
}

/* ---------------------------------------------------------------------------
 * 6. Identifier link ink  (Wave 5)
 *
 * Visitor-id links were text-primary-600, which after the rebrand put brand
 * orange (hue 27) beside warning amber (hue 33) in the same table row on
 * rum-visitors.php. Six degrees apart is not a usable distinction.
 *
 * These links now use the brand slate, which removes the collision without
 * altering either hue. Same treatment on rum-live.php, which links identically.
 * Dark mode falls back to white, since slate on a dark table row is unreadable.
 * ------------------------------------------------------------------------ */
.rum-ink {
  color: var(--txt-strong);
}

.dark .rum-ink {
  color: var(--txt-white);
}

/* ---------------------------------------------------------------------------
 * 7. Member sign-in surface
 * Keeps the magic-link form's markup and JavaScript hooks intact while giving
 * the public sign-in page its own responsive, card-based presentation.
 * ------------------------------------------------------------------------ */
.rum-sign-in-page {
  min-width: 320px;
}

.rum-sign-in-shell {
  align-items: center;
  background: linear-gradient(135deg, #f4f5f7 0%, #e9edf2 100%);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.rum-sign-in-card {
  background: rgb(255 255 255 / 0.94);
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 58rem;
  padding: 1.5rem;
  width: 100%;
}

.rum-sign-in-panel {
  margin: 0 auto;
  max-width: 30rem;
  padding: 1.5rem 0;
}

.rum-sign-in-heading {
  text-align: center;
}

.rum-sign-in-logo {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin-bottom: 1.5rem;
  max-width: 13rem;
}

.rum-sign-in-logo img {
  display: block;
  max-height: 3rem;
  max-width: 100%;
  object-fit: contain;
}

.rum-sign-in-heading h1 {
  color: var(--txt-strong);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0;
}

.rum-sign-in-heading p {
  color: var(--txt-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0.625rem auto 2rem;
  max-width: 30rem;
}

.rum-sign-in-form {
  margin: 0 auto;
  max-width: 30rem;
}

.rum-sign-in-field {
  margin-bottom: 0;
  padding-top: 2.5rem
}
.email-icon-position{
  top: 58px;
  left: 10px;
}
.rum-sign-in-field .rum-sign-in-label {
  color: var(--txt-strong);
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  left: 0;
  position: absolute;
  top: 0;
}

.rum-sign-in-field .form-control {
  box-shadow: none;
}

.rum-sign-in-field .form-control:focus {
  border-color: var(--clr-primary);
}

.rum-sign-in-form #send-link {
  min-height: 3.5rem;
}

.rum-sign-in-form #success-message,
.rum-sign-in-form #error-message {
  margin-top: 0;
}

.dark .rum-sign-in-shell {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.dark .rum-sign-in-card {
  background: rgb(31 41 55 / 0.96);
  border-color: rgb(75 85 99 / 0.8);
}

.dark .rum-sign-in-heading h1,
.dark .rum-sign-in-field .rum-sign-in-label {
  color: var(--txt-white);
}

/* ---------------------------------------------------------------------------
 * 8. Dashboard bottom bar
 * A compact control surface for live status, reporting range, and export.
 * IDs and range button utility classes remain unchanged for the existing JS.
 * ------------------------------------------------------------------------ */
.rum-bottom-bar {
  align-items: center;
  background: rgb(255 255 255 / 0.9);
  border: 1px solid var(--border-base);
  border-radius: 0.875rem;
  display: flex;
  /*
   * WRAP, added 2026-08-28. Without it this bar is a two-item flex row that cannot get
   * narrower than its contents: an intro sentence on the left and a live chip, four range
   * buttons and Export on the right. Flex items default to min-width:auto, so neither half
   * will shrink, and the bar pushes out of its card instead of reflowing.
   *
   * It was not the cause of the Commerce overflow - that was `col-span-12` inside a
   * one-column grid, eleven implicit tracks wide, dragging the shared container out and
   * taking this bar with it - but this bar had the same latent fault and would have shown
   * it on a narrow viewport on its own. Fixed with the cause rather than after it.
   */
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  /* margin-bottom: 1.5rem; */
  padding: 0.875rem 1rem;
}

.rum-bottom-bar__intro {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  /* Lets the sentence wrap rather than setting the bar's minimum width. */
  min-width: 0;
}

.rum-bottom-bar__eyebrow {
  color: var(--txt-strong);
  font-size: 0.8125rem;
  font-weight: 700;
}

.rum-bottom-bar__hint {
  color: var(--txt-muted);
  font-size: 0.75rem;
}

.rum-bottom-bar__actions,
.rum-bottom-bar__ranges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rum-bottom-bar__live {
  align-items: center;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  font-size: 0.8125rem;
  gap: 0.375rem;
  line-height: 1;
  padding: 0.625rem 0.75rem;
  white-space: nowrap;
}

.rum-bottom-bar__live strong {
  color: #166534;
  font-weight: 700;
}

.rum-bottom-bar__ranges {
  background: rgb(245 246 250 /1);
  border: 1px solid #f8f8fa;
  border-radius: 0.75rem;
  gap: 0.25rem;
  padding: 0.25rem;
}

.rum-bottom-bar__range {
  box-shadow: none;
  min-height: 2.25rem;
  transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

/*
 * A RANGE THE PLAN CANNOT REACH. Not `disabled`, because it is a link to pricing that must stay
 * clickable and focusable - a disabled control tells a merchant they cannot and stops there.
 * Muted so it reads as unavailable beside the live buttons, with the lock icon carrying the
 * meaning and the title attribute naming the tier.
 */
.rum-bottom-bar__range.rum-range-btn--locked {
  opacity: .65;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.rum-bottom-bar__range.rum-range-btn--locked:hover { opacity: 1; }

.rum-bottom-bar__range[aria-pressed="true"] {
  box-shadow: 0 2px 5px rgb(39 46 55 / 0.18);
}

.rum-bottom-bar__range:focus-visible,
.rum-bottom-bar__export:focus-visible {
  outline: 3px solid rgb(var(--clr-primary-rgb) / 0.25);
  outline-offset: 2px;
}

.rum-bottom-bar__export {
  min-height: 2.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.dark .rum-bottom-bar {
  background: rgb(38 45 57 / 0.94);
  border-color: #4b5563;
}

.dark .rum-bottom-bar__eyebrow { color: var(--txt-white); }
.dark .rum-bottom-bar__hint { color: #cbd5e1; }
.dark .rum-bottom-bar__live { background: rgb(22 101 52 / 0.25); border-color: rgb(74 222 128 / 0.35); color: #bbf7d0; }
.dark .rum-bottom-bar__live strong { color: #dcfce7; }
.dark .rum-bottom-bar__ranges { background: rgb(55 65 81 / 0.8); border-color: #4b5563; }

@media (max-width: 767px) {
  .rum-bottom-bar {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 1rem;
  }

  .rum-bottom-bar__actions { justify-content: space-between; }
  .rum-bottom-bar__ranges { flex: 1 1 100%; order: 3; }
  .rum-bottom-bar__range { flex: 1 1 auto; }
  .rum-bottom-bar__export { margin-left: auto; }
}

@media (min-width: 640px) {
  .rum-sign-in-card { padding: 3rem; }
  .rum-sign-in-panel { padding: 1rem 0; }
}

/* ---------------------------------------------------------------------------
 * 5. Skeleton loading shimmer
 * Justification: `animate-pulse` is NOT compiled into style.css. Skeleton
 * states improve perceived performance on stat tiles and tables during data
 * loads. This animation is used across components when `loading` is true.
 * ------------------------------------------------------------------------ */
@keyframes rum-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.rum-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: rum-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
}

.dark .rum-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

/* ---------------------------------------------------------------------------
 * URL CELLS
 *
 * Added 2026-08-28. The pages show full URLs
 * (makkpress.wixstudio.com/sunnyecomm/product-page/t-shirt-dress) rather than the
 * prefix-stripped path, and those are long enough to push the numeric columns of a
 * table out of view.
 *
 * WHY THIS IS NOT `truncate max-w-md`, which is what it was first written as.
 * `.truncate` IS compiled globally in style.css and works. `.max-w-md` and `.max-w-xs`
 * are NOT: they exist only as `.pricing-page .max-w-md`, scoped to a page these tables
 * never render on. So the clamp silently did nothing, the span sat at its natural width
 * (measured at 665px), the ellipsis never engaged, and every table carrying a URL
 * overflowed its container and hid its own numeric columns.
 *
 * The class checker passed it, because the whitelist records that a class name appears
 * somewhere in the compiled CSS and cannot know the selector was scoped to another page.
 * That is a real limit of the gate, not a bug in it.
 *
 * Self-contained on purpose: these do not depend on `truncate` or `block` also being in
 * the markup, so a call site cannot half-apply the behaviour.
 *
 * The widths are the point. A URL column must be wide enough to show the part that
 * differs between rows, and narrow enough that the numbers beside it stay on screen at
 * 1440px, which is where these tables were measured.
 * ------------------------------------------------------------------------ */
.rum-url,
.rum-url-wide {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * The narrow clamp, for URL columns that sit beside numeric ones.
 *
 * Owner decision 2026-08-28: every path column shows the FULL URL. An earlier pass
 * shortened the narrow panels to paths with the host named once in the panel heading,
 * because at 11rem a clamped full URL shows only the host and reads identically on every
 * row. That was reverted on instruction; consistency across the pages won over density in
 * three of them.
 *
 * 20rem is the consequence: wide enough that a full URL shows meaningfully more than its
 * host, which means the Entry pages and Exit pages panels now scroll horizontally inside
 * .table-responsive, as the wider tables already do. The complete URL is in the title on
 * every cell either way.
 */
.rum-url { max-width: 20rem; }

/* The URL is the point of the table: Pages, Errors, Vitals, Session trail, Journeys. */
.rum-url-wide { max-width: 34rem; }

/* ---------------------------------------------------------------------------
 * UTILITIES THE THEME ONLY COMPILED UNDER .pricing-page
 *
 * Added 2026-08-28, after the class checker learned to test whether a class can
 * actually match in context. These four are used throughout the merchant pages and were
 * doing NOTHING: their only rules in custom-style.css are scoped to `.pricing-page`, a
 * page these tables and panels never render inside.
 *
 * Nothing looked broken, which is exactly why it lasted. Body copy simply had no
 * line-height set, a divider had no left border, and a width clamp did not clamp.
 *
 * Defined here under the rum- prefix rather than by unscoping the theme's own rules:
 * assets/css/custom-style.css is inherited furniture shared with the cloned app, and
 * widening a selector there changes pages this project does not own.
 * ------------------------------------------------------------------------ */

/* Body copy line-height. The theme's .pricing-page .leading-relaxed is 1.625. */
.rum-leading { line-height: 1.625; }

/* Vertical rule between two columns of a row. */
.rum-border-l { border-left-width: 1px; border-left-style: solid; }

/* Paragraph measure. Matches the theme's max-w-md so the look is unchanged. */
.rum-measure { max-width: 28rem; }

/* Card eyebrow letter-spacing. partials/components/CardHeader.php renders an uppercase
 * eyebrow on every card on all 14 pages with `tracking-wide`, whose only rule is
 * `.pricing-page .tracking-wide`, so uppercase text has been running at default tracking
 * everywhere. */
.rum-tracking { letter-spacing: 0.025em; }

/* ---------------------------------------------------------------------------
 * JOURNEYS FLOW NODE LABEL
 *
 * The node is a fixed box in a positioned diagram, so its label cannot simply grow. It
 * used `truncate`, which clips the END of the string, and with a full URL in a ~180px box
 * that produced "www.makkpress.com/studio-conta..." on every node: the host, which is the
 * same everywhere, survived and the path, which is the only thing that tells two nodes
 * apart, was cut.
 *
 * The label is now the path alone, with the host stated once in the panel caption. This
 * lets it wrap to two lines and clamps there, so a long product path shows its end rather
 * than losing it. Wrapping is safe here in a way it is not in a table: these boxes are
 * already a fixed height, so a two-line label cannot make rows jump.
 * ------------------------------------------------------------------------ */
.rum-node-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container .tooltip-content {
    visibility: hidden;
    width: 220px;
    background-color: white; /* Light gray */
    color: rgb(0 0 0 / var(--tw-text-opacity));; /* Dark text for contrast */
    text-align: center;
    border-radius: 8px;
    padding: 10px 14px;
    position: absolute;
    z-index: 9999;
    top: 100%; /* Position below the icon */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px; /* Space between icon and tooltip */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    line-height: 1.4;
}

.tooltip-container .tooltip-content::before {
    content: "";
    position: absolute;
    bottom: 100%; /* Arrow points up from the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #f3f4f6 transparent; /* Light gray arrow */
}

.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* Dark mode support */
.dark .tooltip-container .tooltip-content {
    background-color: white;
    color:rgb(0 0 0 / var(--tw-text-opacity));
    border-color: #4b5563;
}

.dark .tooltip-container .tooltip-content::before {
    border-color: transparent transparent #374151 transparent;
}
.border-t-other-app{
    padding-top: 10px;
    border-top: 1px solid rgba(75, 85, 99, 0.1)
}

/* ---------------------------------------------------------------------------
 * N. Pricing FAQ accordion, and the testimonial rail
 *
 * Justification, per the rule at the top of this file: three things here have
 * no compiled Tailwind equivalent in docs/CLASS_WHITELIST.txt.
 *
 *   1. `group-open:rotate-180` is NOT compiled, so a <details> chevron cannot
 *      be turned with utility classes. The accordion is built on <details> and
 *      <summary> rather than JavaScript so it opens with scripting disabled and
 *      is keyboard-operable and screen-reader-announced for free.
 *   2. `list-style: none` on a <summary> needs the -webkit pseudo-element as
 *      well, which no utility covers.
 *   3. `snap-x` / `snap-center` / `scroll-smooth` are NOT compiled, and the
 *      testimonial rail needs scroll snapping so a swipe lands on a card
 *      rather than between two.
 * ------------------------------------------------------------------------ */

.rum-faq__item > summary {
    list-style: none;
    cursor: pointer;
}
.rum-faq__item > summary::-webkit-details-marker { display: none; }

.rum-faq__chevron {
    transition: transform 0.2s ease;
}
.rum-faq__item[open] .rum-faq__chevron {
    transform: rotate(180deg);
}

/*
 * The rail scrolls horizontally and snaps. It is only ever rendered when there
 * is at least one published testimonial, so on a page with none this costs
 * nothing but the bytes of the rule.
 */
.rum-rail {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rum-rail::-webkit-scrollbar { display: none; }

.rum-rail__item {
    scroll-snap-align: center;
    flex: 0 0 100%;
}
@media (min-width: 768px) {
    .rum-rail__item { flex-basis: calc(50% - 0.75rem); }
}
@media (min-width: 1024px) {
    .rum-rail__item { flex-basis: calc(33.333% - 1rem); }
}

/* ---------------------------------------------------------------------------
 * N+1. The pricing page header bar
 *
 * Justification: no compiled Tailwind gradient stop matches the brand ramp, and
 * an uncompiled arbitrary stop renders a flat transparent strip rather than
 * failing loudly.
 *
 * A LIGHT FILL WITH SLATE INK, NOT A DARK FILL WITH WHITE INK.
 *
 * The first version of this bar used the Wave 8 darkened fills (#C25700 to
 * #AC4D00) under white text, which passes at 4.51:1 but is dark orange - a
 * colour the brand does not otherwise use, chosen only to make white legible.
 * The constraint was really about the INK, not the fill: white on the brand
 * orange #FD7200 is 2.77:1, so either the fill darkens or the ink does.
 *
 * Darkening the ink is the cheaper move and keeps the bar recognisably the
 * brand. Measured against --txt-strong #272E37, the app's own slate:
 *
 *     #FEE2CC   brand mixed 80% toward white   slate 11.07:1   AA and AAA
 *     #FFEEE0   --clr-primary-light (88%)      slate 12.09:1   AA and AAA
 *
 * Both stops are the brand orange mixed toward white on the same ramp the rest
 * of this file uses for 50-500, so the bar is derived from --clr-primary rather
 * than being a new colour. The worst point on the gradient is the deeper end at
 * 11.07:1, which is more than twice the 4.5 floor and clears AAA at 7.0 as well.
 *
 * FOR CONTRAST, the rejected alternatives, all measured:
 *
 *     #FD7200 brand orange, white ink          2.77:1   fails AA and the 3.0 floor
 *     #C25700 Wave 8 fill, white ink           4.51:1   AA, but dark
 *     #FEE2CC light tint, WHITE ink            1.28:1   unreadable
 *
 * That last line is why the ink token is set here explicitly rather than left to
 * inherit: a light bar with white text inherited from a parent would be invisible
 * and would look like a rendering fault rather than a contrast one.
 *
 * DARK MODE KEEPS THE LIGHT FILL. It reads as a light card on a dark page, which
 * is what the other cards on this page already do, and slate on it stays 11:1.
 * ------------------------------------------------------------------------ */

.rum-header-bar {
    background-image: linear-gradient(
        135deg,
        #FEE2CC,
        var(--clr-primary-light, #FFEEE0)
    );
    color: var(--txt-strong, #272E37);
}

.rum-header-bar .rum-header-bar__muted {
    color: var(--txt-strong, #272E37);
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
 * N+2. The header plan chip
 *
 * Justification: `leading-tight` is NOT compiled into style.css, and the chip's
 * usage is two stacked lines - the figure and the unit beneath it - which at the
 * default line height stand too far apart to read as one item and push the
 * header taller than the button beside them.
 *
 * `.rum-plan-chip` itself has existed as an unstyled naming hook since Wave 8;
 * it is registered in docs/rum-class-check.php now rather than being reported as
 * an unknown class on all thirteen pages.
 * ------------------------------------------------------------------------ */

.rum-plan-chip__stack {
    line-height: 1.15;
}

/*
 * THE PLAN LOCK DIALOG'S PANEL.
 *
 * Only the responsive padding lives here. The panel's colour, radius, shadow and width are
 * compiled Tailwind on the element itself; `md:py-8` and `md:px-10` are NOT compiled - style.css
 * has no `md:py-*` rule at all - so the breakpoint they were written for is expressed here
 * instead of in two class names that silently did nothing.
 */
@media (min-width: 768px) {
  .rum-plan-lock__panel { padding-top: 2rem; padding-bottom: 2rem; padding-left: 2.5rem; padding-right: 2.5rem; }
}

/*
 * THE LOCKED-ELEMENT VEIL. partials/rum-plan-veil.php.
 *
 * =========================================================================================
 * THE BLUR IS LIGHT, AND THAT IS THE WHOLE POINT
 *
 * It was 5px, which made the page underneath a smear. Owner instruction 2026-09-01: the veil
 * exists to say THERE IS SOMETHING HERE, not to hide it. 1.5px is enough to read as frosted
 * and not enough to stop a merchant seeing the shape of a funnel chart or a rule list. If it
 * ever becomes illegible again, the veil has stopped doing its job and become a curtain.
 *
 * The opacity does the "inactive" half rather than the blur: 0.85 with a slight desaturation
 * reads as switched off at any blur radius, and costs no legibility.
 *
 * =========================================================================================
 * A SMALL CONTROL, NOT A PANEL
 *
 * The lock used to be a full card sitting on the page with the headline, the body and the call
 * to action rendered inline. That is the dialog's job, said twice. Now it is a badge on the
 * element, and clicking it opens the one shared dialog like every other lock in the app.
 *
 * STICKY, so on a long page the badge stays in view while the content scrolls behind it. Its
 * container is click-through; only the badge itself takes pointer events, so the gap around it
 * does not swallow clicks meant for the page.
 *
 * `pointer-events: none` on the content is the fallback for the `inert` attribute on the same
 * element; `inert` does the real work where it exists. Neither is a security control.
 */
.rum-plan-veil { position: relative; }

.rum-plan-veil__content {
  filter: blur(1.5px) saturate(.85);
  -webkit-filter: blur(1.5px) saturate(.85);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: .85;
}

/*
 * THE LOCK BADGE, BESIDE THE SECTION TITLE.
 *
 * It floated centred over the veiled block until 2026-09-01. Owner instruction: that reads as
 * something sitting ON TOP OF the data rather than as an annotation on the panel, and a panel is
 * what is locked. It sits in the card header's right slot now, on the same row as the title and
 * subtitle, and the veil beneath carries nothing at all.
 *
 * It is an ordinary inline element. No absolute positioning, no sticky, no overlay: the header's
 * own `justify-between` right-aligns it and the flex-wrap handles narrow screens, which is how
 * every other control in a card header already behaves.
 */
.rum-plan-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  background:var(--btn-primary-bg);
  color:var(--txt-white);
  border: none;
  box-shadow: 0 1px 3px rgb(15 23 42 / .08);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.rum-plan-lock-badge:hover,
.rum-plan-lock-badge:focus-visible {
  border-color: #cbd5e1;
  box-shadow: 0 4px 10px rgb(15 23 42 / .12);
}

.dark .rum-plan-lock-badge {
  background: #1f2937;
  color: #e5e7eb;
  border-color: #374151;
}

/*
 * =========================================================================================
 * THE SKELETON PREVIEW. partials/rum-plan-skeleton.php.
 *
 * Bars, not numbers. Every one of these is an empty shape: the feature's LAYOUT with nothing
 * asserted in it. Owner instruction 2026-09-01, and the reasoning is the same one that removed
 * the harbourgoods seed site and the demo funnels - a merchant's own dashboard is the one place
 * an invented figure is read as real, and blurring it does not make it less invented. A squint
 * or a screenshot recovers it.
 *
 * So there are no digits anywhere in the skeleton markup, and a proof asserts that.
 */
.rum-skel {
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #e2e8f0 0%, #eef2f7 50%, #e2e8f0 100%);
  height: .625rem;
}
.dark .rum-skel {
  background: linear-gradient(90deg, #374151 0%, #4b5563 50%, #374151 100%);
}

/*
 * SKELETON WIDTHS LIVE HERE, NOT IN TAILWIND CLASSES.
 *
 * The first version used w-24, w-32, w-36, w-56, w-4/5 and friends. SIX OF THEM ARE NOT COMPILED
 * in style.css, so those bars had no width at all and collapsed to nothing - and it was not
 * caught for two commits because the class checker was being run with no argument and no stdin,
 * which makes it read an empty document and print PASS.
 *
 * Defining them here removes the dependency on which Tailwind widths a pre-compiled stylesheet
 * happens to contain. A skeleton bar's width is a property of the skeleton.
 */
.rum-skel--w1 { width: 3rem; }
.rum-skel--w2 { width: 5rem; }
.rum-skel--w3 { width: 7rem; }
.rum-skel--w4 { width: 9rem; }
.rum-skel--w5 { width: 11rem; }
.rum-skel--w6 { width: 14rem; }

/* Chart bars, as a share of the row rather than a fixed size. */
.rum-skel-bar--f1 { width: 100%; }
.rum-skel-bar--f2 { width: 80%; }
.rum-skel-bar--f3 { width: 60%; }
.rum-skel-bar--f4 { width: 40%; }

.rum-skel--sm   { height: .5rem; }
.rum-skel--lg   { height: .875rem; }
.rum-skel--pill { border-radius: 999px; height: 1.5rem; }

/* Funnel bars: a descending series, drawn as blocks with no scale and no labels. */
.rum-skel-bar {
  border-radius: .375rem;
  background: linear-gradient(90deg, #dbeafe 0%, #e0e7ff 100%);
  height: 2.25rem;
}
.dark .rum-skel-bar {
  background: linear-gradient(90deg, #1e3a5f 0%, #312e6f 100%);
}

/* The axis a chart would sit on, with no ticks and no values. */
.rum-skel-axis {
  border-top: 1px dashed #cbd5e1;
  height: 0;
}
.dark .rum-skel-axis { border-top-color: #4b5563; }

/* ---------------------------------------------------------------------------
 * The country choropleth on dashboard.php.
 *
 * jVectorMap sizes itself to its container and renders nothing in a container
 * with no height, so this is the whole of what it needs. The height is a fixed
 * rem value rather than an aspect ratio because the world-mill projection is a
 * fixed 900x440 and a percentage height inside a grid cell resolves to zero.
 *
 * The library's own stylesheet, assets/css/lib/jquery-jvectormap-2.0.5.css, is
 * already loaded on every page by partials/head.php:26 and draws the tooltip
 * and the zoom buttons; nothing here overrides it.
 * ------------------------------------------------------------------------- */
.rum-map {
  width: 100%;
  height: 22rem;
}
@media (max-width: 640px) {
  .rum-map { height: 15rem; }
}