/* Ordered via ITCSS */
/* https://developer.helpscout.com/seed/glossary/itcss/#the-triangle */





/* Settings */

:root {
    --x-small: 0.75rem;
    --small: 0.875rem;
    --medium: 1.0rem;
    --large: 1.25rem;
    --x-large: 1.5rem;
    --xx-large: 2.0rem; /* not in design */

    --gray-xx-light: #FFFFFF;
    --gray-x-light: #F4F4F4;
    --gray-light: #D0D0D0;
    --gray-medium: #A3A1A1;
    --gray-dark: #606069;
    --gray-x-dark: #1E1E1E;
    --gray-xx-dark: #000000;

    --space-x-small: 5px;
    --space-small: 10px;
    --space-medium: 15px;
    --space-large: 25px;
    --space-x-large: 40px;
    --space-xx-large: 60px;

    --accent-light: #D9DAFA;
    --accent-dark: #0F0BCC;

    --navbar-background: #CBC9C9;
    --navbar-text: #202033;
    --navbar-hover: #000080;
    --navbar-hover-text: #FCFAFA;
    --error: rgba(250, 32, 8, 0.78);
    --fleet-key-background: #DEDEDE;

    --radius-small: 5px;
    --radius-medium: 8px;

    --shadow-raised: 0 4px 14px -2px rgba(0, 0, 0, 0.15);

    --z-sticky: 100;
}





/* Generics */

body {
    margin: 0;
    line-height: 1.25; /* 20px when 16px = 1rem */

    background: var(--gray-xx-light);
    color: var(--gray-xx-dark);

    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
    font-size: var(--medium);
}

:focus-visible {
    outline-width: 2px;
    outline-offset: 1px;
    outline-style: solid;
    outline-color: var(--accent-dark);
}





/* Elements */


/* Elements: Content sectioning */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning */

main {
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: 2vw;

    display: grid;
    gap: var(--space-medium);
}

h1 {
    font-size: var(--xx-large);
}
h2 {
    font-size: var(--x-large);
    margin-block: 0 var(--space-large);
}
h3 {
    font-size: var(--large);
}
legend h3 {
    margin-block: 0;
}



/* Elements: Forms */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms */

fieldset {
    padding: unset;
    margin: unset;
    border: unset;
    min-width: auto; /* to prevent width exceeding beyond parent */
}
legend {
    /* To undo unique display of a "rendered legend" */
    /* https://www.w3.org/TR/css-display-3/#unbox */
    display: contents;
}

label {
    font-weight: bold;
    padding-bottom: 0.25em;
}
label:has([type="checkbox"]) {
    font-weight: normal;
    font-size: var(--small);
}
label > em {
    font-weight: 600;
    font-style: normal;
}

/* To make form elements consistent */
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, input, output, select, textarea {
    border-width: 1px;
    border-style: solid;
}
button, input, select, textarea {
    border-color: var(--gray-xx-dark);
}
button, input:not([type="checkbox"], [type="radio"]), textarea {
    appearance: initial;
    border: 1px solid var(--gray-xx-dark);
}
input, output, textarea {
    padding: 1px 2px;
}
output {
    margin-top: 1px;
    display: inline-block;
    border-color: transparent;
}
select {
    margin-bottom: -1px;
}

/* To make button/mouse interaction match that of link/mouse */
button {
    cursor: pointer;
}



/* Elements: Inline text semantics */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element#inline_text_semantics */

/* a { … } *//* see `.link` component */

var {
    font-style: normal;
}
var:where(p > :is(:first-child)) {
    text-transform: capitalize;
}
var:where(p > :not(:first-child)) {
    text-transform: lowercase;
}



/* Elements: Text content */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content */

ul {
    margin: 0;
    padding: 0;
}



/* Elements: Table content */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content */

table {
    border-spacing: 0;
    width: 100%;
}
table + table {
    margin-top: var(--space-x-small);
}
th {
    text-align: left;
}
th, td {
    padding: var(--space-x-small);
}
caption {
    text-align: left;
}
caption h3 {
    margin-block: 0 var(--space-medium);
}



/* Elements: Interactive elements */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/Element#interactive_elements */

summary {
    cursor: pointer;
    font-size: var(--x-small);

    padding-block: var(--space-medium);
    /* To not add space by having added padding */
    margin-top: calc( -1 * var(--space-medium) );

    border-bottom: 1px solid var(--gray-xx-dark);
}
/* To add extra border on hover */
summary:hover {
    box-shadow: 0 1px var(--gray-xx-dark);
}
/* To ensure extra border is visible when details are shown */
details[open] summary:hover {
    z-index: 1;
    position: relative;
}
/* To have a custom toggle */
summary {
    list-style: none;
}
summary::-webkit-details-marker {
    display: none
}
details:is([open]) summary::after { content: " ▾"; }
details:not([open]) summary::after { content: ' ▸'; }




/* Components */


/* Components: Misc. */

/* For the "Advanced Options" area */

.adv-opts table {
    padding-top: var(--space-x-small);
}
.adv-opts__section {
    padding: var(--space-large);
    background-color: var(--gray-x-light);
    border-bottom: 1px solid var(--gray-xx-dark);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-x-large);
    row-gap: var(--space-medium);
}
.adv-opts__fields {
    padding: var(--space-small);
}
.adv-opts__fields--unadj {
    background: var(--gray-light);
}
/* To support border only on `--unadj` but match spacing on both `__fields` */
.adv-opts__fields legend h3 {
    padding-bottom: 0.75em;
    border-bottom: 1px solid var(--gray-xx-dark);
}
.adv-opts__fields--other legend h3 {
    border-bottom-color: transparent;
}
.adv-opts th {
    font-weight: normal;
}

/* For primary navigation */

.navbar {
    background-color: var(--navbar-background);
    position: sticky;
    justify-content: space-around;
    top: 0;
    z-index: var(--z-sticky);
    padding: var(--space-x-small);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.navbar:empty {
    display: none;
}

.navbar-item {
    color: var(--navbar-text);
    text-decoration: none;
    font-size: var(--large);
    padding: var(--space-x-small) var(--space-small);
}

.navbar a:hover {
    background: var(--navbar-hover);
    color: var(--navbar-hover-text);
    border-radius: var(--radius-medium);
}

/* For messaging e.g. errors */

.errorlist {
    font-style: italic;
    color: var(--error);
}
ul.errorlist {
    margin-left: calc(2 * var(--space-medium));
}

/* For text only screen readers should get (the fleet grid's per-vessel details, table input labels) */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Tooltips (Tippy, common/scripts/tooltips.js), theme "eemdl": a white box with a thin border,
   and an arrow drawn twice (border color behind, fill in front) so the border runs round it.
   A fleet tile's text has line breaks; an abbreviation keeps the dotted underline browsers
   give only to abbr[title]. */

.tippy-box[data-theme~='eemdl'] {
    background-color: var(--gray-xx-light);
    background-clip: padding-box;
    border: 1px solid var(--gray-dark);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow-raised);
    color: var(--gray-x-dark);
    font-size: var(--small);
    line-height: 1.4;
}
.tippy-box[data-theme~='eemdl'] > .tippy-content {
    padding: var(--space-x-small) var(--space-small);
    white-space: pre-line;
}
.tippy-box[data-theme~='eemdl'] > .tippy-arrow::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-color: transparent;
    border-style: solid;
}
.tippy-box[data-theme~='eemdl'][data-placement^='top'] > .tippy-arrow::before {
    border-top-color: var(--gray-xx-light);
}
.tippy-box[data-theme~='eemdl'][data-placement^='top'] > .tippy-arrow::after {
    border-top-color: var(--gray-dark);
    border-width: 7px 7px 0;
    top: 17px;
    left: 1px;
}
.tippy-box[data-theme~='eemdl'][data-placement^='bottom'] > .tippy-arrow::before {
    border-bottom-color: var(--gray-xx-light);
}
.tippy-box[data-theme~='eemdl'][data-placement^='bottom'] > .tippy-arrow::after {
    border-bottom-color: var(--gray-dark);
    border-width: 0 7px 7px;
    bottom: 17px;
    left: 1px;
}
.tippy-box[data-theme~='eemdl'][data-placement^='left'] > .tippy-arrow::before {
    border-left-color: var(--gray-xx-light);
}
.tippy-box[data-theme~='eemdl'][data-placement^='left'] > .tippy-arrow::after {
    border-left-color: var(--gray-dark);
    border-width: 7px 0 7px 7px;
    left: 17px;
    top: 1px;
}
.tippy-box[data-theme~='eemdl'][data-placement^='right'] > .tippy-arrow::before {
    border-right-color: var(--gray-xx-light);
}
.tippy-box[data-theme~='eemdl'][data-placement^='right'] > .tippy-arrow::after {
    border-right-color: var(--gray-dark);
    border-width: 7px 7px 7px 0;
    right: 17px;
    top: 1px;
}
abbr[data-tippy-content] {
    text-decoration: underline dotted;
    cursor: help;
}

/* For `<a>` hyperlinks and elements that resemble them */

a {
    text-decoration: none;
}
.link,
a:not(.button):is(:link,:visited) {
    color: var(--accent-dark);
}
.link:hover,
a:not(.button):hover {
    text-decoration: underline;
    text-underline-offset: 0.125em;
}
.link:active,
a:not(.button):active {
    text-decoration-style: dashed;
}
.link {
    cursor: pointer;
}



/* Components: Forms */

/* For grouping label, input/select/textarea/etc, and small */

.field {
    display: inline-block;
}
.field:not(:last-of-type) {
    margin-bottom: var(--space-medium);
}
.field:where(:not(:last-child)) {
    margin-right: calc(
        var(--space-medium) - 1ch
    ); /* FAQ: `- 1ch` removes HTML whitespace */
}
.field > label:first-child,
.field__title {
    display: block;
    font-weight: bold;
    padding-bottom: 0.25em;
}
.field__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-medium);
}

/* For standard buttons (even if not a `<button>`) */

.button {
    color: var(--light);
    background-color: var(--dark);
    border: transparent solid 1.5px;
    border-radius: var(--radius-small);
    padding: var(--space-x-small) var(--space-small);
}
.button--1 {
    --dark: var(--accent-dark);
    --light: var(--gray-xx-light);
}
.button--2 {
    --dark: var(--gray-dark);
    --light: var(--gray-xx-light);
}
.button:hover {
    color: var(--dark);
    border-color: var(--dark);
    background-color: var(--light);
}
.button:active {
    cursor: pointer;
}
.button:active:hover {
    outline-offset: -3px;
    outline-width: 1px;
    outline-style: solid;
    outline-color: var(--dark);
}
/* To make buttons from known elements match in size */
button.button   { box-sizing: content-box; }
a.button        { display: inline-block; }

/* For grouping `.button`'s */

.buttons {
    margin-block: var(--space-medium);
    display: flex;
    gap: var(--space-small);
}



/* Components: Forms: Select2 */

/* To match native form fields ("Elements: Forms") */
.select2-container {
    margin-top: -4px;
}
.select2-container .select2-selection--single {
    height: auto;
}
.select2-container--default .select2-selection--single {
    border: 1px solid var(--gray-xx-dark);
    border-radius: unset;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 1px 2px;
    line-height: unset;
    color: unset;
}

/* To make arrow fit our styles */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--gray-xx-dark);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--gray-xx-dark);
}

/* To make dropdown fit our styles */
.select2-dropdown {
    border-color: var(--gray-xx-dark);
}



/* Components: HTML Element Replacements */

/* For a `<details>` that can have `<summary>` and content anywhere */

.details:has(.details__summary:checked) .details__when-opened.details__as-block,
.details:has(.details__summary) .details__when-closed.details__as-block {
    display: block;
}
.details:has(.details__summary:checked) .details__when-opened.details__as-grid,
.details:has(.details__summary) .details__when-closed.details__as-grid {
    display: grid;
}
.details:has(.details__summary:checked) .details__when-opened.details__as-inline,
.details:has(.details__summary) .details__when-closed.details__as-inline {
    display: inline;
}
input[type="checkbox"].details__summary,
.details:has(.details__summary) .details__when-opened,
.details:has(.details__summary:checked) .details__when-closed {
    display: none;
}

/* For a `<legend>` that can have fields */

.legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.legend__title {
    margin: var(--space-large) var(--space-medium);
}
.legend__fields {
    margin: var(--space-x-small) var(--space-x-small) 0;
    padding: 0 var(--space-medium);
    background-color: var(--gray-xx-light);

    display: flex;
    gap: var(--space-x-large);

    flex-grow: 1;
    align-self: stretch;
}
.legend__field {
    align-self: center;
}
.legend__field.field {
    margin: 0;
}



/* Components: Fleet (and related components) */

.fleet-palette {
    display: grid;
    padding: var(--space-x-small);
    gap: 2px;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(10ch, 1fr));
}

.fleet-item {
    border-radius: var(--radius-small);
    background-color: var(--gray-light);
    padding: 2px;
}
/* The key spans the grid above the vessels */
.fleet-item--key {
    grid-column: 1 / -1;
}
/* Colors and border styles are data, set inline on each item as --propulsion, --type, --type-border, --cargo */
.fleet-item--propulsion {
    background-color: var(--propulsion);
    border: 3px solid var(--gray-xx-dark);
}
.fleet-item--type {
    border: 3px var(--type-border) var(--type);
}
.fleet-item--cargo {
    border: 3px solid var(--gray-xx-dark);
    background: linear-gradient(135deg, var(--fleet-key-background) 90%, var(--cargo) 90%);
}
/* A vessel: its type in the border, propulsion in the fill, and a cargo corner unless membrane */
.fleet-item--vessel {
    border: 3px var(--type-border) var(--type);
    background: linear-gradient(135deg, var(--propulsion) 89%, var(--gray-xx-dark) 89% 90%, var(--cargo) 90%);
}
.fleet-item--vessel.fleet-item--membrane {
    background: var(--propulsion);
}

.note {
    font-style: italic;
    font-size: var(--small);
}

.vessel-name {
    font-size: var(--x-small);
}



/* Trumps */

/* Trumps: "Fleet" */

#fleet_size > strong {
    font-size: var(--large);
    font-weight: bold;
}
#fleet_size + small {
    font-size: var(--x-small);
}
#fleet_size:not(:has(#fleet_count)) + #fleet_view_toggle {
    display: none;
}
output#fleet_size {
    display: contents;
    margin-top: 0;
}

#fleet_fields {
    background-color: var(--accent-light);
}
#fleet_fields > :not(legend, .legend) {
    padding: var(--space-medium);
}

/* Trumps: "Results" */

/* Skin */
#results {
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--gray-xx-dark);
}
#results_emissions_greenhouse {
    background-color: var(--accent-light);
}
#results_emissions_average {
    background-color: var(--gray-x-light);
}

/* Structure */
#results {
    padding-block: var(--space-xx-large);
    margin-bottom: var(--space-large);

    display: grid;
    gap: var(--space-medium) var(--space-x-large);
    grid-template-areas:
        'title   title  '
        'carrier green  '
        'carrier average';
    grid-template-columns: 1fr 3fr;
}
#results_title { grid-area: title; }
#results_carrier { grid-area: carrier; }
#results_emissions_greenhouse { grid-area: green; }
#results_emissions_average { grid-area: average; }
p#results_carrier_name { margin-block: unset; }
p#results_carrier_name + p { margin-top: unset; }
#results table {
    padding: var(--space-x-small);
}
#results h2 {
    margin-bottom: var(--space-medium);
}
#results tbody th {
    font-weight: normal;
}
.results__col--label { width: 20%; }
.results__col--figure { width: 15%; }
.results__col--total { width: 20%; }
.results__col--note { width: 25%; }

/* Narrow screens stack the results in one column (a media query cannot read a custom property) */
@media (max-width: 745px) {
    #results {
        grid-template-areas:
            'title'
            'carrier'
            'green'
            'average';
        grid-template-columns: 1fr;
    }
}