/* The application shell: header, brand stripe, and how the frame adapts.

   One shell, not two applications. What changes across widths is density and
   how much context fits — never which system you are using. A manager who
   opens the same account on a phone at the stand and on a laptop in the
   office must recognise the same tool. */

.app-header {
  /* At 200% zoom the logo and three language buttons no longer share one
     line; the language nav takes its own row rather than pushing the page
     wider than the screen. */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  min-height: var(--header-h);
  padding: var(--space-2) var(--space-4);
  padding-top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
  background: var(--c-surface);
  border-bottom: 3px solid var(--brand-red);
}

.app-brand {
  display: inline-flex; align-items: center;
  min-height: var(--tap); flex: 0 1 auto; min-width: 0;
}
/* Height is fixed and width follows, so the mark is never stretched. The
   aspect ratio is declared rather than inferred: without it the element falls
   back to the 206px width attribute before the file arrives, which at 200%
   zoom is wider than the whole page and drags the layout sideways. */
.app-logo {
  height: 26px; width: auto; max-width: 100%;
  aspect-ratio: 206 / 72; display: block;
}

/* The full fair name, always. No rule shortens it: a heuristic that turns
   "Automechanika Frankfurt 2026" into "Automechanika 2026" happens to read
   well and would mangle the next name nobody has thought of yet. The record
   is the source of truth and the layout carries whatever it says.

   So it wraps rather than truncating, and it never shrinks its type to fit —
   a name small enough to fit is a name too small to read. */
.app-context {
  margin: 0; min-width: 0; flex: 1 1 12rem;
  font-size: var(--t-body); font-weight: 700; color: var(--c-ink);
  line-height: var(--lh-tight); overflow-wrap: anywhere;
}

.app-account {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); flex: 0 0 auto;
  min-width: var(--tap); min-height: var(--tap);
  padding: 0 var(--space-2); border-radius: var(--radius-pill);
  color: var(--c-ink); text-decoration: none;
}
.app-account:hover { background: var(--c-surface-2); }
.app-account-icon { flex: 0 0 auto; }
/* On a phone the icon alone is the target; there is no room for a name and
   the Start page it opens says whose account it is anyway. */
.app-account-name { display: none; font-size: var(--t-body); font-weight: 700; }

.app-lang { display: flex; gap: var(--space-1); flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.app-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  border-radius: var(--radius-pill);
  font-size: var(--t-body); font-weight: 700;
  color: var(--c-ink); text-decoration: none;
}
.app-lang a[aria-current] { background: var(--c-ink); color: var(--c-surface); }
.app-lang a:hover { background: var(--c-surface-2); color: var(--c-ink); }

/* ---- Account block on the Start page -----------------------------------
   Where the header's five small targets went. Each one is now full width and
   at least a finger tall. */
.account-block { margin-top: var(--space-6); }
.account-who {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  font-size: var(--t-body); color: var(--c-ink-muted); margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
}
.account-lang { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.account-lang .chip { flex: 1 1 5rem; }

/* ---- Wider screens -----------------------------------------------------
   More room means more context, not bigger boxes: the logo grows a little,
   the account gains its name, and the frame stops pretending to be a phone. */
@media (min-width: 48rem) {
  .app-header { padding: var(--space-2) var(--space-5); gap: var(--space-4); }
  .app-logo { height: 32px; }
  .app-context { font-size: var(--t-section); }
  .app-account-name { display: inline; }
}

@media (min-width: 75rem) {
  .app-header { padding-inline: var(--space-6); }
}

/* A pointer that cannot hover must never depend on hover to reveal anything;
   these are decoration only, so they are switched off rather than replaced. */
@media (hover: none) {
  .app-account:hover, .app-lang a:hover { background: transparent; }
}

/* Below 30rem the mark, the account and three language buttons already fill
   the line, so the name takes one of its own rather than being squeezed into
   the gap left over. The header grows by a row; nothing is lost. */
@media (max-width: 29.99rem) {
  .app-context { order: 3; flex-basis: 100%; }
}

/* ---- Account screens ---------------------------------------------------
   allauth renders its own forms, and it does not know about our classes: a
   plain <button> comes out 27px tall, a standalone "forgot your password"
   link 19px, and a checkbox sits on its own with nothing around it to hit.
   Rather than fork every allauth template, the shell dresses what arrives. */
.account-body form button,
.account-body form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: var(--page-max);
  min-height: var(--tap-lg); padding: 0 var(--space-5);
  border: 0; border-radius: var(--radius-pill);
  background: var(--c-action); color: var(--c-action-ink);
  font-family: var(--font-brand); font-size: var(--t-body); font-weight: 700;
  cursor: pointer; overflow-wrap: anywhere;
}
.account-body form button:hover { background: var(--c-ink); color: var(--c-surface); }

/* A link that is the only way out of a dead end is an action, not prose. */
.account-body main a:not(.button):not(.app-brand):not(.app-account):not(.back-link) {
  display: inline-flex; align-items: center;
  min-height: var(--tap); font-weight: 700;
}

/* The box and its words are one target. */
.account-body label:has(input[type="checkbox"]),
.account-body input[type="checkbox"] + label {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); font-size: var(--t-body);
}
/* allauth puts the label *before* the checkbox inside a <p>, so neither the
   wrapping-label nor the adjacent-sibling pattern matches. The paragraph is
   the target: it fills the line, stands 48px tall, and clicking the words
   still toggles the box because the label keeps its `for`. */
.account-body form p:has(input[type="checkbox"]) {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--tap); margin-block: var(--space-2);
}
.account-body form p:has(input[type="checkbox"]) label {
  display: inline-flex; align-items: center; min-height: var(--tap);
  margin: 0; font-weight: 400; cursor: pointer;
}