/* Device breakpoints:

    * 1140px <  width            : DESKTOP (large monitors; 300x600 ad in wider left bar, 728x90 under puzzle)
    *  768px <  width <= 1140px  : LAPTOP  (most laptops, landscape tablets; 160x600 ad in standard left bar,
                                            728x90 above/under puzzle)
    *  500px <  width <=  768px  : TABLET  (smaller tablets in portrait mode; no left bar; 336x280 mobile ad
                                            under puzzle, with 728x90 above/under puzzle in the 760-768px
                                            sliver before the ad mobile-swap kicks in)
    *  320px <= width <=  500px  : MOBILE  (smartphones in portrait mode; 336x280 mobile ad under puzzle, no left bar)

   Non-tier thresholds (greppable via `Breakpoint:` but not in the device-tier hierarchy —
   derived from content geometry rather than device characteristics):

    * PUZZLE_LEFTBAR (1000px) — puzzle pages hide the left bar below this so engine
                                (max 790px) + leftbar (182px) + padding don't overflow

   Syntax: all width/height media queries use Media Queries Level 4 range syntax (`width <= 768px`,
   `width > 1140px`), never `max-width`/`min-width`. Tier boundaries use the exact-complement pair
   `width <= N` (lower tier) / `width > N` (upper tier) — no overlap, no gap, no off-by-one or
   fractional-px tricks. The sole exception is the navbar block, which uses the INCLUSIVE
   `width >= 768px` to mirror Bootstrap's `navbar-expand-md` (see its note below). Range syntax is
   supported by all browsers since 2022-2023 (Safari 16.4+); measured at <0.1% of traffic on older
   browsers, which degrade gracefully.

   Every media query using a tier or non-tier value is tagged with an inline `Breakpoint: <NAME>`
   comment so dependencies can be located with `grep -rn "Breakpoint:"`. The name refers to the
   tier the rule activates for at the boundary: `width >= 768px` is LAPTOP, `width <= 768px` is
   TABLET. Non-tier one-off values used in single rules (login flex break, ad mobile-swap, engine
   max-width, etc.) are intentionally left untagged.

 */

/*** main ***/

html {
    font-size: 16px;
}

body {
    margin: 0.357em;
    color: black;
    font-weight: normal;
    font-family: verdana, sans-serif;
    background-color: white;
    /** Tablet: Prevent arbitrary font size scaling on Safari IOS **/
    -webkit-text-size-adjust: 100%;
    /** Tablet: Prevent 300 ms tap delay on IOS when clicking on links/buttons (used to implement double tap). **/
    touch-action: manipulation;
    /*** bootstrap style overrides/bugfixes ***/
    line-height: normal;
}

body.mainBody {
    margin-left: 0;
    margin-right: 0;
    background-color: #ebeded;
    background-repeat: repeat;
}

/*
	Bootstrap puts a top border on the first item in flush mode
	by default. This is apparently by design but we don't want it.
	https://github.com/twbs/bootstrap/issues/26961
*/
.list-group-flush .list-group-item:first-child {
    border-top: 0;
}

.list-group-flush .list-group-item:last-child {
    border-bottom: 0;
}

h1 {
    font-weight: bold;
    line-height: 1.090em;
    font-size: 1.571em;
    font-family: tahoma, sans-serif;
    margin-bottom: 0.7em;
}

h2 {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    font-family: tahoma, sans-serif;
    margin-bottom: 0.3em;
}

h2.section {
    padding-bottom: 0.2em;
    margin-bottom: 0.7em;
    border-bottom: 1px solid #ddd;
}

h3 {
    color: black;
    font-weight: bold;
    font-size: 1.1em;
    font-family: tahoma, sans-serif;
    margin-bottom: 0.2em;
    margin-top: 1.0em;
}

p {
    line-height: 125%;
}

.bc-list li {
    margin-top: 0.25em;
}

/*** Links ***/
a.bc-link:link, a.bc-link:visited, .contrib-table > thead > tr > th a:link, .contrib-table > thead > tr > th a:visited {
    /** GWT: need to explicitely specify this to prevent GWT value to take precedence **/
    font-family: verdana, sans-serif;
    color: #027497;
    font-weight: bold;
    text-decoration: underline;
}

a.bc-link:hover, .contrib-table > thead > tr > th a:hover {
    text-decoration: none;
}

.blue {
    color: #027497;
}

.green {
    color: #668000;
}

.orange {
    color: #C75200;
}

.pink {
    color: #E00087;
}

.black {
    color: black;
}

em {
    color: #668000; /* green */
    font-weight: bold;
}

td.label {
    font-weight: bold;
}

input.button {
    border: 1px solid #999999;
    font-size: 1em;
}

table.layout {
    border-collapse: collapse;
}

table.layout > tbody > tr > * {
    padding: 0;
}

img {
    border: 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: #aaa;
}

.center {
    display: flex;
    justify-content: center;
}

.bc-account-type {
    font-weight: bold;
}


kbd {
    border: 1px solid black;
    padding: 0.5em;
    background-color: #eee;
    color: black; /* Bootstrap 5: kbd color is set to var(--bs-body-bg) which is white; force black text. */
    border-radius: 0.3em;
    display: inline-block;
    margin: 0.2em;
    font-size: smaller;
}

/*********************************************************************
 * Layout begin
 *********************************************************************/
#container {
    margin: 0 auto;
    max-width: 1000px; /* base layout width; widened at the DESKTOP breakpoint below */
}

#header {
    margin-bottom: 0.5em;
}

/* #header and #maintable need no width of their own — #container's max-width + padding bounds
   them to its content box at every breakpoint (including the widened DESKTOP container). */

/* Left bar column width; widened to hold the 300×600 ad at the DESKTOP breakpoint. */
#leftbar {
    width: 182px;
}

.ng-rounded-area {
    border: 1px solid #b0afaf;
    background-color: white;
    padding: 0.714em;
    border-radius: 6px;
    box-sizing: border-box;
}

#maincontent {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-image-source: linear-gradient(to right, #b0afaf, white);
    border-image-slice: 1;
    padding-top: 0.714em;
    min-height: 600px;
}

#footer {
    margin-top: 1em;
}

#footer > * {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#footer > *:first-child > * {
    /* In-between row spacing when wrapped */
    margin-top: 0.5em;
    margin-right: 0.3em;
    white-space: nowrap;
}

#footer > .copyright {
    margin-top: 0.4em;
    font-size: small;
}

#footer > .fb-like {
    margin-top: 0.5em;
}

@media screen and (width <= 500px) /* Breakpoint: MOBILE */ {
    #footer > .footerlinks > a {
        margin: 0.7em;
    }
}


/* Showing left bar on desktop and all iPad models except iPad mini. */
@media screen and (width <= 768px) /* Breakpoint: TABLET */ {
    #container {
        padding: 0.3em;
    }

    #leftbar {
        display: none;
    }
}

/* Default: narrow ad visible, wide ad hidden */
.left-bar-narrow-ad {
    display: block;
}

.left-bar-wide-ad {
    display: none;
}

/* Both left-bar ad slots can serve creatives narrower than their slot (e.g. the 300px slot
   serves 160x600/120x600/300x250, the 160px slot serves 120x600). Right-justify them within
   the slot so they hug the puzzle side of the left bar. The slot div itself stays
   left-positioned, preserving the gap before the puzzle. */
.left-bar-narrow-ad > div, .left-bar-wide-ad > div {
    text-align: right;
}

@media screen and (width <= 500px) /* Breakpoint: MOBILE */ {
    #container {
        padding: 0.15em;
    }
}

/*********************************************************************
 * Layout end
 *********************************************************************/


/*********************************************************************
 * NavBar begin
 *********************************************************************/
#navbar .navbar-brand {
    display: flex;
    flex-direction: column;
}

#navbar .navbar-brand label {
    font-family: Arial, Verdana, sans-serif;
    /* This needs to match the logo width and cannot be specified in em */
    /*noinspection CssNonIntegerLengthInPixels*/
    font-size: 14.5px;
    color: #E00087;
    font-weight: bold;
    white-space: nowrap;
    margin: 0.214em 0 0 0;
    padding: 0;
    text-align: center;
}

#navbar .bg-light {
    background-color: white !important;
}

#navbar .navbar {
    padding: 0;
}

/* prevent blue background when clicked */
#navbar .navbar .dropdown-item:active {
    background-color: transparent;
    color: #212529;
}

#navbar .navbar .dropdown-item {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/*
  768px corresponds to bootstrap md breakpoint which is when the
    navbar collapse happens (navbar-expand-md)
    https://getbootstrap.com/docs/4.3/layout/overview/
  This is the one query that uses an INCLUSIVE boundary (`width >= 768px`) rather than the
  exact-complement `width > 768px`: it deliberately mirrors Bootstrap's inclusive `min-width: 768px`
  so our nav-tab styling flips on the exact pixel Bootstrap expands/collapses the navbar. iPad
  portrait is exactly 768px, so the inclusivity is load-bearing, not incidental.
*/
@media screen and (width >= 768px) /* Breakpoint: LAPTOP (inclusive — see note above) */ {
    /* uncollapsed */
    #navbar .navbar-brand {
        width: 182px;
        align-items: flex-start;
        margin-right: 0;
    }

    /*** Monochrome tabs ***/
    #navbar .nav-item {
        margin-right: 0.26em;
        border-radius: 0.357em 0.357em 0 0;
        padding-left: 0.3em;
        padding-right: 0.3em;
        background-color: #767676;
    }

    #navbar .nav-item.active {
        background-color: #444;
    }

    #navbar .navbar-light .navbar-nav .active > .nav-link {
        color: white;
    }

    #navbar .nav-item:last-child {
        margin-right: 0;
    }

    #navbar .nav-link {
        font-weight: bold !important;
        color: white !important;
    }

    #navbar .nav-link:hover {
        text-decoration: underline;
    }

    #navbar .navbar-nav {
        border-bottom: 3px solid black;
    }

    /*** Color tabs ***/
    /*#navbar .nav-item {*/
    /*	margin-right: 0.26em;*/
    /*	border-radius: 0.357em 0.357em 0 0;*/
    /*	padding-left: 0.3em;*/
    /*	padding-right: 0.3em;*/
    /*}*/
    /*#navbar .nav-item:last-child {*/
    /*	margin-right: 0;*/
    /*}*/
    /*#navbar .nav-link {*/
    /*	font-weight: bold !important;*/
    /*	color: white !important;*/
    /*}*/
    /*#navbar .nav-link:hover {*/
    /*	text-decoration: underline;*/
    /*}*/
    /*#navbar .navbar-nav {*/
    /*	border-bottom: 3px solid black;*/
    /*}*/
    /*#navbar .navbar .tab-blue {*/
    /*	background-color: #027497;*/
    /*}*/
    /*#navbar .navbar .tab-green {*/
    /*	background-color: #668000;*/
    /*}*/
    /*#navbar .navbar .tab-orange {*/
    /*	background-color: #C75200;*/
    /*}*/
    /*#navbar .navbar .tab-pink {*/
    /*	background-color: #E00087;*/
    /*}*/
    /*#navbar .navbar .tab-black {*/
    /*	background-color: black;*/
    /*}*/
    /*#navbar .dropdown-toggle {*/
    /*	white-space: normal;*/
    /*}*/
    /*#navbar .navbar-nav {*/
    /*	border-bottom: 3px solid black;*/
    /*}*/
}

@media screen and (width <= 768px) /* Breakpoint: TABLET */ {
    /* collapsed */
}

/* (Logo swap moved to Bootstrap d-md-* utilities in NavBar.html — see note in the NavBar section above.) */

#personalarea {
    min-width: 14em;
}

.personal-links {
    list-style-position: inside;
    padding-left: 0;
}

.personal-links > li {
    margin-top: 0.9em;
    white-space: nowrap;
}

@media screen and (width <= 374px) {
    #logindiv {
        flex-direction: column;
        align-items: flex-end;
    }
}

/*********************************************************************
 * NavBar end
 *********************************************************************/

/*********************************************************************
 * SimpleTable begin
 *********************************************************************/
table.st-table {
    border-spacing: 1px;
    background-color: #EDEDED;
    color: #b7b7b7;
    border-collapse: separate; /* override bootstrap value */
}

caption.st-caption {
    caption-side: top; /* override bootstrap value */
    text-align: center; /* override bootstrap value */
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    font-size: 0.857em;
    margin: 0;
    padding: 0.833em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

td.st-td, th.st-th, table.st-table td, table.st-table th {
    padding: 0.4em;
    color: black;
}

td.st-td, table.st-table td {
    color: black;
}

thead tr.st-tr {
    vertical-align: top;
}

thead th.st-th {
    text-align: left;
    background: #ededed;
    color: #666;
    border: 1px solid #FFF;
    text-transform: uppercase;
    font-size: 0.857em;
}

tbody th.st-th {
    font-weight: bold;
}

tbody tr.st-tr {
    background-color: #FFF;
    text-align: left;
}

tbody tr.st-even {
    background: #f0f0f0;
    border-top: 1px solid #FFF;
}

tbody td.st-td {
    height: 3.571em;
    background: #FFF;
    border: 1px solid #FFF;
}

tbody tr.st-even td.st-td {
    background: #f0f0f0;
    border-top: 1px solid #FFF;
}

table.st-table tfoot td.st-td, table.st-table tfoot td {
    background-color: #EDEDED;
    padding: 0.714em;
    text-align: center;
    font-weight: bold;
    border-bottom: 0.214em solid #CCC;
    border-top: 1px solid #DFDFDF;
}

/*********************************************************************
 * SimpleTable end
 *********************************************************************/


/*********************************************************************
 * ContribTable begin
 *********************************************************************/
.contrib-table {
    border-spacing: 1px;
    background-color: #dcdcdc;
    color: #b7b7b7;
}

.contrib-table caption.ct-caption {
    color: black;
    font-size: 0.857em;
    margin: 0;
    text-align: right;
    padding: 0 0 0.25em 0;
    caption-side: top; /* override bootstrap value */
}

/* Applies to tr/td of contrib table directly under thead/tbody/tfoot row */
.contrib-table > * > tr > * {
    padding: 0.333em;
}

.contrib-table > * > tr > td {
    color: black;
}

.contrib-table tbody td.ct-empty-table-message {
    font-style: italic;
    text-align: center;
}

.contrib-table thead tr.ct-tr {
    vertical-align: top;
}

.contrib-table > thead > tr > th {
    text-align: left; /* column header alignment when non sortable */
    background: #ededed;
    color: #666;
    border: 1px solid #FFF;
    text-transform: uppercase;
    font-size: 0.857em;
}

.contrib-table > tbody > tr > th {
    font-weight: bold;
}

.contrib-table tbody tr.ct-tr {
    background-color: #FFF;
    text-align: left;
}

.contrib-table tbody tr.odd {
    background: #f0f0f0;
    border-top: 1px solid #FFF;
}

.contrib-table > tbody > tr > td {
    height: 3.571em;
    background: #FFF;
    border: 1px solid #FFF;
}

.contrib-table > tbody > tr.odd > td {
    background: #f4f4f4;
    border-top: 1px solid #FFF;
}

/* Applies to td/th of footer */
.contrib-table > tfoot > tr > * {
    background-color: #EDEDED;
    padding: 0.714em;
    text-align: center;
    font-weight: bold;
    border-bottom: 0.214em solid #CCC;
    border-top: 1px solid #DFDFDF;
}

/*********************************************************************
 * ContribTable end
 *********************************************************************/


@media print {
    @page {
        size: auto;
    }

    body {
        min-width: 0 !important;
    }
}

.error {
    font-family: tahoma, sans-serif;
    font-size: 1em;
    color: red;
    font-weight: bold;
}

.feedLink {
    margin-left: 0.214em;
    padding: 0 0 0 1.357em;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

fieldset {
    padding: 0.7em;
    border: 1px solid #aaa;
}

fieldset > legend {
    width: auto;
    font-size: inherit;
    margin-bottom: 0;
    color: black;
    font-weight: bold;
    float: none; /* Bootstrap 5: legend switched to float:left which breaks fieldset layout; revert. */
}

/* Bootstrap 5: form-select and input-group both default to width:100%, which fills the
   entire flex row in inline filter forms. Constrain to content width so controls sit
   inline with other elements. The gijgo datepicker also adds mb-3; neutralize it here. */
.d-flex > select.form-select,
.d-flex > .gj-datepicker {
    width: auto;
    margin-bottom: 0 !important; /* Bootstrap 5 mb-3 utility uses !important */
}

/*********************************************************************
 * Advertisement begin
 *********************************************************************/

/* Mobile/Desktop banner ad breakpoints:

    * 760px <  width          : Display desktop banner ads (728x90, 728x250, 728x280) on desktops,
                                laptops and all tablets including smaller tablets like iPad mini.
    * 320px <= width <= 760px : Display mobile banner ads (320x100, 300x100) on all smartphones.

*/
[id|="bc-banner-mobile"] {
    display: none;
}

/* Non-tier ad-switch threshold (8px below the LAPTOP entry): swap the standard ad banners for
   their mobile-prefixed siblings. Intentionally not labelled `Breakpoint:` — not a tier value. */
@media screen and (width <= 760px) {
    .bc-banner {
        display: none;
    }

    [id|="bc-banner-mobile"] {
        display: block; /* use revert once more widely supported */
    }
}

@media screen and (width <= 319px) {
    .bc-banner {
        display: none;
    }
}

/* The engine on all puzzle pages is surrounded by ad units on 3 sides: above_puzzle, left_bar and under_puzzle.

By default, all 3 units are visible but we only want to display 2 out of 3 at any given time:
    * On large screens, we display the left_bar and under_puzzle units.
    * On small screens, where the left_bar is hidden, we display above_puzzle and under_puzzle units.
This is achieved by hiding the above_puzzle unit on the same breakpoint used to hide the left bar.
*/
@media screen and (width > 1000px) /* Breakpoint: PUZZLE_LEFTBAR */ {
    #bc-banner-above_puzzle {
        display: none;
    }
}

/* Wide left bar: 300×600 ad at viewports wider than 1140px.
   322px column + ~788px content + 30px padding = 1140px min — matches the breakpoint. */
@media screen and (width > 1140px) /* Breakpoint: DESKTOP */ {
    #leftbar {
        width: 322px;
    }

    /* Widen the container from its base 1000px. 322px left bar + 788px content + 30px padding = 1140px.
       #header/#maintable have no width of their own, so they fill this widened container automatically. */
    #container {
        max-width: 1140px;
    }

    .left-bar-narrow-ad {
        display: none;
    }

    .left-bar-wide-ad {
        display: block;
    }

    /* Logo right-aligned within the 322px brand, with a 22px right padding so its right edge
       meets the ad's right edge (x=300), leaving the same gap before the nav tabs as exists
       between the ad and content area below. */
    #navbar .navbar-brand {
        width: 322px;
        align-items: flex-end;
        padding-right: 22px;
    }
}

/* Apply margin on all ad units.

The margin is applied on the inner div so if we don't display banner, the div will not be generated and no margin
will be applied.
*/
#bc-banner-page_top > div {
    margin-bottom: 0.714em;
}

#bc-banner-under_puzzle > div, #bc-banner-mobile-under_puzzle > div {
    margin-top: 1.071em;
}

#bc-banner-above_puzzle > div {
    margin-bottom: 0.714em;
}

#bc-banner-interstitial > div {
    margin-top: 0.714em;
}

/*********************************************************************
 * Advertisement end
 *********************************************************************/