/* ------------------------------------------------------------------
   Pen Test Partners — public careers pages
   Used only by PTPCareersTemplate and its child pages. SiteSamples /
   SiteStyles.css belongs to the xcdrecruit pages and is untouched.

   The template renders with standardStylesheets="false", so there is no
   Salesforce Classic (Theme3) CSS underneath this file — everything the
   pages look like is defined here.
   ------------------------------------------------------------------ */

:root {
  --ptp-red: #c8102e;
  --ptp-red-dark: #9d0c24;
  --ink: #12171c;
  --ink-soft: #3d4852;
  --muted: #667380;
  --line: #dde3e9;
  --line-soft: #eef1f5;
  --bg: #ffffff;
  --surface: #f6f8fa;
  --focus: #1b64d4;
  /* Only the password meter uses these: a requirement still missing, and one met. */
  --warn: #b8791b;
  --ok: #1f7a43;
  --radius: 10px;
  --wrap: 68rem;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

a {
  color: var(--ptp-red);
}

a:hover {
  color: var(--ptp-red-dark);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip:focus {
  left: 0;
}

/* ------------------------------------------------------------ chrome */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
}

.brand {
  display: inline-flex;
  line-height: 0;
}

/*
  The source PNG is 7638x1413, so width alone sets the height: 300px renders about 55px
  tall, which sits comfortably inside the header's 1rem vertical padding. max-width keeps
  it from crowding the nav on a phone, where the two share a row.
*/
.brand-logo {
  width: 300px;
  max-width: 60vw;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.9375rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
}

.site-nav a:hover {
  color: var(--ptp-red);
  text-decoration: underline;
}

main {
  flex: 1 0 auto;
  padding-block: 2.5rem 4rem;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem;
}

.footer-inner p {
  margin: 0;
}

/* ------------------------------------------------------------- type */

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 0.5rem;
  font-weight: 650;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.375rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}

.lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  max-width: 46rem;
  margin: 0 0 2rem;
}

.muted {
  color: var(--muted);
  font-size: 0.875rem;
}

/* Vacancy body text is plain text held in long-text fields: keep its line breaks. */
.prose {
  white-space: pre-wrap;
  color: var(--ink-soft);
  max-width: 46rem;
}

/* ------------------------------------------------------ vacancy count */

/* Sits directly under the h1 now that the filter box has gone. */
.vacancy-count {
  margin: 0 0 1.5rem;
}

/* -------------------------------------------------------- list cards */

/*
  Two columns on a desktop, one on a phone, with no media query: auto-fill collapses the
  track count on its own once a card cannot hold 22rem.
*/
.vacancy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1.25rem;
}

/*
  Column layout so the Read more button can be pushed to the bottom edge with margin-top
  auto - cards in a row have different amounts of text, and ragged buttons look broken.
*/
.vacancy-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  background: var(--bg);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.vacancy-card:hover {
  border-color: #c3ccd6;
  box-shadow: 0 2px 10px rgba(18, 23, 28, 0.07);
}

.vacancy-card h2 {
  font-size: 1.1875rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.vacancy-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

.vacancy-card h2 a:hover {
  color: var(--ptp-red);
  text-decoration: underline;
}

.empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}

/* ------------------------------------------------------------- meta */

.meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}

.meta li {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.meta li.salary {
  background: #fdeef1;
  border-color: #f6ccd4;
  color: var(--ptp-red-dark);
  font-weight: 600;
}

/* ----------------------------------------------------------- detail */

.detail-head {
  margin-bottom: 2rem;
}

.detail-head .meta {
  margin-top: 1rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9375rem;
  text-decoration: none;
  font-weight: 600;
}

.back-link:hover {
  text-decoration: underline;
}

.apply-bar {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* --------------------------------------------------------- controls */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--ptp-red);
  background: var(--ptp-red);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--ptp-red-dark);
  border-color: var(--ptp-red-dark);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}

.btn-secondary:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: #c3ccd6;
}

/* ------------------------------------------------------------ forms */

.card-form {
  max-width: 26rem;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  background: var(--bg);
}

.card-form h1 {
  font-size: 1.5rem;
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}

.field input {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.field input:focus {
  border-color: var(--focus);
}

/*
  A field whose control is a fixed-width widget rather than a full-width input - the
  Turnstile iframe. Centred in the card instead of hugging the left edge. Opt-in, because
  every other .field wants its label and input left aligned.
*/
.field-centred {
  display: flex;
  justify-content: center;
}

/*
  A field that did not pass PTPCareersInput: red border on the control and the message
  underneath (PTPCareersFieldError). Same red as the page-level message box, so the
  summary at the top and the field it points at read as one thing.
*/
.field-invalid input,
.field-invalid select,
.field-invalid textarea {
  border-color: var(--ptp-red);
}

.field-error {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #7c0a1f;
}

/*
  Live character counter under a long answer (script in PTPCareersTemplate). Turns
  bold once the box is full, because that is when the browser starts dropping text.
*/
.char-count {
  margin: 0.35rem 0 0;
  text-align: right;
}

.char-count-full {
  color: #7c0a1f;
  font-weight: 600;
}

.card-form .btn {
  width: 100%;
  text-align: center;
}

.form-links {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/*
  Opt-in modifier: .form-links is shared by a dozen pages that want their links left
  aligned under the form, so the centring cannot go on the base class.
*/
.form-links-centred {
  justify-content: center;
}

/* Opt-in, for the same reason: headings and copy are left aligned everywhere else. */
.text-centred {
  text-align: center;
}

/* Visualforce renders <apex:pageMessages> with its own markup; restyle it here since
   the Classic stylesheets are switched off. */
.messaging .message,
.messaging .pageLevelMessage {
  border: 1px solid #f3b7c0;
  background: #fdeef1;
  color: #7c0a1f;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
}

.messaging table,
.messaging td,
.messaging th {
  border: 0;
  padding: 0;
  text-align: left;
  font-weight: inherit;
  color: inherit;
}

.messaging img {
  display: none;
}

/*
  Visualforce renders pageMessages as <h4>Errors</h4> followed by a <ul>. With the Classic
  stylesheets switched off there is nothing resetting either, so the browser defaults
  (h4 margin-bottom ~1.33em plus ul margin-top 1em) left a gap the size of a blank line
  between the heading and the first message.
*/
.messaging .messageText {
  margin: 0;
}

.messaging h4 {
  margin: 0 0 0.4rem;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
}

.messaging ul {
  margin: 0;
  padding-left: 1.15rem;
}

.messaging li + li {
  margin-top: 0.35rem;
}

@media (max-width: 30rem) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .vacancy-card {
    padding: 1rem 1.1rem;
  }

  .card-form {
    padding: 1.5rem 1.25rem;
  }

  .apply-bar .btn {
    width: 100%;
    text-align: center;
  }
}

/*
  No rule for the submitted-application send-off: matrix-fireworks.js builds and styles its
  own overlay, then removes it. Nothing here should try to position it.
*/

/* ------------------------------------------------------------ loading */

/*
  Shown while a postback is in flight, on every page (the markup is in the template). The
  same binary-glyph, matrix-green idea as the submitted-application fireworks, wound into
  a ring instead of thrown outwards.
*/
.loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 8, 0.84);
}

.loading.is-on {
  display: flex;
}

.loading-ring {
  position: relative;
  width: 120px;
  height: 120px;
  animation: ptp-ring-spin 1.5s linear infinite;
}

/*
  Each glyph is placed by rotating about the ring's centre and pushing out along the new
  axis, so one rule positions all of them - only the angle, set inline, differs.
*/
.loading-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  font: 700 17px/1 Consolas, Menlo, monospace;
  color: #00ff41;
}

.loading-text {
  margin: 1.5rem 0 0;
  color: #d9ffe0;
  font: 600 0.875rem/1.4 Consolas, Menlo, monospace;
  letter-spacing: 0.1em;
}

@keyframes ptp-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
  Still shown, because the point is to say "something is happening" - it just stops
  moving. A spinner is the one thing you cannot simply remove for reduced motion.
*/
@media (prefers-reduced-motion: reduce) {
  .loading-ring {
    animation: none;
  }
}

/* Honeypot: hidden from people, left in the DOM for bots to fill in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field select {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.field select:focus {
  border-color: var(--focus);
}

/* ------------------------------------------------- multi-step application */

/*
  The five-step application form. .card-form is capped at 26rem for the short signup
  forms, which is too narrow once a step carries a textarea or a full address, so the
  wide variant opts out. Everything else here follows the same tokens as the rest of
  the file - no new colours.
*/
.card-form-wide {
  max-width: 44rem;
}

.card-form-wide h2 {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
}

.step-count {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Progress indicator. Built from the .meta pill, which is the house precedent. */
.steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  max-width: 44rem;
}

.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.step-done {
  color: var(--ink-soft);
  border-color: var(--line);
}

.step-done .step-number {
  background: var(--ink-soft);
  border-color: var(--ink-soft);
  color: #fff;
}

.step-current {
  color: var(--ink);
  border-color: var(--ptp-red);
  font-weight: 600;
}

.step-current .step-number {
  background: var(--ptp-red);
  border-color: var(--ptp-red);
  color: #fff;
}

/*
  .card-form .btn forces width:100% for the single-button signup forms. A step footer
  has two buttons side by side, so it overrides that rather than changing the base rule.
*/
.step-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.card-form .step-actions .btn {
  width: auto;
  flex: 1 1 auto;
}

/* A checkbox reads as a row, not as a stacked label over a full-width control. */
.field-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.field-check input {
  width: auto;
  margin-top: 0.2rem;
}

.field-check label {
  margin: 0;
  font-weight: 400;
  color: var(--ink);
}

/* The review step: a definition-list feel without leaving <ul> semantics. */
.review {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.review li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.review-label {
  flex: 0 0 14rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.review-value {
  flex: 1 1 12rem;
  color: var(--ink);
}

.field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}

.field textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(27, 100, 212, 0.15);
}

.field input[type="file"] {
  padding: 0.5rem;
  background: var(--surface);
}

@media (max-width: 40rem) {
  .step-title { display: none; }
  .step { padding: 0.35rem; }
  .step-current .step-title { display: inline; padding-right: 0.5rem; }
  .review-label { flex: 1 1 100%; }
  .step-actions { flex-direction: column; }
}

/* ------------------------------------------------- vacancy card detail */

/* The department badge: small, upper case, outlined in PTP red. */
.tag {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--ptp-red);
  border-radius: var(--radius);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ptp-red);
  background: transparent;
}

.card-excerpt {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.card-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.card-meta li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Salary reads as plain body text, not as a highlight: same ink as the rest of the card. */
.card-meta li.salary {
  color: var(--ink);
  font-weight: 600;
}

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
}

/* margin-top:auto is what keeps the button on the bottom edge of an uneven card. */
.card-actions {
  margin: 1.25rem 0 0;
  padding-top: 0.25rem;
}

.vacancy-card .card-actions {
  margin-top: auto;
}

.card-actions .btn {
  display: inline-block;
  width: auto;
}

@media (max-width: 30rem) {
  .vacancy-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- notice */

/*
  The "your offer is accepted" prompt on My vacancies. Uses the PTP red as a left rule
  rather than a full pink panel: it needs to catch the eye without reading as an error,
  which is what .messaging already looks like.
*/
.notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--ptp-red);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
}

.notice-title {
  margin: 0 0 0.35rem;
  font-weight: 650;
  color: var(--ink);
}

.notice .muted {
  margin: 0 0 1rem;
}

.notice p:last-child {
  margin: 0;
}

/* The form on the personal details page groups fields under headings. */
.card-form-wide h2 {
  margin: 2rem 0 0.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 1.125rem;
}

.card-form-wide h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* --------------------------------------------------- password meter */

/*
  Built by the script in PTPCareersTemplate, underneath any .field-password box. With
  script off none of this renders and the static rule sentence above the form stays put,
  which is why that sentence is only hidden once the meter is actually on the page.
*/
.pw-meter {
  margin-top: 0.55rem;
}

.pw-bar {
  display: flex;
  margin-bottom: 0.4rem;
}

/*
  One segment per requirement, so the bar is a count of what is still missing rather
  than a guess at entropy. Margin rather than gap: gap on flex is the newer property of
  the two and this is a decoration, not a layout.
*/
.pw-bar span {
  flex: 1 1 0;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--line);
}

.pw-bar span + span {
  margin-left: 0.25rem;
}

.pw-bar span.is-on {
  background: var(--warn);
}

.pw-meter.is-ok .pw-bar span.is-on {
  background: var(--ok);
}

/* The one live region: a count, so a screen reader hears a short sentence per change. */
.pw-label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.pw-meter.is-ok .pw-label {
  color: var(--ok);
  font-weight: 600;
}

.pw-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--muted);
}

.pw-rules li {
  margin-bottom: 0.15rem;
}

.pw-rules li.is-ok {
  color: var(--ink-soft);
}

.pw-tick {
  display: inline-block;
  width: 1rem;
  color: var(--line);
}

.pw-rules li.is-ok .pw-tick {
  color: var(--ok);
}

/* Met/not met for anyone who cannot see the tick. Off screen, never display:none. */
.pw-state {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
  The confirm box says only when the two match. A mismatch is grey, not red: the second
  box is wrong for as long as it is half typed, and colouring that a failure is nagging.
*/
.pw-match {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.pw-match.is-ok {
  color: var(--ok);
  font-weight: 600;
}

/* ----------------------------------------------------- session guard */

/*
  The "are you still there?" panel, drawn by PTPCareersSessionGuard on every page. It sits
  ABOVE the loading overlay (9998): if a postback is in flight when the session runs out,
  what someone needs to see is why they are about to be signed out, not a spinner.

  It is a white card on a dim backdrop rather than the matrix-green treatment the loading
  overlay uses. That overlay is decoration over a wait; this one is asking a question and
  has to read as part of the site, with the same card, type and buttons as the forms.
*/
.session-guard {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(18, 23, 28, 0.55);
}

.session-guard.is-on {
  display: flex;
}

.session-panel {
  width: 100%;
  max-width: 26rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--ptp-red);
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
  box-shadow: 0 18px 48px rgba(18, 23, 28, 0.25);
}

.session-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--ink);
}

.session-body {
  margin: 0;
  color: var(--ink-soft);
}

/*
  Tabular figures, so the number does not jitter sideways as the digits change - a
  countdown that shifts about while it runs looks broken rather than urgent.
*/
.session-count {
  margin: 1rem 0 1.5rem;
  font: 700 2.25rem/1 var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--ptp-red);
}

.session-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* The anchor needs telling; .btn is shared with buttons, which centre their own text. */
.session-actions .btn {
  text-align: center;
}