/* Colours and the page width, shared by every block below */
:root {
    --ink: #111827;
    --ink-soft: #374151;
    --line: #e5e7eb;
    --surface-soft: #f3f4f6;
    --logged-bg: #e9f7ef;
    --logged-ink: #1e8449;
    --not-logged-bg: #fdecea;
    --not-logged-ink: #7b241c;
    --page-width: 960px;
}

/* Base: the system sans that olympics.com also falls back to */
body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: #ffffff;
}

/* Every band of the page is centred on the same width */
.site-header__inner,
.session__inner,
.page {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* Header: a thin white bar with a light line under it, like olympics.com */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    text-decoration: none;
}

.brand:hover .brand__name {
    text-decoration: underline;
}

.brand__rings {
    width: 48px;
    height: 24px;
}

.brand__name {
    font-size: 17px;
    font-weight: 600;
}

/* Right side of the bar: the README link and the tag, together */
.site-header__aside {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header__readme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-soft);
    font-size: 12px;
    text-decoration: none;
}

/* The icon element is empty until the AnimateIcons script draws it;
   reserving its box keeps the bar from jumping */
.site-header__readme animate-icons {
    width: 16px;
    height: 16px;
}

/* The hover changes nothing in the text: the only answer is the icon
   animation (rba.js). The keyboard focus stays visible, that is not decoration. */
.site-header__readme:focus-visible {
    outline: 2px solid var(--ink-soft);
    outline-offset: 2px;
}

.site-header__tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: 12px;
}

/* Session line: red while logged out, green once logged in */
.session {
    background: var(--not-logged-bg);
    color: var(--not-logged-ink);
    font-size: 14px;
}

.session--logged {
    background: var(--logged-bg);
    color: var(--logged-ink);
}

.session__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 36px;
}

.session__logout {
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.session__logout[hidden] {
    display: none;
}

/* Page body: title and the two screen-set actions */
.page__title {
    margin: 32px 0 12px;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}

.actions[hidden] {
    display: none;
}

.actions__button {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink-soft);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.actions__button:hover {
    background: var(--surface-soft);
}

/* Screen-set container */
#container {
    max-width: 480px;
    margin: 0 auto;
}

/* The screen-set CSS forces width: 920px on wide viewports and pushes the
   screen off centre; let it take the container width instead */
#container .gigya-screen-content div.gigya-screen.landscape,
#container div.gigya-screen.landscape {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* The social login strip of the screen-set has a fixed width of 420px and
   overflows a phone viewport; keep it inside the container */
#container .gigya-social-login-container,
#container .gigya-login-providers {
    width: auto !important;
    max-width: 100% !important;
}

#container {
    overflow-x: hidden;
}


/* Screen-set: what the page does not show. The login screen of CDC draws
   its own "Register" link; the page has its Register button, and in the RBA
   tests the registration flow is opened on purpose from register.html, not
   from inside the login. data-switch-screen is the stable hook (the element
   ids change on every render). */
#container #gigya-login-form a[data-switch-screen="gigya-register-screen"] {
    display: none;
}

/* README page: the Markdown converted at deploy time, read inside the page
   width. Headings weigh like the page title; tables scroll on their own on
   a phone instead of pushing the page sideways; links in the body text are
   underlined (this is text, not the header). */
.page--readme {
    padding-top: 24px;
    padding-bottom: 48px;
    line-height: 1.55;
}

.page--readme h1,
.page--readme h2 {
    margin: 32px 0 12px;
    font-weight: 600;
}

.page--readme h1 {
    font-size: 22px;
}

.page--readme h2 {
    font-size: 18px;
}

.page--readme a {
    color: var(--ink);
    text-decoration: underline;
}

.page--readme code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-soft);
    font-size: 14px;
}

.page--readme pre {
    padding: 12px;
    border-radius: 6px;
    background: var(--surface-soft);
    overflow-x: auto;
}

.page--readme pre code {
    padding: 0;
    background: none;
}

.page--readme table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 14px;
}

.page--readme th,
.page--readme td {
    padding: 6px 10px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.page--readme th {
    background: var(--surface-soft);
}