/*
 * The one stylesheet of the site. Phone layout first; everything inside "@media (min-width: 720px)" is the
 * desktop arrangement. Colours and fonts follow finnclass.org on a light page (see the design document in
 * docs/superpowers/specs). Fonts are served from /fonts, never from another site.
 */

/* ---- Fonts ---- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin-260c81a4759baf163c025001c4f27872.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin-ext-1ad231aac0a8a891b8374aa5526a5813.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-87c506d88b9f587f0e2292bc271f5083.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin-ext-0bb2ef2eda4ec8a543480fd42836a66d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin-b1c8a895f5fd3fe6cbf5b4cf95c58d87.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500-latin-ext-fa8d8838b94a5b1388a12c5d6cad6500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens ---- */

:root {
  --navy: #131F39;
  --gold: #FFBA1A;
  --blue: #0074B3;
  --blue-hover: #005A8C;
  --ground: #F3F5F8;
  --card: #FFFFFF;
  --text: #1A2433;
  --muted: #566275;
  --border: #D9DEE6;
  --input-border: #7A879B;
  --error: #B3261E;
  --notice-error-ground: #FDECEA;
  --notice-error-border: #F1B5B0;
  --notice-error-text: #8C1D18;
  --notice-info-ground: #EAF1FB;
  --notice-info-border: #BBD0EE;
  --pill-ground: #E6EEF9;
  --on-navy: #FFFFFF;
  --on-navy-soft: #C9D1E0;
  --on-navy-muted: #8A94A8;
  --on-navy-line: #4A5672;
  --stage: #D5DAE2;
  --stage-line: #B8C0CC;

  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --column: 880px;
}

/* ---- Base ---- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  /* A long word (an email address, a file name) breaks rather than pushing the page wider than the screen. */
  overflow-wrap: break-word;
}

p, h1, h2, h3, dl, dd {
  margin: 0;
}

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

a:hover {
  color: var(--blue-hover);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

svg {
  flex-shrink: 0;
}

/* ---- Utilities ---- */

/* An element with the hidden attribute stays hidden, whatever its class says about display. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stack--tight {
  gap: 4px;
}

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

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

@media (max-width: 719.98px) {
  .wide-only {
    display: none !important;
  }
}

/* ---- Banner ---- */

.banner {
  background: var(--navy);
  color: var(--on-navy);
}

.banner :focus-visible,
.credit :focus-visible {
  outline-color: var(--gold);
}

.banner__inner {
  max-width: var(--column);
  margin: 0 auto;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand action" "who who";
  align-items: center;
  column-gap: 12px;
}

.banner__brand {
  grid-area: brand;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
}

.banner__label {
  font-family: var(--font-heading);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.banner__title {
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
  color: var(--on-navy);
}

.banner__who {
  grid-area: who;
  justify-self: start;
  min-width: 0;
  padding: 9px 0 3px;
  font-size: 13px;
  line-height: 18px;
  color: var(--on-navy-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.banner__who span {
  font-weight: 500;
  color: var(--on-navy-soft);
}

.banner__who:hover,
.banner__who:hover span {
  color: var(--on-navy);
}

.iconbtn {
  grid-area: action;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--on-navy-line);
  border-radius: 8px;
  color: var(--on-navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.iconbtn:hover {
  border-color: var(--on-navy-soft);
  color: var(--on-navy);
}

.iconbtn svg {
  width: 22px;
  height: 22px;
}

/* ---- Page ---- */

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page > * {
  min-width: 0;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.group-label {
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.isaf-number {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 46px;
  font-weight: 500;
}

.backlink {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: -16px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.backlink svg {
  width: 20px;
  height: 20px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Credit (the footer) ---- */

.credit {
  background: var(--navy);
  padding: 10px 20px;
}

.credit p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--on-navy-muted);
}

.credit a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 4px;
  font-weight: 600;
  color: var(--on-navy-soft);
}

.credit a:hover {
  color: var(--on-navy);
}

/* ---- Cards ---- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-card h1 {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.message-card p {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.message-card .btn {
  margin-top: 8px;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn svg {
  width: 20px;
  height: 20px;
}

.btn--primary {
  background: var(--blue);
  color: #FFFFFF;
}

.btn--primary:hover {
  background: var(--blue-hover);
  color: #FFFFFF;
}

.btn--secondary {
  background: var(--card);
  border-color: var(--blue);
  color: var(--blue);
}

.btn--secondary:hover {
  border-color: var(--blue-hover);
  color: var(--blue-hover);
}

.btn--large {
  min-height: 52px;
  font-size: 17px;
}

.btn--small {
  min-height: 44px;
  padding: 0 16px;
}

/* ---- Forms ---- */

.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.field__input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}

.field__input--isaf {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
}

.field__hint {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.field__error {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--error);
}

/* The messages come from the validators in lower case ("not found"); shown here they read as sentences. */
.field__error::first-letter {
  text-transform: uppercase;
}

.field--invalid .field__input {
  border: 2px solid var(--error);
}

/* A field (or two) with its button: stacked on a phone, in one row on a desktop. */
.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.check {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.check input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--blue);
}

.select {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.form-rule {
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

input[type="file"] {
  max-width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--muted);
}

input[type="file"]::file-selector-button {
  height: 44px;
  margin-right: 12px;
  padding: 0 16px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--card);
  color: var(--blue);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.facts dt {
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.facts dd {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.password-strength {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}

.password-strength:empty {
  display: none;
}

.password-strength[data-level="1"] { background: #FDECEA; color: #8C1D18; }
.password-strength[data-level="2"] { background: #FFE9D6; color: #7A3E00; }
.password-strength[data-level="3"] { background: #FFF6CC; color: #5C4A00; }
.password-strength[data-level="4"] { background: #DFF3D8; color: #1F5A14; }
.password-strength[data-level="5"] { background: #C9EFC0; color: #174A0F; }

/* ---- Notices ---- */

.notice {
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 8px;
  font-size: 15px;
  line-height: 21px;
}

.notice--error {
  background: var(--notice-error-ground);
  border-color: var(--notice-error-border);
  color: var(--notice-error-text);
}

.notice--info {
  background: var(--notice-info-ground);
  border-color: var(--notice-info-border);
  color: var(--text);
}

/* ---- Menu (the lists of links on the home page) ---- */

.menu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px 12px 20px;
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
}

.menu__item + .menu__item {
  border-top: 1px solid var(--border);
}

.menu__item:hover {
  color: var(--blue);
}

.menu__item svg {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.menu-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.menu-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Boat page ---- */

.boat-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.boat-head__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.boat-head__id .isaf-number {
  color: var(--text);
}

.doc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-card__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.doc-card__meta strong {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--text);
}

.doc-card__actions {
  display: flex;
  gap: 8px;
}

.doc-card__actions .btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0 8px;
}

.upload-box {
  border: 1px dashed var(--input-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-box__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.upload-box .btn {
  min-height: 44px;
}

/* ---- Tables and lists ---- */

.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
}

.list-controls form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-wrap {
  /* "relative" keeps a visually hidden header inside this box: without it, a hidden label in a column that is
     scrolled out of view counts towards the width of the page. */
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}

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

.table th {
  height: 44px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.table th a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.table th svg {
  width: 12px;
  height: 12px;
}

.table td {
  height: 48px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

/* A cell whose text may break anywhere (a long address), so that it gives way and the last columns of the
   table stay on the screen; it keeps room for an address of ordinary length on one line. */
.table .cell-break {
  min-width: 20ch;
  overflow-wrap: anywhere;
}

.table .cell-nowrap {
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table th:first-child,
.table td:first-child {
  padding-left: 16px;
}

.table th:last-child,
.table td:last-child {
  padding-right: 16px;
}

.table td a.mono {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  text-decoration: none;
}

/* A cell that gives way: it takes the space left over and cuts its text off with an ellipsis. */
.table .cell-rest {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.table .cell-action {
  text-align: right;
  white-space: nowrap;
}

/* The columns of a boat list that say which documents a boat has: as narrow as their headings, at the right
   end of the table, their marks in the middle. */
.table .cell-doc {
  width: 1%;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

.table .cell-doc:last-child {
  padding-right: 8px;
}

.table th.cell-doc abbr {
  text-decoration: none;
}

/* A tick that opens the document; beside it the number of documents of that kind, when there are several. */
.docmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 40px;
  min-height: 44px;
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}

.docmark:hover {
  color: var(--blue-hover);
}

.docmark svg {
  width: 20px;
  height: 20px;
}

.docmark--none {
  color: var(--muted);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pill-ground);
  color: var(--navy);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.user-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-card__who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.user-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--text);
}

/* ---- Bulk upload ---- */

.rules {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 20px;
}

.rules > div {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.rules > div + div {
  border-top: 1px solid var(--border);
}

.rules strong {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--text);
}

.rules .mono {
  color: var(--text);
}

/* The drop area is Dropzone's (css/dropzone.css, loaded by the page after this file); "form.dropzone"
   outranks its ".dropzone" rules whichever is loaded last. */
form.dropzone {
  min-height: 180px;
  padding: 24px;
  border: 2px dashed var(--input-border);
  border-radius: 12px;
  background: var(--card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

form.dropzone .dz-message {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-align: center;
  color: var(--text);
}

/* ---- Document page (what a scanned code opens) ---- */

/* The page's main area runs from edge to edge here: a white band that says what the document is, then the
   document on a grey ground down to the footer. */
.page--document {
  max-width: none;
  padding: 0;
  gap: 0;
}

.doc-head {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.doc-head__inner {
  max-width: var(--column);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.doc-head__what {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 20px;
}

.doc-head__what h1 {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.doc-head__boat {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.doc-head__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.doc-head__actions .btn {
  padding: 0 8px;
}

.doc-stage {
  flex: 1 0 auto;
  background: var(--stage);
  padding: 16px 20px 24px;
}

.doc-stage__inner {
  max-width: 832px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-pages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-pages:empty {
  display: none;
}

.doc-page,
.doc-image {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--stage-line);
}

.doc-page canvas,
.doc-image {
  display: block;
  height: auto;
}

.doc-page canvas {
  width: 100%;
}

/* A page of a PDF: the picture of it, and over the picture the page's own text (where the PDF has any), in
   place and invisible, for screen readers, selecting and searching. */
.doc-page {
  position: relative;
}

/* "Rotate" comes after the document and stays at the bottom of the screen while the document is read, so it
   is at hand on every page. There it lies over the corner of whatever page is passing, which can always be
   scrolled out from under it; at the end of the document it rests below the last page and covers nothing. */
.doc-tools {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  align-self: flex-end;
  display: flex;
  margin-right: 8px;
}

.doc-tools__button {
  min-height: 44px;
  padding: 0 14px;
  box-shadow: 0 2px 8px rgba(19, 31, 57, 0.25);
}

/* An image that has been turned: the frame has the shape of the turned picture, and the picture is turned
   around the middle of it. document-viewer.js puts the image into the frame at the first turn and sets the
   frame's proportions and the image's width and angle. */
.doc-image-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--stage-line);
}

.doc-image-frame .doc-image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  border: 0;
}

/* What a page says in its place when it could not be drawn. */
.doc-page__note {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

/* The text over a page is written by PDF.js (its TextLayer), one absolutely placed piece per run of text.
   These are the rules of PDF.js's own stylesheet for it, limited to what is used here. PDF.js sets
   --font-height, --scale-x, --rotate and --min-font-size on the pieces and the layer; --total-scale-factor,
   the screen pixels per unit of the PDF, is set on the page by document-viewer.js as the page's width
   changes. The layer always covers the page exactly, whatever size PDF.js writes on it. */
.doc-page .textLayer {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: clip;
  line-height: 1;
  text-align: initial;
  letter-spacing: normal;
  word-spacing: normal;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}

.doc-page .textLayer span,
.doc-page .textLayer br {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
  -webkit-user-select: text;
  user-select: text;
}

.doc-page .textLayer > :not(.markedContent),
.doc-page .textLayer .markedContent span:not(.markedContent) {
  --font-height: 0;
  --scale-x: 1;
  --rotate: 0deg;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}

.doc-page .textLayer .markedContent {
  display: contents;
}

.doc-page .textLayer ::selection {
  background: rgba(0, 116, 179, 0.3);
  color: transparent;
}

.doc-page .textLayer br::selection {
  background: transparent;
}

.doc-fallback {
  background: var(--card);
  border: 1px solid var(--stage-line);
  border-radius: 12px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

.doc-fallback__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* ---- QR pages ---- */

.qr-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qr-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* A QR code drawn into the page (fragments/qr.html). Always black on white, whatever is round it. */
.qr {
  display: block;
  width: 208px;
  height: 208px;
  max-width: 100%;
}

.qr-card__address {
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  overflow-wrap: anywhere;
}

.qr-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 20px;
}

.qr-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.qr-actions .btn {
  padding: 0 8px;
}

.qr-actions [data-share] {
  grid-column: 1 / -1;
}

/* ---- Sticker ---- */

/* The sticker is 70 x 37 units. A unit (--mm) is a millimetre on paper and a few pixels on screen, where the
   sticker is shown enlarged; on a screen too narrow for that it shrinks to fit. Everything inside is sized in
   the same unit, so the screen shows what the paper gets. */
.sticker {
  --mm: min(4.43px, calc((100vw - 82px) / 70));
  flex: 0 0 auto;
  width: calc(70 * var(--mm));
  height: calc(37 * var(--mm));
  padding: calc(3 * var(--mm));
  display: flex;
  gap: calc(3 * var(--mm));
  background: #FFFFFF;
  color: #000000;
  border: 1px solid var(--text);
  border-radius: calc(2 * var(--mm));
  overflow: hidden;
}

.sticker .qr {
  flex: 0 0 auto;
  width: calc(31 * var(--mm));
  height: calc(31 * var(--mm));
  max-width: none;
}

.sticker__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(0.4 * var(--mm));
}

.sticker__brand {
  font-family: var(--font-heading);
  font-size: calc(2.2 * var(--mm));
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sticker__isaf {
  font-family: var(--font-mono);
  font-size: calc(5 * var(--mm));
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

.sticker__what {
  font-size: calc(2.9 * var(--mm));
  line-height: 1.35;
  font-weight: 500;
}

.sticker__when {
  font-size: calc(2.5 * var(--mm));
  line-height: 1.4;
}

.sticker__address {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: calc(1.9 * var(--mm));
  line-height: 1.3;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.sticker-panel {
  background: var(--stage);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  justify-content: center;
}

/* On a phone the Print button comes after the sticker; the head's wrapper steps aside so that its two parts
   can be placed separately. */
.sticker-head {
  display: contents;
}

.sticker-head .btn {
  order: 1;
}

.sticker-advice {
  order: 2;
  font-size: 14px;
  line-height: 20px;
}

/* ---- Desktop arrangement ---- */

@media (min-width: 720px) {
  .table .cell-doc {
    padding: 0 6px;
  }

  .table .cell-doc:last-child {
    padding-right: 16px;
  }

  .docmark {
    min-width: 44px;
  }

  .narrow-only {
    display: none !important;
  }

  .banner__inner {
    padding: 16px 24px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "brand who action";
    column-gap: 16px;
  }

  .banner__title {
    font-size: 22px;
    line-height: 28px;
  }

  .banner__who {
    justify-self: end;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--on-navy-soft);
  }

  .banner__who span {
    font-weight: 600;
    color: var(--on-navy);
  }

  .iconbtn {
    width: auto;
    height: 40px;
    padding: 0 16px;
  }

  .page {
    padding: 40px 24px;
    gap: 24px;
  }

  .page-title {
    font-size: 28px;
    line-height: 36px;
  }

  .backlink {
    margin-top: -24px;
  }

  .credit {
    padding: 10px 24px;
  }

  .card {
    padding: 24px;
  }

  .card--narrow {
    max-width: 440px;
  }

  .card--form {
    max-width: 640px;
  }

  .message-card {
    padding: 32px;
    align-items: flex-start;
  }

  .message-card h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .btn--large {
    min-height: 48px;
  }

  .field__input {
    height: 48px;
  }

  .inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .inline-form > .btn {
    grid-column: 2;
    grid-row: 1;
    padding: 0 40px;
  }

  .inline-form > .field__error,
  .inline-form > .field__hint {
    grid-column: 1 / -1;
  }

  .inline-form--pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
  }

  .inline-form--pair > .btn {
    grid-column: 3;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid > .span-2 {
    grid-column: 1 / -1;
  }

  /* A field that has a row of the grid to itself but stays as wide as one column. */
  .form-grid > .field--half {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
  }

  .check input {
    width: 20px;
    height: 20px;
  }

  .menu__item {
    padding-left: 24px;
  }

  .menu-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
  }

  .boat-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .doc-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
  }

  .doc-card__actions .btn {
    flex: 0 0 auto;
    min-width: 120px;
  }

  .upload-box {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
  }

  .table th,
  .table td {
    padding: 0 12px;
  }

  .table th:first-child,
  .table td:first-child {
    padding-left: 24px;
  }

  .table th:last-child,
  .table td:last-child {
    padding-right: 24px;
  }

  .pager {
    justify-content: center;
    gap: 20px;
  }

  .rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 0;
    border: 0;
    background: none;
  }

  .rules > div,
  .rules > div + div {
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
  }

  .doc-head__inner {
    padding: 20px 24px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .doc-head__what h1 {
    font-size: 26px;
    line-height: 32px;
  }

  .doc-head__actions {
    display: flex;
    flex-wrap: wrap;
  }

  .doc-head__actions .btn {
    padding: 0 24px;
  }

  .doc-stage {
    padding: 24px 24px 40px;
  }

  .doc-card__actions .btn {
    padding: 0 20px;
  }

  .qr-layout {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
  }

  .qr-card {
    padding: 28px 28px 20px;
    gap: 16px;
  }

  .qr-card .qr {
    width: 240px;
    height: 240px;
  }

  .qr-side {
    flex: 1 1 280px;
    min-width: 0;
    gap: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .qr-actions {
    max-width: 320px;
    grid-template-columns: minmax(0, 1fr);
  }

  .sticker {
    --mm: 5.43px;
  }

  .sticker-panel {
    padding: 48px 24px;
  }

  .sticker-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .sticker-head .btn {
    order: 0;
    padding: 0 40px;
  }

  .sticker-advice {
    font-size: 15px;
    line-height: 22px;
  }
}

/* ---- Print ---- */

@media print {
  .banner,
  .credit,
  .doc-tools {
    display: none;
  }

  body {
    background: #FFFFFF;
  }

  /* A sticker page prints the sticker and nothing else, at its real size (the paper is set to 70 x 37 mm in
     the page's head): black on white, without the outline that stands for its edge on screen. */
  .sticker-page {
    display: block;
    min-height: 0;
  }

  .sticker-page .page {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .sticker-page .sticker-head,
  .sticker-page .sticker-head *,
  .sticker-page .sticker-advice {
    display: none !important;
  }

  .sticker-page .sticker-panel {
    display: block;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .sticker-page .sticker {
    --mm: 1mm;
    border: 0;
    border-radius: 0;
  }
}