/* Plan tiles: a small B (Basic) or P (Pro) square placed right after a tool, output or ability, so a
   reader knows which plan it belongs to. Quiet by design: it informs, it never sells.
   Free features get no tile. Pro includes AI, so there is no separate AI tile.
   Colors come from the page's design (set --plan-* on body); the defaults are design 002. */

.plan-tile {
  --pt-size: 16px;
  --pt-ink: var(--plan-b-ink, #526547);
  --pt-bg: var(--plan-b-bg, transparent);
  --pt-line: var(--plan-b-line, #b8c5aa);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: var(--pt-size);
  block-size: var(--pt-size);
  margin-inline-start: 6px;
  padding: 0;
  border: 1px solid var(--pt-line);
  border-radius: 4px;
  background: var(--pt-bg);
  color: var(--pt-ink);
  font: 700 10px/1 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  vertical-align: 0.08em;
  white-space: nowrap;
  user-select: none;
}
.plan-tile[data-plan="pro"] {
  --pt-ink: var(--plan-p-ink, #344b2c);
  --pt-bg: var(--plan-p-bg, #e4ead8);
  --pt-line: var(--plan-p-line, #b8c5aa);
}

/* Inside a flex row that already has a gap, or at the start of a line. */
.plan-tile--flush { margin-inline-start: 0; }

/* Next to a section heading. */
.plan-tile--lg { --pt-size: 18px; font-size: 11px; border-radius: 5px; vertical-align: 0.2em; }

/* On a dark or filled control (a navy or olive button, the video stage). */
.plan-tile--on-dark { --pt-ink: #ffffff; --pt-line: rgba(255, 255, 255, .62); --pt-bg: transparent; }
.plan-tile--on-dark[data-plan="pro"] { --pt-ink: #ffffff; --pt-line: rgba(255, 255, 255, .62); --pt-bg: rgba(255, 255, 255, .18); }

/* The word form, for lists and menus with room: "Basic", "Pro". */
.plan-tile--word { inline-size: auto; padding: 0 6px; font-size: 10.5px; font-weight: 600; }

/* A link tile (upgrade path): a 44px hit area around a 16px mark. */
a.plan-tile { cursor: pointer; }
a.plan-tile::before { content: ""; position: absolute; inset: -14px; }
a.plan-tile:hover { border-color: currentColor; }
.plan-tile:focus-visible { outline: 2px solid var(--pt-ink); outline-offset: 2px; }

/* The short label on hover or keyboard focus. */
.plan-tile[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 30;
  transform: translate(-50%, 2px);
  padding: 4px 8px;
  border-radius: 5px;
  background: #1f2622;
  color: #fff;
  font: 500 11px/1.3 "DM Sans", system-ui, sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.plan-tile[data-tip]:hover::after,
.plan-tile[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* The viewer already has this plan: quieter still, and no upgrade link. */
.plan-tile[data-have="1"] { opacity: .55; cursor: default; }
a.plan-tile[data-have="1"]:hover { border-color: var(--pt-line); }

/* One quiet line where a Free viewer meets a paid output. No blur, no banner. */
.plan-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--plan-lock-ink, #586653);
}
.plan-lock[hidden] { display: none; }
.plan-lock .plan-tile { margin-inline-start: 0; }
.plan-lock a:not(.plan-tile) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--plan-lock-link, #344b2c);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* A small "view as" switch for previews and staff tools. */
.plan-view {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--plan-view-line, #d9ded0);
  border-radius: 7px;
  background: var(--plan-view-bg, #eef1e7);
}
.plan-view button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--plan-view-ink, #586653);
  font: 500 12.5px/1 "DM Sans", system-ui, sans-serif;
  cursor: pointer;
}
.plan-view button[aria-pressed="true"] {
  background: var(--plan-view-on, #fffef9);
  color: var(--plan-view-ink-on, #29372e);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(41, 55, 46, .12);
}

@media (forced-colors: active) {
  .plan-tile { border-color: CanvasText; color: CanvasText; forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-tile[data-tip]::after { transition: none; }
}
@media print {
  .plan-tile { border-color: #777; color: #333; background: none; }
  .plan-tile[data-tip]::after { display: none; }
}