:root {
  --color-bg: #F8F9FC;
  --color-text: var(--color-primary);
  --color-primary: hsl(219, 52%, 26%);
  --color-secondary: #FF6647;
  --color-text-on-primary: white;
  --color-text-secondary: #333333;
  --color-border: #E5E5E5;
  --color-bg-accented: white;
  --color-success: #45C031;
  --color-pending: #FF6647;
  --color-primary-hover: hsl(219, 52%, 20%);

  --margin-content-inline: 2rem;
  --margin: 0.75rem;
  --margin-double: calc(var(--margin) * 2);
  --margin-half: calc(var(--margin) / 2);

  --default-max-width: 800px;
  --max-width-content: var(--default-max-width);

  --border: 1px solid var(--color-border);
  --border-radius: 5px;

  --form-max-width: 20em;
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  src: url('/assets/Roboto-Regular.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  src: url('/assets/Roboto-Light.ttf') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  src: url('/assets/Roboto-Bold.ttf') format('woff2');
}

.g-margin-2 {
  margin-block: var(--margin-double);
}

a:focus,
button:focus {
  outline: 2px dotted var(--color-text-secondary);
}

body {
  font-family: Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
}

body>* {
  padding-inline: max(var(--margin-content-inline), (100% - var(--max-width-content)) / 2);
}

.wide-content {
  --max-width-content: 1600px;
}

.normal-content {
  max-width: var(--default-max-width);
  margin-inline: auto;
}

body>header {
  --height: 1.5rem;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--margin);
  font-weight: 300;
  text-align: right;
  word-wrap: anywhere;
}

body>header>div {
  flex: 1;
  margin-inline: 1rem;
}

body>header img {
  height: var(--height);
  width: auto;
  margin-right: var(--margin);
  display: block;
}

body>header ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body>header iframe {
  --padding: 0.5rem;
  height: calc(var(--height) + var(--padding) * 2);
  width: calc(var(--height) + var(--padding) * 2);
  margin: calc(var(--padding) * -1);
}

.tabs {
  --bg: var(--color-primary);
  --text: var(--color-text-on-primary);
  --border: var(--color-bg);
  --active-bg: var(--color-bg);
  --active-text: var(--color-text);
}

.tabs--main {
  --bg: var(--color-bg);
  --text: var(--color-text);
  --border: var(--color-border);
  --active-bg: var(--color-bg-accented);
  --active-text: var(--color-text);
}

nav.tabs {
  background: var(--bg);
  color: var(--text);
}

nav.tabs ul {
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--margin-half);
  list-style: none;
}

nav.tabs li {
  margin: 0;
}

nav.tabs a {
  color: inherit;
  padding: var(--margin-half) var(--margin);
  border: 1px solid var(--border);
  border-bottom: none;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  text-decoration: none;
  display: block;
}

nav.tabs a.active {
  background: var(--active-bg);
  color: var(--active-text);
}

nav.tabs a:focus {
  outline-offset: -5px;
  outline-color: var(--text);
}

nav.tabs a.active:focus {
  outline-color: var(--active-text);
}

nav.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: var(--margin) 0;
  display: flex;
  gap: var(--margin);
}

nav.breadcrumb li {
  display: inline-block;
}

nav.breadcrumb li:not(:last-of-type)::after {
  content: '>';
  margin-inline-start: var(--margin);
}

body>h1 {
  margin-block: var(--margin-double);
}

body>.title {
  display: grid;
  gap: var(--margin);
  grid-auto-flow: column;
  grid-template-columns: 1fr;
  align-items: center;
  margin-block: var(--margin-double);
}

body>.title h1 {
  margin: 0;
}

body>main {
  border-top: 1px solid var(--color-border);
}

body>main::before {
  content: ' ';
  display: block;
  margin-bottom: var(--margin-double);
}

body>footer {
  color: var(--color-text-secondary);
  font-weight: 300;
  margin-top: calc(var(--margin) * 6);
  margin-bottom: var(--margin);
  text-align: center;
}

body>footer a {
  color: var(--color-text);
}

a {
  color: inherit;
}

p {
  margin-block: var(--margin);
}

/* buttons */

button,
.button {
  --bg: var(--color-primary);
  --color: var(--color-text-on-primary);
  --bg-hover: var(--color-primary-hover);
  --border: none;
  --padding: var(--margin);
  background: var(--bg);
  color: var(--color);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: calc(var(--padding) / 2) var(--padding);
  text-decoration: none;
  text-align: center;
  display: inline-block;
}

.button--secondary {
  --bg: transparent;
  --color: var(--color-text);
  --bg-hover: transparent;
  --border: 1px solid;
  --padding: var(--margin-half);
}

.button--text {
  --bg: transparent;
  --color: var(--color-text);
  --bg-hover: transparent;
  --border: none;
  --padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

button:hover,
.button:hover {
  background: var(--bg-hover);
}

button:focus,
.button:focus {
  outline-offset: 2px;
}

.card {
  background: var(--color-bg-accented);
  margin: var(--margin-double) calc(var(--margin) * -1);
  padding-inline: var(--margin);
  border: var(--border);
  border-radius: var(--border-radius);
}

.card::before,
.card::after {
  content: ' ';
  display: block;
}

.card::before {
  margin-bottom: var(--margin);
}

.card::after {
  margin-top: var(--margin);
}

.card--has-tabs {
  margin-block: 0;
}

.card--center {
  text-align: center;
  margin-inline: 0;
}

/* form and form elements */

form:not(#muokkaa) {
  background: var(--color-bg-accented);
  margin: var(--margin-double) calc(var(--margin) * -1);
  padding-inline: var(--margin);
  border: var(--border);
  border-radius: var(--border-radius);
}

form:not(#muokkaa)::before,
form:not(#muokkaa)::after {
  content: ' ';
  display: block;
}

form:not(#muokkaa)::before {
  margin-bottom: var(--margin);
}

form:not(#muokkaa)::after {
  margin-top: var(--margin);
}

#muokkaa input,
#muokkaa select {
  display: none;
}

#muokkaa:target input,
#muokkaa:target select {
  display: block;
}

.show-when-targeted {
  display: none;
}

:target .show-when-targeted {
  display: initial;
}

:target .hide-when-targeted {
  display: none;
}

.hide {
  display: none;
}

.error {
  background: var(--color-bg-accented);
  border: 1px solid var(--color-pending);
  padding: var(--margin);
  text-align: center;
}

form.--center {
  text-align: center;
  margin-inline: 0;
}

form.--embedded {
  background: no-repeat;
  border: none;
  margin: 0;
}

fieldset {
  margin: var(--margin) 0 var(--margin-double);
  border: none;
  padding: 0;
}

legend {
  font-weight: 700;
  background: white;
  padding: 0;
}

label {
  margin-top: var(--margin);
  display: inline-block;
  width: 100%;
  max-width: var(--form-max-width);
}

p+label,
dt>label {
  margin-top: 0;
}

input:not([type=checkbox]),
textarea,
select {
  margin-block: 4px;
  width: 100%;
  box-sizing: border-box;
}

input.--wide,
textarea.--wide {
  max-width: 100%;
  resize: vertical;
}

input[type=checkbox] {
  margin-inline-end: var(--margin-half);
}

input:invalid,
textarea:invalid,
select:invalid {
  outline: 1px dashed var(--color-pending);
  outline-offset: 2px;
}

.validation-error {
  display: none;
}


input:invalid+.validation-error,
textarea:invalid+.validation-error,
select:invalid+.validation-error {
  color: var(--color-pending);
  display: initial;
  position: absolute;
}

.price-table {
  text-align: left;
  max-width: var(--form-max-width);
  border-collapse: collapse;
  width: 100%;
  margin-top: var(--margin);
}

.price-table th {
  padding-block: var(--margin-half);
}

.price-table td+td,
.price-table th+th {
  padding-left: var(--margin-half);
  max-width: 12ch;
}

.price-table tfoot th,
.price-table tfoot td {
  padding-top: var(--margin-half);
}

.data-table {
  width: 100%;
}

.data-table th,
.data-table td {
  padding: 0.25rem;
}

.data-table th {
  text-align: left;
  padding-bottom: 0.5rem;
  cursor: pointer;
}

.data-table th::after {
  content: '↕';
}

.data-table td {
  border-bottom: var(--border);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.pill {
  border-radius: 2rem;
  padding: 0.125rem 0.375rem;
  display: inline-block;
}

/* In order 1-2-3: signed, active, ended */
.pill--contract-1 {
  background: #EBF7FF;
}

.pill--contract-2 {
  background: #B7EBD3;
}

.pill--contract-3 {
  background: #FFD0C7;
}

/* hide arrows from number inputs */

input[type=number]:-webkit-outer-spin-button,
input[type=number]:-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

/* data lists, i.e. details */

dl {
  --columns: 1fr;
  --gap: var(--margin);
  --dt-extra-margin: var(--margin);
  --text-align: inherit;
}

dl.--center {
  --text-align: center;
}

@media (min-width: 50ch) {
  dl:not(.--center) {
    --columns: auto 1fr;
    --gap: var(--margin-double);
    --dt-extra-margin: unset;
  }
}

dl {
  display: grid;
  grid-template-columns: var(--columns);
  gap: var(--gap);
  text-align: var(--text-align);
  margin-block: var(--margin);
  align-items: center;
}

dt {
  font-weight: 700;
}

dt:not(:first-child) {
  margin-top: var(--dt-extra-margin);
}

dd {
  margin: 0;
}

dl input:not([type=checkbox]),
dl textarea,
dl select {
  margin-block: 0;
  max-width: var(--form-max-width);
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  margin-top: -4px;
  padding: 3px;
  border: 1px solid var(--color-text-secondary);
}

main ul {
  padding-left: var(--margin-double);
}

main ul li {
  margin-block: var(--margin-half);
}

/* list */

.list {
  --gap: var(--margin-half);
}

.list--bikes {
  --columns: 1fr 1fr;
  --areas: 'date date' 'id price' 'name name' 'info info' 'invoice invoice';
  --info-width: 2fr;
}

.list--info-equal {
  --info-width: 1fr;
}

.list--notifications {
  --areas: 'info' 'name';
}

@media (min-width: 80ch) {
  .list {
    --gap: var(--margin);
  }

  .list--bikes {
    --columns: minmax(12ch, max-content) 1fr var(--info-width) 1fr minmax(9ch, max-content);
    --areas: 'id name info invoice price date';
  }

  .list--notifications {
    --areas: 'name info'
  }
}

.list h2 {
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  font-weight: 200;
  color: var(--color-text-secondary);
  margin-block: var(--margin-double) var(--margin);
}

.list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li a {
  background: var(--color-bg-accented);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--margin-half) var(--margin);
  margin: var(--margin-half) calc(var(--margin) * -1);
  display: grid;
  gap: var(--gap);
  grid-template-columns: var(--columns, repeat(auto-fit, minmax(100px, max-content)));
  grid-template-areas: var(--areas);
  justify-content: space-between;
  color: inherit;
  text-decoration: none;
}

.list__id {
  grid-area: id;
}

.list__name {
  grid-area: name;
  font-weight: 700;
}

.list__info {
  grid-area: info;
}

.list__invoice {
  grid-area: invoice;
}

.list__date {
  grid-area: date;
  font-size: 0.875rem;
}

.list__price {
  grid-area: price;
  text-align: right;
}

.section {
  margin-block: var(--margin-double);
}

.section+.section::before {
  content: ' ';
  display: block;
  width: 10rem;
  max-width: 100%;
  margin: var(--margin-double) auto;
  border-top: 1px solid var(--color-border);
}

.emphasis {
  font-style: italic;
}

time+h2 {
  margin-top: var(--margin);
}

/* Fixes for when we have an expandable list */

details.details--center {
  text-align: center;
  margin-block: var(--margin-double);
}

details.list summary {
  display: block;
  cursor: pointer;
  position: relative;
}

details.list summary::before {
  position: absolute;
  left: -2.5ch;
  content: '▶';
  font-size: 0.75rem;
  line-height: 1rem;
}

details.list[open] summary::before {
  content: '▼';
}

code {
  white-space: pre;
}

.frontpage-video {
  margin-block: var(--margin-double) calc(var(--margin) * 6);
  margin-inline: auto;
  display: block;
  max-width: 100%;
}

.login-form {
  margin-block: calc(var(--margin) * 6) var(--margin-double) !important;
}