/* Studiolo activation screen and licence badge (licence/license.js), in the Ninth Orbit console look. */

/* Until a valid code is entered, only the activation screen is shown. */
html.license-locked body > *:not(#license-gate):not(svg) { visibility: hidden !important; }
html.license-locked body { overflow: hidden; }

#license-gate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; overflow-y: auto; visibility: visible;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(255, 122, 61, 0.16), transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(138, 180, 255, 0.10), transparent 65%),
    var(--bg);
}
.license-card {
  position: relative; z-index: 1; width: min(460px, 100%); padding: 30px 26px 22px; text-align: center;
  background: linear-gradient(180deg, rgba(32, 35, 43, 0.96), rgba(23, 25, 31, 0.96));
  box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: var(--r);
}
.license-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-full); }
.license-logo { width: 64px; height: 64px; margin: 0 auto 12px; display: block; }
.license-card h2 { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: 0.01em; color: var(--text); margin: 0 0 8px; }
.license-lead { color: #c9ccd3; font-size: 14.5px; margin: 0 0 18px; }
.license-form { display: grid; gap: 6px; text-align: left; }
.license-form label { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 0.01em; color: var(--muted); margin-top: 6px; }
.license-form input {
  height: 46px; padding: 0 14px; background: var(--stage); color: var(--text); border: 0; outline: 0;
  box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: var(--r); font: 16px var(--body);
}
.license-form input:focus { box-shadow: inset 0 0 0 2px var(--ice); }
#license-input { font-family: var(--code); letter-spacing: 0.08em; }
.license-msg { min-height: 20px; margin: 6px 0 2px; font-size: 13.5px; color: var(--ice); }
.license-msg.error { color: var(--danger); }
.license-btn { height: 48px; margin-top: 4px; font-size: 15px; width: 100%; }
.license-help { margin: 18px 0 4px; font-size: 13px; color: var(--muted); }
.license-help a { color: var(--ice); }
.license-fine { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0; }

/* "Licensed to …" in the flight bar */
.license-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em; color: var(--amber); text-decoration: none; white-space: nowrap; }
.license-badge .license-who { overflow: hidden; text-overflow: ellipsis; }
.license-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--amber); box-shadow: none; }
.license-badge:not(.flight .license-badge) { position: fixed; right: 12px; bottom: 12px; z-index: 50; padding: 6px 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border-strong); }
.license-welcome { font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; color: var(--amber); margin: 0 0 8px; }
#licence-status p { color: #c9ccd3; margin: 0 0 10px; }
@media (max-width: 760px) { .flight .license-badge { display: none; } }