/* bsk, signed out only: custom/templates/custom/header.tmpl links this file when
 * `not .IsSigned`, after theme-bsk.css. A visitor sees the login page and nothing else
 * (design: docs/superpowers/specs/2026-10-27-forgejo-branding-design.md, sections 2 and 5):
 * the mark, the wordmark, the form on the grid, the footer with the legal links.
 *
 * The sign-in pages are Forgejo's .page-content.user.signin (the login, and the 2FA and
 * WebAuthn steps after it); .openid is Forgejo's own OpenID page with its own logo (OpenID
 * is off). Without :has() support the navbar stays (logo only) and the grid is missing. */

/* Top bar (#navbar, base/head_navbar.tmpl), every signed-out page: the logo only — no
 * Explore, Help, Register, Sign in, no mobile menu toggle. */
#navbar .navbar-left > :not(#navbar-logo),
#navbar .navbar-right > * {
  display: none !important;
}

/* On the sign-in pages no top bar at all: the large mark sits above the form. */
body:has(.page-content.user.signin:not(.openid)) #navbar {
  display: none;
}

/* The page (.full.height, holding the navbar and .page-content): the website's blueprint
 * grid, the content centred in the height left above the footer. */
.full.height:has(> .page-content.user.signin:not(.openid)) {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  background-image: var(--bsk-grid-image);
  background-size: 20px 20px;
}

.page-content.user.signin:not(.openid) {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 1rem;
}

/* The large mark (mark-large.svg, the one with the antennas) above everything. */
.page-content.user.signin:not(.openid)::before {
  content: "";
  display: block;
  flex: none;
  width: 100px;
  height: 90px;
  margin: 0 auto .625rem;
  background: url("../img/mark-large.svg") center / contain no-repeat;
}

/* Forgejo's page grid and column: one narrow column, centred, no Fomantic gutters
 * (!important against the column's .tw-max-w-2xl, which is !important itself). */
.page-content.user.signin:not(.openid) > .ui.page.grid {
  margin: 0;
  padding: 0;
  justify-content: center;
}

.page-content.user.signin:not(.openid) > .ui.page.grid > .column {
  width: 100%;
  max-width: 22rem !important;
  margin: 0 auto;
  padding: 0;
}

/* The wordmark below the mark: Plex Mono in the accent, as the website's header brand. */
.page-content.user.signin:not(.openid) > .ui.page.grid > .column::before {
  content: "billige-softwareklitsche.ai";
  display: block;
  margin-bottom: .75rem;
  font-family: var(--fonts-monospace);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bsk-accent);
  text-align: center;
  overflow-wrap: anywhere;
}

/* The login's "Sign in" box header goes: the mark and wordmark head the form. The 2FA and
 * WebAuthn steps keep theirs (it says what is asked). Alerts (wrong password) stay. */
.page-content.user.signin .ui.container:has(input[name=user_name]) > h4.ui.top.attached.header {
  display: none;
}

/* The form in a navy panel with a grid-coloured border, as the mockup. */
.page-content.user.signin:not(.openid) .ui.container > .ui.attached.segment:not(.header) {
  padding: 1.25rem;
  border: 1px solid var(--bsk-grid);
  border-radius: 0;
  background: var(--bsk-panel);
}

.page-content.user.signin:not(.openid) .ui.form {
  width: auto !important;
}

/* Field labels (user, password): the website's section labels; the checkbox keeps its own. */
.page-content.user.signin:not(.openid) .ui.form .field > label {
  font-family: var(--fonts-monospace);
  font-size: .7rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--bsk-accent);
}

/* "Forgot password?" below the panel (Forgejo's second box, .segment.header): a plain,
 * centred link on the grid. */
.page-content.user.signin:not(.openid) .ui.container > .ui.attached.segment.header {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--fonts-proportional);
  font-size: .875rem;
  font-weight: 400;
}

/* Nothing but the form: no register hint, no OAuth or OpenID buttons (none are configured;
 * this holds should one appear). */
.page-content.user.signin .field:has(a[href*="/user/sign_up"]),
.page-content.user.signin #oauth2-login-navigator,
.page-content.user.signin .divider.divider-text {
  display: none;
}