/*
 * CS-Rosetta overrides on top of https://bmrb.io/stylesheets/bmrb.css.
 * Keep this small: anything generic belongs in bmrb.scss upstream.
 * Palette (from bmrb.scss): green #99c457, light green #e1ebc8,
 * dark green #475A28, near-black #221e20, grey #ededed / #c8c8c8.
 */

/* bmrb.io's column is a fixed 800px; the results page (640px JSmol + graph)
   and the 13-column entry list need more room. */
.content-container { width: auto; max-width: 1100px; padding: 0 16px; }

/* --- Header ------------------------------------------------------------ */
.cs-topnav { display: flex; align-items: center; gap: 2.5em; padding-top: .5rem; padding-bottom: .5rem; }
.cs-topnav a { color: #fff; font-weight: 400; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.cs-topnav a:hover { color: #99c457; }
.cs-topnav .cs-home { display: flex; align-items: center; margin-right: auto; }
.cs-topnav .cs-home img { height: 30px; margin-right: .2em; }
.cs-logo-row { padding-top: 0; padding-bottom: 0; }
.cs-app-name { font-size: 1.4em; font-weight: 300; color: #221e20; letter-spacing: .02em; }

/* --- Typography fixes -------------------------------------------------- */
/* bmrb.css sets pre/tt to Roboto; the TALOS/STAR/constraint examples and the
   failure log are column-aligned and need a monospace face. */
pre, tt, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { background: #ededed; padding: 1em; overflow-x: auto; }
fieldset { border: 1px solid #c8c8c8; }
h1, h2, h3, h4 { color: #221e20; font-weight: 500; }
.cs-citations li { font-weight: 300; padding: 4px 0; }

/* --- Forms ------------------------------------------------------------- */
/* bmrb.css's default input rule is "input [type=text]" (stray space), so text
   inputs only pick up the BMRB look on :hover and shift by a pixel. Pin the
   resting state here (same fix as the NRG servlet). */
input[type="text"], input:not([type]), select, textarea, button,
input[type="submit"], input[type="button"], input[type="file"] {
    border: 1px solid #c8c8c8; background: #ededed; color: #221e20;
    padding: 5px 8px; margin: 7px 5px 7px 0; border-radius: 0;
    font: 300 14px "Roboto", sans-serif;
}
input[type="submit"] { background: #99c457; border-color: #221e20; color: #221e20; }
input[type="submit"]:disabled { background: #ededed; border-color: #c8c8c8; color: #888; cursor: not-allowed; }
/* .box_grey_rndcnr has no rule in bmrb.css; render it as a light-green panel. */
.box_grey_rndcnr { background: #f6f9ee; border-left: 3px solid #99c457; padding: .25em 1.25em 1em; margin: 1em 0; }

/* --- Tables ------------------------------------------------------------ */
/* Old blue tfoot rule is commented out upstream; give totals a green-tinted row. */
table.alternating { border-collapse: collapse; }
table.alternating tfoot td { background: #e1ebc8; font-weight: 500; border-top: 2px solid #99c457; }
table.alternating tr:hover td { background: #ededed; }
.cs-table-scroll { overflow-x: auto; }

/* --- Entry page -------------------------------------------------------- */
.cs-progress { background: #ededed; height: 22px; margin: 1em 0; }
.cs-progress > div { background: #99c457; height: 100%; color: #fff; font-weight: 500; text-align: center; line-height: 22px; }
.cs-notice { background: #fdf0e2; border-left: 3px solid #f6871f; padding: .75em 1em; margin: 1em 0; }
.cs-success { color: #475A28; }
.cs-error { color: #b3261e; }

/* --- Footer ------------------------------------------------------------ */
#footer-wrapper > .content-container { flex: 1; }
.cs-footer { display: flex; justify-content: space-between; gap: 2em; flex-wrap: wrap; }
.cs-footer a { color: #99c457; }
#footer-wrapper .cs-legacy-note { font-size: .9em; }
.cs-sponsors { text-align: center; border-bottom: 0; }
.cs-sponsors img { max-height: 70px; margin: 0 1.5em; vertical-align: middle; }

/* bmrb.css turns the *first h2* of the page into a green banner as well as the
   h1. Only our title h1 should get that treatment. */
#bmrb_pagecontentcolumn > h2:first-of-type,
#bmrb_pagecontentcolumn > div:first-of-type > h2:first-of-type {
    width: auto; background: none; padding: 0; border-radius: 0; color: #221e20;
}
.entry_details_box { margin-right: 0; padding-right: 0; }

@media screen and (max-width: 899px) {
    .cs-topnav { gap: 1em; flex-wrap: wrap; padding: .5rem 1rem; }
    .cs-app-name { display: none; }
    /* bmrb.css makes these 100vw / centered flex columns on mobile, which pushes
       wide forms off the left edge. Keep normal block flow inside our gutter. */
    #bmrb_pagecontentcolumn { width: auto !important; }
    #bmrb_pagecontentcolumn > h1:first-of-type { width: auto; border-radius: 0; margin: 0 -16px; }
    .entry_details_box { display: block; margin: 0 0 1.5rem; }
    .box_grey_rndcnr { padding: .25em .75em 1em; }
    select { max-width: 100%; }
}