/* App-specific overrides — general design system lives in main.css */

.printable {
    margin: 10%;
    font-size: 18px;
}

.adminLink {
    font-size: 11px;
}

.errorMsg, .warning {
    border-radius: 6px;
    font-size: 14px;
    padding: 12px 18px;
    margin: 12px auto;
    max-width: 560px;
}

.missingCount {
    color: #CC3333;
    font-weight: 600;
}

.customConcentrations {
    display: none;
}

#searchResults {
    text-align: left;
    border: 0;
}

#searchResults .resultTitle {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 28px 0 10px;
    width: 100%;
}

#searchResults .compoundSearchResults:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09), 0 2px 5px rgba(0,0,0,.05);
    transform: translateY(-1px);
}

#searchResults .compoundSearchResults .column1 {
    width: 18%;
    font-weight: 500;
    text-align: left;
}

#searchResults .compoundSearchResults .column2 {
    width: 56%;
    text-align: left;
}

#searchResults .compoundSearchResults .column3 {
    width: 26%;
    text-align: center;
}

#searchResults .enzymeSearchResults .reactionLink {
    color: var(--accent, #1B5FA8);
}

#searchResults .enzymeSearchResults .viewAllLink {
    color: var(--sidebar-leaf, #4D9FD6);
}

#searchResults .image img {
    border: none;
    max-height: 120px;
}

.parsedRxn, .compoundSelector, .compound, .enzyme {
    font-size: 22px;
    margin: 20px 0 14px;
    width: 100%;
}

.reactionController, .parsedRxn {
    text-align: center;
}

/* The reverse button: a pill around the equilibrium sign, drawn as two harpoons.
   main.js makes them swap places, each gliding clockwise along a rounded track,
   round the end and onto the other's side, which looks the same as before, to say
   that the button does something: once 2 s after the page loads, and once more
   whenever the mouse moves onto the button. See parsed_reaction.html.
   At rest, and without JavaScript, it is the plain sign. */
.reverseArrows {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0.15em 0.5em;
    margin: 0 0.3em;
    border: 1px solid rgba(27, 95, 168, 0.35);
    border-radius: 999px;
    background: rgba(27, 95, 168, 0.06);
    font-size: inherit;
    font-family: inherit;
    color: var(--accent, #1B5FA8);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.reverseArrows:hover, .reverseArrows:focus-visible {
    background: rgba(27, 95, 168, 0.14);
    border-color: var(--accent, #1B5FA8);
}

.reverseArrows:focus-visible {
    outline: 2px solid var(--accent, #1B5FA8);
    outline-offset: 2px;
}

@media (pointer: coarse) {
    .reverseArrows { min-height: 44px; min-width: 56px; }
}

.rev-svg {
    display: block;
    width: 2em;
    height: 1em;
    overflow: visible;
    pointer-events: none;
}

.rev-track {
    fill: none;
    stroke: none;
}

.rev-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the shafts are the 32 long straight sides of the track (its length is 101.699),
   one dash each; main.js moves them along it */
.rev-b1, .rev-b2 {
    stroke-dasharray: 32 69.699;
}
.rev-b1 { stroke-dashoffset: 0; }
.rev-b2 { stroke-dashoffset: -50.850; }

.panelTitleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panelTitleRow .resetConcBtn,
.panelTitleRow #shareBtn {
    margin: 0 0 0 auto;
}

.thermoTable td:first-child {
    width: 20%;
}

.thermoTable .fieldCell {
    width: 30%;
}

input[type="number"].invalidAbundance {
    background-color: #fbdada;
}

.staleThermo {
    opacity: 0.35;
    pointer-events: none;
}

table.compoundInfo {
    width: 100%;
}

.mui-table .column1 {
    width: 22%;
    font-weight: 500;
}

.compoundInfo .column2 {
    width: 60%;
}

.compoundInfo .column3 {
    width: 20%;
}

table.enzymeInfo {
    width: 100%;
}

.results td,
.compoundInfo td,
.speciesInfo td,
.enzymeInfo td,
.reactionInfo td,
.formationEnergyInfo td {
    padding: 10px 20px;
}

table.reactionInfo,
table.speciesInfo,
table.formationEnergyInfo {
    text-align: center;
    padding: 0;
}

.speciesSource.last td,
td.reference.border {
    border-bottom: 1px solid var(--border, #E1DDD6);
}

.refsList {
    text-align: left;
}

.refsList a {
    color: var(--sidebar-leaf, #4D9FD6);
}

#figureContainer {
    margin: 16px auto 36px;
    width: 600px;
    height: 300px;
}

#figureContainer #legendContainer {
    float: right;
}

#figureContainer #dgFigure {
    clear: both;
}

.graphLink {
    float: left;
    margin-right: 8px;
}

.graphLink img {
    width: 27px;
    height: 27px;
    vertical-align: middle;
    opacity: .55;
}

.graphLink:hover img {
    opacity: 1;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.pathwayPageTable .column1 { width: 40%; }
.pathwayPageTable .column2 { width: 15%; }
.pathwayPageTable .column3 { width: 45%; }

/* the link to a compound's combustion reaction: a beaker with a flame in it, in a
   rounded square like the one round the reverse arrows. main.js makes the flame
   flicker, once 2 s after the page loads and once each time the pointer moves onto
   it (the `burning` class). */
.combustionLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 0.5em;
    padding: 0.22em;
    border: 1px solid rgba(27, 95, 168, 0.35);
    border-radius: 0.4em;
    background: rgba(27, 95, 168, 0.06);
    color: var(--accent, #1B5FA8);
    transition: background 0.15s, border-color 0.15s;
}

.combustionLink svg {
    width: 1.3em;
    height: 1.3em;
    overflow: visible;
}

.combustionLink .glass, .combustionLink .rim, .combustionLink .ticks {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.combustionLink .glass { fill: rgba(27, 95, 168, 0.08); }
.combustionLink .ticks { stroke-width: 1.2; opacity: 0.7; }
.combustionLink .outer { fill: #F57C1F; }
.combustionLink .inner { fill: #FFD54A; }

.combustionLink .flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.combustionLink:hover, .combustionLink:focus-visible {
    background: rgba(27, 95, 168, 0.14);
    border-color: var(--accent, #1B5FA8);
}

.combustionLink:focus-visible {
    outline: 2px solid var(--accent, #1B5FA8);
    outline-offset: 2px;
}

/* six flickers of 0.3 s, an even number so that it ends where it began */
.combustionLink.burning .flame {
    animation: flame-flicker 0.3s ease-in-out 6 alternate;
}

@keyframes flame-flicker {
    from { transform: scale(1, 1) skewX(0deg); }
    to { transform: scale(0.92, 1.12) skewX(-4deg); }
}