/* The register checkout.
 *
 * ONE shell holds the tab bar and both columns, divided by a hairline: two
 * tops that belong to the same card cannot disagree, and neither can two
 * heights. That is the whole reason this shape was chosen over a tab bar
 * floating above two separate cards.
 *
 * Plain CSS, not Tailwind: the marketing build in public/assets/css/app.css is
 * frozen, so a new arbitrary utility in this view would render as nothing.
 *
 * State hooks come from Alpine's own :class output - .bg-brand-copper is the
 * current tab, .plan-card--on is the chosen plan - so none of the bindings in
 * the view have to be touched to restyle either one.
 */

/* Both columns stretch, so neither can be the short one; the rail is a
   flex column and the summary's terms+submit group is pinned to the card
   floor, which puts the slack between the numbers and the button rather
   than leaving a hole under a short card. */
.ck3-main { min-width: 0; display: flex; flex-direction: column; }
.ck3-panelwrap { flex: 1; display: flex; flex-direction: column; }
.ck3-panel { flex: 1; }
/* Anything scrolled to lands clear of the sticky header rather than under it.
   The terms toggle was the one that showed it: scroll so the agreement is at
   the top of the window and the header sat over the first line of it. 96px is
   the tall state of the two-tier header plus a hairline of room. */
.ck3-shell, .ck3-panel, .ck3-rail, .ck3-terms, .ck3-tabs { scroll-margin-top: 96px; }
.ck3-shell input, .ck3-shell select, .ck3-shell textarea, .ck3-shell label { scroll-margin-top: 96px; }

.ck3-rail { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ck3-sum { display: flex; flex-direction: column; flex: 1; }
.ck3-sumbody { display: flex; flex-direction: column; flex: 1; }
.ck3-foot { margin-top: auto; }

/* The tab bar, calmed down: one radius, one border weight, labels on one
   line. The current tab is read off Alpine's own .bg-brand-copper, so the
   bindings stay untouched. */
.ck3-tabs > button { min-width: 0; min-height: 44px; font-size: 12.5px; padding: 0 10px; white-space: nowrap; }
.ck3-tabs > button > span:first-child { flex: 0 0 21px; width: 21px; height: 21px; font-size: 10px; }

/* The plan cards. Six bordered mini-tiles per card read as confetti; the
   same six numbers set as a spec list read as a spec list. Nothing is
   removed - every figure is still there. */
.ck3-plans .group\/plan { padding: 14px; }
/* Row gap only. Widening the COLUMN gap to 14px cost each spec tile 8px,
   which nothing showed at 1440 and clipped six labels at 768. */
.ck3-plans .group\/plan > div:last-of-type { gap: 8px 6px; }
.ck3-plans .group\/plan > div:last-of-type > div { border: 0; background: transparent; padding: 3px 0; }
/* The value stays ABOVE its label, which is how the tile was built and the
   reason it fits. Setting the two on one line read better in a wide card and
   clipped "Unlimited" and "Users" in a narrow one - 2 labels lost at 1440 and
   46 at 768, measured, not eyeballed. A spec that hides the spec is not a
   cleanup. */
.ck3-plans .group\/plan > div:last-of-type > div > span:last-child { min-width: 0; }

/* ONE shell. Tabs across its top, the panel and the summary as two
   columns of the same box divided by a hairline. Two tops that belong to
   the same card cannot disagree, and neither can two heights. */
.ck3-shell { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 24px; background: #fff; box-shadow: 0 18px 40px -28px rgb(15 23 42 / .25); }
.ck3-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; border: 0; border-bottom: 1px solid #e2e8f0; border-radius: 0; background: #f8fafc; padding: 8px; box-shadow: none; }
@media (min-width: 900px) { .ck3-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ck3-tabs > button { border-radius: 10px; border-color: transparent; background: transparent; color: #475569; }
.ck3-tabs > button:hover { border-color: #cbd5e1; background: #fff; color: #0b1220; }
.ck3-tabs > button.bg-brand-copper { background: #fff; border-color: #e2e8f0; color: var(--brand); box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.ck3-tabs > button.bg-brand-copper > span:first-child:not(.bg-emerald-500) { border-color: var(--brand); color: var(--brand); }
/* The tab an error belongs to. The red utilities lose to the `background:
   transparent` four lines up, so a rejected order used to point at nothing: the
   chip it was raised against went blank instead of red, and it lost the active
   styling with it. */
.ck3-tabs > button.bg-red-50 { background: #fef2f2; border-color: #f87171; color: #b91c1c; box-shadow: 0 1px 2px rgb(15 23 42 / .12); }
.ck3-tabs > button.bg-red-50 > span:first-child:not(.bg-emerald-500) { border-color: #f87171; color: #b91c1c; }

.ck3-body { display: grid; align-items: stretch; }
@media (min-width: 768px) { .ck3-body { grid-template-columns: 1.6fr 1fr; } }
/* No padding here. The panels are rooms inside one shell, so their head is a
   full-bleed STRIP across the top of the column with a hairline under it -
   inset it, and the head reads as a bordered box sitting inside another
   bordered box, which is exactly what it looked like. */
.ck3-main { padding: 0; }
/* Inside one shell the panels are rooms, not boxes: the shell already carries
   the border, so a second one around each panel is the box-in-a-box. */
.ck3-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.ck3-main .checkout-head { border-top: 0; border-radius: 0; background: #fff; }
.ck3-rail { gap: 0; border-top: 1px solid #e2e8f0; background: #f8fafc; }
@media (min-width: 768px) { .ck3-rail { border-top: 0; border-left: 1px solid #e2e8f0; } }
.ck3-sum { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.ck3-plans .group\/plan > div:last-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #eef2f7; }

/* ---------------------------------------------------------------------------
 * Filling the panel.
 *
 * The plan grid used to sit at its natural height with the rest of the column
 * left blank underneath, which read as an unfinished box. The grid now takes
 * the free height and splits it evenly between the two rows (grid-auto-rows:
 * 1fr), and inside each card the spec list is pinned to the card's own floor,
 * so the extra height lands as breathing room around the numbers rather than
 * as a gap under the last card.
 */
.ck3-panel { display: flex; flex-direction: column; }
/* The plan cards are as tall as their own contents, and the panel's leftover
   height goes BETWEEN the rows rather than inside the cards.

   Stretching the rows to fill the panel put every pixel of slack in one place:
   the gap `margin-top: auto` opened between the price and the spec rows, which
   is the hole Allen photographed. space-evenly spreads the same slack as three
   equal gaps around and between the two rows, where it reads as spacing. */
.ck3-plans { flex: 1; grid-auto-rows: min-content; align-content: space-evenly; }
.ck3-plans .group\/plan { justify-content: flex-start; }
.ck3-plans .group\/plan > div:last-of-type { margin-top: 12px; }

/* The panel's footer. Pinned to the floor, and it keeps its own rule above it
   so the button never floats loose against the last card. */
/* Even top and bottom. It read 14/4 and the button sat visibly high in its
   own strip. */
.ck3-panelfoot { margin-top: auto; padding: 14px 24px; }

/* The shell already frames this column, so the plan grid does not need the
   full p-7 of a standalone card on top of .ck3-main's own padding. Two frames
   of padding is what squeezed the spec tiles at the 768 breakpoint. */
.ck3-plans { padding: 18px 24px; }

/* Every tab fills its column, not just the plan tab. The body takes the free
   height and the trailing action row is pinned to the floor, so the slack
   lands in front of the button instead of behind it.

   .ck3-plans is excluded from the flex switch on purpose: it is a GRID, and
   making it a flex column stacked all four plan cards in a single column. */
.ck3-panel > div:nth-child(2) { flex: 1; }
.ck3-panel > div:nth-child(2):not(.ck3-plans) { display: flex; flex-direction: column; }
.ck3-panel > div:nth-child(2):not(.ck3-plans) > div:last-child { margin-top: auto; }

/* The payment tab carries the least content of the four, and two attempts at
   spreading it were both worse than the gap they removed: stretching one block
   threw the fields apart, and pinning the last block to the floor put a 340px
   hole in the middle (an auto margin eats the free space before
   space-between can share it).
 *
 * So the fields stay together at the top in their natural order, the billing
 * toggle follows them, and the security line is pinned to the floor as the
 * column's closing strip - the same move the other three tabs make with their
 * Continue button. The bottom is anchored instead of empty. */
/* Spreading the slack between the blocks made five loose items float at equal
   distances, which read as scattered rather than spacious. The blocks are
   grouped instead - name, card, accepted cards, billing, the security line -
   set on ONE tight rhythm, and the group is centered in the column. The air
   then splits evenly above and below a form that holds together, instead of
   being injected between its parts. */
.ck3-pay > div:nth-child(2) { justify-content: center; gap: 20px; }
.ck3-pay > div:nth-child(2) > * { flex: 0 0 auto; margin-top: 0; margin-bottom: 0; }
.ck3-pay > div:nth-child(2) > div:last-of-type { order: 1; }
.ck3-pay > div:nth-child(2) > p:last-of-type { order: 2; border-top: 0; padding-top: 0; }
/* Inside a group the rhythm is tight: a label belongs to its field. */
.ck3-cardgroup > label { margin-bottom: 6px; }
.ck3-accept { margin-top: 0; }
.ck3-billto { margin-top: 12px; }

/* The empty-state medallion. A pale circle on a pale ground needs its own
   edge or it reads as a smudge rather than an icon. */
.ck3-emptyicon { border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; }

/* "Times Shown In America/Phoenix" is a note about how to READ the list, so it
   is set as a chip rather than a second sentence competing with the heading
   beside it. The zone itself carries the weight. */
.ck3-tz { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; padding: 4px 11px; font-size: 11px; font-weight: 600; line-height: 1; color: #64748b; white-space: nowrap; }
.ck3-tz i { font-size: 10px; color: var(--brand); }
.ck3-tz-zone { font-weight: 800; color: #0b1220; }

/* The 20px that sat UNDER the panel, which is what made the footer button
   look high in its own strip. This build is Tailwind v4, where space-y-5 sets
   margin-BOTTOM on every child but the last, so zeroing margin-top did
   nothing. The spacing is the flex gap now. */
.ck3-panelwrap { gap: 20px; }
.ck3-panelwrap > * { margin-bottom: 0; }

/* R24: a control label is one line. At 375 the bar is two across, which leaves
   ~159px for "Choose Your Plan" and it took two line boxes (measured with a
   Range over the text node, not eyeballed). Below 640px each step gets its own
   full-width row instead - the label is not the thing to shorten here, the
   room is the thing to give. */
@media (max-width: 639px) {
    .ck3-tabs { grid-template-columns: minmax(0, 1fr); }
}
.ck3-tabs > button, .ck3-tabs > button * { white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * Filling the payment step with things that belong there.
 *
 * Three attempts at stretching the existing blocks all looked worse than the
 * gap they removed. The column is tall because the order summary beside it is
 * tall, so the answer is content a checkout should carry anyway: which cards
 * are taken, and which address the card will be billed to.
 */
.ck3-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; padding: 12px 16px; }
.ck3-accept-l { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.ck3-accept-i { display: inline-flex; align-items: center; gap: 10px; font-size: 26px; line-height: 1; color: #475569; }
.ck3-accept-n { flex: 1 1 100%; font-size: 11px; color: #64748b; }

/* The billing recap. Bordered, because it is a surface and not a sentence. */
.ck3-billto { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; padding: 14px 16px; }
.ck3-billto-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ck3-billto-h { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; white-space: nowrap; }
.ck3-billto-h i { color: var(--brand); }

/* The same three fields as the editable form, read-only. Flipping the toggle
   swaps them for inputs in place, so the step does not change shape. */
.ck3-ro { min-width: 0; }
.ck3-ro-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.ck3-ro-l { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: #64748b; }
.ck3-ro-v { overflow: hidden; margin: 0; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #0b1220; text-overflow: ellipsis; white-space: nowrap; }
.ck3-billto-edit { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 7px 12px; font-size: 11.5px; font-weight: 700; color: #475569; white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.ck3-billto-edit:hover { border-color: var(--brand); background: #f8fafc; color: var(--brand); }
.ck3-billto-edit:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .5); outline-offset: 2px; }

/* The billing cycle was gray body copy under the plan name and read as a
   caption. It is the term being bought, so it carries a chip of its own, and
   the price carries the unit that term implies. */
.ck3-cycle { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; border: 1px solid var(--brand-200, #bfdbfe); border-radius: 999px; background: var(--brand-50, #eff6ff); padding: 3px 10px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--brand); white-space: nowrap; }
.ck3-cycle i { font-size: 10px; }
.ck3-cycle--yr { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.ck3-price { white-space: nowrap; }
.ck3-per { margin-left: 1px; font-size: 13px; font-weight: 700; color: #64748b; }

/* The generic "pin the last block to the floor" rule is more specific than the
   payment overrides above it, so it kept winning and pooled all 280px of free
   height into a single 210px gap. Payment shares its slack instead. */
.ck3-panel.ck3-pay > div:nth-child(2):not(.ck3-plans) > div:last-child { margin-top: 0; }

/* Between 768 and 1023 the two columns are side by side AND the plans are two
   abreast, which leaves each spec tile 60px - 11px short of "Unlimited" on the
   Enterprise card. In that band the spec list takes one column so every figure
   has the card's full width. Measured, not guessed: scrollWidth 71 vs
   clientWidth 60. */
@media (min-width: 768px) and (max-width: 1023px) {
    .ck3-plans .group\/plan > div:last-of-type { grid-template-columns: minmax(0, 1fr); }
}

/* The last of the slack goes INTO the controls rather than between them: a
   checkout field at 40px tall in a 690px column looks starved, and the height
   has to land somewhere. Sizes here are chosen to leave the step close to
   full, measured rather than guessed. */
.ck3-pay { --ck3-field: 50px; }
.ck3-pay #card_name { min-height: var(--ck3-field); }
.ck3-cardgroup > div[x-ref="cardEl"] { min-height: var(--ck3-field); display: flex; flex-direction: column; justify-content: center; }
.ck3-pay > div:nth-child(2) { gap: 24px; }
.ck3-accept { padding: 16px; }
.ck3-billto { gap: 14px; padding: 16px; }
.ck3-ro-v { padding: 11px 12px; }