/* The chrome: suite bar, nav, command bar, panels, dialogs, auth cards. */

/* Suite bar --------------------------------------------------------------- */

.suite {
  height: var(--suite-height);
  background: var(--white);
  color: var(--n-primary);
  box-shadow: 0 1px 0 var(--n-light), 0 4px 16px rgb(16 24 40 / 5%);
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 60;
}

.suite-btn {
  width: var(--suite-height);
  height: var(--suite-height);
  display: grid;
  place-items: center;
  color: var(--n-primary);
}

/* Sized here like every other icon, or the SVG stretches to fill the button. */
.suite-btn svg {
  width: 20px;
  height: 20px;
}

.suite-btn:hover {
  background: var(--n-lighter);
}

/* On pages with no top bar the moon or sun floats in the corner; in the app
   it shows only while the sign-in page covers the bar. */
.theme-float {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 310;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--sh16);
}

#auth:empty ~ .theme-float {
  display: none;
}

.suite-name {
  display: flex;
  align-items: center;
  align-self: stretch;
  width: var(--nav-width);
  flex: none;
  /* Over the header's bottom line, so the red column has no seam. */
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  padding: 0 24px;
  background: var(--nav-bg);
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Where you are: the page's name and a chip for the branch. */
.suite-crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 28px;
}

.suite-page {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 650;
  color: var(--n-dark);
  white-space: nowrap;
}

.suite-branch {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-lt);
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.suite-branch:empty {
  display: none;
}

.suite-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 20px;
  min-width: 0;
}

.suite-who {
  text-align: right;
  line-height: 16px;
  min-width: 0;
}

/* Both truncate rather than push the avatar off the bar: a long address is
   normal, and losing the end of one is better than losing the avatar. */
.suite-who .a,
.suite-who .b {
  font-size: 12px;
  color: var(--n-secondary);
}

.suite-who .a {
  font-size: 13px;
  font-weight: 600;
}

.suite-who .b {
  font-size: 12px;
  opacity: 0.85;
}

.suite-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-lt);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

.menu-btn {
  display: none;
}


/* The printed roster ------------------------------------------------------ */
/* The PDF itself, fetched from the API and shown in a frame, so the preview
   is the document and cannot drift from it. */

.pdf-preview {
  display: block;
  width: 100%;
  max-width: 900px;
  height: calc(100vh - var(--suite-height) - 200px);
  min-height: 640px;
  margin: 0 auto;
  border: 1px solid var(--n-light);
  background: var(--white);
  box-shadow: var(--sh2);
}

/* Shell and nav ----------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--nav-width) 1fr;
  min-height: calc(100vh - var(--suite-height));
}

.nav {
  background: var(--nav-bg);
  color: var(--nav-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--suite-height);
  height: calc(100vh - var(--suite-height));
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px;
}

.nav-group {
  display: grid;
  gap: 2px;
}

/* A thin line between groups, so each block reads as one kind of work. */
.nav-group + .nav-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 14%);
}

.nav-heading {
  padding: 0 12px 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgb(255 255 255 / 60%);
}

/* The page you are on is a soft brand pill; the rest stay quiet. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--nav-ink);
  text-align: left;
  transition: background 120ms, color 120ms;
}

.nav-item:hover {
  background: var(--nav-hover);
  color: #fff;
}

.nav-item.on {
  background: var(--nav-on);
  color: #fff;
  font-weight: 600;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentcolor;
}

.nav-item.on svg {
  stroke: #fff;
}

.nav-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--n-secondary);
}

/* Only in the phone drawer: on a wide screen the top bar already names who is signed in. */
.nav-who {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 8px;
}

.nav-who-av {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--nav-bg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.nav-who-text {
  min-width: 0;
  line-height: 16px;
}

.nav-who-text .a,
.nav-who-text .b,
.nav-who-text .c {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-who-text .a {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.nav-who-text .b,
.nav-who-text .c {
  font-size: 12px;
  color: var(--nav-ink);
}

.branch-pick {
  margin: 8px 12px 4px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--nav-hover);
}

.branch-pick .lbl {
  font-size: 12px;
  color: var(--nav-ink);
  margin-bottom: 2px;
}

.branch-pick .val {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* Content and command bar -------------------------------------------------- */

.content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page {
  padding: 28px 28px 56px;
  width: 100%;
}

/* A row of actions: quiet buttons, the primary one filled. */
.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* A filter's name sits beside it, so a picked value still says what it filters. */
.bar-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.bar-filter label {
  font-size: 13px;
  font-weight: 600;
  color: var(--n-secondary);
  white-space: nowrap;
}

/* On a phone each filter takes a whole row, its name in a column of its own,
   so the boxes line up instead of wrapping wherever they happen to fit. The
   desktop widths are inline on each select, so only !important can undo them. */
@media (width <= 600px) {
  .bar .search {
    flex: 1 1 100%;
  }

  .bar-filter {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .bar-filter label {
    flex: 0 0 64px;
  }

  .bar-filter select {
    flex: 1;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* The browser's own arrow sits tight against the border on a phone. */
  select {
    appearance: none;
    padding-right: 36px;
    background-image: url("chevron.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
  }
}

.cmd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background 120ms;
}

.cmd:hover {
  background: rgb(16 24 40 / 5%);
}

.cmd svg {
  width: 16px;
  height: 16px;
  stroke: var(--n-secondary);
}

.cmd.primary {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  padding: 0 14px;
  box-shadow: 0 1px 2px rgb(165 18 37 / 25%);
}

.cmd.primary svg {
  stroke: #fff;
}

.cmd.primary:hover {
  background: var(--brand-dk);
}

.search {
  position: relative;
  max-width: 300px;
  flex: 1;
  min-width: 180px;
}

.search input {
  padding-left: 30px;
}

.search input:focus {
  padding-left: 29px;
}

.search svg {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 15px;
  height: 15px;
  stroke: var(--n-secondary);
}

/* Panels and dialogs ------------------------------------------------------- */

.ovl {
  position: fixed;
  inset: 0;
  background: rgb(16 24 40 / 45%);
  z-index: 100;
}

/* Forms open in a right panel; confirmations use a small flat dialog. */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--panel-width);
  max-width: 100vw;
  background: var(--white);
  box-shadow: var(--sh64);
  display: flex;
  flex-direction: column;
  z-index: 101;
}

.panel-hd {
  padding: 16px 12px 12px 24px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.panel-hd h2 {
  font-size: 20px;
  font-weight: 600;
  flex: 1;
}

.panel-x {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  flex: none;
  font-size: 14px;
}

.panel-x:hover {
  background: var(--n-lighter);
}

.panel-bd {
  flex: 1;
  overflow-y: auto;
  padding: 4px 24px 24px;
}

.panel-ft {
  padding: 16px 24px;
  display: flex;
  gap: 8px;
  background: var(--n-lighter-alt);
  border-top: 1px solid var(--n-light);
}

.dlgwrap {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 101;
}

.dlg {
  background: var(--white);
  box-shadow: var(--sh64);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow: auto;
}

.dlg-hd {
  padding: 24px 24px 12px;
}

.dlg-hd h2 {
  font-size: 20px;
  font-weight: 600;
}

.dlg-bd {
  padding: 0 24px 8px;
  font-size: 14px;
}

.dlg-bd p {
  margin-bottom: 12px;
  color: var(--n-secondary);
}

.dlg-ft {
  padding: 20px 24px 24px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Auth cards -------------------------------------------------------------- */

/* No access: a dead end, and the only screen still drawn as a card. */
.authcard-page {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--n-lighter);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.authcard {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--n-light);
  box-shadow: var(--sh16);
  padding: 32px 28px;
}

.authbrand {
  height: 44px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  margin: -32px -28px 24px;
}

.authttl {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.authsub {
  font-size: 14px;
  color: var(--n-secondary);
  margin-bottom: 20px;
  line-height: 20px;
}

.authlink {
  color: var(--brand);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  display: inline-block;
}

.authlink:hover {
  text-decoration: underline;
}

.authfoot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--n-light);
  font-size: 12px;
  color: var(--n-secondary);
  line-height: 18px;
}

/* The account pages ------------------------------------------------------- */

/* Signing in and setting a password from an invitation. Half the screen is
   the brand in GRM red, so the front door looks like the app behind it. */
.authpage {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--white);
}

.authpage-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40px 56px;
  color: #fff;
  background:
    radial-gradient(700px 520px at 85% 8%, rgb(255 255 255 / 14%), transparent 65%),
    radial-gradient(800px 700px at 0% 100%, rgb(0 0 0 / 32%), transparent 60%),
    linear-gradient(150deg, #6b0b18 0%, var(--nav-bg) 55%, #b3182d 100%);
}

.authpage-logo {
  margin-bottom: 32px;
  font-size: 28px;
}

/* A faint weave and one large ring, so the red has depth rather than flatness. */
.authpage-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgb(255 255 255 / 3%) 0 2px,
    transparent 2px 10px
  );
}

.authpage-brand::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -180px;
  bottom: -200px;
  border-radius: 50%;
  border: 64px solid rgb(255 255 255 / 5%);
  pointer-events: none;
}

.authpage-word,
.authpage-pitch,
.authpage-church {
  position: relative;
  z-index: 1;
}

.authpage-word {
  font-size: 24px;
}

.authpage-pitch {
  margin: auto 0;
  max-width: 520px;
  padding: 48px 0;
}

.authpage-pitch h1 {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.authpage-points {
  list-style: none;
  margin-top: 32px;
  display: grid;
  gap: 14px;
}

.authpage-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: rgb(255 255 255 / 90%);
}

.authpage-points svg {
  width: 22px;
  height: 22px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  color: #fff;
}

.authpage-church {
  font-size: 13px;
  color: rgb(255 255 255 / 70%);
}

.authpage-side {
  display: grid;
  place-items: center;
  padding: 48px 40px;
}

.authpage-form {
  width: 100%;
  max-width: 420px;
}

.authpage-form .authttl {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  color: var(--n-dark);
  margin-bottom: 8px;
}

.authpage-form .authsub {
  font-size: 15px;
  margin-bottom: 28px;
}

.authpage-form .fld input {
  min-height: 46px;
  font-size: 15px;
}

.authpage-form .pwbar {
  margin-top: 12px;
}

.signin-forgot {
  display: block;
  margin: 14px auto 0;
  font-size: 14px;
}

.signin-forgot-help {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--n-secondary);
  text-align: center;
}

.signin-forgot-help[hidden] {
  display: none;
}

.authpage-access {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--n-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--n-secondary);
}

.authpage-access strong {
  color: var(--n-dark);
}

/* Narrow screens: the red becomes a band on top and the form follows it. */
@media (max-width: 900px) {
  .authpage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .authpage-brand {
    padding: 28px 24px;
  }

  .authpage-pitch {
    padding: 24px 0 8px;
  }

  .authpage-pitch h1 {
    font-size: 26px;
    line-height: 32px;
  }

  .authpage-points {
    margin-top: 18px;
    gap: 10px;
  }

  .authpage-points li {
    font-size: 14px;
  }

  .authpage-church {
    display: none;
  }

  .authpage-side {
    place-items: start center;
    padding: 32px 20px 48px;
  }

  /* The band above already carries the name, so it is not said twice. */
  .authpage-logo {
    display: none;
  }
}

/* Phones: the band shrinks to the name and one line, and the form rises over
   it as a sheet, so the sign-in fields are what the screen is for. */
@media (width <= 600px) {
  .authpage-brand {
    padding: 22px 20px 44px;
  }

  .authpage-word {
    font-size: 22px;
  }

  .authpage-pitch {
    padding: 16px 0 0;
  }

  .authpage-pitch h1 {
    font-size: 20px;
    line-height: 27px;
    font-weight: 600;
    text-wrap: pretty;
  }

  .authpage-points {
    display: none;
  }

  .authpage-side {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    padding: 28px 20px 40px;
    border-radius: 20px 20px 0 0;
    background: var(--white);
  }
}

.err {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 16px;
  background: var(--err-bg);
  border-radius: var(--radius);
}

.err svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1px;
  stroke: var(--err);
}

.pwbar {
  height: 3px;
  background: var(--n-light);
  margin-top: 6px;
  border-radius: var(--radius);
  overflow: hidden;
}

.pwbar i {
  display: block;
  height: 100%;
  background: var(--ok);
  width: 0;
  transition: width 0.15s;
}

/* Toast -------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  /* Fixed rather than from the theme: --n-dark turns near-white in night
     mode, and white text on it could not be read. */
  background: #14181d;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  z-index: 200;
  box-shadow: var(--sh16);
  max-width: calc(100vw - 32px);
}

/* Responsive. Breakpoint at 900px, tested at 320. Section 10. ------------- */

.mlist {
  display: none;
}

.mrow {
  background: var(--white);
  border-bottom: 1px solid var(--n-light);
  padding: 10px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
}

.mrow:hover {
  background: var(--n-lighter-alt);
}

/* The last row sits on the card's rounded corners, so it takes their shape. */
.card .mrow:last-child {
  border-bottom: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.mrow .m1 {
  flex: 1;
  min-width: 0;
}

.mrow .m1 b {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mrow .m1 span {
  font-size: 12px;
  color: var(--n-secondary);
}

/* A row that carries more than one action -- rename, retire, up, down -- on a
   screen too narrow to hold them beside the name. They drop to their own line
   rather than squeezing the name into an ellipsis. */
.mrow-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: 0 0 auto;
  margin-left: auto;
}

.mrow:has(.mrow-acts) {
  flex-wrap: wrap;
}

.navscrim {
  display: none;
}

@media (width <= 900px) {
  .nav-who {
    display: flex;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .nav {
    position: fixed;
    top: var(--suite-height);
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.15s ease;
  }

  body.nav-open .nav {
    transform: translateX(0);
  }

  body.nav-open .navscrim {
    display: block;
    position: fixed;
    top: var(--suite-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 40%);
    z-index: 65;
  }

  .menu-btn {
    display: grid;
  }

  .suite-name {
    width: auto;
    padding: 0 16px 0 4px;
    background: none;
  }

  /* Off the red block, the logo is back in its own colours. */
  .suite-name .wordmark.on-red {
    color: var(--logo-ink);
  }

  .suite-name .wordmark.on-red b {
    color: var(--logo-red);
  }

  /* A phone has room for the wordmark and the avatar, not the page's name. */
  .suite-crumb {
    display: none;
  }

  .page {
    padding: 16px 12px 40px;
  }

  /* Tables become card lists. */
  .tablewrap {
    display: none;
  }

  .mlist {
    display: block;
  }

  /* Stacked, each field's own margin spaces them, so the gap would double it. */
  .two {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .search {
    max-width: none;
  }

  .panel {
    width: 100%;
  }
}

@media (width <= 400px) {
  .suite-who {
    display: none;
  }
}

/* People picker ------------------------------------------------------------ */

/* A search box that lists people, and hands back one. Rows are tall enough to
   hit on a phone, and each carries the two things that tell people apart: a
   name and the number on their card. */
.picker {
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
  background: var(--white);
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}

.picker:empty {
  display: none;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--n-lighter);
}

.picker-row:last-child {
  border-bottom: none;
}

.picker-row:hover {
  background: var(--n-lighter);
}

.picker-empty {
  color: var(--n-secondary);
  font-size: 13px;
  cursor: default;
}

.picker-empty:hover {
  background: none;
}

/* Initials in a circle, the same shape as the avatar in the suite bar, so a
   person looks like a person wherever they appear. */
.persona {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

.persona-text {
  min-width: 0;
  line-height: 16px;
}

.persona-text .a {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-text .b {
  font-size: 12px;
  color: var(--n-secondary);
}

/* The one who was picked, shown instead of the search box so the panel says
   who it is about rather than what was typed to find them. */
.chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
  background: var(--n-lighter-alt);
}

.chosen .persona-text {
  flex: 1;
}

.chosen-clear {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--n-secondary);
}

.chosen-clear:hover {
  background: var(--n-light);
}

/* The public registration page: one column, no chrome, the prototype's. */
.pubbg {
  min-height: 100vh;
  background: var(--n-lighter);
  padding: 40px 16px;
}

.pubpage {
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh16);
  overflow: hidden;
}

.pubhd {
  background: var(--brand);
  color: #fff;
  padding: 20px 24px;
}

.pubbrand {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pubbranch {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 2px;
}

.pubbody {
  padding: 24px;
}

.pubttl {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  margin-bottom: 6px;
}

.pubmeta {
  font-size: 14px;
  color: var(--n-secondary);
  margin-bottom: 16px;
  line-height: 22px;
}

.pubintro {
  font-size: 14px;
  margin-bottom: 16px;
}

/* What the admin typed, with the line breaks they typed. */
.pubdetails {
  font-size: 14px;
  margin-bottom: 16px;
  white-space: pre-line;
}

.pblock {
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.pblock-hd {
  font-size: 12px;
  font-weight: 600;
  color: var(--n-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pubfoot {
  font-size: 12px;
  color: var(--n-secondary);
  margin-top: 16px;
  line-height: 18px;
}

/* The check-in tick, large enough to hit on a phone at the door. */
.tick {
  width: 18px;
  height: 18px;
  min-height: 0;
  accent-color: var(--brand);
}

@media (max-width: 600px) {
  .pubbg {
    padding: 0;
  }

  .pubbody {
    padding: 16px;
  }
}

/* About developers: a card per person, two across, one on a phone. */
.devgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dev {
  display: flex;
  gap: 12px;
  border-radius: var(--radius-lg);
  background: var(--n-lighter-alt);
  padding: 16px;
}

.dev-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--brand-lt);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 600;
}

.dev-b {
  min-width: 0;
  flex: 1;
}

.dev-n {
  font-weight: 600;
}

.dev-r {
  font-size: 12px;
  color: var(--n-secondary);
  margin-bottom: 6px;
}

.dev-x {
  font-size: 13px;
  line-height: 19px;
  margin-bottom: 8px;
}

.dev-l {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.xlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand);
  font-size: 13px;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius);
}

.xlink:hover {
  background: var(--n-lighter);
  text-decoration: underline;
}

.xlink svg {
  width: 12px;
  height: 12px;
  stroke: var(--brand);
}

@media (width <= 900px) {
  .devgrid {
    grid-template-columns: 1fr;
  }
}

/* Home's four numbers: four across, two on a tablet, one on a phone. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.tile {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh2);
  padding: 18px 20px;
}

.tile .k {
  font-size: 13px;
  font-weight: 500;
  color: var(--n-secondary);
}

.tile .v {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--n-dark);
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.tile .d {
  font-size: 12px;
  color: var(--n-secondary);
}

.tile .d.w {
  color: var(--warn-ink);
}

@media (width <= 600px) {
  /* minmax(0, ...) so a long word such as a duty name cannot widen the column. */
  .tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home's analytics: the insight line, charts, meters and stat rows. */
.insight {
  background: var(--brand-lt);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 24px;
}

.insight-k {
  font-size: 12px;
  color: var(--n-secondary);
}

.insight-v {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--n-dark);
  margin-top: 4px;
}

.homegrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-slot {
  width: 100%;
  margin-top: 8px;
}

.chart {
  display: block;
  overflow: visible;
}

.chart-axis {
  stroke: var(--n-light);
  stroke-width: 1;
}



.chart-bar {
  fill: var(--brand);
}

.chart-hit {
  fill: transparent;
}

.chart-hit:hover + .chart-bar,
g:hover > .chart-bar {
  opacity: 0.8;
}

.chart-label {
  font-size: 12px;
  fill: var(--n-secondary);
}

.meter {
  display: inline-block;
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: var(--n-light);
  vertical-align: middle;
  overflow: hidden;
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--n-light);
}

.stat-row:last-child {
  border-bottom: 0;
}

.stat-row > span:first-child {
  flex: 1;
}

@media (width <= 900px) {
  .homegrid {
    grid-template-columns: 1fr;
  }
}

/* Definitions: a term, what it means, and the sum behind it. */
.definition {
  padding: 10px 0;
  border-bottom: 1px solid var(--n-light);
}

.definition:last-child {
  border-bottom: 0;
}

.definition-term {
  font-weight: 600;
}

.definition-meaning {
  font-size: 13px;
  line-height: 20px;
  margin-top: 2px;
}

.definition-formula {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--n-lighter);
  font-size: 12px;
  color: var(--n-secondary);
}

/* Charts on Home: recessive grid and labels, one brand-coloured series. */
.chart-grid {
  stroke: var(--n-light);
  stroke-width: 1;
}

.chart .chart-label {
  font-size: 11px;
  fill: var(--n-secondary);
}

.chart-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.chart-dot {
  fill: var(--brand);
  stroke: var(--white);
  stroke-width: 2;
}

.chart-point:hover .chart-dot {
  r: 6;
}

/* A KPI value that needs a look: amber at zero, red below it. The number only. */
.tile.kpi-watch .v {
  color: var(--warn-ink);
}

.tile.kpi-bad .v {
  color: var(--err);
}

/* IT's Needs attention list, trend arrows, and activity kind tags. */
.attention {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.trend {
  font-size: 12px;
  color: var(--n-secondary);
  white-space: nowrap;
}

.trend-up {
  color: var(--ok);
}

.trend-down {
  color: var(--err);
}

.badge {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--n-lighter);
  font-size: 11px;
  font-weight: 400;
  color: var(--n-secondary);
}

/* My details ------------------------------------------------------------- */

.profile .card-bd {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.profile {
  margin-bottom: 16px;
}

.profile-av {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}

.profile-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--n-dark);
}

.profile-facts {
  margin-top: 2px;
  font-size: 14px;
  color: var(--n-secondary);
}

.detailsgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.profile-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--n-secondary);
}

.profile-signin {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--n-dark);
  overflow-wrap: anywhere;
}

.profile-note {
  margin: 8px 0 16px;
  font-size: 13px;
  color: var(--n-secondary);
}

@media (width <= 900px) {
  .detailsgrid {
    grid-template-columns: 1fr;
  }
}

/* The logo --------------------------------------------------------------- */

/* The GRM Connect wordmark: GRM bold in the logo red, Connect regular. */
.wordmark {
  font-family: Inter, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: -0.023em;
  line-height: 1;
  white-space: nowrap;
  color: var(--logo-ink);
}

.wordmark b {
  font-weight: 700;
  color: var(--logo-red);
}

/* On a red surface the red half would vanish, so the whole mark goes white. */
.wordmark.on-red,
.wordmark.on-red b {
  color: #fff;
}

/* The member import: two numbered steps, template first. */
.import-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.import-step .g-dim {
  margin: 2px 0 10px;
  font-size: 13px;
}

.import-step-no {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-lt);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
}

/* The member import: each column of the file beside what it holds. */
.import-heading {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.import-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--n-light);
}

.import-column label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* What stops the file importing: shown in full, never hidden like a form error. */
.import-errors {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--err-bg);
  color: var(--n-primary);
  font-size: 13px;
  line-height: 18px;
}

/* The member import's list of what to fix. */
.import-problems {
  margin: 6px 0 0 18px;
  display: grid;
  gap: 2px;
}

/* Loading ---------------------------------------------------------------- */

/* Three dots that pulse in turn: on a button while it saves, or inline. */
.dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 1.4s infinite ease-in-out;
}

.dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Inline, away from a red button, the dots are the logo red. */
.g-dim .dots,
p .dots {
  color: var(--logo-red);
}

@keyframes dot-pulse {
  0%,
  80%,
  100% {
    transform: scale(0.7);
    opacity: 0.4;
  }

  40% {
    transform: scale(1.15);
    opacity: 1;
  }
}

/* A page's shape while it loads, shimmering left to right. */
.sk {
  border-radius: var(--radius);
  background: linear-gradient(
    90deg,
    var(--n-light) 0%,
    var(--n-lighter-alt) 50%,
    var(--n-light) 100%
  );
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s infinite linear;
}

.sk-title {
  width: 220px;
  height: 30px;
  margin-bottom: 10px;
}

.sk-line {
  height: 14px;
  margin-bottom: 24px;
}

.sk-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.sk-tile {
  height: 104px;
  border-radius: var(--radius-lg);
}

.sk-card {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--sh2);
  display: grid;
  gap: 14px;
}

.sk-row {
  height: 18px;
}

.sk-row:nth-child(odd) {
  width: 82%;
}

@keyframes sk-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dots span,
  .sk {
    animation: none;
  }
}

/* A button that is saving is not disabled in the usual sense: it keeps its
   colour, so the dots read as work in progress rather than a dead control. */
.btn-pri[aria-busy="true"],
.cmd.primary[aria-busy="true"] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  opacity: 1;
  cursor: progress;
}

/* Tutorials ---------------------------------------------------------------- */

/* Read aloud, never drawn: the count a screen reader hears as results change. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tut-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.tut-heading .sub {
  margin-top: 4px;
}

.tut-heading .ttl:focus {
  outline: none;
}

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

.tut-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.tut-filters .bar-filter {
  margin-left: 0;
}

.tut-search {
  flex: 1 1 320px;
  max-width: 520px;
}

/* The list: one quiet surface per topic, a row per tutorial. */
.tut-topic-group {
  margin-bottom: 28px;
}

.tut-topic-group h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--n-secondary);
  margin-bottom: 8px;
}

.tut-list {
  list-style: none;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh2);
  overflow: hidden;
}

.tut-list li + li {
  border-top: 1px solid var(--n-light);
}

.tut-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 20px;
  color: var(--n-dark);
  text-decoration: none;
}

.tut-row:hover {
  background: var(--n-lighter-alt);
}

.tut-row:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.tut-row-title {
  font-size: 15px;
  font-weight: 600;
}

.tut-row-meta {
  flex: none;
  font-size: 13px;
  color: var(--n-secondary);
}

.tut-empty {
  padding: 40px 24px;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh2);
}

.tut-empty h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--n-dark);
  margin-bottom: 6px;
}

.tut-empty p {
  color: var(--n-secondary);
  margin-bottom: 16px;
}

.tut-trail {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--n-secondary);
  margin-bottom: 10px;
}

.tut-trail a {
  color: var(--brand);
  text-decoration: none;
}

.tut-trail a:hover {
  text-decoration: underline;
}

/* The red thread: numbered markers down one line, each step's picture
   beneath its words. */
.tut-thread {
  position: relative;
  list-style: none;
  counter-reset: tutorial-step;
  padding-left: 52px;
  margin-top: 8px;
}

.tut-thread::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}

.tut-step {
  position: relative;
  counter-increment: tutorial-step;
  padding-bottom: 32px;
}

.tut-step::before {
  content: counter(tutorial-step);
  position: absolute;
  left: -52px;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: var(--n-lighter);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
}

/* The thread stops at the last marker instead of running on past it. */
.tut-step:last-child {
  padding-bottom: 0;
}

.tut-step-text {
  max-width: 68ch;
  padding-top: 4px;
  font-size: 16px;
  line-height: 26px;
  color: var(--n-primary);
}

.tut-picture {
  margin: 14px 0 0;
}

/* Its own size, never stretched: a small crop stays sharp and a wide
   screenshot shrinks to the column. Height is left alone, because shrinking
   a tall form to fit makes its words too small to read. */
.tut-picture img {
  display: block;
  width: auto;
  max-width: min(100%, 960px);
  height: auto;
  border: 1px solid var(--n-light);
  border-radius: var(--radius);
  box-shadow: var(--sh2);
  background: var(--white);
}

.tut-picture-missing {
  padding: 16px;
  font-size: 14px;
  color: var(--n-secondary);
  background: var(--white);
  border-radius: var(--radius);
}

/* The editor: the same page, with every part open to typing. */
.tut-title-field input {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--n-quaternary);
  border-radius: 0;
  background: transparent;
}

.tut-title-field input:focus {
  box-shadow: none;
  border-bottom-color: var(--brand);
}

.tut-editor-meta {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto 140px;
  gap: 20px;
  align-items: start;
  margin: 8px 0 12px;
}

.tut-role-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  min-height: 38px;
  align-items: center;
}

.tut-role-choices .chk {
  margin: 0;
}

.tut-thread-editing .tut-step {
  padding-bottom: 24px;
}

.tut-step-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.tut-step-row textarea {
  resize: none;
  overflow: hidden;
  min-height: 42px;
  font-size: 15px;
  line-height: 22px;
}

/* Quiet until the step is being worked on; always there on touch screens. */
.tut-step-tools {
  display: flex;
  flex: none;
  gap: 2px;
  padding-top: 5px;
  opacity: 0.5;
  transition: opacity 120ms;
}

.tut-step:hover .tut-step-tools,
.tut-step:focus-within .tut-step-tools {
  opacity: 1;
}

@media (hover: none) {
  .tut-step-tools {
    opacity: 1;
  }
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--n-secondary);
  cursor: pointer;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--n-light);
  color: var(--n-dark);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.tut-drop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1.5px dashed var(--n-quaternary);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--n-secondary);
  cursor: pointer;
}

.tut-drop svg {
  width: 16px;
  height: 16px;
}

.tut-drop:hover,
.tut-step-dropping .tut-drop {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-lt);
}

.tut-drop:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.tut-drop-full {
  margin-top: 10px;
}

.tut-picture-editing img {
  max-height: 340px;
  width: auto;
  max-width: 100%;
}

.tut-picture-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
}

.tut-picture-fields .fld {
  flex: 1;
  margin: 0;
}

/* The end of the thread in the editor is where the next step goes. */
.tut-step-add {
  counter-increment: none;
  padding-bottom: 0;
}

.tut-step-add::before {
  content: "+";
  border-style: dashed;
  font-size: 18px;
  font-weight: 400;
}

.tut-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--n-light);
  background: var(--n-lighter);
}

@media (width <= 700px) {
  .tut-editor-meta {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tut-thread {
    padding-left: 44px;
  }

  .tut-thread::before {
    left: 13px;
  }

  .tut-step::before {
    left: -44px;
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .tut-picture-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .tut-search {
    max-width: none;
  }
}