/*
  The shell, ported from the prototype: a fixed navigation column on the left and the work area on the right
  (MainLayout), and the plain card layout of the pages outside the app (PlainLayout: sign-in, errors).
  Below 860px the navigation column becomes a top bar.
*/

/* Skip link: the first tab stop, invisible until focused. */
.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--r-control);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

.app {
  display: grid;
  grid-template-columns: var(--nav-width) minmax(0, 1fr);
  min-height: 100vh;
  padding-left: max(0px, env(safe-area-inset-left, 0px));
  padding-right: max(0px, env(safe-area-inset-right, 0px));
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--nav-gap);
  padding: 22px 16px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.brand {
  display: grid;
  gap: 2px;
}

.brand-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--fg);
  text-decoration: none;
}

.brand-sub {
  color: var(--muted);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

/* The search box between the brand and the navigation; the field fills it. */
.search input {
  width: 100%;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Positioned, so the counter's text for screen readers (.sr, absolute) stays inside its item. */
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--r-control);
  color: var(--fg);
  font-weight: 500;
  text-decoration: none;
}

.nav a:hover {
  background: var(--sunk);
}

.nav a.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-group {
  margin: 12px 10px 2px;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.who {
  margin-top: auto;
  display: grid;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
}

.who strong {
  color: var(--fg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.who-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

.who-actions form {
  margin: 0;
}

.lang {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.main {
  min-width: 0;
  padding-block: 20px 96px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.main:focus {
  outline: none;
}

.wrap {
  display: grid;
  gap: var(--page-gap);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Staff viewing as a tenant: always in sight (the "view as" contract asks for a clear banner). */
.view-as-banner {
  position: sticky;
  top: 8px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: var(--content-max);
  margin: 0 auto 18px;
  padding: 10px 14px;
  border-left: 4px solid var(--warn);
  border-radius: var(--r);
  background: var(--warn-soft);
  color: var(--fg);
  font-size: var(--fs-sub);
  font-weight: 500;
  box-shadow: var(--shadow-float);
}

.view-as-banner form {
  margin: 0;
}

/* The pages outside the app: the brand in a panel on the left, and on the right a card in the middle of the page. */
.plain {
  display: grid;
  grid-template-columns: minmax(360px, 42%) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.plain-brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: max(40px, env(safe-area-inset-top, 0px)) 48px max(40px, env(safe-area-inset-bottom, 0px)) max(48px, env(safe-area-inset-left, 0px));
  background: var(--brand-panel);
  color: var(--brand-panel-ink);
}

.plain-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.plain-logo .brand-name {
  color: inherit;
  font-size: 26px;
}

.plain-pitch {
  display: grid;
  gap: 16px;
  max-width: 440px;
  margin-block: auto;
}

.plain-tagline {
  font-family: var(--f-display);
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.plain-summary {
  color: var(--brand-panel-soft);
  font-size: 17px;
  line-height: 1.45;
}

.plain-provider {
  color: var(--brand-panel-soft);
  font-size: var(--fs-small);
}

.plain-side {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.plain-main {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 32px max(var(--gutter), env(safe-area-inset-right, 0px)) 32px var(--gutter);
}

.plain-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px max(24px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) 24px;
}

.plain-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--fs-small);
}

.plain-links a {
  color: var(--muted);
}

.login-microsoft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--fg);
  font-weight: 600;
}

.login-help a {
  white-space: nowrap;
}

/* One column: the brand becomes a band above the card, with the sentence that says what Claimix is. */
@media (max-width: 860px) {
  .plain {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .plain-brand {
    gap: 14px;
    padding: max(18px, env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) 22px max(var(--gutter), env(safe-area-inset-left, 0px));
  }

  .plain-logo img {
    width: 34px;
    height: 31px;
  }

  .plain-logo .brand-name {
    font-size: 22px;
  }

  .plain-tagline {
    font-size: 26px;
  }

  .plain-summary,
  .plain-provider {
    display: none;
  }

  .plain-main {
    align-content: start;
    padding-top: 24px;
  }

  .plain-foot {
    justify-content: center;
    padding-inline: var(--gutter);
  }
}

.plain-main .view-as-banner {
  position: static;
  width: 100%;
  max-width: 460px;
  margin: 0 0 14px;
}

.plain-main:focus {
  outline: none;
}

.card {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.card .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.card .small-print {
  overflow-wrap: anywhere;
}

/* Held back for a moment: the tab that ended the session is on its way to the next page and should not show this first.
   It moves nothing, so it stays for those who ask for less motion: app.css takes animations from *, which a class beats. */
.session-ended,
.session-ended-said {
  animation: session-ended-reveal 0s linear 1s both !important;
}

@keyframes session-ended-reveal {
  from {
    visibility: hidden;
  }

  to {
    visibility: visible;
  }
}

@media (max-width: 860px) {
  /* One column: the top bar takes its own height, and only the work area takes what is left of a short page. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .side {
    position: static;
    height: auto;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) 12px max(var(--gutter), env(safe-area-inset-left, 0px));
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .nav a {
    width: auto;
  }

  /* In the top bar the search box takes a line of its own beside the brand. */
  .search {
    flex: 1 1 220px;
  }

  /* Staff viewing as a tenant: their own items start on a line of their own, under the heading. */
  .nav-group {
    flex-basis: 100%;
    margin: 6px 10px 0;
  }

  /* Unlike the prototype, which hides it: signing out and the language must stay within reach on a phone. */
  .who {
    flex-basis: 100%;
    margin-top: 0;
    padding-top: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
  }

  .who-via {
    display: none;
  }

  .who-actions {
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: var(--fs-h1-small);
  }

  .card {
    padding: 18px;
  }
}