/* Small additions on top of GOV.UK Frontend (govuk-frontend.min.css). */

/* Brand-blue service header, like an HMRC service, without the GOV.UK crown or logotype. */
.app-service-header { background: #1d70b8; border-bottom: 0; }
.app-service-header .govuk-service-navigation__service-name,
.app-service-header .govuk-service-navigation__link,
.app-service-header .govuk-service-navigation__link:link,
.app-service-header .govuk-service-navigation__link:visited { color: #fff; }
.app-service-header .govuk-service-navigation__service-name .govuk-service-navigation__link { font-weight: 700; }
.app-service-header .govuk-service-navigation__item--active { border-color: #fff; }
.app-service-header .govuk-service-navigation__link:focus { color: #0b0c0c; }

/* A form button that looks like a navigation link (Sign out). */
.app-inline-form { display: inline; margin: 0; }
.app-link-button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
                   font-family: "GDS Transport", arial, sans-serif; font-size: inherit; font-weight: inherit;
                   line-height: inherit; -webkit-font-smoothing: antialiased;
                   text-decoration: underline; text-underline-offset: .1578em; }
/* A link-style button standing on its own line, in body-text size (e.g. "Cancel and sign out"). */
.app-link-button--body { font-size: 1.1875rem; line-height: 1.3157894737; color: #1a65a6; }
.app-link-button:hover { text-decoration-thickness: max(3px, .1875rem, .12em); }
.app-link-button:focus { outline: 3px solid transparent; background-color: #fd0;
                         box-shadow: 0 -2px #fd0, 0 4px #0b0c0c; text-decoration: none; }

.app-footer-text { margin: 0; }

/* Monospace values: hashes, references, IDs. */
.app-code { font-family: Consolas, "Courier New", monospace; font-size: .9em; word-break: break-all; }

/* Drag-and-drop file area on the import page. */
.app-dropzone { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 40px 15px;
                border: 2px dashed #1d70b8; background: #f4f8fb; cursor: pointer; text-align: center;
                margin-bottom: 20px; }
.app-dropzone.over { background: #d2e2f1; border-style: solid; }
.app-dropzone-name { font-weight: 700; }

/* Raw JSON responses. */
.app-pre { background: #f3f2f1; border-left: 5px solid #cecece; padding: 15px; overflow: auto;
           font-family: Consolas, "Courier New", monospace; font-size: 14px; white-space: pre-wrap;
           word-break: break-word; }

/* Narrow input for a single cell reference / period key. */
.app-input-cell { max-width: 9ex; }

/* VATRelay logo */
.app-brand { display: inline-flex; align-items: center; gap: 10px; }
.app-brand__mark { display: block; border-radius: 6px; box-shadow: 0 0 0 2px #fff; }
.app-login-logo { display: block; margin: 0 0 30px; max-width: 100%; height: auto; }

/* Policy pages */
.app-doc h2 { margin-top: 40px; padding-top: 10px; border-top: 1px solid #cecece; }
.app-doc .govuk-list .govuk-list { margin-top: 5px; margin-bottom: 0; }
.app-doc .govuk-table { margin-bottom: 30px; }
.app-placeholder { background: #fff7bf; color: #0b0c0c; padding: 0 3px; outline: 1px dashed #b58800; }
.app-note { border-left-color: #b58800; }
.app-list-para { margin: 10px 0 0; }
.app-related { border-top: 2px solid #1d70b8; padding-top: 15px; }
@media print {
  .app-service-header, .govuk-footer, .govuk-skip-link, .govuk-phase-banner, .govuk-back-link,
  .app-related { display: none; }
  .app-doc h2 { break-after: avoid; }
}

/* Authenticator QR code (hosted edition sign-in) */
.app-qr { display: block; background: #fff; padding: 8px; border: 1px solid #cecece; }

/* -- Phones (narrower than GOV.UK's tablet breakpoint, 641px) ------------------------------- */

/* Header: the current business is labelled; on wide screens the label is a small caption. */
.app-current-business__label { display: block; font-size: .875rem; font-weight: 400; line-height: 1.2; opacity: .85; }
.app-service-header .govuk-service-navigation__toggle,
.app-service-header .govuk-service-navigation__toggle:not(:focus) { color: #fff; }
.app-service-header .govuk-service-navigation__toggle:focus { color: #0b0c0c; }

/* Who is signed in: one quiet line beside "Sign out" (plain text, as on GOV.UK and bank
   services, rather than an avatar: the email tells two accounts apart). */
.app-account { color: #fff; font-size: 1rem; line-height: 1.25; }
.app-account__label { opacity: .85; }
.app-account__name { overflow-wrap: anywhere; }
@media (min-width: 40.0625em) {
  .app-service-header .govuk-service-navigation__wrapper { flex-grow: 1; }
  .app-service-header .govuk-service-navigation__list { align-items: center; }
  .app-service-header .app-account { margin-left: auto; display: flex; gap: .3em; white-space: nowrap; }
  .app-account__name { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
  .app-service-header .app-account + .app-sign-out { padding-left: 15px; border-left: 1px solid rgba(255, 255, 255, .5); }
}

/* Tables that become one card per row on a phone: the first cell is the card's title, the
   others show their column name (data-label), and the action button fills the width. */
.app-stack-table__prefix { display: none; }

@media (max-width: 40.0525em) {
  .app-service-header .govuk-service-navigation__container { flex-direction: row; flex-wrap: wrap;
                                                             align-items: center; justify-content: space-between; }
  .app-service-header .govuk-service-navigation__wrapper { display: contents; }
  .app-service-header .govuk-service-navigation__toggle { margin: 10px 0; padding: 5px 0; }
  .app-service-header .govuk-service-navigation__list { flex-basis: 100%; flex-direction: column;
                                                        flex-wrap: nowrap; margin: 0 0 10px;
                                                        border-top: 1px solid rgba(255, 255, 255, .4); }
  .app-service-header .govuk-service-navigation__item { margin: 0; padding: 12px 0;
                                                        border-bottom: 1px solid rgba(255, 255, 255, .4); }
  .app-service-header .govuk-service-navigation__item:last-child { border-bottom: 0; }
  .app-service-header .app-link-button { text-align: left; }

  .app-stack-table, .app-stack-table tbody, .app-stack-table tr, .app-stack-table td { display: block; width: 100%;
                                                                         box-sizing: border-box; }
  .app-stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
                           clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .app-stack-table .govuk-table__row { border: 1px solid #b1b4b6; padding: 15px; margin-bottom: 15px; }
  .app-stack-table .govuk-table__cell { border: 0; padding: 4px 0; text-align: left; }
  .app-stack-table .govuk-table__cell[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
  .app-stack-table__title { font-size: 1.1875rem; font-weight: 700; padding-bottom: 8px !important; }
  .app-stack-table__prefix { display: inline; }
  .app-stack-table__action { padding-top: 12px !important; }
  .app-stack-table__action .govuk-button, .app-stack-table__action form { display: block; width: 100%; }
  .app-stack-table__links { padding-top: 10px !important; }

  /* Box figures: keep the table, let descriptions wrap, never scroll sideways. */
  .app-box-table .govuk-table__header, .app-box-table .govuk-table__cell { padding-right: 10px; }
  .app-box-table .govuk-table__cell:last-child, .app-box-table .govuk-table__header:last-child { padding-right: 0; }

  .app-code { overflow-wrap: anywhere; }
}

/* Never let a long value (a reference, an email) push the page wider than the screen. */
.govuk-main-wrapper { overflow-wrap: break-word; }
.govuk-summary-list__value, .govuk-summary-list__key { overflow-wrap: anywhere; }
.app-pre { max-width: 100%; }

/* Help page: a quiet contents list, as on GOV.UK guides. */
.app-help #contents { font-size: 1.1875rem; margin-top: 30px; padding-top: 0; border-top: 0; }
.app-help #contents + .govuk-list { font-size: 1rem; }