@import url("https://use.typekit.net/owy6sdn.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500&display=swap");
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Main application stylesheet
-----------------------------
All styles for the Interactive Classroom application.

*/
/* Variables */
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Design Tokens
Component: Design Tokens
-----------------------------
These are variables used throughout the components.

*/
/* IC Design Tokens */
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Design Tokens/Fonts
-----------------------------

Adobe Font Web Project — All Fonts set to “swap”

Agenda One (600, 700)
  Open Type features
    c2sc, frac, liga, lnum, onum, ordn, salt, smcp, ss##, subs, sups, tnum
  English and Spanish subsetting
Source Sans 3 (400, 400i, 600, 700)
  Open Type features
    dlig, frac, liga, onum, pnum, salt, ss##, subs, sups
  English and Spanish subsetting

*/
:root {
  --ic-font-family-text: source-sans-3, sans-serif; /* (400, 400i, 600, 700) */
  --ic-font-family-display: agenda-one, sans-serif; /* Headings (600, 700) */
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Design Tokens/Sizes and Spacing
-----------------------------

*/
/*
Type scale — 1.25
https://www.modularscale.com/?10&pt&1.25
*/
:root {
  --ic-mod-scale:      1.25;
  --ic-mod-scale-5:    calc(1rem*(var(--ic-mod-scale)*var(--ic-mod-scale)*var(--ic-mod-scale)*var(--ic-mod-scale)*var(--ic-mod-scale)));
  --ic-mod-scale-4:    calc(1rem*(var(--ic-mod-scale)*var(--ic-mod-scale)*var(--ic-mod-scale)*var(--ic-mod-scale)));
  --ic-mod-scale-3:    calc(1rem*(var(--ic-mod-scale)*var(--ic-mod-scale)*var(--ic-mod-scale)));
  --ic-mod-scale-2:    calc(1rem*(var(--ic-mod-scale)*var(--ic-mod-scale)));
  --ic-mod-scale-1:    calc(1rem*(var(--ic-mod-scale)));
  --ic-mod-scale-0:    1rem;
  --ic-mod-scale-neg1: calc(1rem/(var(--ic-mod-scale)));

  --ic-rhythm:         0.75; /* Vertical rhythm factor. Based on 1.5 line-height, halved between block margins before and after most elements. For controlling BLOCK margins. */
}
/* Common breakpoints */
:root {
  --ic-bp-nano-minus: 319px;
  --ic-bp-nano: 320px;
  --ic-bp-micro-minus: 410px;
  --ic-bp-micro: 411px;
  --ic-bp-min-minus: 536px;
  --ic-bp-min: 537px;
  --ic-bp-mid-minus: 767px;
  --ic-bp-mid: 768px;
  --ic-bp-mega-minus: 1023px;
  --ic-bp-mega: 1024px;
  --ic-bp-max-minus: 1319px;
  --ic-bp-max: 1320px;
}
/* Custom Media Declarations for Breakpoints */
/* Other common length values */
:root {
  --ic-border-radius: 0.4rem;
  --ic-border-width:  0.125rem;
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Design Tokens/Color
-----------------------------

*/
:root {

  /* Colors with "-our-" in their name are sourced from the OUR brand guidelines:
   https://open-up-cms.herokuapp.com/styleguides/branding/colors.html */

  --ic-our-primary-orange:       #f25e35;
  --ic-our-primary-dark-orange:  #d83e00; /* AA */
  --ic-our-primary-yellow:       #feb300;
  --ic-our-primary-dark-gray:    #3e2e2f;
  --ic-our-primary-gray:         #685d55;

  --ic-black:                    #000;
  --ic-dark-gray:                #4c4c4c; /* 70% black */
  --ic-aa-gray:                  #777; /* lightest gray AA with white */
  --ic-med-gray:                 #bfbfbf; /* 25% black */
  --ic-light-gray:               #ebebeb; /* 8% black */
  --ic-lightest-gray:            #f5f5f5; /* 4% black */
  --ic-white:                    #fff;

  --ic-accent:                   var(--ic-our-primary-dark-orange);
  --ic-text:                     var(--ic-our-primary-dark-gray);
  --ic-highlight:                var(--ic-our-primary-yellow);
  --ic-highlight-tint4:          #ffe199; /* Primary Yellow - 40% */
  --ic-highlight-tint3:          #ffe8b2; /* Primary Yellow - 30% */
  --ic-highlight-tint2:          #fff0cc; /* Primary Yellow - 20% */
  --ic-highlight-tint1:          #fff7e5; /* Primary Yellow - 10% */

  --ic-sheer-white-75:           #ffffffbf; /* 75% white */
  --ic-sheer-highlight-75:       #feb300bf; /* 75% highlight */
  --ic-sheer-orange-75:          #f25e35bf; /* 75% primary orange */
  --ic-sheer-accent-75:          #d83e00bf; /* 75% accent */

}
/* Core Styles */
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Core/Base
-----------------------------
Common properties for predictable and
accessible styling.

*/
* {
  box-sizing: border-box;
}
*::before,*::after {
    box-sizing: border-box;
  }
/*
Standard OUR classes for accessibly-hidden
and focus-visible items.
*/
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
*:focus {
  outline: none;
}
*:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.15em var(--ic-white),
    0 0 0 0.3em var(--ic-our-primary-dark-orange);
}
@media (forced-colors: active) {
  *:focus-visible {
    outline: 0.2em solid;
  }
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Core/Typography
-----------------------------

*/
html {
  line-height: calc(var(--ic-rhythm)*2);
  font-size: revert;
  text-size-adjust: none;
}
body {
  font-family: var(--ic-font-family-text);
  color: var(--ic-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1,h2,h3,h4,h5,h6) {
  font-family: var(--ic-font-family-display);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
p {
  margin: 0;
}
p + p {
    margin-block-start: 1rlh;
  }
.ic-hed-alpha {
  font-size: var(--ic-mod-scale-5);
  font-family: var(--ic-font-family-display);
  font-weight: 700;
  line-height: 1;
  margin-block: 0.5rlh;
}
.ic-hed-alpha:first-child {
    margin-block-start: 0;
  }
.ic-hed-alpha:last-child {
    margin-block-end: 0;
  }
.ic-hed-beta {
  font-size: var(--ic-mod-scale-4);
  font-family: var(--ic-font-family-display);
  font-weight: 700;
  line-height: 1;
  margin-block: 0.5rlh;
}
.ic-hed-beta:first-child {
    margin-block-start: 0;
  }
.ic-hed-beta:last-child {
    margin-block-end: 0;
  }
.ic-hed-gamma {
  font-size: var(--ic-mod-scale-3);
  font-family: var(--ic-font-family-display);
  font-weight: 700;
  line-height: 1;
  margin-block: 0.5rlh;
}
.ic-hed-gamma:first-child {
    margin-block-start: 0;
  }
.ic-hed-gamma:last-child {
    margin-block-end: 0;
  }
.ic-hed-delta {
  font-size: var(--ic-mod-scale-2);
  font-family: var(--ic-font-family-display);
  font-weight: 600;
  line-height: 1;
  margin-block: 0.5rlh;
}
.ic-hed-delta:first-child {
    margin-block-start: 0;
  }
.ic-hed-delta:last-child {
    margin-block-end: 0;
  }
.ic-hed-epsilon {
  font-size: var(--ic-mod-scale-1);
  margin-block: 0.5rlh;
  font-weight: 600;
  line-height: 1;
}
.ic-hed-epsilon:first-child {
    margin-block-start: 0;
  }
.ic-hed-epsilon:last-child {
    margin-block-end: 0;
  }
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Core/Layout
-----------------------------

*/
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--ic-white);
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Core/Turbo Frames
-----------------------------
Provides visual loading hints for active Turbo Frames.

*/
turbo-frame[busy]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--ic-border-radius);
  background: var(--ic-light-gray);
  opacity: 0.5;
  z-index: 1;
}
@media screen and (prefers-reduced-motion: no-preference) {
  turbo-frame[busy]::after {
    cursor: progress;
    background: linear-gradient(-0.25turn, transparent, var(--ic-lightest-gray), transparent),
                linear-gradient(var(--ic-light-gray), var(--ic-light-gray));
    background-size: 4em 100%,
                     100% 100%;
    background-repeat: no-repeat;
    background-position: -20% 0, 0 0;
    animation: loading-animation 1.5s infinite;
  }

  @keyframes loading-animation {
    to {
      background-position: 120% 0, 0 0;
    }
  }
}
/* Component Styles */
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Action Button
-----------------------------
Action Button are button-styled semantic `button`s or `a`s.
Presentation differs depending on the element.

*/
.ic-action-button {
  appearance: none;
  background-color: var(--ic-lightest-gray);
  border-radius: var(--ic-border-radius);
  padding: 0.75em 1em;
  color: var(--ic-text);
  width: 100%;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--ic-mod-scale-0);
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  text-align: start;
}
.ic-action-button:hover {
    color: var(--ic-accent);
  }
.ic-action-button > svg {
    width: var(--ic-mod-scale-1);
    height: var(--ic-mod-scale-1);
  }
.ic-action-button:has(svg) {
   justify-content: space-between;
  }
/* Link-specific action styles */
.ic-action-button:is(a) {
  padding: 0.75em 0 0.75em 1em;
}
.ic-action-button:is(a)::after {
    content: "";
    width: 0;
    height: 0;
    border-top: transparent solid 0.5em;
    border-right: transparent solid 0.75em;
    border-bottom: transparent solid 0.5em;
    border-left: var(--ic-text) solid 0.75em;
    align-self: center;
  }
.ic-action-button:is(a):not(:has(.ic-action-button__subtitle))::after {
    margin-inline-start: auto;
  }
.ic-action-button:is(a):hover::after {
    border-left-color: var(--ic-accent);
  }
.ic-action-button_arrowless:is(a) {
  padding: 0.75em 1em;
}
.ic-action-button_arrowless:is(a)::after { content: none }
/* Button-specific action styles */
.ic-action-button:is(button, input),
.ic-action-button_arrowless:is(a) {
  --ic-action-sheen-subtle: var(--ic-sheer-white-75);
  --ic-action-sheen-strong: var(--ic-white);
  font-family: var(--ic-font-family-text);
  border-width: var(--ic-border-width);
  border-style: solid;
}
:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]) {
    cursor: pointer;
    border-top-color: rgba(0, 0, 0, 0.125);
    border-right-color: rgba(0, 0, 0, 0.125);
    border-bottom-color: rgba(0, 0, 0, 0.375);
    border-left-color: rgba(0, 0, 0, 0.125);
    box-shadow:
      inset 0 0.0625em 0.1em 0.125em var(--ic-action-sheen-subtle), /* highlight (subtle) */
      0 0 0 0 transparent; /* shadow (none) */
  }
:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]):hover {
      box-shadow:
        inset 0 0.0625em 0 0.125em  var(--ic-action-sheen-strong), /* highlight gets sharper as button “rises” to meet the cursor */
        0 0.125em 0.25em 0.125em rgba(0, 0, 0, 0.0625); /* shadow gets softer and extends as button “rises” to meet the cursor */
    }
:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]):focus-visible {
      box-shadow:
        inset 0 0.0625em 0 0.125em  var(--ic-action-sheen-strong), /* highlight gets sharper as button “rises” to meet the cursor */
        0 0.125em 0.25em 0.125em rgba(0, 0, 0, 0.0625), /* shadow gets softer and extends as button “rises” to meet the cursor */
        /* layer with standard focus visible style */
        0 0 0 0.15em var(--ic-white),
        0 0 0 0.3em var(--ic-our-primary-dark-orange);
    }
:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]):focus-visible:active {
      box-shadow:
        inset 0 0.0625em 0.1em 0.125em  var(--ic-action-sheen-subtle), /* highlight (subtle) */
        0 0 0 0 transparent, /* shadow (none) */
        /* layer with standard focus visible style */
        0 0 0 0.15em var(--ic-white),
        0 0 0 0.3em var(--ic-our-primary-dark-orange);
    }
:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]):active {
      top: 0;
      box-shadow:
        inset 0 0.0625em 0.1em 0.125em  var(--ic-action-sheen-subtle), /* highlight (subtle) */
        0 0 0 0 transparent; /* shadow (none) */
      border-top-color: rgba(0, 0, 0, 0.375);
      border-right-color: rgba(0, 0, 0, 0.375);
      border-bottom-color: rgba(0, 0, 0, 0.125);
      border-left-color: rgba(0, 0, 0, 0.375);
    }
[type="submit"]:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]),.ic-action-button_default:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):not([disabled]) {
      font-weight: 700;
      --ic-action-sheen-subtle: var(--ic-sheer-orange);
      --ic-action-sheen-strong: var(--ic-our-primary-orange);
      background-color: var(--ic-accent);
      color: var(--ic-white);
    }
[disabled]:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)) {
    cursor: default;
    box-shadow: none;
    border-color: transparent;
    opacity: 0.65;
  }
[disabled]:is(.ic-action-button:is(button,input),.ic-action-button_arrowless:is(a)):hover {
      color: var(--ic-text);
    }
.ic-action-button__subtitle {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  padding: 0;
  color: var(--ic-accent);
  white-space: nowrap;
  vertical-align: baseline;
  margin-inline-start: auto;
}
[disabled] .ic-action-button__subtitle {
    color: var(--ic-text);
  }
.ic-action-button_justify-center {
  justify-content: center;
  padding: 0.75em 1em;
}
.ic-action-button_compact {
  font-size: var(--ic-mod-scale-neg1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 600;
  flex-wrap: nowrap;
  padding: 0.5em 0.75em;
}
.ic-action-button_compact:is(a) {
    padding: 0.5em 0 0.5em 0.75em;
  }
.ic-action-button_compact:is(a.ic-action-button_arrowless) {
    padding: 0.5em 0.75em;
  }
.ic-action-button_mini {
  font-size: var(--ic-mod-scale-neg1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 600;
  flex-wrap: nowrap;
  padding: 0.25em 0.375em;
}
.ic-action-button_mini:is(a) {
    padding: 0.25em 0 0.25em 0.375em;
  }
.ic-action-button_mini:is(a.ic-action-button_arrowless) {
    padding: 0.25em 0.375em;
  }
.ic-action-button_inline-flex {
  display: inline-flex;
  width: max-content;
  padding-inline: 2em;
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Action Group
-----------------------------
Action Groups are styled containers appearing in the
Dashboard and in the Action Dialog. Aside from the border
that defines them, and the optional title that labels them,
their primary role is for layout.

*/
.ic-action-group {
  margin: 1.5em auto 0;
  border: var(--ic-border-width) solid var(--ic-highlight);
  border-radius: var(--ic-border-radius);
  padding: 0.5em 1em;
  position: relative;
}
.ic-action-group:first-child {
    margin-block-start: 0;
  }
.ic-injected .ic-action-group {
    width: max-content;
    margin: 0;
    padding: 0.5em;
  }
.ic-action-group__title {
  position: absolute;
  left: 1.25em;
  top: -0.675em;
  margin: 0;
  padding: 0 0.25em;
  line-height: 1.1em;
  background: var(--ic-white);
  text-transform: uppercase;
  font-size: var(--ic-mod-scale-0);
  font-weight: 700;
  letter-spacing: 0.03em;
}
/*
  -- Choice List and Choices
  Text (title) + "Go" CTA (subtitle)
*/
ul.ic-action-group__choices {
  list-style: none;
  margin: 0.5em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}
.ic-injected ul.ic-action-group__choices {
    margin: 0;
    width: max-content;
    flex-wrap: nowrap;
    gap: 0.25em;
  }
.ic-action-group__choices-separator {
  color: var(--ic-highlight);
  border-style: dashed;
}
.ic-action-group__choice {
  display: flex;
  gap: 0.5em;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 18.5em;
  align-items: center;
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Assignment Details
-----------------------------
Container for assignment management forms.

*/
.ic-assignment-details {
  container-name: assignment-details;
  container-type: inline-size;
  border-radius: var(--ic-border-radius);
}
.ic-assignment-details + .ic-assignment-details {
    margin-block-start: 0.5rem;
  }
.ic-assignment-details__summary {
  padding: 1rem;
  font-weight: 600;
  background: var(--ic-lightest-gray);
  border-radius: var(--ic-border-radius);
  cursor: pointer;
}
details[open] .ic-assignment-details__summary {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    color: var(--ic-accent);
  }
.ic-assignment-details__summary:hover {
    color: var(--ic-accent);
  }
.ic-assignment-details__meta {
  display: inline-flex;
  flex-direction: column;
  width: calc(100% - 1rem);
  gap: 0.5rem;
}
@container assignment-details (min-width: 411px) {
  .ic-assignment-details__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
  }
}
.ic-assignment-details__title {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  text-wrap: balance;
  line-height: 1.15;
}
.ic-assignment-details__subtitle {
  font-size: var(--ic-mod-scale-neg1);
  letter-spacing: 0.025em;
  font-weight: 600;
}
.ic-assignment-details__count {
}
.ic-assignment-details__schedule {
  font-size: var(--ic-mod-scale-neg1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 600;
}
.ic-assignment-details__content {
  margin-block-start: var(--ic-border-width);
  padding: 1rem;
  background: var(--ic-lightest-gray);
  border-end-start-radius: var(--ic-border-radius);
  border-end-end-radius: var(--ic-border-radius);
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Assignment List
-----------------------------
A list of material assignments, with links to the C2C gradebook. Follows an
accessible “card list” pattern as described here:
https://perkins.caspio.com/dp/ca3640008726de167a974caaba70?Advice_ID=ADVICE_323
*/
.ic-assignment-list {
  container-name: assignment-list-container;
  container-type: inline-size;
  margin: 0;
  padding: 0.3em;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}
@container assignment-list-container (min-width: 411px) {
  .ic-assignment-list__assignment {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Dashboard
-----------------------------
The Dashboard welcomes the user to the application
and organizes the tasks before them. This is the only
component that will only live in the application
and not be injected into curriculum content.

*/
/*

Layout

*/
.ic-dashboard {
  display: flex;
  flex-direction: column;
  gap: 2rlh;
}
/*

Container Styles

*/
.ic-dashboard {
  padding: 7rem 1rem 0;
  margin: auto auto 5em;
  background: var(--ic-light-gray);
  background:
    url("/assets/texture-white-60a85447.svg"),
    linear-gradient(var(--ic-light-gray) 0%, var(--ic-light-gray) 18.75em, var(--ic-white) 18.75em,  var(--ic-white) 100%);
  background-size: 67em, 100%;
  background-repeat: repeat-x, no-repeat;
}
/*
  -- IC Dashboard hed
  Presumably an H1. Appears over the textured
  motif that signifies the IC Dashboard screens.
*/
.ic-dashboard__hed {
  margin: 0 auto;
  text-align: center;
}
/*
  -- IC Dashboard flash
  A simple message box that communicates urgent advice.
*/
.ic-dashboard__flash {
  margin: 0 auto;
  padding: 1em 1.5em;
  font-size: 1.2rem;
  text-align: center;
  background: var(--ic-white);
  border-radius: var(--ic-border-radius);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 0.3em 0.5em 0 rgba(0, 0, 0, 0.15);
}
.ic-dashboard__flash_alert {
  color: var(--ic-accent);
}
/*
  -- IC Dashboard inner
  Inner container for IC Dashboard fields and options.
  Appears as a “floating” white box. Applied to a fieldset element, when a
  fieldset is appropriate. Otherwise, applied to a div.
*/
.ic-dashboard__inner {
  min-width: 18em;
  max-width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}
.ic-dashboard__inner-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  flex: 1 1 min-content;
}
@media (min-width: 537px) {
  .ic-dashboard__inner-group:only-child {
    flex: 1 0 20em;
  }
}
/*
  -- Subhed
  Presumably an H2. Intentionally has the same appearance as
  the legend above. Use if a legend element doesn't make sense (eg. to style a
  subheading not contained within a fieldset, or to style a subheading that is
  not the first/only heading in a fieldset).
*/
.ic-dashboard__subhed {
  font-weight: 700;
  color: var(--ic-text);
}
/*
  -- Panels

*/
.ic-dashboard__panel {
  font-size: var(--ic-mod-scale-0);
  width: 100%;
  background-color: #FFF;
  padding: 1.5em;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 0.3em 0.5em 0 rgba(0, 0, 0, 0.15);
  position: relative;
  border-radius: var(--ic-border-radius);
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Dialog
-----------------------------
Dialogs are off-canvas containers triggered by buttons
within a Dashboard Panel or within a curriculum material view.

Preview Dialogs contain an iframe intended for pulling in content from C2C.

Action Dialogs (when viewport widths permit) slide in from the right and stay attached to the right side of the viewport.

Accessible animation approach from here: https://frontendmasters.com/blog/animating-dialog/

*/
html:has(.ic-dialog[open]:modal) {
  overflow: hidden;
}
.ic-dialog {
  overflow: scroll;
  padding: 0;
}
.ic-dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.25s;
  }
.ic-dialog[open]::backdrop {
    opacity: 1;
    transition: opacity 0.25s;
  }
@starting-style {
.ic-dialog[open]::backdrop {
      opacity: 0;
      transition: opacity 0.25s;
  }
    }
.ic-dialog_modal {
  width: calc(100vw - 2rem);
  height: calc(100vh - 2rem);
  max-width: 1280px;
  max-height: 800px;
  border: var(--ic-white) solid var(--ic-border-width);
  border-radius: var(--ic-border-radius);
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
  transition: overlay 0.25s allow-discrete;
  animation: close-modal 0.25s forwards;
}
.ic-dialog_modal[open] {
    animation: open-modal 0.25s forwards;
  }
.ic-dialog_panel {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-width: 100vw;
  margin: 0;
  border: initial;
  box-shadow: -0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.25);
  transition: display 0.25s allow-discrete,
              overlay 0.25s allow-discrete;
  animation: close-panel 0.25s forwards;
}
.ic-dialog_panel[open] {
    animation: open-panel 0.25s forwards;
  }
@media (min-width: 768px) {
    .ic-dialog_panel {
      width: var(--ic-bp-min);
      margin-inline-start: auto;
    }
  }
@media (min-width: 1024px) {
    .ic-dialog_panel {
      width: var(--ic-bp-mid);
    }
  }
.ic-dialog__iframe {
  border: none;
  display: block;
  width: 100%;
  height: 100%;
}
.ic-dialog__turboframe {
  display: block;
  margin: 2em;
}
.ic-dialog__turboframe turbo-frame[busy] {
  position: relative;
}
.ic-dialog__close {
  position: absolute;
  top: 1rlh;
  right: 1rlh;
  z-index: 99;
  display: inline-flex;
  place-content: center;
  appearance: none;
  cursor: pointer;
  padding: 0.2em;
  width: 2.25em;
  height: 2.25em;
  color: var(--ic-white);
  background-color: var(--ic-aa-gray);
  border: 0.15em var(--ic-white) solid;
  border-radius: 50%;
  box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.375);
}
.ic-dialog__close:hover {
    background-color: var(--ic-accent);
  }
.ic-dialog__close:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 0.15em var(--ic-our-primary-dark-orange),
      0 0 0.75rem 0 rgba(0, 0, 0, 0.375);
  }
.ic-dialog__close > svg {
    display: block;
    width: 1.5em;
    height: 1.5em;
  }
.ic-dialog__hed {
  margin: 0 0 1rlh;
}
@keyframes open-panel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes close-panel {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes open-modal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes close-modal {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: no-preference) {

  @keyframes open-panel {
    from {
      opacity: 0;
      transform: translateX(100%);
    }
    to {
      opacity: 1;
      transform: translateX(0%);
    }
  }

  @keyframes close-panel {
    from {
      opacity: 1;
      transform: translateX(0%);
    }
    to {
      opacity: 0;
      transform: translateX(100%);
    }
  }

}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Form
-----------------------------
Styles for forms, fieldsets, and input elements.

*/
/*

Simple two-column layout grid for
wider viewports. In narrower
viewports, the single column
grid ensures even spacing between
input groups.

*/
.ic-form {
  margin: 0;
  display: grid;
  font-size: var(--ic-mod-scale-0);
  grid-template-rows: min-content;
  gap: 1rlh;
}
@media (min-width: 537px) {
    .ic-form {
      grid-template-columns: 1fr 1fr;
    }
  }
.ic-form__hed {
  margin: 0;
}
.ic-form__subhed {
  margin: 0 0 1rem;
}
.ic-form__hgroup {

}
/*

Styles for bare input elements

*/
.ic-form label {
    font-weight: 600;
    display: block;
  }
:is(.ic-form label):has( + [disabled]),:is(.ic-form label):has( + [readonly]){
      opacity: 0.5;
    }
.ic-form input:not([type="button"],[type="submit"],[type="reset"],[type="file"]),.ic-form textarea,.ic-form select {
    font-size: var(--ic-mod-scale-0);
    font-family: var(--ic-font-family-text);
    font-weight: 500;
  }
.ic-form textarea,.ic-form input:not([type="button"],[type="submit"],[type="reset"],[type="file"]),.ic-form select {
    border-radius: var(--ic-border-radius);
    border: var(--ic-border-width) solid var(--ic-med-gray);
  }
.ic-form__rich-text-editor {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* This class causes any element to
span the two-column form grid, assuming
that element is a direct descendant of
the form. */
.ic-form__span-all-columns {
  grid-column-start: 1;
  grid-column-end: -1;
}
.ic-form__fieldset {

}
.ic-form__legend {

}
.ic-form__message {
  border: var(--ic-border-width) solid var(--ic-highlight);
  border-radius: var(--ic-border-radius);
  background-color: var(--ic-white);
  padding: 1rlh;
  display: flex;
  place-content: center;
}
.ic-form__schedule-group {
  display: grid;
  gap: 0.5em;
  background-color: var(--ic-white);
  border-radius: var(--ic-border-radius);
  border: var(--ic-border-width) solid var(--ic-med-gray);
  padding: 0.5em;
}
.ic-form__date-time-group {
  display: grid;
  gap: 0.5em;
}
@media (min-width: 537px) {
    .ic-form__date-time-group {
      grid-template-columns: 20% 1fr 1fr;
      gap: 0.5em;
    }
  }
.ic-form__boolean-group {

}
.ic-form__radio-group .ic-form__input-group {
    margin-inline-start: 1em;
  }
.ic-form__input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}
.ic-form__input-group label {
    flex: 0 0 max-content;
  }
.ic-form__input-group input,.ic-form__input-group select {
    flex: 1 1 auto;
  }
.ic-form__input-group textarea {
    flex: 1 1 100%;
  }
.ic-form__input-group input:is([type="checkbox"],[type="radio"]) {
    flex: 0 0 max-content;
  }
.ic-form__input-group + .ic-list-builder {
  margin-block-start: 1rlh;
}
.ic-form__button-group {
  display: flex;
  gap: 0.5em;
  width: fit-content;
  margin-inline-start: auto;
}
.ic-form__button-group_destructive {
  width: 100%;
  justify-content: space-between;
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: List Builder
-----------------------------

*/
.ic-list-builder {
  display: grid;
  grid-template-areas:
    "choices"
    "selections";
  line-height: 1rlh;
  background: var(--ic-white);
}
@media (min-width: 537px) {
    .ic-list-builder {
      grid-template-areas:
        "choices         selections";
      grid-template-columns: 1fr 1fr;
    }
  }
.ic-list-builder:has( > .ic-list-builder__container:only-of-type) {
    grid-template-areas:
      "selections";
    grid-template-columns: 1fr;
  }
.ic-list-builder:not(:first-child) {
    margin-block-start: 1rlh;
  }
.ic-list-builder__container {
  display: grid;
  grid-template-areas:
    "title"
    "list";
  grid-template-rows: min-content min-content;
  border: var(--ic-border-width) solid var(--ic-highlight);
  border-radius: var(--ic-border-radius);
  padding: 0.5em;
}
.ic-list-builder__container[data-side="left"] {
    border-block-end: none;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    grid-area: choices;
  }
.ic-list-builder__container[data-side="right"]:not(:only-of-type) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    grid-area: selections;
  }
.ic-list-builder__container:only-of-type {
    border-color: var(--ic-med-gray);
  }
@media (min-width: 537px) {
    .ic-list-builder__container[data-side] {
      border: var(--ic-border-width) solid var(--ic-highlight);
      border-radius: var(--ic-border-radius);
    }
    .ic-list-builder__container[data-side="left"] {
      border-inline-end: none;
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
    .ic-list-builder__container[data-side="right"]:not(:only-of-type) {
      border-inline-start: var(--ic-border-width) solid var(--ic-highlight);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
    .ic-list-builder__container:only-of-type {
      border-color: var(--ic-med-gray);
    }
  }
.ic-list-builder__hgroup {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: 0.5em;
  min-height: 1lh;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.5em;
}
.ic-list-builder__hgroup:has( ~ .ic-list-builder__list:empty) {
    margin-block-end: 0;
  }
.ic-list-builder__hed {
  grid-area: title;
  font-family: var(--ic-font-family-text);
  font-size: var(--ic-mod-scale-0);
  font-weight: 600;
  flex: 1 0 50%;
}
.ic-list-builder__hed-text::after {
    content: "\2004";
  }
.ic-list-builder__hed-counter {
  display: inline-flex;
  text-align: center;
  background-color: var(--ic-lightest-gray);
  border-radius: 50%;
  line-height: 1.5em;
  width: 1.5em;
  height: 1.5em;
  place-content: center;
  vertical-align: baseline;
}
.ic-list-builder__container:nth-of-type(2) .ic-list-builder__hed-counter {
    background-color: var(--ic-highlight-tint3);
  }
.ic-list-builder__hgroup .ic-action-button {
    flex: 0 0 9em;
  }
@media (min-width: 537px) {
        :is([data-side="right"] :is(.ic-list-builder__hgroup .ic-action-button)) > :first-child {
          order: 1;
        }
        :is([data-side="right"] :is(.ic-list-builder__hgroup .ic-action-button)) > :last-child {
          order: 0;
        }
    }
.ic-list-builder__list {
  grid-area: list;
  display: grid;
  gap: 0.125em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ic-list-builder__list-item {
}
.ic-list-builder__option {
  appearance: none;
  border: none;
  border-radius: var(--ic-border-radius);
  background-color: var(--ic-lightest-gray);
  font-family: var(--ic-font-family-text);
  color: var(--ic-text);
  font-weight: 500;
  width: 100%;
  padding: 0.25em;
  font-size: var(--ic-mod-scale-0);
  display: flex;
  gap: 0.25em;
  align-items: center;
  justify-content: space-between;
  text-align: start;
  cursor: pointer;
}
.ic-list-builder__option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.15em var(--ic-our-primary-dark-orange);
  }
:is([data-side="left"] .ic-list-builder__option):hover,:is([data-side="left"] .ic-list-builder__option):focus {
      background-color: var(--ic-highlight-tint2);
    }
[data-side="right"] .ic-list-builder__option {
    background-color: var(--ic-highlight-tint3);
  }
:is([data-side="right"] .ic-list-builder__option):hover,:is([data-side="right"] .ic-list-builder__option):focus {
      background-color: var(--ic-lightest-gray);
    }
@media (min-width: 537px) {
    :is([data-side="right"] .ic-list-builder__option) {
        justify-content: flex-start;
      }
        :is([data-side="right"] .ic-list-builder__option) span:first-child {
          order: 1;
        }
    }
.ic-list-builder__option[disabled] {
    cursor: unset;
    background-color: var(--ic-lightest-gray);
  }
.ic-list-builder__option-icon {
  height: 1em;
  width: 1em;
}
[data-side="right"] .ic-list-builder__option-icon { order: 0; }
[disabled] .ic-list-builder__option-icon { display: none; }
[data-side="left"] .ic-list-builder__option-icon[data-destination="left"] { display: none; }
[data-side="right"] .ic-list-builder__option-icon[data-destination="right"] { display: none; }
.ic-list-builder__option-icon > svg {
    width: 1em;
    height: 1em;
  }
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Loader
-----------------------------

A placeholder component, used to stand in during asynchronous loads.

*/
.ic-loader {
  background-color: var(--ic-light-gray);
}
.ic-loader_fill {
  display: block;
  height: calc(100% - 4rem);
  min-height: 4rem;
  width: auto;
  margin: 1rem;
  border-radius: var(--ic-border-radius);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .ic-loader_fill {
    cursor: progress;
    background: linear-gradient(-0.25turn, transparent, var(--ic-lightest-gray), transparent),
                linear-gradient(var(--ic-light-gray), var(--ic-light-gray));
    background-size: 4em 100%,
                100% 100%;
    background-repeat: no-repeat;
    background-position: -20% 0, 0 0;
    animation: loading-animation 1.5s infinite;
  }

  @keyframes loading-animation {
    to {
      background-position: 120% 0, 0 0;
    }
  }
}
/*---------------------------------------------------------

  COMPONENT: OUR INTERACTIVE CLASSROOM (“IC“) GLOBAL NAV

---------------------------------------------------------*/
/*---------------------------------------------------------

  COMPONENT: OUR IC GLOBAL NAV -- ROBOTO FONTS

  • Roboto 500

---------------------------------------------------------*/
/*---------------------------------------------------------

  COMPONENT: OUR IC GLOBAL NAV -- VARIABLES

---------------------------------------------------------*/
/* Color palette */
:root {

/* Colors with "-our-" in their name are sourced from the OUR brand guidelines:
   https://open-up-cms.herokuapp.com/styleguides/branding/colors.html */

--g-nav-global-our-primary-orange:       #f25e35;
--g-nav-global-our-primary-dark-orange:  #d83e00; /* AA */
--g-nav-global-our-primary-yellow:       #feb300;
--g-nav-global-our-primary-dark-gray:    #3e2e2f;
--g-nav-global-our-primary-gray:         #685d55;
--g-nav-global-white:                    #fff;

/*
  Typographic sizes
  Font sizes based on minor third (1.2) http://www.modularscale.com/?1&em&1.2
*/

--g-nav-global-font-base-min: 16px;
--g-nav-global-font-base-max: 20px;
--g-nav-global-fluid-em:      calc(14.72px + 0.4vw);
--g-nav-global-delta:         1.2em;
--g-nav-global-epsilon:       0.833em;

}
/*---------------------------------------------------------

  COMPONENT: OUR IC GLOBAL NAV -- BASE

---------------------------------------------------------*/
body {
  margin: 0;
  padding: 0;
}
.g-nav-global {
   font-size: var(--g-nav-global-font-base-min);
   font-family: "Roboto", "Trebuchet MS", Trebuchet, Tahoma, sans-serif;
   font-weight: 500;
   text-rendering: optimizelegibility; /* Can cause problems in some versions of Android */
   text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.45;

   /* Fluid from 16px to 20px between breakpoints */
}
@media (min-width: 537px) {
     .g-nav-global {
      font-size: clamp(16px, calc(14.72px + 0.4vw), 20px);
     }
   }
.g-nav-global * {
  box-sizing: border-box;
}
:is(.g-nav-global *)::before,:is(.g-nav-global *)::after {
    box-sizing: border-box;
  }
/* Standard OUR classes for accessible hidden and focus visible items */
/* Only necessary for the version of this CSS that lives within the C2C app. */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
*:focus {
  outline: none;
}
*:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.15em var(--g-nav-global-white),
    0 0 0 0.3em var(--g-nav-global-our-primary-dark-orange);
}
@media (forced-colors: active) {
  *:focus-visible {
    outline: 0.2em solid;
  }
}
/*---------------------------------------------------------

  COMPONENT: OUR IC GLOBAL NAV -- STYLES

---------------------------------------------------------*/
.g-nav-global {
  position: relative;
}
@media (min-width: 768px) {
    .g-nav-global {
      z-index: 8675309;
      width: 100%;
    }
  }
.g-nav-global__wrapper {
  padding: 0.75em 1em;
  background: var(--g-nav-global-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-shadow:
     0 0 0 1px #c0c0c0,
    -0.125em 0.125em 0.2em 0.125em rgba(0, 0, 0, 0.0625);
}
@media (min-width: 768px) {
    .g-nav-global__wrapper {
      padding: 0;
    }
  }
.g-nav-global__logolink {
  display: block;
  width: 7.3em;
  height: 2em;
  background-image: url("/assets/nav_global/OUR_IC_Logo_Dark_Short-d89d87d9.svg");
  background-repeat: no-repeat;
  background-size: auto 2em;
  background-position: left;
}
@media (min-width: 768px) {
    .g-nav-global__logolink {
      box-sizing: content-box; /* Add padding to the height, instead of figuring it into the height */
      padding: 0.83125em 0 0.83125em 1em;
      background-position: 1em;
    }
    .g-nav-global__logolink:focus-visible { /* Make focus visible style inset instead of outset (which clips the indicator at this breakpoint) */
      box-shadow:
        inset 0 0 0 0.15em var(--g-nav-global-our-primary-dark-orange),
        inset 0 0 0 0.3em #fff;
    }
  }
@media (min-width: 1024px) {
    .g-nav-global__logolink {
      width: 17em;
      background-image: url("/assets/nav_global/OUR_IC_Logo_Dark-7422160a.svg");
    }
  }
/* Narrow/Zoomed Viewports Only */
button.g-nav-global__toggle {
  -webkit-appearance: none;
  appearance: none;
  color: var(--g-nav-global-our-primary-dark-gray);
  font: inherit;
  font-size: var(--g-nav-global-epsilon);
  font-weight: 500;
  line-height: calc(var(--g-nav-global-fluid-em));
  text-transform: uppercase;
  cursor: pointer;
  background-color: var(--g-nav-global-white);
  border: 3px var(--g-nav-global-our-primary-yellow) solid; /* Normally, I prefer rems/ems for all dimensions, but browser rounding on an element this small results in different pixel widths across adjacent instances of this same element. The difference is noticeable and annoying.  */
  border-radius: calc(var(--g-nav-global-fluid-em)*1.25);
  padding: calc(var(--g-nav-global-fluid-em)*0.5) calc(var(--g-nav-global-fluid-em));
  width: calc(var(--g-nav-global-fluid-em)*5);
  margin: calc(0.25rem*var(--g-nav-global-fluid-em)) 0;
}
@media (min-width: 768px) {
    button.g-nav-global__toggle {
      display: none;
    }
  }
/* Narrow/Zoomed Viewports Only */
.g-nav-global__dialog {
  padding: 0.75em 1em;
  background: var(--g-nav-global-white);
  border: unset;
  text-align: right;
  z-index: 8675309;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
@media (min-width: 768px) {
    .g-nav-global__dialog {
      display: none;
    }
  }
/* Prevent double-scroll bar (dialog and body) in
shorter viewports that cause overflow for both */
body:has(.g-nav-global__dialog[open]) {
  overflow-y: hidden;
}
.g-nav-global__nav {
  display: none;
}
@media (min-width: 768px) {
    .g-nav-global__nav {
      display: unset;
    }
  }
.g-nav-global__list {
  list-style: none;
  margin: 0;
  padding: 2em;
  text-align: left;
  position: static;
}
@media (min-width: 768px) {
    .g-nav-global__list {
      --primary-menu-spacing: 1em;
      margin: 0;
      padding: 0 var(--primary-menu-spacing);
      display: flex;
      gap: var(--primary-menu-spacing);
      justify-content: flex-end;
      align-items: stretch;
      width: auto;
    }
  }
.g-nav-global__item {
  hyphens: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
    .g-nav-global__item {
      display: flex;
      align-items: stretch;
      position: relative;
    }
  }
.g-nav-global__link,
.g-nav-global__menu-toggle {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  appearance: none; /* necessary to override button styling */
  font-family: inherit; /* necessary to override button styling */
  border: none; /* necessary to override button styling */
  background: none; /* necessary to override button styling */
  font-size: 1em;
  line-height: 2;
  font-weight: 500;
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--g-nav-global-our-primary-dark-gray);
  padding: 0;
  transition: none;
  cursor: pointer;
}
@media (min-width: 768px) {
    :is(.g-nav-global__link,.g-nav-global__menu-toggle) {
      font-size: var(--g-nav-global-epsilon);
      padding: 0;
    }
  }
:is(.g-nav-global__link,.g-nav-global__menu-toggle):hover,:is(.g-nav-global__link,.g-nav-global__menu-toggle):active,:is(.g-nav-global__link,.g-nav-global__menu-toggle):focus,.is-current:is(.g-nav-global__link,.g-nav-global__menu-toggle) {
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 0.1875em;
    text-decoration-color: var(--g-nav-global-our-primary-yellow);
  }
/*

Modifier that places a dividing “pipe” before a list item

*/
@media (min-width: 768px) {
    .g-nav-global__list_divider {
      flex: 1 0 auto;
      border-left: var(--g-nav-global-our-primary-gray) solid 1px;
      padding-inline-start: var(--primary-menu-spacing);
    }
  }
/*

Nested submenu styles/overrides for wider viewports

*/
.g-nav-global__list_sub-menu {
  display: block;
  padding: 0.5em 0 0;
  z-index: 8675309;

  /* hidden by default */
  visibility: hidden;
  height: 0;
  opacity: 0;
  /* expose when aria-hidden is false */
}
.g-nav-global__list_sub-menu[aria-hidden = "false"] {
    opacity: 1;
    visibility: visible;
    height: auto;
  }
@media (min-width: 768px) {
    .g-nav-global__list_sub-menu {
      position: absolute;
      left: 0;
      top: 2.725em;
      right: 0;
      padding: 0.5em 0 1em;
      background: #fafafa;
      box-shadow:
        0 0 0 1px #c0c0c0,
        3px 3px 5px 1px rgba(0, 0, 0, .2);
    }
  }
.g-nav-global__menu-toggle:has(+ .g-nav-global__list_sub-menu) {
  position: relative;
  display: flex;
  align-items: center;
}
.g-nav-global__menu-toggle:has( + .g-nav-global__list_sub-menu)::before,.g-nav-global__menu-toggle:has( + .g-nav-global__list_sub-menu)::after {
    position: relative;
    --border-width: 0.29063em;
    --border-height:  0.3875em;
    top: calc(var(--border-height)/2);
    content: "";
    width: calc(var(--border-width)*2);
    height: calc(var(--border-height)*2);
    border-top: var(--border-height) solid var(--g-nav-global-our-primary-gray);
    border-left: var(--border-width) solid transparent;
    border-right: var(--border-width) solid transparent;
    border-bottom: var(--border-height) solid transparent;
  }
.g-nav-global__menu-toggle:has( + .g-nav-global__list_sub-menu)::before { /* the before pseudo-element simply balances out the ::after, so that the ::after appears to “hang” */
    display: none;
  }
@media (min-width: 768px) {
      :is(.g-nav-global__menu-toggle:has( + .g-nav-global__list_sub-menu)::before) {
        display: block;
        border-top-color: transparent;
        margin-inline-end: 0.25em;
      }
    }
.g-nav-global__menu-toggle:has( + .g-nav-global__list_sub-menu)::after {
    margin-inline-start: 0.25em;
  }
.g-nav-global__menu-toggle:has( + .g-nav-global__list_sub-menu):hover::after {
    border-top-color: var(--g-nav-global-our-primary-dark-orange);
  }
@media (min-width: 768px) {
    .g-nav-global__item:has(.g-nav-global__list_sub-menu) {
      padding-inline: var(--primary-menu-spacing);
      margin-right: calc(var(--primary-menu-spacing)*-1);
    }
  }
.g-nav-global__list-item_sub-menu {
  padding: 0;
  display: block;
}
.g-nav-global__link_sub-menu {
  display: block;
  font-size: var(--g-nav-global-epsilon);
  padding: 0;
}
.g-nav-global__link_sub-menu:hover,.g-nav-global__link_sub-menu:active,.g-nav-global__link_sub-menu:focus,.g-nav-global__link_sub-menu.is-current {
    text-decoration-thickness: 0.125em;
    text-underline-offset: 0.1875em;
  }
@media (min-width: 768px) {
    .g-nav-global__link_sub-menu {
      padding: 0.5em;
      margin: 0 0.5em;
      line-height: 1.35;
      text-align: center;
    }
  }
/*

Icon support

*/
.g-nav-global__link_notifications svg.g-nav-global__link-icon {
    display: none;
  }
@media (min-width: 768px) {
.g-nav-global__link_notifications {
    height: 2em;
    display: flex;
    place-items: center;
    --icon-width: 1.375em;
    --icon-height: 1.375em;
}
    .g-nav-global__link_notifications:hover {
      color: var(--g-nav-global-our-primary-dark-orange);
    }
    .g-nav-global__link_notifications svg.g-nav-global__link-icon {
      display: revert;
      width: var(--icon-width);
      height: var(--icon-height);
    }
  }
/* A dupe of our .sr-only rule
  set, but applied only to this
  element at this breakpoint */
@media (min-width: 768px) {
.g-nav-global__link_notifications .g-nav-global__icon-swap {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
  }
/*

Notification status badge

*/
[role=status]:not(:empty) + .g-nav-global__link_notifications::after {
  content: "";
  position: absolute;
  inset-block-start: 0.125em;
  inset-inline-start: calc(var(--icon-width) - 0.5em);
  inline-size: 0.75em;
  block-size: 0.75em;
  border-radius: 50%;
  background-color: var(--g-nav-global-our-primary-dark-orange);
  border: white 0.125em solid;
}
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Pseudo Tabs
-----------------------------
This component is a list of links (and possibly spans) that look and function
like tabs, but serve instead as a more traditional navigation element. This is
used in the side panel (within a Turbo Frame) to simulate a tabbed interface
across multiple pages.

*/
.ic-pseudo-tabs {
  display: grid;
  font-size: var(--ic-mod-scale-0);
  grid-template-rows: min-content;
  gap: 1rlh;
  margin: 1rem 0;
  container-type: inline-size;
  container-name: tabs;
}
.ic-pseudo-tabs__tablist {
  display: grid;
  grid-template-rows: min-content;
  gap: 0.5rem;
  min-width: 100%;
}
@container tabs (min-width: 35rem) {
  .ic-pseudo-tabs__tablist {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.ic-pseudo-tabs__tab {
  --ic-action-sheen-subtle: var(--ic-sheer-white-75);
  --ic-action-sheen-strong: var(--ic-white);
  appearance: none;
  text-decoration: none;
  cursor: pointer;
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--ic-font-family-text);
  font-size: var(--ic-mod-scale-0);
  color: var(--ic-text);
  font-weight: 600;
  line-height: 1;
  background-color: var(--ic-light-gray);
  padding: 0.75em 1em;
  border-style: solid;
  border-width: var(--ic-border-width);
  border-top-color: rgba(0, 0, 0, 0.125);
  border-right-color: rgba(0, 0, 0, 0.125);
  border-bottom-color: rgba(0, 0, 0, 0.375);
  border-left-color: rgba(0, 0, 0, 0.125);
  border-radius: var(--ic-border-radius);
  box-shadow:
    inset 0 0.0625em 0.1em 0.125em var(--ic-action-sheen-subtle), /* highlight (subtle) */
    0 0 0 0 transparent; /* shadow (none) */
}
.ic-pseudo-tabs__tab:hover,.ic-pseudo-tabs__tab[aria-selected="true"] {
    color: var(--ic-accent);
    box-shadow:
      inset 0 0.0625em 0 0.125em  var(--ic-action-sheen-strong), /* highlight gets sharper as button “rises” to meet the cursor */
      0 0.125em 0.25em 0.125em rgba(0, 0, 0, 0.0625); /* shadow gets softer and extends as button “rises” to meet the cursor */
  }
.ic-pseudo-tabs__tab[aria-selected="true"] {
    background-color: var(--ic-lightest-gray);
  }
.ic-pseudo-tabs__tab:focus-visible {
    color: var(--ic-accent);
    box-shadow:
      inset 0 0.0625em 0 0.125em  var(--ic-action-sheen-strong), /* highlight gets sharper as button “rises” to meet the cursor */
      0 0.125em 0.25em 0.125em rgba(0, 0, 0, 0.0625), /* shadow gets softer and extends as button “rises” to meet the cursor */
      /* layer with standard focus visible style */
      0 0 0 0.15em var(--ic-white),
      0 0 0 0.3em var(--ic-our-primary-dark-orange);
  }
.ic-pseudo-tabs__tab:focus-visible:active {
    box-shadow:
      inset 0 0.0625em 0.1em 0.125em  var(--ic-action-sheen-subtle), /* highlight (subtle) */
      0 0 0 0 transparent, /* shadow (none) */
      /* layer with standard focus visible style */
      0 0 0 0.15em var(--ic-white),
      0 0 0 0.3em var(--ic-our-primary-dark-orange);
  }
.ic-pseudo-tabs__tab:active {
    color: var(--ic-accent);
    top: 0;
    box-shadow:
      inset 0 0.0625em 0.1em 0.125em  var(--ic-action-sheen-subtle), /* highlight (subtle) */
      0 0 0 0 transparent; /* shadow (none) */
    border-top-color: rgba(0, 0, 0, 0.375);
    border-right-color: rgba(0, 0, 0, 0.375);
    border-bottom-color: rgba(0, 0, 0, 0.125);
    border-left-color: rgba(0, 0, 0, 0.375);
  }
/*

Project:   “IC” interactive-classroom (my.openupresources.org)
Role:      Component
Component: Ready to Grade Assignment List
-----------------------------
A list of material assignments which are ready to grade,
with links to the C2C gradebook. Follows an
accessible “card list” pattern as described here:
https://perkins.caspio.com/dp/ca3640008726de167a974caaba70?Advice_ID=ADVICE_323

*/
.ic-ready-to-grade {
  container-name: ready-to-grade-list;
  container-type: inline-size;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ic-ready-to-grade__assignment {
  padding: 1rem;
  background-color: var(--ic-white);
  border: var(--ic-border-width) solid var(--ic-light-gray);
  border-radius: var(--ic-border-radius);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@container ready-to-grade-list (min-width: 411px) {
  .ic-ready-to-grade__assignment {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.ic-ready-to-grade__title {
  font-family: var(--ic-font-family-text);
  font-weight: 600;
  font-size: var(--ic-mod-scale-0);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-wrap: balance;
  line-height: 1.15;
}
.ic-ready-to-grade__status {
  display: block;
  font-size: var(--ic-mod-scale-neg1);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 600;
}
.ic-ready-to-grade__go {
  flex: 0 1 max-content;
  text-wrap: nowrap;
}
/* TRIX EDITOR CUSTOM TAGS */
trix-editor {
  border: var(--ic-border-width) solid var(--ic-med-gray);
  border-radius: var(--ic-border-radius);
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
  width: 100%;
  flex: 1;
  background-color: white;
}
trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start; /* Changed from space-between for minimal toolbar */
  overflow-x: auto;
  padding: 0.2em; /* Added padding to create some space around buttons */
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 5px; /* Reduced from 10px */
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0.75vw; /* Reduced from 1.5vw */
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.65em; /* Reduced from 0.75em */
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.4em; /* Reduced from 0.5em */
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: black;
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2em; /* Reduced from 2.6em */
  height: 1.4em; /* Reduced from 1.6em */
  max-width: calc(0.7em + 3vw); /* Reduced from 0.8em + 4vw */
  text-indent: -9999px;
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%; /* Reduced to make icons slightly smaller */
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection,
trix-editor [data-trix-mutable] ::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection,
trix-editor [data-trix-mutable] ::selection {
  background: none;
}
trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight;
}
trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}
.ic-rte-content {
  line-height: 1.5;
}
.ic-rte-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.ic-rte-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.ic-rte-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.ic-rte-content [dir=rtl] blockquote,
.ic-rte-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.ic-rte-content li {
  margin-left: 1em;
}
.ic-rte-content [dir=rtl] li {
  margin-right: 1em;
}
.ic-rte-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.ic-rte-content img {
  max-width: 100%;
  height: auto;
}
.ic-rte-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.ic-rte-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.ic-rte-content .attachment a:hover,
.ic-rte-content .attachment a:visited:hover {
  color: inherit;
}
.ic-rte-content .attachment__caption {
  text-align: center;
}
.ic-rte-content .attachment__caption .attachment__name+.attachment__size::before {
  content: ' \2022 ';
}
.ic-rte-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.ic-rte-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.ic-rte-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.ic-rte-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.ic-rte-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.ic-rte-content .attachment-gallery.attachment-gallery--2 .attachment,
.ic-rte-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}