/*
 * Pages seen before anyone logs in: the gate, registration, the rules, and the
 * standing pages that hang off them.
 *
 * frame.css supplies every part these pages are built from; this file only
 * places them. Colour still comes from liveries.css -- `.loc-preauth` on the
 * root element -- so nothing here carries a literal either, and the day someone
 * wants the gate in a different colour it is one block, not this file.
 */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--page);
}

/* ── Banner ────────────────────────────────────────────────────────────── */

/*
 * The banner is the mount for the canvas, so it has to establish a stacking
 * context; the mark and the era line are lifted above it.
 */
.preauth-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 18px 14px 16px;
  background: linear-gradient(180deg, var(--head-a) 0%, var(--page) 55%, var(--head-b) 100%);
  border-bottom: 1px solid var(--rule);
}

/* The mark drives the banner's height -- it is a proportional image, so its
   width is the height control. */
.banner-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.preauth-logo,
.preauth-era {
  position: relative;
  z-index: 1;
}

.preauth-logo {
  display: block;
  padding: 10px 16px;
  max-width: 368px;
  width: 100%;
}

.preauth-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.preauth-era { width: 100%; max-width: 520px; }

/* `span.t` on purpose: frame.css sets the title size as `.mt span.t`, and a
   plain `.preauth-era .t` loses to it on specificity -- so the smaller size
   never applied and this line rendered at the full title size. */
.preauth-era span.t {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gilt);
}

/* The tabs are the whole navigation on these pages, so they wrap rather than
   scroll -- a row that runs off the edge hides pages nobody would find. */
.preauth-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

/* ── Entry ─────────────────────────────────────────────────────────────── */

.preauth-pad { padding: 22px 26px 26px; }

.preauth-field {
  width: 100%;
  margin-bottom: 16px;
}

.preauth-submit {
  width: 100%;
  margin-top: 6px;
}

.preauth-formlinks {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 12px;
}

/* ── Ledger ────────────────────────────────────────────────────────────── */

.preauth-ledger {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 18px;
  font-size: 13px;
}

.preauth-ledger .num {
  font-size: 11px;
  color: var(--gilt-br);
}

.preauth-ledger-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.6;
}

/* ── Reading column ────────────────────────────────────────────────────── */

.preauth-prose { padding: 22px 28px 24px; }

.preauth-prose p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.72;
  text-wrap: pretty;
}

.preauth-prose p:last-child { margin-bottom: 0; }

/*
 * The drop cap is the design's one piece of flourish. It is set on the first
 * paragraph only and left out below the breakpoint, where a 40pt letter eats a
 * third of the line.
 */
.preauth-prose .drop::first-letter {
  float: left;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 0.82;
  color: var(--gilt-br);
  padding: 4px 12px 0 0;
}

.preauth-news { padding: 14px 20px; }

.preauth-news-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.preauth-news-title {
  font-family: "Cinzel", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--gilt-br);
}

.preauth-news-body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
}

/* ── Ledger rail ───────────────────────────────────────────────────────── */

.preauth-online { padding: 6px 0; }

/*
 * A row per wanderer: rank mark, name, number.
 *
 * The mark is an <img> and the name brings its own <a>, which was a block --
 * so the two sat on separate lines with the number trailing after them. The row
 * is a flex line now and the anchor is part of it rather than a paragraph of
 * its own.
 */
.preauth-online-r {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 16px;
  font-size: 13px;
  line-height: 1.4;
}

.preauth-online-r img {
  flex: 0 0 auto;
  display: block;
}

.preauth-online-r a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preauth-online-id {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--muted);
}

.preauth-online-none {
  padding: 4px 16px;
  font-size: 13px;
  color: var(--muted);
}

.preauth-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 16px;
}

.preauth-chips .mchip { font-size: 11px; }

.preauth-realm {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  font-size: 13px;
}

/*
 * Each realm's mark carries that place's own gilt, so the list previews the
 * liveries waiting inside. Only the dot changes -- setting the location class
 * on the row would re-scope every token on it, including the text.
 */
.preauth-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background: var(--dot, var(--gilt));
  transform: rotate(45deg);
}

.realm-althoria { --dot: #DCC078; }
.realm-keldorn  { --dot: #E89A55; }
.realm-nargath  { --dot: #CB9BEE; }
.realm-eshgar   { --dot: #D2BE8C; }
.realm-moorvar  { --dot: #9CCB97; }
.realm-itharil  { --dot: #B5D96E; }

.preauth-support { padding: 10px 0; }

/* ── Foot ──────────────────────────────────────────────────────────────── */

.preauth-foot {
  margin-top: 14px;
  padding: 16px 4px 24px;
  border-top: 1px solid var(--rule-faint);
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

/* ── Narrow viewports ──────────────────────────────────────────────────── */

@media all and (max-width: 1023px) {
  .preauth-banner { padding: 16px 12px 14px; }
  .preauth-logo { padding: 6px 10px; max-width: 320px; }
  .preauth-pad { padding: 16px 18px 20px; }
  .preauth-prose { padding: 16px 18px 18px; }

  /* A drop cap this size wrecks the measure once the column is phone-wide. */
  .preauth-prose .drop::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
  }

  .preauth-formlinks { flex-direction: column; gap: 10px; }

  .preauth-online-r,
  .preauth-realm {
    padding: 12px 16px;
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ── Registration ──────────────────────────────────────────────────────── */

/* Two fields on a line, one per line once the column is narrow. */
.preauth-pair {
  display: flex;
  gap: 18px;
}

.preauth-pair > * { flex: 1; min-width: 0; }

.preauth-captcha {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 16px;
}

.preauth-captcha .mfr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The image is 440 wide as generated; at full size it leaves the field beside
   it about forty pixels. Scaled down it still reads. */
.preauth-captcha .mfr img {
  display: block;
  width: 240px;
  height: auto;
}

.preauth-captcha .min { flex: 1; min-width: 0; }

/* The codex: a numeral in the display face, the rule beside it. */
.preauth-codex {
  display: flex;
  gap: 12px;
  padding: 11px 18px;
  font-size: 13px;
  line-height: 1.6;
}

.preauth-codex-n {
  flex: 0 0 2.4em;
  font-family: "Cinzel", Georgia, serif;
  font-size: 11px;
  color: var(--muted);
}

@media all and (max-width: 1023px) {
  .preauth-pair { flex-direction: column; gap: 0; }
  .preauth-captcha { flex-wrap: wrap; }
}

/* ── Message pages ─────────────────────────────────────────────────────── */

/* A single-column stage: the message is the whole page, so the column is
   narrowed to a comfortable measure rather than run to the full width. */
.preauth-narrow { max-width: 720px; }

.preauth-message {
  padding: 26px 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}

/* ── Prose from the language files ─────────────────────────────────────── */

/*
 * The prologue and the rules arrive as ready-made markup from the language
 * files -- lists, emphasis, line breaks -- so the styling has to meet what is
 * already there rather than what a template would have wrapped.
 */
.preauth-prose ul,
.preauth-prose ol {
  margin: 0 0 14px;
  padding-left: 1.4em;
}

.preauth-prose li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.72;
}

.preauth-prose li:last-child { margin-bottom: 0; }

.preauth-prose i,
.preauth-prose em { color: var(--ink-str); }

.preauth-prose b,
.preauth-prose strong { color: var(--ink-str); }

.preauth-prose hr {
  height: 0;
  margin: 18px 0;
  border: 0;
  border-top: 1px solid var(--rule-faint);
}

/* The gate's own text sits directly in .drop, with no paragraph of its own. */
.preauth-prose .drop {
  font-size: 14px;
  line-height: 1.72;
  text-wrap: pretty;
}


/* ── Safety for content out of the language files and the database ─────── */

/*
 * The rules, the team page and the promo copy are authored elsewhere and carry
 * their own markup, including images sized for the old layout. Nothing in the
 * reading column may exceed it -- the old main.css capped these, and without a
 * rule here a full-size logo spills across the rail beside it.
 */
.mid img,
.preauth-prose img {
  max-width: 100%;
  height: auto;
}

.mid table {
  max-width: 100%;
  border-collapse: collapse;
}

.mid pre {
  max-width: 100%;
  overflow-x: auto;
}

/* Headings inside authored content -- the panel header carries the section
   name, so an h2 in the body is a subheading, not a title. */
.preauth-prose h1,
.preauth-prose h2,
.preauth-prose h3 {
  margin: 0 0 12px;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--gilt-br);
}

.preauth-prose h3 { font-size: 13px; }

/*
 * Form controls in authored content carry `size` attributes sized for the old
 * layout -- the promo page's snippet boxes are `size="50"`, which is wider than
 * a phone. Nothing in the reading column may push the page sideways.
 */
.mid input,
.mid textarea,
.mid select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Controls that inherit nothing from the new parts still need to look like they
   belong -- these are readonly snippet fields, not styled inputs. */
.mid input:not([class]),
.mid textarea:not([class]) {
  padding: 6px 8px;
  border: 1px solid var(--rule-soft);
  background: var(--field);
  color: var(--ink-str);
  font-family: Verdana, "DejaVu Sans", sans-serif;
  font-size: 11px;
}

/*
 * The old build shipped <img src=""> placeholders it painted with background
 * images. With no rule behind them the browser draws a broken-image glyph and
 * the alt text -- "img_FAQ - najczestsze pytania" and friends -- in the middle
 * of the page.
 */
.mid img[src=""],
.mid img:not([src]) { display: none; }

/*
 * The browser paints autofilled fields with its own near-white background,
 * which on a dark interface reads as a rendering fault. There is no property
 * for it, so the accepted trick is an inset shadow the size of the field plus a
 * text-fill colour, held through the focus and hover states too.
 */
.min:-webkit-autofill,
.min:-webkit-autofill:hover,
.min:-webkit-autofill:focus,
.mid input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink-str);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--ink-str);
  transition: background-color 9999s ease-in-out 0s;
}

/* Any form control in the reading column that carries no class of its own --
   authored markup, mostly -- still reads as part of the interface. */
.mid input:not([class]),
.mid select:not([class]),
.mid textarea:not([class]) {
  padding: 6px 9px;
  border: 1px solid var(--rule-soft);
  background: var(--field);
  color: var(--ink-str);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 13px;
}

.mid input[type="submit"],
.mid button:not([class]) {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--btn-a) 0%, var(--btn-b) 100%);
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gilt-hi);
  cursor: pointer;
}

.mid input[type="submit"]:hover,
.mid button:not([class]):hover {
  border-color: var(--muted);
  background: linear-gradient(180deg, var(--btn-ha) 0%, var(--btn-hb) 100%);
  color: #fff;
}

/* ── Links in running text ─────────────────────────────────────────────── */

/*
 * The accent and the ink are close cousins in this livery -- #8CBBD9 against
 * #8fb3c7 -- so colour alone left a link inside a sentence indistinguishable
 * from the sentence.
 *
 * The chrome does not have this problem: a tab, a navigation row and a button
 * all read as clickable from their shape. A link in running text has nothing
 * but its own styling, so it takes the brighter end of the accent and a quiet
 * underline, drawn in a washed-out accent so it marks the word without boxing
 * it in. Hovering brings the rule up to full strength.
 */
.preauth-prose a,
.preauth-formlinks a,
.preauth-ledger-foot a,
.preauth-message a,
.preauth-foot a,
.mid p a,
.mid li a {
  color: var(--gilt-hi);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--gilt) 50%, transparent);
}

.preauth-prose a:hover,
.preauth-formlinks a:hover,
.preauth-ledger-foot a:hover,
.preauth-message a:hover,
.preauth-foot a:hover,
.mid p a:hover,
.mid li a:hover {
  color: #fff;
  text-decoration-color: var(--gilt-hi);
}

/* The footer is set in the muted ink, so its links only need to lift off that
   rather than off full-strength body copy. */
.preauth-foot a { color: var(--gilt); }
.preauth-foot a:hover { color: var(--gilt-hi); }

/* ── Forms outside the login rail ──────────────────────────────────────── */

/*
 * The second factor challenge and anything else that asks a question on the
 * standalone shell. The login rail's parts are reused where they fit -- .mlbl,
 * .min, .mbtn -- and these fill in what a one-column form needs on top of them.
 */
.preauth-pad p {
  margin: 0 0 16px;
  line-height: 1.7;
}

.preauth-pad p:last-child { margin-bottom: 0; }

.preauth-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* A field and the button that acts on it, side by side. */
.preauth-inline {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 16px;
}

.preauth-inline > select { flex: 1 1 auto; min-width: 0; }
.preauth-inline > .mbtn { flex: 0 0 auto; }

/*
 * A checkbox and its sentence. The box is aligned to the first line rather than
 * centred on the whole label, which is what a two-line label needs.
 */
.preauth-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 6px;
  line-height: 1.6;
  cursor: pointer;
}

.preauth-check input {
  flex: 0 0 auto;
  margin: 4px 0 0;
}

/* The buttons that end a form: they wrap rather than overflow a narrow
   column. */
.preauth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Something went wrong, and something worth knowing but not an error. */
.preauth-alert,
.preauth-note {
  margin-bottom: 16px;
  padding: 11px 14px;
  border: 1px solid var(--rule-soft);
  background: var(--wash);
  font-size: 13px;
  line-height: 1.6;
}

.preauth-alert {
  border-color: #7a2f2f;
  color: var(--ink-str);
}

.preauth-note { color: var(--ink-str); }

/*
 * A box is not a text field. The rules above give any unclassed input the
 * padding, border and ground of one, which turns a checkbox into a grey slab
 * with a tick somewhere inside it.
 */
.mid input[type="checkbox"],
.mid input[type="radio"] {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--gilt);
}

/*
 * ── Promoting the game ────────────────────────────────────────────
 *
 * A banner and the four ways of pasting it somewhere else. The fields are
 * the frame's own; what is here is the spacing between one banner and the
 * next, and the frame around the artwork.
 */
.promo-item { border-top: 1px solid var(--rule); }

.promo-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px 0;
}

.promo-name {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gilt-br);
}

.promo-size { font-size: 10px; color: var(--muted); }

.promo-art { padding: 12px 20px 4px; }

.promo-art img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule-faint);
}

/* Two codes to a row where there is room for two, one where there is not. */
.promo-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 10px 20px 18px;
}

@media (max-width: 620px) {
  .promo-codes { grid-template-columns: minmax(0, 1fr); }
}

/* A reader copies the field rather than reads it, so it need only be wide
   enough to show where it starts. */
.promo-field {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: Verdana, "DejaVu Sans", sans-serif;
  font-size: 11px;
}

/*
 * ── The questions people ask ───────────────────────────────────────
 *
 * The FAQ is the one page drawn in both frames, so it is written in both
 * sheets. The topics stand in two columns where there is room for two; the
 * answer reads as prose under them.
 */
.faq-topics {
  margin: 0;
  padding: 14px 20px;
  columns: 2;
  column-gap: 24px;
}

.faq-topics li {
  break-inside: avoid;
  padding: 4px 0;
}

.faq-text {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--rule);
  line-height: 1.72;
  text-wrap: pretty;
}

.faq-text p { margin: 0 0 12px; }

.faq-text p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .faq-topics { columns: 1; }
}


/*
 * ── Team Thalium ───────────────────────────────────────────────────────────
 *
 * The second page drawn in both frames, and the second to be written in both
 * sheets: outside the gate this is the only stylesheet there is, so without
 * these the cards had no grid, no padding and no portrait size -- a name and
 * an id spilling out from under a header, which is what it looked like.
 */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

/* The duty is the card's header, so the eye finds the role before the name. */
.team-card .mp-h {
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.team-duty {
  min-width: 0;
  overflow-wrap: anywhere;
}

.team-admin {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  font-size: 9px;
}

.team-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.team-face { flex: 0 0 auto; }

.team-face img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: cover;
  object-position: center top;
}

.team-who {
  flex: 1 1 auto;
  min-width: 0;
}

.team-line {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.team-name {
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gilt-br);
}

.team-id { color: var(--muted); }

.team-contact {
  margin-top: 7px;
  font-size: 11px;
  color: var(--muted);
}

/* The middle column outside the gate is narrower than the game's, so two
   cards stop fitting sooner. */
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}