/* ═══════════════════════════════════════════════════════════════════════
   DEV-SITE DISCLAIMER BANNER
   kawata.fishy.moe is a development/testing environment for kawata.pw and
   is indexed by search engines, so visitors arrive here with no idea it is
   not the real server. This band says so on every page.

   Deliberately amber and NOT derived from --main: the site hue is
   user-controlled, and a warning that can be re-tinted into the background
   by a profile setting is not a warning.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --kdev-amber: #ffb02e;
  --kdev-amber-soft: #ffd487;
  --kdev-ink: #2a1a00;
}

.kdev-banner {
  position: relative;
  z-index: 900;
  overflow: hidden;
  border: 1px solid rgba(255, 176, 46, 0.55);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 176, 46, 0.16) 0%, rgba(255, 176, 46, 0.07) 100%),
    #1a1710;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Hazard rail: reads as "caution" before a single word is parsed. */
.kdev-banner::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--kdev-amber) 0 7px,
    var(--kdev-ink) 7px 14px
  );
}

.kdev-inner {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 0.95rem 1.35rem 0.95rem 1.6rem;
  flex-wrap: wrap;
}

.kdev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  background: var(--kdev-amber);
  color: var(--kdev-ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kdev-text {
  flex: 1 1 22rem;
  margin: 0;
  min-width: 0;
  font-size: 0.94rem;
  line-height: 1.45;
  color: #f3e6cf;
}

.kdev-text strong {
  display: block;
  color: #fff5e2;
  font-size: 1.02rem;
  font-weight: 700;
}

.kdev-text a {
  color: var(--kdev-amber-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kdev-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  background: var(--kdev-amber);
  color: var(--kdev-ink) !important;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.kdev-cta:hover {
  background: #ffc154;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 176, 46, 0.3);
}

.kdev-cta i {
  font-size: 0.82em;
}

/* ── In-flow placement (base.html): sits at the top of the content
   container, in the same slot the Global Notice already uses. ── */
.kdev-banner--flow {
  margin: 0 0 1.1rem;
}

/* ── Fixed placement (base_auth.html): the auth pages are a 100vh grid on an
   overflow:hidden body, so an in-flow band would push the card off-screen.
   Pin it instead and give the layout its height back below. ── */
.kdev-banner--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  border-width: 0 0 1px 0;
  border-radius: 0;
}

body.auth-page-body {
  padding-top: var(--kdev-h, 76px);
  box-sizing: border-box;
  /* _auth.scss sets overflow:hidden, which was fine when the layout was
     exactly 100vh. The band plus the "registration is closed" block push it
     past that on shorter screens, and hidden would CLIP the copyright rather
     than let anyone reach it. Scroll only when it actually overflows. */
  overflow-y: auto;
}

body.auth-page-body .auth-layout {
  min-height: calc(100vh - var(--kdev-h, 76px));
}

@media (max-width: 900px) {
  .kdev-inner {
    gap: 0.8rem;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
  }
  .kdev-text { flex-basis: 100%; font-size: 0.88rem; }
  .kdev-text strong { font-size: 0.96rem; }
  .kdev-cta { width: 100%; justify-content: center; }
  body.auth-page-body { padding-top: var(--kdev-h-mobile, 150px); }
  body.auth-page-body .auth-layout { min-height: calc(100vh - var(--kdev-h-mobile, 150px)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   "REGISTRATION IS CLOSED HERE" block on the login card.

   Lives here rather than in _auth.scss so it needs no sass rebuild, and so
   the whole dev-site treatment is one file to read or revert.
   ═══════════════════════════════════════════════════════════════════════ */

.auth-regclosed {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid hsla(var(--main), 20%, 60%, 0.18);
  text-align: center;
}

.auth-regclosed-title {
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: hsl(var(--main), 55%, 78%);
}

.auth-regclosed-text {
  margin: 0 0 0.9rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: hsl(var(--main), 18%, 66%);
}

.auth-regclosed-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid hsla(var(--main), 45%, 60%, 0.5);
  border-radius: 8px;
  background: hsla(var(--main), 40%, 45%, 0.12);
  color: hsl(var(--main), 60%, 80%) !important;
  font-size: 0.87rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.auth-regclosed-cta:hover {
  background: hsla(var(--main), 45%, 50%, 0.22);
  border-color: hsla(var(--main), 55%, 65%, 0.75);
  transform: translateY(-1px);
}

.auth-regclosed-cta i { font-size: 0.82em; }

/* ═══════════════════════════════════════════════════════════════════════
   GREYED-OUT REGISTRATION ENTRY POINTS

   Registration stays ENABLED on the backend (operator ruling): this is a
   presentation-only grey-out so visitors can see registration exists and
   that this is not the place to do it. The "sign up at kawata.pw" block
   below the login form is what tells them where to go.
   ═══════════════════════════════════════════════════════════════════════ */

.auth-tab--disabled,
.auth-tab--disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: none;
}

.auth-tab--disabled i {
  font-size: 0.78em;
  margin-right: 0.28rem;
  opacity: 0.9;
}

/* Matches .hero-btn.disabled in home.css, which is this site's existing
   convention for a visible-but-unavailable action. */
.navbar-btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto; /* keep the tooltip reachable */
}

.navbar-btn--disabled i {
  font-size: 0.8em;
  margin-right: 0.3rem;
}

.hero-btn.disabled i {
  font-size: 0.85em;
  margin-right: 0.35rem;
}