/* Turnsby site styles, shared by the site's pages. Built only from turnsby.css.
   Ported (WEB-010) from BruceDoh/turnstill-design commit 2e1fef3, pages/site.css, R7 "Kraft":
   only the rules the signed-out home and the games list use are kept. Left out: the mock-up state
   switcher (.state, .mock, .ann, .tag: "not part of the design"), and the rules of the pages not
   built yet (new game, options, turns, account menu, in game, invites). Changed: icons are
   <span> masks of the icon files (icons.css) rather than inline <svg>, so .ic and .gico carry a
   size here. Signature moves kept: the corner, pigeonholes and the table edge. */

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--fs)/var(--lh) var(--body);
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
}
:where(button, input) { font: inherit; color: inherit; min-width: 0; }
:where(button) { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; }
:where(a) { color: var(--link); text-underline-offset: .18em; }
:where(h1, h2, h3, p, ol, ul, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(h1, h2, h3) { font-family: var(--head); font-weight: 700; line-height: 1.15; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s3); top: -80px; z-index: 30; background: var(--paper); border: var(--rule); padding: var(--s2) var(--s3); font-weight: 700; }
.skip:focus { top: var(--s3); }
.ic, .gico { flex: none; display: block; }
.ic { width: 24px; height: 24px; }
.gico { width: 28px; height: 28px; }
.gnm, .q { overflow-wrap: break-word; hyphens: manual; }

/* ---------- a screen */
.scr { position: relative; min-height: 100vh; background: var(--bg); overflow: hidden; }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 112px var(--gutter) var(--s7); }
.wrap.narrow { max-width: var(--measure-narrow); }

/* ---------- the corner: logo top left, sign in top right, no header bar */
.lgo {
  position: absolute; top: 14px; left: 14px; z-index: 8;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-btn); min-width: var(--target-btn); padding: 0 6px;
  color: var(--ink); text-decoration: none; border-radius: var(--rad);
}
.lgo .lgl { display: block; height: 31px; width: auto; }
.lgo .lgs { display: none; }
.cr { position: absolute; top: 14px; right: 14px; z-index: 8; display: flex; gap: 10px; align-items: center; }
.signin-link { min-height: var(--target-btn); }

/* ---------- buttons and fields */
.b, .bq {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--target-btn); padding: var(--s2) 22px;
  font-weight: 700; text-decoration: none; border-radius: var(--rad); text-align: center;
}
.b { border: 2px solid var(--acc); background: var(--acc); color: var(--on-acc) !important; }
.bq { border: var(--rule); background: var(--paper); color: var(--ink) !important; padding: var(--s2) 18px; }
.go { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); }
.quiet { color: var(--muted); font-weight: 600; margin-top: var(--s3); }
.lbl { display: block; font-weight: 700; margin: 18px 0 var(--s2); }
.fld {
  display: block; width: 100%; max-width: 440px; min-height: 56px;
  border: var(--rule); background: var(--paper); padding: var(--s2) 14px; border-radius: var(--rad);
}

/* ---------- messages: loading, error, no result (an icon and words, never colour alone) */
.msgline { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; margin-top: var(--s4); max-width: 40em; }
.msgline .ic { margin-top: 2px; }
.note {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: start;
  margin-top: var(--s4); padding: var(--s3) var(--s4); max-width: 640px;
  background: var(--paper); border: var(--rule); border-left: 8px double var(--ink); border-radius: var(--rad);
}
.note .ic { margin-top: 2px; }
.note p { margin: 0; }
.note b { display: block; }
.note .go { grid-column: 2; margin-top: var(--s2); }

/* ---------- headings and pigeonholes */
.q { font: 700 var(--fs-h1)/1.15 var(--head); margin: 0 0 18px; }
.hole { display: flex; flex-direction: column; border: var(--rule); background: var(--paper); border-radius: var(--rad); }
.hole > ul { flex: 1; }
.hk { padding: var(--s2) var(--s3); background: var(--table); border-bottom: var(--rule); font: 700 var(--fs-h3)/1.2 var(--head); }
.seat { font-weight: 600; color: var(--muted); white-space: nowrap; padding-left: 6px; }

/* ---------- footer */
.foot { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) var(--s6); color: var(--muted); font-weight: 600; }

/* ---------- phone */
@media (max-width: 560px) {
  .wrap { padding: 118px var(--gutter-phone) 28px; }
  .lgo { left: 10px; padding: 0; }
  .lgo .lgl { display: none; }
  .lgo .lgs { display: block; }
  .cr { right: 10px; }
  .q { font-size: var(--fs-h1-phone); }
  .hk { padding: var(--s2) 10px; }
  .foot { padding: 0 var(--gutter-phone) var(--s5); }
}