/*
* Custom stylesheet
* @author Mark Matanza
*
* Quest16 "Balanced" theme - the durable parts of Field Manual (flat
* color, hairline structure, one serif moment, a disciplined four-color
* palette tied to MBTI's temperament groups) without the vintage-journal
* costume (no corner brackets, no all-mono UI, no sharp-corners-
* everywhere). Ships with a real light/dark toggle - light is the
* default, dark reuses Field Manual's palette. Both modes share the same
* structure; only the CSS variables below change per data-theme.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;1,500;1,600&family=Source+Sans+3:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    --bg: #F3EEE2;
    --surface: #FBF8F1;
    --surface-2: #F5EFDF;
    --surface-3: #EDE4CE;
    --text: #221D16;
    --text-muted: #6E6252;
    --border: rgba(34,29,22,0.16);
    --line: rgba(34,29,22,0.10);

    --brass: #8A6B22;
    --on-brass: #FFFFFF;
    --rust: #A25A3C;
    --moss: #7C8A5C;
    --teal: #3F6E68;
    --ink-fixed: #221D16;

    --success: var(--moss);
    --fail: var(--rust);

    --radius: 8px;
    --radius-sm: 6px;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Override Bootstrap 5.3's own CSS variables (no Sass recompile needed -
       BS5.3 reads these at runtime) so native Bootstrap components pick up
       the theme without every template needing its own override. */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text-muted);
    --bs-body-font-family: var(--font-body);
    --bs-border-color: var(--border);
    --bs-primary: var(--brass);
    --bs-primary-rgb: 138, 107, 34;
    --bs-secondary: var(--rust);
    --bs-secondary-rgb: 162, 90, 60;
    --bs-success: var(--success);
    --bs-danger: var(--fail);
    --bs-warning: var(--brass);
    --bs-info: var(--teal);
    --bs-link-color: var(--brass);
    --bs-link-hover-color: var(--teal);
    --bs-link-color-rgb: 138, 107, 34;
    --bs-link-hover-color-rgb: 63, 110, 104;
}

/* Dark mode - toggled via a `data-theme="dark"` attribute on <html>,
   set by the small script in base.twig and persisted in localStorage.
   Reuses Field Manual's original dark palette; everything else (type,
   radius, layout) is shared with light mode, so switching modes only
   ever changes color, never shape. */
:root[data-theme="dark"] {
    --bg: #14140F;
    --surface: #1C1C15;
    --surface-2: #232319;
    --surface-3: #2A2A1E;
    --text: #E7E0CD;
    --text-muted: #A89F88;
    --border: rgba(200,190,160,0.28);
    --line: rgba(200,190,160,0.14);

    --brass: #C9A24A;
    --on-brass: #14140F;
    --ink-fixed: #14140F;
}

.card, .modal-content, .dropdown-menu, .form-control, .form-select {
    background-color: var(--surface);
    color: var(--text-muted);
    border: 2px solid var(--border);
    border-radius: var(--radius);
}

.form-control, .form-select {
    color: var(--text);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(184,147,63,0.25);
}

/**
* Show/hide password toggle - wrap a password <input> in
* .passwordFieldWrap and add a .togglePasswordBtn button after it.
* See base.twig for the click handler.
*/

.passwordFieldWrap {
  position: relative;
}

.passwordFieldWrap input {
  padding-right: 2.75em;
}

.togglePasswordBtn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2.75em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}

.togglePasswordBtn:hover {
  color: var(--rust);
}

.dropdown-item {
    color: var(--text-muted);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--surface-2);
    color: var(--text);
}

* {
    margin: 0;
    padding: 0;
}

.container-fluid {
    padding-left: 2em;
    padding-right: 2em;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text-muted);
    margin: 0 0 500px 0;
    padding: 140px 0 0 0;
}

body#gameContainer {
  overflow: hidden;
}

ul, li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: var(--rust);
    cursor: pointer;
}

a:hover {
    color: var(--moss);
    text-decoration: none;
}

/*
* Default classes
*/

.clear {
    display: block;
    clear: both;
}

.btn {
    margin: 0;
    padding: .689em 1.4em;
    border: 1px solid var(--brass);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    color: var(--brass) !important;
    background: transparent;
    transition: transform .1s ease, background .12s ease, color .12s ease;
}

.btn:hover {
    transform: translateY(-1px);
    border-color: var(--teal);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn:focus-visible {
    outline: 2px solid var(--moss);
    outline-offset: 2px;
}

.btn:disabled, .btn.disabled {
    filter: grayscale(0.4) brightness(0.95);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Bootstrap's compiled .btn-* classes bake in hardcoded hex colors at
   Sass-build time - they don't actually read the --bs-primary etc.
   variables above at runtime, so they need direct overrides. These must
   come after the base .btn rule above: both use equal-specificity
   single-class selectors with !important on `color`, so whichever rule
   is LAST in source order wins the cascade - putting these first (as
   they were before) meant the base .btn's white text silently won over
   .btn-warning/.btn-info's dark text every time. */
.btn-primary {
    --bs-btn-bg: var(--brass);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--brass);
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-bg: var(--brass);
    --bs-btn-active-border-color: var(--border);
    --bs-btn-disabled-bg: var(--brass);
    --bs-btn-disabled-border-color: var(--border);
    background: var(--brass);
    border: 2px solid var(--border);
    color: var(--on-brass) !important;
}

.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--border);
    background: var(--success);
    border: 2px solid var(--border);
    color: #fff !important;
}

.btn-danger {
    --bs-btn-bg: var(--fail);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--fail);
    --bs-btn-hover-border-color: var(--border);
    background: var(--fail);
    border: 2px solid var(--border);
    color: #fff !important;
}

.btn-warning {
    --bs-btn-bg: var(--teal);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--teal);
    --bs-btn-hover-border-color: var(--border);
    background: var(--teal);
    border: 2px solid var(--border);
    color: var(--text) !important;
}

.btn-info {
    --bs-btn-bg: var(--teal);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--teal);
    --bs-btn-hover-border-color: var(--border);
    background: var(--teal);
    border: 2px solid var(--border);
    color: var(--text) !important;
}

.btn-light {
    --bs-btn-bg: var(--surface-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-border-color: var(--border);
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text) !important;
}

/* .btn-default is a Bootstrap 2/3 class - doesn't exist in Bootstrap 5
   at all, so these buttons (modal "Close" actions) were rendering with
   no background color whatsoever. Same neutral treatment as .btn-light. */
.btn-default {
    background-color: var(--surface-2);
    border: 2px solid var(--border);
    color: var(--text) !important;
}

.btn-default:hover {
    background-color: var(--surface-3);
    color: var(--text) !important;
}

/* These are plain color-swatch utility classes, sometimes combined
   directly with .btn in templates (e.g. class="btn success"). .btn's own
   default text/border color is brass, which only reads correctly against
   a dark/transparent .btn - combined with these fills it needs its own
   readable text and a matching border, not the base ghost-button brass. */
.success {
    background: var(--success);
    color: #fff !important;
    border-color: var(--success) !important;
}

.fail {
    background: var(--fail);
    color: #fff !important;
    border-color: var(--fail) !important;
}

.warning {
    background: var(--teal);
    color: #fff !important;
    border-color: var(--teal) !important;
}

.info {
    background: var(--moss);
    color: #fff !important;
    border-color: var(--moss) !important;
}

.purple {
    background: var(--brass);
    color: var(--on-brass) !important;
    border-color: var(--brass) !important;
}

.pink {
    background: var(--rust);
    color: #fff !important;
    border-color: var(--rust) !important;
}

.pinklink {
    color: var(--rust);
}

.submit {
    margin: 1em 0;
    font-size: .789em;
}

.left {
    float: left;
}

.right {
    float: right;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
}

ul.listInline {
  margin: 0;
  padding: 0;
}

.listInline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

.fixed {
  position: fixed;
  top: left;
  left: 0;
  z-index: 9999;
}

.alert {
  background: var(--surface);
  border: 2px solid var(--border);
  border-left: 6px solid var(--text-muted);
  color: var(--text);
  border-radius: var(--radius);
}

.alert p {
  margin: 1em 0;
}

.alert p a {
  color: var(--moss);
}

.alert-danger {
  border-left-color: var(--fail);
}

.alert-danger .btn-close {
  filter: none;
}

.alert-warning {
  border-left-color: var(--teal);
}

.alert-warning .btn-close {
  filter: none;
}

.alert-info {
  border-left-color: var(--moss);
}

.alert-info .btn-close {
  filter: none;
}

.alert-success {
  border-left-color: var(--success);
}

.alert-success .btn-close {
  filter: none;
}

.progress {
  margin: 1em 0 2em 0;
}

/*
* Header
*/

#notice {
    margin: 0;
    padding: .689em;
    background: var(--surface-2);
    border-bottom: 2px solid var(--border);
    text-align: center;
    color: var(--text-muted);
}

#notice p {
    margin: 0;
}

#notice a {
    color: var(--moss);
}

#header {
    background: var(--surface-2);
}

/*
* Logo
*/


.logo {
    margin: 0;
    padding: 0;
}

.logo a {
    margin: 0;
    padding: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo sup {
  font-size: .5em;
}

#whatIs h1 sup {
  font-size: .3em;
  font-weight: normal;
}

.logo a span {
  color: var(--text);
}

.logo small {
  font-size: .5em;
}

#h1.logo h1 a.btn-primary {
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 1.5rem;
}

#logo h2 {
    margin: .5em 0 0 0;
    padding: 0;
    font-size: 1em;
    color: var(--teal);
}
/*
* topNavigation
*/
nav {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
}

#mainNav {
    margin: 0 0 0 100px !important;
}

.navbar {
  padding: .8em 2em;
}

.navbar-nav {
  gap: .5em;
}

nav .navbar-nav>li>a {
  color: var(--text) !important;
  font-weight: 600;
}

nav .navbar-nav>li>a:hover {
  color: var(--rust) !important;
}

#topNavigation {
    background: var(--surface-2);
}

#topNavigation ul li a {
    padding: .689em;
    display: block;
    background: var(--surface-2);
}

#topNavigation ul li {
    float: left;
}

#topNavigation ul a.logout {
    margin: 0;
    background: var(--surface-3);
    color: var(--text);
}

nav .navbar-nav>li>a.loginBox {
  display: block;
  background: var(--surface) !important;
  color: var(--text) !important;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
}

nav .navbar-nav>li>a.pinkBox {
  display: block;
  background: var(--rust) !important;
  color: var(--text) !important;
  font-weight: 800;
  padding: 13px 18px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
}
a.cogBox {
  display: block;
  font-size: 2em;
  padding: 20px 10px !important;
  color: var(--moss) !important;
}

#logout {
  color: var(--text);
}

.typeList {
  background: var(--surface);
}

.typeList span {
  font-size: 1em;
  color: var(--text);
}

#container {
  padding: 0;
}

/**
* Homepage
*/

#whatIs {
  padding: 1em;
}

#whatIs h1 {
  font-family: var(--font-display);
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
}

#whatIs strong {
  font-size: 1.2em;
}

#whatIs p {
  color: var(--text-muted);
  font-size: 1.2em;
}


#popularMembers h3 {
  font-size: 1em;
}

#popularMembers .panel-heading {
  background: var(--surface) !important;
}

#popularMembers .label {
  background: var(--teal);
  border-radius: var(--radius);
}

.glyphicon-fire {
  color: var(--rust);
}

#newestMembers h3 {
  font-size: 1em;
}

#newestMembers .panel-heading {
  background: var(--surface) !important;
}

#newestMembers .badge {
  background: var(--teal);
  border-radius: var(--radius);
}

#newestMembers ul li {
    padding: 10px;
    border-bottom: 2px solid var(--line);
}

#newestMembers ul li img {
  border-radius: 4px !important;
  border: 1px solid var(--border);
  width: 100px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

#newestMembers ul li a div p {
  margin: 5px 0;
}

#activeMembers .active {
  margin: 20px 0;
}

#activeMembers h3 {
  font-size: 1em;
}

#activeMembers p {
  margin: 5px 0;
}

#activeMembers .panel-heading {
  background: var(--surface) !important;
}

#activeMembers .panel-body {
  padding: 0 15px;
}

#activeMembers .label {
  background: var(--teal);
  border-radius: var(--radius);
}

#activeMembers img {
  border-radius: 4px !important;
  border: 1px solid var(--border);
  width: 75px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

#thoughtMoodFeed img {
  border-radius: 4px !important;
  border: 1px solid var(--border);
  object-fit: cover;
}

#thoughtMoodFeed .thoughtQuote {
  font-size: 1.2em;
}

#thoughtMoodFeed h3 {
  font-size: 1em;
}

#thoughtMoodFeed .label-default {
  background: var(--teal);
  border-radius: var(--radius);
}

#thoughtMoodFeed .panel-heading {
  background: var(--surface) !important;
}

.colorPalette {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

#recentBlogs h3 {
  font-size: 1em;
}

#recentBlogs .label-default {
  background: var(--teal);
  border-radius: var(--radius);
}

#recentBlogs .panel-heading {
  background: var(--surface) !important;
}

#aboutPage h2 {
    margin: 0 0 20px 0;
    font-size: 2em;
    font-family: var(--font-display);
    font-weight: 700;
}

#aboutPage p {
    font-size: 1em;
    line-height: 1.5em;
    color: var(--text-muted);
}

#aboutPage strong {
    color: var(--text);
}

.btn-register {
  margin: 1em 0;
  padding: 1em 2em;
  background: var(--rust);
}

/**
* Login form
*
*/

#loginForm {
    margin: 0 auto;
    width: 200px;
    padding: 1em;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
}

label {
    display: block;
    color: var(--text);
    font-weight: 600;
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.forgot-link {
  margin: 1em 0;
  display: block;
}

/**
* Signup Form
*/
#signupForm {
    margin: 0 auto;
    width: 600px;
    padding: 1em;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
}

#createProfile .register {
    background: var(--rust);
    font-size: 1.2em;
    color: var(--text);
    font-weight: 800;
    padding: 1em;
    border-radius: var(--radius);
    border: 2px solid var(--border);
}

/**
* Left Column
* and Right Column
*/
.leftColumn {
    padding: 2em;
    float: left;
    width: 250px;
}

.rightColumn {
    padding: 2em;
    float: left;
    width: 500px;
}

.oneColumn {
    padding: 2em;
    width: 100%;
}

#help {
  color: var(--text);
}

#login {
    color: var(--text);
}

#helpPage ul li {
  list-style-type: disc;
  font-size: 1.2em;
  color: var(--text-muted);
}


/**
* Member cards (Browse, homepage feed) - shared component,
* app/views/_templates/member_card.twig
*/

.memberGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 991px) {
  .memberGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .memberGrid {
    grid-template-columns: 1fr;
  }
}

.memberCard {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
}

.memberCard:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  color: var(--text);
}

.memberCard.typeViolet { background: var(--surface); }
.memberCard.typePink { background: var(--surface); }
.memberCard.typeCyan { background: var(--surface); }
.memberCard.typeAmber { background: var(--surface); }

.homeMemberSection {
  padding: 1em 0;
}

.homeMemberSection h2 {
  font-size: 1.6em;
  margin-bottom: .8em;
  font-weight: 700;
}

.memberCardAvatar {
  position: relative;
  flex-shrink: 0;
}

.memberCardAvatar img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

.onlineDot {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--surface);
  box-shadow: none;
}

.memberCardActivity {
  color: var(--text-muted);
  font-size: .8em;
  margin: -6px 0 8px;
}

.profileAvatarWrap {
  position: relative;
  display: block;
  width: 100%;
}

.profileAvatarWrap img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--border);
  border-radius: 4px;
}

.onlineDotLg {
  bottom: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-width: 3px;
}

.onlineDotInline {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  box-shadow: none;
}

.profileOnlineText {
  color: var(--success);
}

/**
* Game cards - app/views/games/index.twig
*/

.gameGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 1.5em;
}

.gameCard {
  display: flex;
  flex-direction: column;
  flex: 0 1 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.gameCard h3 {
  text-align: center;
  margin-bottom: .8em;
  font-weight: 700;
}

.gameCard p {
  color: var(--text-muted);
}

.gameCardNote {
  background: var(--surface-2);
  border: 2px solid var(--border);
  border-left: 6px solid var(--teal);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 20px;
}

.gameCardNote p {
  color: var(--text);
  font-size: .9em;
  margin: 0;
}

.gameCardBtn {
  margin-top: auto;
}

.gameCardDisabled {
  opacity: .6;
}

.gameCardBtnDisabled {
  background: var(--surface-2);
  color: var(--text-muted) !important;
  border: 2px solid var(--border);
  cursor: not-allowed;
  pointer-events: none;
}

/**
* Vision Board cards - app/views/profile/index.twig
*/

.visionBoardGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 1em;
}

.visionBoardCard {
  display: block;
  flex: 0 1 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
}

.visionBoardCard:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  color: var(--text);
}

.visionBoardCardImg {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.visionBoardCardLabel {
  padding: 12px 14px;
  font-weight: 700;
}

.memberCardBody {
  min-width: 0;
  flex: 1;
}

.memberCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.memberCardName {
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.memberCardType {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--brass);
  color: var(--brass);
  flex-shrink: 0;
}

.typePink .memberCardType { border-color: var(--rust); color: var(--rust); }
.typeCyan .memberCardType { border-color: var(--moss); color: var(--moss); }
.typeAmber .memberCardType { border-color: var(--teal); color: var(--teal); }

.memberCardBio {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memberCardFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  font-size: 11px;
  color: var(--text-muted);
}




/**
* Browse
*/

h4.profileBadge {
  text-align: center;
}

h4.profileBadge .label-default {
  text-transform: uppercase;
  background: var(--teal);
  border-radius: var(--radius);
}

.browse .pagination>li>a, .pagination>li>span {
  border: 2px solid var(--border);
}

.pagination {
  justify-content: center;
  margin: 28px 0;
  gap: 8px;
}


/**
* Profile
*/

#profilePic {
    margin: 3em 0 0 0;
    padding: 0;
}

#profilePic img {
    border-radius: 4px !important;
    border: 2px solid var(--border);
}

#profilePic a {
  color: var(--moss);
}

.messageBox {
  margin: 0 0 3em 0;
}

.newMessageAlert {
  display: block;
}

#profileType {
    margin: 1em 0;
    padding: 4em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#profileType h2 {
    font-size: 2em;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--rust);
}

#profileUpdate {
    margin: 1em 0;
    padding: 1em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#profileUpdate ul li {
    margin: 0;
}

#profileUpdate ul li a {
    padding: 5px;
    display: block;
}

.forwardSlash {
  text-align: center;
  font-size: 1.5em;
  color: var(--text-muted);
}

.profileDetails {
    margin: 1em 0;
    padding: 0;
}

.profileDetails .transparent li {
  background: transparent !important;
  border: none !important;
}

.profileDetails div {
    padding: 1em;
    line-height: 1.5em;
}

.profileDetails a {
  color: var(--moss);
}

.profileDetails ul li.list-group-item {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  border-radius: var(--radius);
}

#profileAbout {
    margin: 1em 0;
    padding: 0;
}

#profileAbout div {
    padding: 1em;
    line-height: 1.5em;
}

#profileEducation {
    margin: 1em 0;
    padding: 0;
}

#profileEducation div {
    padding: 1em;
    line-height: 1.5em;
}

#profileBook {
    margin: 1em 0;
    padding: 0;
}

#profileBook div {
    padding: 1em;
    line-height: 1.5em;
}

#profileTV {
    margin: 1em 0;
    padding: 0;
}

#profileTV div {
    padding: 1em;
    line-height: 1.5em;
}

#profileMovie {
    margin: 1em 0;
    padding: 0;
}

#profileMovie div {
    padding: 1em;
    line-height: 1.5em;
}

#profileMusic {
    margin: 1em 0;
    padding: 0;
}

#profileGame {
    margin: 1em 0;
    padding: 0;
}

#profileHero div {
    padding: 1em;
    line-height: 1.5em;
}

#profileHero {
    margin: 1em 0;
    padding: 0;
}

#profileInterest div {
    padding: 1em;
    line-height: 1.5em;
}

#profileInterest {
    margin: 1em 0;
    padding: 0;
}

#profileMusic div {
    padding: 1em;
    line-height: 1.5em;
}

#profileGame div {
    padding: 1em;
    line-height: 1.5em;
}

.profileSection div {
    padding: 1em;
    line-height: 1.5em;
    color: var(--text-muted);
}

iframe {
  width: 100%;
}

.youtubeVideo {
  width: 100%;
  height: 315px;
}

#profileSignup {
  margin: 1em 0 0 0;
}

.heading {
    font-size: 1.2em;
}

.userMood {
  text-transform: uppercase;
  color: var(--moss);
}

.breakThought {
  margin: 1em 0;
  word-break: break-all;
}

.helloName {
  font-weight: 700;
}

.transparent {
  background: transparent !important;
  border: none !important;
}

/**
* Upload photo page
*/
#photoPage form .row {
  margin: 2em 0;
}

#photoPage form .row img {
  border-radius: 4px;
  border: 1px solid var(--border);
}

/**
* View gallery page
*/

#photoPage .row {
  margin: 2em 0;
}

#photoPage .row img {
  border-radius: 4px;
  border: 1px solid var(--border);
}

/**
* Settings
*/
#settings a {
    display: block;
}

/**
* Search
*/
.searchUser .label-default {
  background: var(--teal);
  border-radius: var(--radius);
}

/**
* Footer
*/
#footer {
    border-top: 1px solid var(--border);
    padding: 30px 50px 50px 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: var(--surface);
}

#footer li a {
    margin: .689em 0;
    display: block;
    color: var(--text-muted);
}

#footer #mbtiTrademark {
    font-size: .689em;
    text-align: center;
    color: var(--text-muted);
}

#typeChart {
  margin: 0;
}

#typeChart label {
  background: var(--teal);
}

/** chartist
* related styling
*/
.ct-bar {
  stroke-width: 15px !important;
  stroke: var(--brass) !important;
}

.ct-label {
  font-size: 1em !important;
  color: var(--text-muted) !important;
}

.ct-chart-pie .ct-label {
  font-size: .789em !important;
  color: var(--text-muted) !important;
}


/**
* Typeahead
*/

#typeahead {
  margin: 2em 0;
}

.twitter-typeahead {
  width: 100%;
}

.tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

.tt-query {
  box-shadow: none;
}

.tt-hint {
  color: var(--text-muted);
}

.tt-menu {    /* used to be tt-dropdown-menu in older versions */
  width: 422px;
  margin-top: 4px;
  padding: 4px 0;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

.tt-suggestion {
  padding: 3px 20px;
  line-height: 24px;
  color: var(--text-muted);
}

.tt-suggestion.tt-cursor,.tt-suggestion:hover {
  color: #fff;
  background-color: var(--teal);
}

.tt-suggestion p {
  margin: 0;
}

.typeResults {
  display: block;
}


#colorBox {
  display: none;
}

.customizeProfileBox {
  left: 3em;
  border: none;
  width: 130px;
}

.customizeProfileBox h2 {
  font-size: 1.2em;
  color: var(--text) !important;
}

form#customizeProfile {
  color: var(--text);
}

form#customizeProfile label {
  color: var(--text) !important;
  line-height: 2em !important;
}

form#customizeProfile input.form-control {
  padding: 6px 12px;
  height: 40px;
}

@media (max-width: 767px) {
    #thoughtMoodFeed .feedRight {
      text-align: center;
    }
}

/**
* Homepage hero (Quest16 "Riso Zine" redesign)
*/

#hero {
  padding: 3em 0 2em 0;
}

.heroKicker {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--teal);
  font-size: .72em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#heroHeadline {
  font-size: 3.2em;
  line-height: 1.05;
  margin: .3em 0 .3em 0;
  font-weight: 700;
  color: var(--text);
}

#whatIs p {
  max-width: 520px;
}

.heroCtaGroup {
  display: flex;
  flex-wrap: wrap;
  gap: .8em;
  margin: 1.2em 0;
}

.heroGhostBtn {
  background: transparent !important;
  color: var(--brass) !important;
  border: 1px solid var(--brass) !important;
}

.heroGhostBtn:hover {
  border-color: var(--border) !important;
  color: var(--rust) !important;
}

.forgotPasswordLink {
  color: var(--text-muted);
  font-size: .88em;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.forgotPasswordLink:hover {
  color: var(--brass);
}

/**
* Temperament groups
*/

#temperamentGroups {
  padding: 2em 0 3em 0;
  row-gap: 1.5em;
}

/* Belt-and-suspenders: .groupCard's own margin-bottom should create this
   gap already, but on mobile (col-6, two cards per line before wrapping)
   it was rendering as zero gap between the two stacked rows - row-gap on
   the flex row above is the real fix; this keeps the columns themselves
   from ever touching regardless of the card's own margin. */
#temperamentGroups > div {
  margin-bottom: 1.5em;
}

#temperamentGroups h2 {
  font-size: 1.6em;
  font-weight: 700;
}

.text-muted-quest16 {
  color: var(--text-muted);
  margin-bottom: 1.2em;
}

.groupCard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4em;
  margin-bottom: 1.5em;
  height: 100%;
}

.groupCard p {
  color: var(--text-muted);
  font-size: .95em;
  line-height: 1.5em;
  margin: .8em 0 1em 0;
}

.groupCard.groupViolet .groupChip { background: var(--brass); color: var(--on-brass); }
.groupCard.groupPink .groupChip { background: var(--rust); color: var(--text); }
.groupCard.groupCyan .groupChip { background: var(--moss); color: #fff; }
.groupCard.groupAmber .groupChip { background: var(--teal); color: #fff; }

.groupChip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius);
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .03em;
  background: var(--brass);
  color: var(--on-brass);
}

.groupTypes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.groupTypes a {
  background: var(--surface-2);
  color: var(--text);
  font-size: .72em;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.groupTypes a:hover {
  background: var(--rust);
  color: var(--text);
}

/**
* Bootstrap's .shadow utility bakes in a soft blurred box-shadow at
* compile time (0 .5rem 1rem rgba(0,0,0,.15)) - doesn't read our CSS
* variables. Used on the login/signup cards and the type-browse buttons.
* Override to the same hard offset shadow as everything else so those
* elements don't stick out as the one soft-glow leftover from the old
* "Neon Quest" theme.
*/
.shadow {
  box-shadow: none !important;
}

/**
* Bootstrap utility classes hardcoded onto specific elements in a few
* templates (nav's `bg-light`, a couple of message cards' `bg-white`, a
* search-result badge's `text-bg-dark`) win the cascade over our
* lower-specificity element/class overrides above, even with !important
* on both sides - class-selector specificity beats element-selector
* specificity regardless of !important. These need matching or higher
* specificity to actually override them.
*/
nav.navbar.bg-light {
  background: var(--surface) !important;
}

.card.bg-white {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

.badge.text-bg-dark {
  background-color: var(--teal) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
}

/**
* Mobile nav toggler - Bootstrap's default hamburger icon is baked as an
* SVG data URI sized for a light navbar (dark lines), via the
* `navbar-light` class on <nav> in top_navigation.twig. Our theme forces
* the navbar to a dark background, so that icon was rendering as dark
* lines on a dark background - present, just invisible, which is why the
* mobile menu appeared to disappear entirely once the nav went dark.
*/
.navbar-toggler {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 6px 10px !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px var(--brass) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%238A6B22' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C9A24A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Light/dark mode toggle button - sits next to the mobile hamburger,
   stays visible at every breakpoint (unlike .navbar-toggler, which
   Bootstrap hides at lg and above). */
.themeToggleBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--brass);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
  order: 2;
}

.themeToggleBtn:hover {
  border-color: var(--brass);
  color: var(--rust);
}

.themeToggleBtn:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
}

@media (min-width: 992px) {
  .themeToggleBtn {
    order: 3;
    margin-left: 1em;
  }
}

/**
* Pagination - Bootstrap 5.3's pagination component has its own
* dedicated --bs-pagination-* variables, separate from --bs-primary etc,
* so it doesn't pick up our theme automatically and was showing
* Bootstrap's default blue on the active page number.
*/
.page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--brass);
  border-radius: var(--radius);
  margin-left: 0;
}

.page-link:hover {
  background-color: var(--surface-2);
  border-color: var(--border);
  color: var(--brass);
}

.page-link:focus {
  box-shadow: 0 0 0 2px var(--brass);
}

.page-item.active .page-link {
  background-color: var(--brass);
  border-color: var(--brass);
  color: var(--on-brass);
}

.page-item.disabled .page-link {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}