/* ==========================================================================
   Astro-Dev(TM) v20 — brand lockup, trial banner, Subscription screen
   ========================================================================== */

/* ---- Brand lockup: mark + "Astro-Dev" + superscript TM ---- */
.app-nav__brand { align-items: center; }
.app-nav__brand .brand-mark {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25));
}
/* Large logo on the sign-in and Subscription screens */
.brand-hero-logo { display: block; width: 132px; height: 132px; margin: 0 auto var(--space-4); border-radius: 50%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25)); }
.lic-status .brand-hero-logo { width: 96px; height: 96px; margin: 0 0 var(--space-4); }
.brand-word { font-family: var(--font-display); font-weight: 700; color: var(--maroon); white-space: nowrap; }
:root[data-theme="dark"] .brand-word { color: #F3D9A4; }
.brand-word .brand-accent { color: var(--saffron); }
.brand-tm {
  font-family: var(--font-body);
  font-size: .38em;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
  position: relative;
  top: -.25em;
  color: inherit;
  opacity: .85;
}
.brand-word--inline { font-size: 1.15em; letter-spacing: .02em; text-transform: none; }

/* ---- Alerts used by the gate ---- */
.alert--info {
  background: var(--saffron-lt);
  border: 1px solid var(--gold-dim);
  color: var(--maroon);
}
:root[data-theme="dark"] .alert--info { background: #3D1800; color: #F3D9A4; }

/* ---- Trial / renewal banner under the nav ---- */
.lic-banner {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  flex-wrap: wrap;
  padding: 8px var(--space-4);
  font-size: var(--text-sm);
  background: linear-gradient(90deg, #8B1A1A, #A3301A);
  color: #FFF3DC;
  position: relative; z-index: 5;
}
.lic-banner[hidden] { display: none; }
.lic-banner--warn { background: linear-gradient(90deg, #C84E0D, #F36B21); }
.lic-banner--stop { background: #6B1010; }
.lic-banner__cta {
  color: #1A0A00; background: #F3D9A4; font-weight: 600;
  padding: 3px 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}
.lic-banner__cta:hover { background: #fff; color: #1A0A00; }

/* ---- Subscription screen ---- */
.lic-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: start; }
.lic-grid .card + .card { margin-top: 0; }
@media (max-width: 820px) { .lic-grid { grid-template-columns: 1fr; } }

.lic-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.lic-badge--trial { background: var(--saffron-lt); color: var(--saffron-dk); border: 1px solid var(--saffron); }
.lic-badge--ok { background: rgba(39, 121, 60, .1); color: var(--success); border: 1px solid var(--success); }
.lic-badge--stop { background: rgba(181, 52, 13, .1); color: var(--terracotta); border: 1px solid var(--terracotta); }

.lic-days { margin: var(--space-4) 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); }
.lic-days strong { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--maroon); }
:root[data-theme="dark"] .lic-days strong { color: var(--gold); }
.lic-days span { color: var(--muted); }
.lic-msg { color: var(--maroon); font-weight: 500; margin: var(--space-3) 0; }
.lic-msg--err { color: var(--terracotta); font-weight: 400; font-size: var(--text-sm); }
:root[data-theme="dark"] .lic-msg { color: #F3D9A4; }

.lic-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--space-4); margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.lic-dl dt { color: var(--muted-soft); }
.lic-dl dd { margin: 0; color: var(--parchment); }
.lic-version { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--muted-soft); }

.lic-activate h3 { margin-top: 0; }
.lic-machine {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--gold-dim); border-radius: var(--radius); background: var(--ink-softer);
}
.lic-machine__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted-soft); }
.lic-machine code { font-family: var(--font-data); font-size: 1.1rem; letter-spacing: .06em; color: var(--maroon); flex: 1; }
:root[data-theme="dark"] .lic-machine code { color: var(--gold); }
#lic-key { width: 100%; font-family: var(--font-data); font-size: var(--text-xs); word-break: break-all; resize: vertical; }

.lic-h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-4); }
.lic-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.lic-plans .card { margin: 0; text-align: center; }
.lic-plan__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--maroon); font-weight: 700; }
:root[data-theme="dark"] .lic-plan__name { color: var(--gold); }
.lic-plan__price { font-size: 1.6rem; font-weight: 700; margin: var(--space-2) 0 0; color: var(--parchment); }
.lic-plan__days { font-size: var(--text-sm); color: var(--muted-soft); margin-bottom: var(--space-4); }
.lic-plan__cta { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.lic-plan--current { outline: 2px solid var(--saffron); }

.lic-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-12); }
.lic-feature {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ink-soft);
}
.lic-feature > div { flex: 1; min-width: 0; }
.lic-feature strong { display: block; font-size: var(--text-sm); color: var(--parchment); }
.lic-feature small { display: block; font-size: var(--text-xs); color: var(--muted-soft); }
.lic-feature__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--success); }
.lic-feature--off .lic-feature__dot, .lic-feature--plan .lic-feature__dot { background: var(--line); }
.lic-feature--off, .lic-feature--plan { opacity: .7; }
.lic-feature__state { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }

/* ---- Nav fit: keep items on one line now that the lockup is wider ---- */
.app-nav__links a, .app-nav__links button, .nav-group__btn { white-space: nowrap; }
a.icon-toggle.nav-license-item { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.icon-toggle.nav-license-item[hidden] { display: none; }
@media (max-width: 1480px) { .app-nav__brand small { display: none; } }