/* The Single Mode version */
.ModeCard {
  --border-color: 0 0% 100%;
  max-width: 80ch;
  width: 100%;
  padding: 0;
  margin: 2rem auto;
  box-shadow: var(--shadow-elevation-medium);
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr 1rem;
  background-color: #fafafa;
  background-color: white;
  grid-gap: 0.5rem;
  transition: box-shadow 125ms ease-in-out;

  --shadow-color: 0deg 0% 0%;
  --shadow-elevation-low: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
    0.4px 0.9px 1.1px -1.2px hsl(var(--shadow-color) / 0.11),
    1px 2.1px 2.6px -2.5px hsl(var(--shadow-color) / 0.11);
  --shadow-elevation-medium: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.12),
    0.9px 1.7px 2.2px -0.8px hsl(var(--shadow-color) / 0.12),
    2.1px 4.3px 5.4px -1.7px hsl(var(--shadow-color) / 0.12),
    5.3px 10.5px 13.2px -2.5px hsl(var(--shadow-color) / 0.12);
  --shadow-elevation-high: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
    1.6px 3.2px 4px -0.4px hsl(var(--shadow-color) / 0.11),
    3px 5.9px 7.4px -0.7px hsl(var(--shadow-color) / 0.11),
    4.9px 9.8px 12.3px -1.1px hsl(var(--shadow-color) / 0.11),
    7.8px 15.7px 19.7px -1.4px hsl(var(--shadow-color) / 0.11),
    12.3px 24.5px 30.8px -1.8px hsl(var(--shadow-color) / 0.11),
    18.7px 37.3px 46.9px -2.1px hsl(var(--shadow-color) / 0.11),
    27.5px 55px 69.2px -2.5px hsl(var(--shadow-color) / 0.11);
}

.ModeCard:focus-within {
  box-shadow: var(--shadow-elevation-high);
  outline: 3px solid #eee;
}
/* 
.Card[data-editing] {
  box-shadow: var(--shadow-elevation-high);
  --border-color: var(--link-normal);
} */

.ModeCardSummary {
  grid-column: 2 / 2;
}

.ModeCardLabel {
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
  font-variant-caps: all-small-caps;
  display: block;
}

.ModeCardName {
  font-size: 1rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
  font-variant-caps: normal;
  display: block;
  grid-column: 2 / 2;
  margin: 0.25rem 0 1rem;
}
/* 
.ModeCard input {
  text-align: left;
  hyphens: manual;
  padding: 0;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
} */

.ModeCardBody {
  text-align: left;
  hyphens: manual;
  padding: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  grid-column: 2 / 2;
  margin-bottom: 1rem;
}
.ModeCardEditable {
  text-align: left;
  hyphens: manual;
  padding: 0;
  padding: 0.25rem;
  border: 1px solid #f0f0f0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 100%;
  grid-column: 2 / 2;
  margin: 0;
  font-variation-settings: inherit;
  font-feature-settings: inherit;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  height: 7rem;
}

.ModeCardDate {
  padding: 0.75rem 0rem 0.75rem;
  font-size: 0.85rem;
  color: #555;
  font-variant-caps: all-small-caps;
}

.ModeCardEdit {
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  display: flex;
}
[data-editing] .CardEdit {
  --shadow-color: 0 0% 31%;
  --shadow-elevation-high: 0.1px 0.3px 0.3px hsl(var(--shadow-color) / 0.4),
    0.7px 1.6px 1.8px -0.4px hsl(var(--shadow-color) / 0.39),
    1.3px 3px 3.4px -0.9px hsl(var(--shadow-color) / 0.37),
    2.3px 5.2px 6px -1.3px hsl(var(--shadow-color) / 0.35),
    3.8px 8.6px 9.9px -1.7px hsl(var(--shadow-color) / 0.34),
    6.2px 13.9px 16px -2.1px hsl(var(--shadow-color) / 0.32),
    9.6px 21.6px 24.8px -2.6px hsl(var(--shadow-color) / 0.3),
    14.3px 32.3px 37.1px -3px hsl(var(--shadow-color) / 0.28);
}

.ModeCardHeader {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / 2;
  align-items: center;
  color: #555;
  font-variation-settings: "wght" 400, "opsz" 8;
}

.ModeCardFooter {
  display: flex;
  justify-content: space-between;
  grid-column: 2 / 2;
  align-items: center;
  color: #555;
  padding: 0;
}

.ModeCardButtons {
  margin: 0;
}

.ModeCardTextButton {
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  color: hsl(var(--link-normal));
  font-family: inherit;
  padding: 0.25rem 0.5rem 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-caps: all-small-caps;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
}
.ModeCardTextButton:hover {
  color: hsl(var(--link-hover));
}
.ModeCardButton:hover {
  background-color: hsl(var(--link-hover));
  color: white;
}
.ModeCardButton {
  --border-color: 0 0% 94.1%;
  box-sizing: border-box;
  border: none;
  background-color: hsl(var(--border-color));
  font-family: inherit;
  padding: 0.45rem 2rem 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-elevation-high);
  transition: box-shadow 250ms ease-in-out;
  font-variant-caps: all-small-caps;
  font-weight: 300;
  font-size: 0.85rem;
  cursor: pointer;
  font-variation-settings: "wght" 600, "opsz" 8;
}

.ModeCardButton svg,
.ModeCardTextButton svg {
  margin-right: 1px;
}
.ModeCardButton.Primary {
  --link-color: var(--link-normal);
  background-color: hsl(var(--link-color));
  color: white;
  box-shadow: var(--shadow-elevation-high);
}
.ModeCardButton:hover {
  background-color: hsl(var(--link-hover));
  color: white;
}

.ModeCardButton:active {
  box-shadow: var(--shadow-elevation-medium);
}
.ModeCardSidebar {
  grid-column: 1 / 1;
  grid-row: 1 / 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #555;
  flex-direction: column;
  padding: 0.5rem 0;
  background-color: rgb(248 248 248);
}

.ModeCardGrabHandle {
  width: 0;
  border: none;
  border-left: 4px solid #e1e1e1;
  height: 100%;
  margin: 2.5rem 0;
}
.ModeCardGrabHandle:hover {
  cursor: grab;
}

.ModeCardHeader.Handle {
  display: grid;
  grid-template-columns: 1fr 5.5rem;
}

.ModeCardGrabHandle.Header {
  width: 5rem;
  border: none;
  margin: 0 auto;
  height: 0.5rem;
  display: inline-flex;
  padding: calc(0.25rem + 4px) 0.5rem 0.25rem;
  border-radius: 8px;
}
.ModeCardGrabHandle.Header:hover {
  background-color: #f0f0f0;
}

.ModeCardGrabHandle.Header::before {
  content: "";
  border-top: 4px solid #ccc;
  height: 0.25rem;
  width: 100%;
  display: block;
  margin: auto;
}

.CardNumber {
  text-align: right;
}

.ModeCardLinks {
  grid-column: 2 / 2;
  padding: 0.25rem 0.25rem;
}

.ModeCardAttachments {
  grid-column: 2 / 2;
  padding: 0;
}

.ModeCardLink {
  box-shadow: var(--shadow-elevation-low);
  padding: 0.5rem;
  padding-left: 4rem;
  background-color: #f9f9f9;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  margin: 0.5rem 0;
}
.ModeCardLink.Internal {
  background-color: white;
  border-radius: 0px;
}

.ModeCardLink.Attachment {
  background-color: white;
  border-radius: 0px;
  margin: 0.5rem -0.5rem;
  margin-right: -1.5rem;
}