/* The pages AROUND a purchase: the price list once plans are on sale, and the
 * two places a paying customer sees their plan (the dashboard plan bar and the
 * Usage page's "Your plan" card).
 *
 * Its own file, written 13 October 2026, because application.css was being
 * edited by several people the day before launch. The layout links every
 * stylesheet in this folder (stylesheet_link_tag :app), and this one sorts
 * after application.css, so it can rely on that file's variables and classes.
 *
 * Nothing here has a fixed width or forbids wrapping. Every rule is a line of
 * text that may break wherever the screen needs it to - a phone must never
 * scroll sideways to read which plan is yours or where to cancel.
 */

/* --- Price list ----------------------------------------------------------- */

/* "Your plan", in the spot where a paying customer would otherwise be offered
   Sign up. A label, not a button: it has no hover and nothing happens when it
   is pressed, so it must not look pressable - no border, no fill. The --ok
   green is the same token the tick marks in the table use, so "this one is
   yours" reads as a tick.

   Set exactly as "Coming soon" is set in the same spot (.plans__soon): same
   size, same case, its own line. That label is two letters longer and fits
   the narrowest column a phone gets, so this one does too. A pill with
   padding was tried first and came out wider than that column. */
.plans__yours {
  display: block; margin-top: .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ok);
}

/* How to change plan, for someone who already pays. Sits where the row of
   buttons would have been, so it is the first thing under the table. */
.plans-yours-note { margin: 1rem 0 0; font-size: .92rem; line-height: 1.55; text-align: center; color: var(--ink); }

/* Shown to the owner alone, while she can see Sign up buttons the public
   cannot. Dashed and in the warning colour on purpose: it has to look like a
   note to herself, not like part of the page a customer would be shown. */
.pricing-owner-note {
  max-width: 40em; margin: 0 auto 1.1rem; padding: .55rem .9rem;
  border: 1px dashed var(--warning); border-radius: var(--radius);
  color: var(--warning); font-size: .88rem; line-height: 1.5; text-align: center;
}

/* --- Where a paying customer sees their plan ------------------------------ */

/* "Change card or cancel", and a few words saying where the link goes. The
   words sit on their own line under the link so that on a narrow plan bar the
   link is never pushed off the end of a sentence. */
.plan-manage { margin: .45rem 0 0; font-size: .85rem; line-height: 1.5; }
.plan-manage__where { display: block; font-size: .8rem; color: var(--muted); }

/* The renewal or end date under the plan name on the Usage card. */
.plan-period { margin: .3rem 0 0; font-size: .82rem; color: var(--muted); }