html { font-size: 16px; }
body { color: #16332b; background: #f8faf8; }
a { color: #146647; }
.navbar-brand { color: #16332b; }
.brand-note { display: block; font-size: .62rem; letter-spacing: .15em; color: #557268; }
.hero { background: #123e32; color: #fff; }
.hero .lead { color: #d6e8df; }
.eyebrow { font-weight: 700; letter-spacing: .14em; font-size: .78rem; }
.feature { padding: 1.75rem; border: 1px solid #dce7df; background: white; border-radius: 1rem; }
.step { display: block; font-weight: 700; color: #247c59; margin-bottom: 1.25rem; }
.btn-primary { --bs-btn-bg: #176747; --bs-btn-border-color: #176747; --bs-btn-hover-bg: #104d35; --bs-btn-hover-border-color: #104d35; --bs-btn-active-bg: #104d35; }
.btn-outline-primary { --bs-btn-color: #176747; --bs-btn-border-color: #176747; --bs-btn-hover-bg: #176747; --bs-btn-hover-border-color: #176747; }
.form-panel { max-width: 640px; margin: auto; }
.group-description { white-space: pre-wrap; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid #b57013; outline-offset: 3px; }
footer { color: #587067; font-size: .9rem; }

.board-scroll { overflow-x: auto; border: 1px solid #c8dacf; border-radius: .75rem; background: white; }
.squares-board { width: 100%; min-width: 850px; table-layout: fixed; border-collapse: collapse; }
.squares-board caption { padding: .75rem; }
.squares-board th { background: #163e31; color: white; text-align: center; padding: .65rem; }
.squares-board th:first-child { width: 3rem; }
.squares-board td { border: 1px solid #d4e2d9; height: 100px; padding: .4rem; text-align: center; vertical-align: top; overflow-wrap: anywhere; }
.square-number { display: block; text-align: left; font-size: .65rem; color: #527061; }
.square-name { display: block; font-weight: 600; font-size: .85rem; }
.square-status { display: block; font-size: .7rem; }
.square-open { background: white; }
.square-reserved { background: #fff4cf; }
.square-paid { background: #d9eee1; }
.square-button { display: block; width: 100%; min-height: 65px; border: 0; color: #176747; background: transparent; font-size: .8rem; }
.square-button:hover { background: #e8f4ed; }
.board-name { max-width: 28rem; }

.provider-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 40px;
    min-width: 230px;
    padding: 9px 12px;
    margin: 4px 8px 4px 0;
    border: 1px solid #747775;
    border-radius: 4px;
    background: #fff;
    color: #1f1f1f;
    font: 500 14px/20px "Segoe UI", Arial, sans-serif;
}
.provider-button:hover, .provider-button:active {
    background: #f3f5f4;
    border-color: #525653;
    color: #1f1f1f;
}
.provider-button img { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }

.board-notice { position: fixed; bottom: 1rem; right: 1rem; z-index: 1080; max-width: min(32rem, calc(100vw - 2rem)); box-shadow: 0 .25rem 1rem #0002; }
.square-button:disabled { cursor: wait; opacity: .65; }

.square-release { color: #16332b; }
.square-release:hover { background: #f5e5ad; }

#campaigns { scroll-margin-top: 1.5rem; }
.campaign-symbol { font-size: 2.5rem; line-height: 1; }
.campaign-card { border-top: 4px solid #176747; }
.campaign-coming { background: #f0f4f1; border-style: dashed; display: flex; flex-direction: column; justify-content: center; }

/* Account management sidebar and personal-data actions. */
.account-manage .nav-pills {
    --bs-nav-link-color: #176747;
    --bs-nav-link-hover-color: #104d35;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #176747;
    gap: .35rem;
}
.account-manage .nav-pills .nav-link { border-radius: .5rem; }
.account-manage .nav-pills .nav-link:not(.active):hover,
.account-manage .nav-pills .nav-link:not(.active):focus-visible { background: #e8f4ed; }
.account-manage #download-data { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.account-manage #download-data + p { margin-top: 1rem; }

/* Login and registration: external providers left, email/password right. */
.account-login > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    margin: 0;
    align-items: start;
}
.account-login > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1.75rem;
    background: #fff;
    border: 1px solid #dce7df;
    border-radius: 1rem;
}
.account-login > .row > [class*="col-"]:first-child { grid-column: 2; grid-row: 1; }
.account-login > .row > [class*="col-"]:nth-child(2) { grid-column: 1; grid-row: 1; }
.account-login .provider-button { display: flex; width: 100%; min-width: 0; margin: 0 0 .75rem; }
@media (max-width: 767.98px) {
    .account-login > .row { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .account-login > .row > [class*="col-"]:nth-child(2) { grid-column: 1; grid-row: 1; }
    .account-login > .row > [class*="col-"]:first-child { grid-column: 1; grid-row: 2; }
}



.privacy-policy { max-width: 900px; margin-inline: auto; }
.privacy-policy li { margin-bottom: .65rem; }

/* Keep the brand legible while leaving room for the mobile navigation toggle. */
.turton-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; max-width: calc(100% - 76px); white-space: normal; }
.turton-brand-logo { display: block; width: 220px; max-width: 100%; height: auto; }
.turton-brand .brand-note { font-size: .55rem; letter-spacing: .13em; }
@media (max-width: 359.98px) {
  .turton-brand-logo { width: 185px; }
  .turton-brand .brand-note { font-size: .48rem; }
}