/* ==========================================================================
   LIFECYCLE — the page a refused write lands on, and what marks a read-only office
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .lc-.

   Contents
     1  The 402 page (resources/views/errors/402.blade.php)
     2  A button that is disabled because the office is read-only
   ========================================================================== */


/* ==========================================================================
   1 · THE 402 PAGE
   ========================================================================== */

.lc-page {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  padding-block: var(--space-8);
  padding-inline: var(--space-4);
  background: var(--color-bg, var(--color-surface));
}

.lc-card {
  inline-size: min(100%, 38rem);
}

.lc-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.lc-head__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken, var(--color-border-subtle));
  color: var(--color-text-muted);
}

.lc-title {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: 1.3;
}

.lc-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.lc-lead {
  margin-block: 0 var(--space-5);
  font-size: var(--font-size-md);
  line-height: 1.7;
}

.lc-sub {
  margin-block: 0 var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.lc-list {
  display: grid;
  gap: var(--space-2);
  margin-block: 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.lc-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.6;
}

.lc-list__item .icon {
  flex: 0 0 auto;
  margin-block-start: 0.2em;
  color: var(--color-success, currentColor);
}


/* ==========================================================================
   2 · A BUTTON THAT IS DISABLED BECAUSE THE OFFICE IS READ-ONLY
   --------------------------------------------------------------------------
   `x-button` already greys a disabled button and blocks the click; what a
   read-only page adds is the *reason*, a `title` and an `aria-describedby`
   that points at the banner. The cursor says so before the pointer leaves.
   ========================================================================== */

.btn[aria-disabled='true'][aria-describedby='subscription-notice'] {
  cursor: not-allowed;
}