/*
 * Sign-in (hello/login) and feedback panel (hello/feedback) in bru's look (ENT-4886, Tom #m24049): the packages bring
 * no design, the bru provider sets their classes and custom properties from the tokens of main.css. The form follows
 * the contact form (.frame-type-form_formframework): mono labels, bottom-border inputs, the solid accent button.
 */

/* ===== hello/login on /login ===== */
.hello-login { max-width: 34rem; margin: 0 auto; padding: calc(var(--header-h) + 48px) 24px 96px; color: var(--ink); }
.hello-login__title { font-family: 'Oswald', Impact, sans-serif; font-weight: 400; font-size: clamp(40px, 8vw, 72px); line-height: var(--display-lh); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 24px; }
.hello-login__intro,
.hello-login__note { color: var(--bone); margin: 0 0 28px; }
.hello-login__message { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .04em; padding: 12px 16px; border: 1px solid var(--line); margin: 0 0 24px; }
.hello-login__message--error { border-color: var(--accent); color: #fff; }
.hello-login__form { display: grid; gap: 28px; }
.hello-login__field { display: grid; gap: 4px; }
.hello-login__label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); transition: color .25s; }
.hello-login__field:focus-within .hello-login__label { color: var(--ink); }
/* The grey field box of every form of the site (ENT-6233). */
.hello-login__input { display: block; width: 100%; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background-color: var(--line); border: 1px solid var(--field-edge); border-radius: 0; outline: none; transition: border-color .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.hello-login__input:focus:not(:focus-visible) { border-bottom-color: var(--accent); box-shadow: 0 2px 0 0 var(--accent); }
.hello-login__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hello-login__input--code { font-family: 'Space Mono', monospace; font-size: 28px; letter-spacing: .5em; }
.hello-login__field--check { grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.hello-login__checkbox { width: 20px; height: 20px; accent-color: var(--accent); }
.hello-login__submit { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--accent); border-radius: 0; background: var(--accent); color: #fff; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s, border-color .15s; }
.hello-login__submit:hover { background: #ff2e75; border-color: #ff2e75; }
.hello-login__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hello-login a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.hello-login button:not(.hello-login__submit) { background: none; border: none; padding: 0; color: var(--ink); font: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; cursor: pointer; }

/* ===== hello/feedback panel and draft bar ===== */
.hello-feedback {
  --hello-feedback-accent: var(--accent);
  --hello-feedback-accent-fg: #fff;
  --hello-feedback-bg: var(--bg);
  --hello-feedback-fg: var(--ink);
  --hello-feedback-muted: var(--mute);
  --hello-feedback-surface: #17171b;
  --hello-feedback-border: #3a3a40;
  --hello-feedback-danger: #ff7a90;
  --hello-feedback-success: #6fdc9b;
  --hello-feedback-warning: var(--neon);
  --hello-feedback-draft-bg: var(--neon);
  --hello-feedback-draft-fg: #171300;
  --hello-feedback-draft-border: var(--neon);
  /* below the fixed header */
  --hello-feedback-draft-top: calc(var(--header-h) + 8px);
  --hello-feedback-focus: var(--neon);
  --hello-feedback-radius: 0;
  --hello-feedback-radius-small: 0;
  --hello-feedback-font: 'Inter', system-ui, sans-serif;
}

/* ===== hello_base's section of the panel: the CSV download "Spielplan per Post" (ENT-6326) =====
 * The partial Panel/Extras below every tab, after a fine line. Only the panel's classes and properties; stacked with
 * the button at full width, text left and button right once the panel body (its container) is wide enough, at the
 * width hello/feedback itself switches its rows. */
.bw-panel-playbill {
  display: grid;
  gap: var(--hello-feedback-gap);
  margin-top: var(--hello-feedback-padding);
  padding-top: var(--hello-feedback-padding);
  border-top: 1px solid var(--hello-feedback-border);
}
.bw-panel-playbill__text { display: grid; gap: 0.25rem; min-width: 0; }
.bw-panel-playbill__heading { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
@container (min-width: 30rem) {
  .bw-panel-playbill { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}