/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
/* ==========================================================================
   Upgrade page - Subscription plan table
   Oct 5 2026 - her request (approved). Every tier is one COLUMN on a wide
   page and one stacked CARD on a phone. The tier's color, its readable text
   color and the row/tier counts all come from the database through the
   custom properties set on the markup (--upgrade-plan-rows,
   --upgrade-plan-tiers). Oct 6 2026 - her request: the tier band colors come
   from this theme's Yusaso color tokens (css_root_key_catalog.css), mapped
   below by data-tier-code, so a theme can swap in its lighter versions.
   ========================================================================== */
.upgrade_plan_grid {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) repeat(var(--upgrade-plan-tiers, 4), minmax(0, 1fr));
  grid-template-rows: auto repeat(calc(var(--upgrade-plan-rows, 3) - 1), auto);
  column-gap: 0.5rem;
  align-items: stretch;
  align-content: start;
}
/* Oct 6 2026 - tier band colors from the Yusaso tokens. Unknown tier codes get blue. */
.upgrade_tier {
  --upgrade-tier-color: var(--yusaso-blue);
  --upgrade-tier-text: var(--primary-font-color);
}
.upgrade_tier[data-tier-code="free"] {
  --upgrade-tier-color: var(--yusaso-orange);
  --upgrade-tier-text: var(--primary-color);
}
.upgrade_tier[data-tier-code="deluxe"] {
  --upgrade-tier-color: var(--yusaso-green);
}
.upgrade_tier[data-tier-code="premium"] {
  --upgrade-tier-color: var(--yusaso-blue);
}
.upgrade_tier[data-tier-code="max"] {
  --upgrade-tier-color: var(--yusaso-purple);
}
.upgrade_plan_labels,
.upgrade_tier {
  display: grid;
  grid-row: 1 / span var(--upgrade-plan-rows, 3);
  grid-template-rows: subgrid;
  min-width: 0;
}
.upgrade_plan_labels {
  grid-column: 1;
}
.upgrade_plan_label {
  display: flex;
  align-items: flex-start;
  padding: 0.5rem 0.25rem;
  color: var(--page-card-text);}
.upgrade_tier {
  border-radius: var(--radius-large);
  overflow: hidden;
  background: color-mix(in srgb, var(--upgrade-tier-color) 30%, var(--page-surface));
  color: var(--page-card-text);
  text-align: center;
}
.upgrade_tier.is_current {
  outline: 2px solid var(--upgrade-tier-color);
  outline-offset: 2px;
}
.upgrade_tier_name {
  margin: 0;
  padding: 0.6rem 0.5rem;
  background: var(--upgrade-tier-color);
  color: var(--upgrade-tier-text);
  text-align: center;}
/* Oct 6 2026 - her request: cell text sits at the top of its row (the label column and the tier cells share the same top edge). */
.upgrade_tier_cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0.5rem;
  min-width: 0;
}
/* Oct 6 2026 - her screenshot: a blank band under every cell line. Two sitewide paragraph rules were adding it: .card_wrapper p (padding-bottom: 1lh)
   and body.public_shell p (margin-bottom). The extra class here out-ranks both so a cell line takes only its own height. */
.upgrade_tier .upgrade_tier_cell_value p {
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}
/* Desktop: the row label column on the left names each row, so the
   per-cell label is read by assistive tech only. */
.upgrade_tier_cell_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Oct 6 2026 - her layout: Current Plan, Select Plan, the dropdown, the price
   table and each button are separate short rows. Every tier renders every row
   (blank where it does not apply) so the subgrid keeps them level across tiers. */
.upgrade_tier_row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.25rem 0.5rem;
  min-width: 0;
}
.upgrade_tier_row > :is(select, table, button) {
  width: 100%;
}
.upgrade_plan_table {
  width: 100%;
  border-collapse: collapse;}
.upgrade_plan_table :is(th, td) {
  padding: 0.2rem 0.3rem;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--upgrade-tier-color) 45%, transparent);
}

.upgrade_tier_cart_button {
  min-width: 6rem;}
/* Phones: stack. Each tier becomes its own card with its row labels shown
   inline; the shared label column is dropped. */
@media (max-width: 767px) {
  .upgrade_plan_grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .upgrade_plan_labels {
    display: none;
  }
  .upgrade_tier {
    display: flex;
    flex-direction: column;
  }
  .upgrade_tier_cell {
    align-items: center;
    border-top: 1px solid color-mix(in srgb, var(--upgrade-tier-color) 45%, transparent);
  }
  .upgrade_tier_cell_label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0.15rem;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    opacity: 0.85;}
  .upgrade_tier_cell.is_empty,
  .upgrade_tier_row.is_empty {
    display: none;
  }
}

/* ==========================================================================
   RESPONSIVE TIERS (Oct 11 2026)
   Mobile-first hardening for every device size in the canon (see the DevTools
   preset list). Everything above this line is the normal CSS; these blocks
   only refine it for narrower or wider screens. Add new size fixes here.
   ========================================================================== */

/* 320–428px — Mobile Small + Mobile Large (iPhone SE, iPhone 16, Pixel 9 / 9 Pro / 10, Galaxy A55, Galaxy Z Fold 6 cover, Pixel 9 Pro Fold cover) */
@media (max-width: 428px) {
    .upgrade_plan_grid { min-width: 0; max-width: 100%; }
}

/* 768–1024px — Tablet (own tier): iPad Mini landscape (768), Galaxy Z Fold 6 unfolded (~884), Pixel 9 Pro Fold unfolded (~841), Surface Pro 10 / 13 (~912), 1024 */
@media (min-width: 768px) and (max-width: 1024px) {
    .upgrade_plan_grid { min-width: 0; max-width: 100%; }
}

/* 1025–1400px — Narrow Desktop: any desktop browser window narrower than the full site width (Nest Hub Max 1280, laptops, resized windows); the three-column layout switches on at 1401 */
@media (min-width: 1025px) and (max-width: 1400px) {
    .upgrade_plan_grid { min-width: 0; max-width: 100%; }
}