/* One palette for the three tool-screen headers, including the website's
 * wide-screen modal host. Match record history's palette and its existing
 * narrow header-action breakpoints. Other typography, handlers, disabled
 * states and unsaved-evaluation guards remain owned by the original flow. */
@layer peLocalTypography {
  body :is(#app, #classroomToolsContent12307)
  .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
  > .classroomFlowHead .classroomFlowHeadActions
  > :is([data-classroom-launcher-open], [data-classroom-tools-back]) {
    border-color: #ddb42a !important;
    background: linear-gradient(180deg, #ffdf67, #f5c944) !important;
    color: #513d00 !important;
    box-shadow: 0 4px 10px rgba(188, 143, 13, .14) !important;
    white-space: nowrap !important;
  }
  body :is(#app, #classroomToolsContent12307)
  .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
  > .classroomFlowHead .classroomFlowHeadActions
  > :is([data-classroom-exit], [data-classroom-tools-close]) {
    border-color: #cfdeea !important;
    background: #fff !important;
    color: #315069 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }
  body :is(#app, #classroomToolsContent12307)
  .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
  > .classroomFlowHead .classroomFlowHeadActions
  > :is([data-classroom-launcher-open], [data-classroom-tools-back]):focus-visible {
    outline: 3px solid rgba(181, 127, 0, .34) !important;
    outline-offset: 3px !important;
  }
  body :is(#app, #classroomToolsContent12307)
  .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
  > .classroomFlowHead .classroomFlowHeadActions
  > :is([data-classroom-exit], [data-classroom-tools-close]):focus-visible {
    outline: 3px solid #358bd0 !important;
    outline-offset: 3px !important;
  }
  @media (hover: hover) {
    body :is(#app, #classroomToolsContent12307)
    .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
    > .classroomFlowHead .classroomFlowHeadActions
    > :is([data-classroom-launcher-open], [data-classroom-tools-back]):hover {
      background: linear-gradient(180deg, #ffe681, #f7cf53) !important;
    }
    body :is(#app, #classroomToolsContent12307)
    .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
    > .classroomFlowHead .classroomFlowHeadActions
    > :is([data-classroom-exit], [data-classroom-tools-close]):hover {
      background: #f7fbfe !important;
    }
  }
  @media (max-width: 768px) {
    body #app
    .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
    > .classroomFlowHead > .classroomFlowHeadActions {
      display: grid !important;
      grid-template-columns: auto auto !important;
      justify-items: end !important;
      justify-content: flex-end !important;
      gap: 9px !important;
      width: auto !important;
      margin-left: 0 !important;
    }
    body :is(#app, #classroomToolsContent12307)
    .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
    > .classroomFlowHead > .classroomFlowHeadActions
    > :is([data-classroom-launcher-open], [data-classroom-tools-back], [data-classroom-exit], [data-classroom-tools-close]) {
      width: auto !important;
      min-height: 44px !important;
      padding: 0 10px !important;
      font-size: 10px !important;
    }
  }
  @media (max-width: 402px) {
    body #app
    .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
    > .classroomFlowHead > .classroomFlowHeadActions {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      justify-items: stretch !important;
      width: 100% !important;
    }
    body :is(#app, #classroomToolsContent12307)
    .classroomFlow:is([data-classroom-view="catchup"], [data-classroom-view="station"], [data-classroom-view="history"])
    > .classroomFlowHead > .classroomFlowHeadActions
    > :is([data-classroom-launcher-open], [data-classroom-tools-back], [data-classroom-exit], [data-classroom-tools-close]) {
      width: 100% !important;
      min-height: 44px !important;
    }
  }
}