:root {
  /* concave inverted radius corners  */
  --concave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M6 6H0C3.314 6 6 3.314 6 0V6Z' fill='var(--alwaysDark)'/%3E%3C/svg%3E");
}

.App {
  display: flex;
  flex-direction: row;
  height: 100dvh;
}
.AppSidebar {
  width: 250px;
  padding: 10px;
  background: var(--alwaysDark);
  position: relative;
  box-sizing: border-box;
  transition: 250ms margin-left ease;
  margin-left: -240px; /* show 10px */
}
.AppSidebar.active {
  margin-left: 0;
}
.sidebarButton {
  cursor: poiter;
  position: absolute;
  top: 16px;
  right: -16px;
  background: var(--alwaysDark);
  display: inline-flex;
  padding: 6px;
  border-radius: 0 8px 8px 0;
}
.sidebarButton::before,
.sidebarButton::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 6px;
  height: 6px;
  background-color: transparent;
  background-image: var(--concave);
}
.sidebarButton::before {
  top: -6px;
  transform: rotate(90deg);
}
.sidebarButton::after {
  bottom: -6px;
  transform: rotate(180deg);
}
.AppContent {
  flex: 1;
}

.appPage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--background);
  overflow-y: auto;
  /* background: var(--pageBackground) url(/static/assets/images/bf-symbol-angle-right_bw.jpg) no-repeat 0% 100% / auto 110%;
  background-blend-mode: multiply; */
}
.appHeader {
  padding: 14px 30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
}
.appHeaderLogo {
  height: 22px;
  aspect-ratio: 330 / 40;
}

.appFooter {
  padding: 20px;
  text-align: center;
}

.appCta {
  width: 100%;
  max-width: 550px;
  margin: 20px auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.appCta .text {
  font-family: var(--marketingFontFamily);
  font-size: 32px;
  line-height: 1;
  text-align: center;
}

.videoPlayer {
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
}
.videoPlayer video,
.videoPlayer .videoPlayerButtonsContainer {
  min-height: 350px;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.videoPlayer .videoPlayerButtonsContainer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  transition: 500ms opacity ease;
  opacity: 0;
}
.videoPlayerButtonsContainer.active {
  pointer-events: all;
  opacity: 1;
}

.videoPlayerButtons {
  position: absolute;
  top: 70%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: calc(100% - 40px);
}

@media (max-width: 600px), (max-height: 600px) and (orientation: landscape) {
  .videoPlayerButtons {
    width: calc(100vw - 40px);
    top: 60%;
  }
}


/* ContentOS */
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  width: 350px;
  padding: 12px;
}


/* VoiceSetup */
.voice-container {
  display: flex;
  justify-content: center;
  flex:1;
  align-items: center;
}

.voice-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 40%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 48px;
}
.voice-section-header {
  display: flex;
  gap: 10px;
}
.voice-section h2 {
  font-family: var(--marketingFontFamily);
  font-size: 2.5em;
  margin: 0;
}
.voice-section-text,
.voice-section-voice-style {
  text-align: left;
  color: var(--textMarketing);
}
.voice-section-voice-style {
  border-radius: 10px;
  padding: 15px;
  background-color: var(--text015);
}
.voice-section-voice-style.highlight{
  background-color: var(--fourtharyColor015);
}


/* Editor */
.editor-container{
  background-color: var(--background);
  height: 100vh;
}
.brand-voice {
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.left-side-bar{
  background-color: var(--pageBackground);
  min-width: 320px;
  flex:0;
  border-right: 1px solid var(--border);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  gap: 16px;
}
.sidebar-header {

}
.sidebar-logo {
  padding: 24px;
}
.instructions {
  border-top: 1px solid var(--border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--fourtharyColor015);
  border-radius: 10px;
  margin: 0 20px;
}
.instructions-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  margin-top: -8px;
}
.text-editor{
  flex:1;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.right-side-bar{
  background-color: var(--pageBackground);
  min-width: 300px;
  max-width: 300px;
  border-left: 1px solid var(--border);
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
.editor-actions {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-end;
  background: var(--alwaysDark);
}


/* Revisions */
.revision {
  position: relative;
  margin-bottom: 1.5em;
}
.revision-content {
  background: var(--fourtharyColor015);
  padding: 14px;
  border: 1px solid var(--fourtharyColor030);
  border-radius: 6px;
}
.revision-header {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--fourtharyColor);
  margin-bottom: 0.4em;
}
.revision-text {
  margin-right: 25px;
}
.revision-actions {
  position: absolute;
  top: -12px;
  right: 6px;
  background: var(--background);
  border: 1px solid var(--fourtharyColor030);
  border-top-color: transparent;
  border-radius: 0 0 6px 6px;
}
.revision-explanation-button {
  position: absolute;
  right: 6px;
  bottom: 2px;
}
.revision-explanation {
  background: var(--background);
  padding: 8px;
  font-size: 0.8em;
  border: 1px solid var(--fourtharyColor030);
  border-radius: 6px;
}

/* Twitter Ideator */
.line-separator-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  color: var(--textSecondary);
  align-items: center;
  gap: 5px;
}

.line {
  flex: 1;
  height: 1px;
  background: var(--textSecondary);
}

.user-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0 20px;
}

.user-handle {
  color: var(--textSecondary);
  font-size: .8em;
}

.user-card-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--border);
}
.steps{
  gap: 10px;
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.step {
  gap: 5px;
}
.step-number{
  background-color: var(--textSecondary015);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
}
.step-number-highlight{
  color: white;
  background-color: var(--fourtharyColor);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
}

/* CURRENT EVENTS */
.current-events-container {
  padding: 20px 48px;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
}
.current-event-section {
  margin-bottom: 30px;
}
.current-events-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.current-events-header-container-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subpageHeaderRoute {
  color: var(--textSecondary);
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
}
.current-events-header {
  display:flex;
  font-family: var(--marketingFontFamily);
  font-weight: normal;
  font-size: 42px;
  line-height: 1em;
  margin: 0;
}

.category {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* .card-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card {
  width: 100px;
  height: 110px;
  background-color: var(--textSecondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.card:hover{
  border: 1px solid var(--secondaryColor);
}

.image-card {
  background: url('/path-to-super-bowl-image.jpg') center/cover no-repeat;
  color: white;
  font-weight: bold;
}

.card .headline {
  color: white;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  box-sizing: border-box;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.headline .text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
} */

/* CURRENT EVENT CHOSEN PAGE */

.current-event-page-content {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.current-events-page-header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  margin-bottom: 30px;
}

.info-section {
  width: 48%;
}

.category {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bullet-list {
  list-style-type: disc;
  padding-left: 20px;
}

.current-event-section {
  margin-bottom: 30px;
}

.card-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.header-image {
  width: 96px;
  height: 102px;
  border-radius: 8px;
  background: linear-gradient(to top, #ddd, #fff);
}

.compose-section {
  background: #333;
  color: white;
  padding: 24px 48px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.compose-text {
  margin-bottom: 10px;
}

/* WORKSHOPPING  */
.container {
 padding:10px;
}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.back-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.header-title {
  font-size: 24px;
  font-weight: bold;
}

.category {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.original-section {
  margin-bottom: 20px;
}

.original-text {
  background: var(--textSecondary015);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.suggestions-section {
  margin-bottom: 20px;
}

.suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.suggestion-container {
  gap: 4px;
  align-items: baseline;
}

.suggestion-row {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.suggestion-card {
  background: var(--fourtharyColor015);
  padding: 10px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex:1;
}

.suggestion-header {
  display: flex;
  align-items: center;
}

.thumbs {
  font-size: 18px;
}

.suggestion-number {
  font-weight: bold;
  font-family: var(--marketingFontFamily);
  font-size: 36px;
  min-width: 1em;
  text-align: center;
}

.suggestion-text {
  font-size: 16px;
}

.suggestion-details {
  font-size: 14px;
  background: var(--pageBackground);
  border: 1px solid var(--border);
  padding: 20px 32px;
  border-radius: 6px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.suggestion-details-close {
  position: absolute;
  top: -1px;
  right: -1px;
}
.suggestion-details-explanation-title {
  margin-bottom: 4px;
  font-weight: bold;
}

.footer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #333;
  padding: 16px;
  color: var(--textSecondary);
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.engagement-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.engagement-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  font-family: var(--fontFamilyMono);
}

/* SESSIONS */
.session-container {
  gap: 5px;
  display: flex;
  flex-direction: column;
}

/* REVISIONS  */
.revision-item-original-text {
  position: relative;
  font-size: 0.8em;
}
.revision-item-original-text.collapsed {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.revision-item-instruction {
  background: var(--background);
  border: 1px solid var(--primaryColor015);
  border-left: 4px solid var(--primaryColor);
  padding: 4px 8px;
  margin: 2px 0;
}
.revisions-container {
  max-width: 300px;
}

.revision-item-title {
  
}

.revision-item-title.done {
  color: var(--textSecondary);
}

.revision-item-subtitle {
  font-weight: 500;
}
.revision-item-small-title {
  font-weight: 500;
  font-size: 0.9em;
}

.revision-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.revision-box {
  background: var(--background);
  border: 1px solid var(--secondaryColor015);
  border-left: 4px solid var(--secondaryColor);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 8px;
}
.revision-item-explanation {
  font-size: 0.8em;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 8px;
  border-radius: 8px;
  margin: 8px 0;
}

/* CONTENT */
.content-item {
  padding: 14px;
}

/* Plinko */

.plinko {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: var(--background);
}

.plinko-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plinko-scene {
  cursor: pointer;
  position: relative;
  margin-right: 75px;
}

.plinko-scene canvas {
  position: relative;
  z-index: 2;
  opacity: 0;
}
.plinko-scene .fade {
  opacity: 0;
}
.plinko-scene.active .fade,
.plinko-scene.active canvas {
  transition: 500ms opacity ease;
  opacity: 1;
}

.plinko-controls {
  margin: 24px;
  margin-left: 75px;
  text-align: left;
}

.plinko-controls h2 {
  font-family: var( --marketingFontFamily);
  font-size: 42px;
  line-height: 1;
  margin: 0.8em 0 0;
}

.plinko-controls-text {
  margin-bottom: 0.6em;
}

.temperature {
  font-family: var(--marketingFontFamily);
  color: var(--fourtharyColor);
  font-size: 32px;
  line-height: 1;
}

.plinko-stat {
  font-size: 24px;
  font-family: var(--marketingFontFamily);
  font-weight: bold;
  display: flex;
  gap: 14px;
}
.plinko-stat-header {
  font-weight: 400;
}

.plinko-container {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
}

.plinko-puck {
  position: absolute;
  top: 16px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: grab;
  z-index: 10;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plinko-puck:hover {
  border: 1px solid var(--fourtharyColor);
}

.bin-separator {
  position: absolute;
  top: 4px;
  width: 4px;
  height: calc(100% - 8px);
  background-color: var(--primaryColor);
  border-radius: 4px;
}

.sideTitle {
  position: absolute;
  left: 100%;
  margin-left: 16px;
  top: calc(50% - 12px);
  font-family: var(--marketingFontFamily);
  font-size: 24px;
  line-height: 1;
}
.sideTitle.prompt {
  color: var(--fourtharyColor);
}
.sideTitle.model {
  color: var(--secondaryColor);
}
.sideTitle.output {
  color: var(--primaryColor);
}

.starBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.starBox.star3 div:nth-child(2) {
  margin-bottom: 25px;
}
.starBox.star3 div:nth-child(1),
.starBox.star3 div:nth-child(3) {
  margin-top: 20px;
}
.starBox.star3 div:nth-child(1) {
  margin-right: -12px;
}
.starBox.star3 div:nth-child(3) {
  margin-left: -12px;
}

