/* AlCoda colour #00727D; the light tone is the one of the dots in the logo */
:root {
   --text: #1f2933;
   --muted: #5f6b6d;
   --line: #d5e3e5;
   --background: #f2f7f8;
   --surface: #ffffff;
   --accent: #00727d;
   --accent-dark: #005a63;
   --accent-light: #c3dce1;
   --danger: #b42318;
   --success-bg: #e6f4ea;
   --error-bg: #fdecea;
   --info-bg: #e6f1f2;
}

* {
   box-sizing: border-box;
}

body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   margin: 0;
   font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
   font-size: 16px;
   line-height: 1.5;
   color: var(--text);
   background: var(--background);
}

.topbar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 8px 24px;
   padding: 8px 24px;
   background: var(--surface);
   border-bottom: 4px solid var(--accent);
}

.topbar a,
.topbar .link {
   color: var(--accent);
   text-decoration: none;
}

.brand {
   display: flex;
   align-items: center;
   gap: 16px;
   font-weight: 600;
   font-size: 20px;
}

.brand img {
   display: block;
   width: 72px;
   height: 72px;
}

/* the horizontal line of the logo runs through the middle of the lowercase letters, as in the AlCoda logo */
.brand span,
.menu {
   position: relative;
   top: -0.25em;
}

.menu {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 16px;
}

.menu a,
.menu .link {
   font-weight: 500;
}

.menu a:hover,
.menu .link:hover {
   color: var(--accent-dark);
   text-decoration: underline;
}

.menu a[aria-current="page"] {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
}

/* only on small screens, see below */
.menu-toggle {
   display: none;
   padding: 8px;
   line-height: 0;
   color: var(--accent);
   background: none;
   border: 1px solid var(--line);
   border-radius: 6px;
}

.page {
   width: 100%;
   max-width: 520px;
   margin: 32px auto;
   padding: 24px 28px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-top: 3px solid var(--accent-light);
   border-radius: 8px;
}

h1,
h2 {
   color: var(--accent);
}

/* at the bottom of the window, also on short pages (body is a flex column) */
.footer {
   margin-top: auto;
   padding: 16px;
   text-align: center;
   font-size: 13px;
   color: var(--muted);
}

.page.wide {
   max-width: 1200px;
}

/* login page: passkey and password on the left, QR code for the phone on the right */
.page.login {
   max-width: 860px;
}

.page.medium {
   max-width: 720px;
}

/* page of several cards (account overview): the page itself is only the column */
.page.cards {
   padding: 0;
   background: none;
   border: none;
}

.card {
   padding: 20px 24px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-top: 3px solid var(--accent-light);
   border-radius: 8px;
}

.card + .card {
   margin-top: 16px;
}

.card h2 {
   margin-top: 0;
}

.login-columns {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   margin: 0 -16px;
}

.login-main {
   flex: 1 1 300px;
   padding: 0 16px;
}

.form label.remember-me {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 10px;
}

.login-other-device {
   flex: 0 1 300px;
   padding: 0 16px;
   text-align: center;
   border-left: 1px solid var(--line);
}

.login-other-device.hidden {
   display: none;
}

.login-other-device h2 {
   margin-top: 0;
}

img.qr {
   display: block;
   width: 232px;
   height: 232px;
   margin: 0 auto;
   image-rendering: pixelated;
}

img.qr.faded {
   opacity: 0.2;
}

.other-device-code {
   margin: 8px 0;
   font-size: 15px;
}

.other-device-code strong {
   font-family: Consolas, monospace;
   font-size: 20px;
   letter-spacing: 1px;
}

.login-other-device .hint {
   text-align: left;
}

/* confirmation page (app on the phone) */
.scan-button {
   width: 100%;
   padding: 14px 16px;
   font-size: 18px;
}

.scanner {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin: 12px 0;
}

.scanner video {
   width: 100%;
   max-height: 60vh;
   background: #000;
   border-radius: 8px;
   object-fit: cover;
}

#confirm-code {
   font-family: Consolas, monospace;
   font-size: 20px;
   letter-spacing: 1px;
   text-transform: uppercase;
}

[data-step="confirm"] .actions button {
   margin-top: 12px;
}

h1 {
   margin: 0 0 16px;
   font-size: 24px;
}

h2 {
   margin: 28px 0 12px;
   font-size: 18px;
}

a {
   color: var(--accent);
}

.target {
   display: flex;
   flex-direction: column;
   margin: 0 0 20px;
   padding: 14px 16px;
   background: var(--info-bg);
   border-left: 4px solid var(--accent);
   border-radius: 4px;
}

.target-label {
   font-size: 13px;
   color: var(--muted);
}

.target-name {
   font-size: 20px;
   font-weight: 600;
}

.target-address {
   font-family: Consolas, monospace;
   font-size: 15px;
}

.form {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.form label {
   margin-top: 8px;
   font-weight: 500;
}

.form label.check {
   font-weight: normal;
   margin-top: 2px;
}

dialog {
   width: 420px;
   max-width: calc(100% - 32px);
   padding: 24px;
   color: var(--text);
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 8px;
}

dialog:not([open]) {
   display: none;
}

dialog::backdrop {
   background: rgba(0, 0, 0, 0.4);
}

dialog h2 {
   margin-top: 0;
}

.dialog-buttons {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
   margin-top: 16px;
}

.inline-form {
   flex-direction: row;
   margin-bottom: 16px;
}

input:not([type="checkbox"]),
textarea {
   width: 100%;
   padding: 8px 10px;
   font: inherit;
   border: 1px solid #9aa5b1;
   border-radius: 4px;
}

input:focus,
textarea:focus {
   outline: 2px solid var(--accent);
   outline-offset: 1px;
}

fieldset {
   margin: 8px 0 0;
   padding: 8px 12px;
   border: 1px solid var(--line);
   border-radius: 4px;
}

button,
.button {
   display: inline-block;
   padding: 8px 16px;
   font: inherit;
   color: var(--text);
   background: #e4e7eb;
   border: 1px solid #9aa5b1;
   border-radius: 4px;
   cursor: pointer;
   text-decoration: none;
}

button.primary,
.button {
   margin-top: 12px;
   color: #fff;
   background: var(--accent);
   border-color: var(--accent);
}

button.primary:hover,
.button:hover {
   background: var(--accent-dark);
}

button.secondary {
   margin-top: 12px;
   color: var(--accent);
   background: var(--surface);
   border-color: var(--accent);
}

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

.divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 24px 0 8px;
   font-size: 14px;
   color: var(--muted);
}

.divider::before,
.divider::after {
   content: "";
   flex: 1;
   border-top: 1px solid var(--line);
}

button.danger {
   color: #fff;
   background: var(--danger);
   border-color: var(--danger);
}

button.link {
   padding: 0;
   background: none;
   border: none;
}

button:disabled {
   opacity: 0.6;
   cursor: default;
}

form.inline {
   display: inline;
}

.actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.notice {
   padding: 10px 14px;
   background: var(--info-bg);
   border-radius: 4px;
}

.notice.success {
   background: var(--success-bg);
}

.notice.error {
   background: var(--error-bg);
   color: var(--danger);
}

.notice.error ul {
   margin: 0;
   padding-left: 18px;
}

.validation-summary-valid,
.hidden {
   display: none;
}

.hint {
   color: var(--muted);
   font-size: 14px;
}

code {
   font-family: Consolas, monospace;
}

code.password {
   display: inline-block;
   margin-left: 6px;
   padding: 2px 8px;
   font-size: 18px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 4px;
   user-select: all;
}

table.list,
table.facts {
   width: 100%;
   border-collapse: collapse;
}

table.list th,
table.list td,
table.facts th,
table.facts td {
   padding: 6px 8px;
   text-align: left;
   vertical-align: top;
   border-bottom: 1px solid var(--line);
}

table.facts th {
   width: 40%;
   font-weight: 500;
   color: var(--muted);
}

table.list.small {
   font-size: 13px;
}

tr.muted td {
   color: var(--muted);
}

.badge {
   display: inline-block;
   margin-right: 4px;
   padding: 0 6px;
   font-size: 12px;
   background: #fde68a;
   border-radius: 8px;
}

@media (max-width: 600px) {
   .topbar {
      padding: 6px 16px;
   }

   .brand {
      gap: 10px;
      font-size: 17px;
   }

   .brand img {
      width: 48px;
      height: 48px;
   }

   /* hamburger menu: the button opens the menu as a list below the bar */
   .menu-toggle {
      display: block;
   }

   .menu {
      display: none;
      top: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: 100%;
      padding-bottom: 4px;
      border-top: 1px solid var(--line);
   }

   .menu.open {
      display: flex;
   }

   .menu a,
   .menu .link {
      display: block;
      width: 100%;
      padding: 10px 4px;
      font-size: 17px;
      text-align: left;
   }

   .menu form.inline {
      display: block;
   }

   .page {
      margin: 0;
      border: none;
      border-radius: 0;
      padding: 16px;
   }

   .page.cards {
      padding: 12px;
   }

   .card {
      padding: 16px;
   }

   table.list {
      display: block;
      overflow-x: auto;
   }

   /* one block per passkey: the four columns do not fit on a phone */
   table.list.passkeys thead {
      display: none;
   }

   table.list.passkeys tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--line);
   }

   table.list.passkeys td {
      border-bottom: none;
   }

   table.list.passkeys td:first-child,
   table.list.passkeys td:last-child {
      grid-column: 1 / -1;
   }

   table.list.passkeys td:first-child {
      font-weight: 600;
   }

   table.list.passkeys td[data-label]::before {
      content: attr(data-label) ": ";
      color: var(--muted);
   }

   /* the phone itself scans, it does not show a QR code */
   .login-other-device,
   .login-other-device.hidden {
      display: none;
   }
}