@import url('https://rsms.me/inter/inter.css');

/*
! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
  background: #f7f9f6;
  color: #18231d;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.container{
  width: 100%;
}

@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}

/* Card surface used for every panel of the dashboard: white, hairline border, soft radius/shadow. */

.panel{
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-shadow: 0 1px 1px #173e3705;
  --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Tiny uppercase section label used above headings/titles. */

.eyebrow{
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(102 115 107 / 0.8);
}

.btn-primary{
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(183 228 109 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(23 62 55 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-primary:hover{
  background-color: rgb(183 228 109 / 0.9);
}

.btn-primary:disabled{
  cursor: not-allowed;
  opacity: 0.4;
}

/* Quieter counterpart to .btn-primary, for actions that open a secondary view. */

.btn-secondary{
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(24 35 29 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.btn-secondary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 246 / var(--tw-bg-opacity));
}

.btn-secondary:disabled{
  cursor: not-allowed;
  opacity: 0.4;
}

/* -- Data tables --
     The state statistics and the action candidates are both read across a row, so the styling here is
     deliberately quiet: no vertical rules, hairline row separators, and numbers set in tabular figures
     so digits line up between rows and between the two grid-state panels. */

.data-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.data-table th{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: right;
  vertical-align: bottom;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.06em;
  --tw-text-opacity: 1;
  color: rgb(102 115 107 / var(--tw-text-opacity));
}

.data-table td{
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: right;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

/* Rows of the options table are the primary thing the user compares, so they get a hover affordance. */

.options-table tbody tr:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 246 / var(--tw-bg-opacity));
}

.options-table td:first-child,
  .options-table th:first-child{
  text-align: left;
}

/* -- Event log --
     A terminal-like stream, scrolled to the bottom by assets/scroll-logs-to-bottom.js. */

.log-stream{
  height: 100%;
  overflow-y: auto;
  white-space: pre-wrap;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 246 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(102 115 107 / var(--tw-text-opacity));
}

.log-stream > div{
  padding-top: 1px;
  padding-bottom: 1px;
}

/* -- Loading overlay --
     Shown from the moment a scenario is picked until it is loaded. Loading a scenario resets the grid2op
     env (and, on the first pick of a session, instantiates it and the policy along with it), which takes
     seconds -- long enough that without this the app looks stuck. Raised on the scenario being picked rather than once
     the env reset is done -- see `refresh` in app.py. */

.loading-overlay{
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(247 249 246 / 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms linear;
}

.loading-overlay.is-active {
  opacity: 1;
  /* Swallow clicks while the scenario is being loaded */
  pointer-events: auto;
}

/* Written by the refresh callback once the state monitor is updated for the loaded scenario. Hide
     immediately rather than fading over the first frames of the episode rollout. The two names are one
     and the same state: they alternate so React always sees a changed class name -- see `refresh`. */

.loading-overlay.is-complete-0,
  .loading-overlay.is-complete-1 {
  display: none;
}

.loading-spinner{
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 9999px;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
  border-top-color: #17845d;
  animation: loading-spinner-spin 0.7s linear infinite;
}

@keyframes loading-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -- Dashboard guide --
     Callouts stay at the edges while their arrows are attached to the live controls by
     assets/guide-overlay.js, so the relationship remains clear at every desktop size. The geometry is
     written here rather than as utility classes on the elements because the connectors are positioned
     from measured element rects at runtime. */

.guide-overlay{
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 70;
  --tw-text-opacity: 1;
  color: rgb(24 35 29 / var(--tw-text-opacity));
}

.guide-backdrop{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgb(24 35 29 / 0.3);
  -webkit-backdrop-filter: blur(1px);
          backdrop-filter: blur(1px);
}

.guide-heading{
  position: absolute;
  top: 2rem;
  left: 50%;
  z-index: 10;
  border-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  --tw-shadow: 0 5px 16px #2643341a;
  --tw-shadow-colored: 0 5px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transform: translateX(-50%);
}

.guide-close-btn{
  position: absolute;
  top: 7rem;
  left: 50%;
  z-index: 20;
  border-radius: 0.5rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(24 35 29 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(24 35 29 / var(--tw-bg-opacity));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  --tw-shadow: 0 5px 16px #2643341a;
  --tw-shadow-colored: 0 5px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transform: translateX(-50%);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.guide-close-btn:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(23 62 55 / var(--tw-bg-opacity));
}

.guide-note{
  position: absolute;
  z-index: 10;
  width: 17rem;
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.375;
  --tw-shadow: 0 5px 16px #2643341a;
  --tw-shadow-colored: 0 5px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.guide-note__title{
  margin-bottom: 0.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(23 132 93 / var(--tw-text-opacity));
}

.guide-note--scenario{
  top: 11rem;
  right: 5rem;
}

.guide-note--monitor{
  left: 5rem;
  top: 27%;
}

.guide-note--plans{
  right: 5rem;
  top: 27%;
}

.guide-note--grid{
  bottom: 5rem;
  left: 5rem;
}

.guide-connector{
  position: fixed;
  z-index: 10;
  height: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(183 228 109 / var(--tw-bg-opacity));
  transform-origin: left center;
}

/* The arrowhead at the target end of a connector. */

.guide-connector::after {
  content: '';
  position: absolute;
  height: 0px;
  width: 0px;
  top: -5px;
  right: -1px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #b7e46d;
}

/* Set on whichever control the active callout points at, by assets/guide-overlay.js. */

.guide-target{
  position: relative;
  z-index: 11;
  outline: 3px solid #b7e46d;
  outline-offset: 3px;
}

/* Too narrow for edge callouts with arrows: stack the notes and drop the connectors. */

@media (max-width: 900px) {
  .guide-heading {
    left: 1rem;
    right: 1rem;
    transform: none;
  }

  .guide-note{
    position: relative;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 0px;
    margin-bottom: 0.75rem;
    width: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .guide-note--scenario {
    margin-top: 10rem;
  }

  .guide-connector {
    display: none;
  }
}

/* -- Scenario progress -- */

.progress-track{
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(220 228 220 / var(--tw-bg-opacity));
}

.progress-fill{
  height: 100%;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(23 132 93 / var(--tw-bg-opacity));
  transition: width 200ms linear;
}

/* The plans/options table can be wider than its column at any desktop width (not just the
     mobile breakpoint below) -- give it its own horizontal scroll unconditionally rather than
     letting its Inspect/Confirm buttons run off the edge with no way to reach them. */

.responsive-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* -- Short desktop-width viewports (common mdpi/16:10 laptops: 1366x660, 1280x800, 1440x900) --
     Width stays above the mobile breakpoint, so the side-by-side layout is kept, but the fixed
     h-screen shell has no room for the state-monitor / plans panels: they get squeezed toward zero
     height with nothing to reach the lost content, since flex children have no floor here.
     Keep the shell itself at its normal h-screen size (that's what gives every flex descendant a
     definite height to stretch through) and instead let `.dashboard-content` scroll internally,
     with explicit min-heights -- at every level, not just the outer row -- so nothing collapses. */

@media (max-height: 900px) and (min-width: 901px) {
  .dashboard-content {
    overflow-y: auto;
  }

  /* `.min-h-0` is a Tailwind utility (min-height: 0) and, being generated after this
       hand-written block, wins any same-specificity tie against a bare class selector here --
       so every min-height floor below is scoped through its parent to outrank it. */

  .dashboard-content .dashboard-upper {
    flex: none;
    min-height: 24rem;
  }

  #state_monitor_panel,
    #action_plans_panel {
    min-height: 24rem;
  }

  #state_monitor_panel .monitor-content {
    min-height: 15rem;
  }

  #action_plans_panel > :last-child {
    min-height: 15rem;
  }

  #current_grid_panel {
    flex: none;
    min-height: 30rem;
  }
}

/* -- Compact dashboard --
     The desktop shell intentionally keeps its original fixed-height, two-up layout.  Below the
     breakpoint the same panels become a normal scrolling document: content is never forced out of a
     short viewport, tables retain readable columns, and the grid diagram gains its own useful height. */

@media (max-width: 900px) {
  /* Every bare class selector below doubles its class (`.foo.foo`) to outrank the Tailwind
       utility of the same specificity that already sits on these elements (h-screen, p-6, flex,
       min-h-0, gap-4, w-64, ...) -- a same-specificity tie is decided by source order, and the
       generated utilities layer comes after this hand-written block, so without the extra
       specificity these overrides silently lose and the compact layout never actually applies. */

  .app-page.app-page {
    height: auto;
    min-height: 100vh;
    padding: 0;
    display: block;
  }

  .app-shell.app-shell {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .app-topbar.app-topbar {
    height: auto;
    min-height: 4rem;
    padding: 0.75rem 1rem;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .app-topbar-controls.app-topbar-controls {
    width: 100%;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .app-topbar-controls > :first-child {
    width: 100%;
  }

  .app-topbar-controls > .w-px {
    display: none;
  }

  .dashboard-content.dashboard-content {
    min-height: 0;
    flex: none;
  }

  .dashboard-upper.dashboard-upper {
    flex: none;
    display: block;
  }

  #state_monitor_panel,
    #action_plans_panel {
    width: 100%;
    min-height: 23rem;
  }

  #state_monitor_panel {
    border-right: 0;
    border-bottom: 1px solid #dce4dc;
  }

  .monitor-content.monitor-content {
    min-height: 17rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #action_plans_panel > :last-child {
    min-height: 15rem;
  }

  #current_grid_panel {
    min-height: 39rem;
    flex: none;
  }

  .diagram-row.diagram-row {
    min-height: 39rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  .responsive-table .data-table {
    min-width: 48rem;
  }

  .guide-overlay {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 620px) {
  .app-brand .w-px,
    .app-topbar-controls .eyebrow {
    display: none;
  }

  .app-topbar-controls > :first-child {
    display: block;
    font-size: 0.875rem;
  }

  .app-topbar-controls > :first-child > :last-child {
    font-size: 0.875rem;
  }

  .app-topbar-controls > button {
    flex: 1 1 auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
  }

  .monitor-content.monitor-content {
    display: block;
    min-height: 31rem;
    padding-bottom: 1rem;
  }

  /* `height`, not `min-height`: the KPI plot is a Plotly graph sized via `height: 100%` on a
       descendant, and a percentage height only resolves against a *definite* ancestor height --
       a min-height-clamped auto size doesn't count, so Plotly falls back to its own 450px
       default and the chart spills out over whatever comes after it. */

  .monitor-kpi.monitor-kpi,
    .monitor-log.monitor-log {
    width: 100%;
    height: 14rem;
  }

  .monitor-log.monitor-log {
    margin-top: 1rem;
  }

  #state_monitor_panel {
    min-height: 37rem;
  }

  #current_grid_panel,
    .diagram-row.diagram-row {
    min-height: 0;
  }

  .diagram-row.diagram-row {
    display: block;
    padding-bottom: 1rem;
  }

  .diagram-main.diagram-main {
    height: auto;
    min-height: 21rem;
  }

  .diagram-main > :last-child {
    min-height: 15rem;
  }

  .diagram-sidebar.diagram-sidebar {
    width: 100%;
    padding-top: 1rem;
  }

  .responsive-zoom-container.responsive-zoom-container {
    width: 100%;
    height: 15rem;
  }

  .responsive-zoom-img.responsive-zoom-img {
    width: 100%;
    height: 100%;
  }

  .guide-heading {
    top: 1rem;
    padding: 0.75rem 1rem;
  }

  .guide-close-btn {
    top: 5.75rem;
  }

  .guide-note {
    margin-left: 1rem;
    margin-right: 1rem;
    padding: 0.875rem;
  }

  .guide-note--scenario {
    margin-top: 9.25rem;
  }

  #about_splash > div,
    #about_popup > div,
    #scenario_switcher > div,
    #session_terminated_popup > div {
    padding: 1rem;
  }

  #about_popup > div > div,
    #scenario_switcher > div > div,
    #session_terminated_popup > div > div {
    padding: 1.5rem;
    border-radius: 1.25rem;
  }

  #about_popup h2,
    #scenario_switcher h2,
    #session_terminated_popup h2 {
    font-size: 1.5rem;
  }
}

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.inset-0{
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.bottom-2{
  bottom: 0.5rem;
}

.right-0{
  right: 0px;
}

.right-3{
  right: 0.75rem;
}

.right-5{
  right: 1.25rem;
}

.top-0{
  top: 0px;
}

.top-5{
  top: 1.25rem;
}

.z-10{
  z-index: 10;
}

.z-20{
  z-index: 20;
}

.z-30{
  z-index: 30;
}

.z-50{
  z-index: 50;
}

.z-\[65\]{
  z-index: 65;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

.mb-1{
  margin-bottom: 0.25rem;
}

.mb-1\.5{
  margin-bottom: 0.375rem;
}

.mt-0{
  margin-top: 0px;
}

.mt-0\.5{
  margin-top: 0.125rem;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-7{
  margin-top: 1.75rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-9{
  margin-top: 2.25rem;
}

.block{
  display: block;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.hidden{
  display: none;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-20{
  height: 5rem;
}

.h-4{
  height: 1rem;
}

.h-5{
  height: 1.25rem;
}

.h-6{
  height: 1.5rem;
}

.h-7{
  height: 1.75rem;
}

.h-9{
  height: 2.25rem;
}

.h-\[34px\]{
  height: 34px;
}

.h-full{
  height: 100%;
}

.h-screen{
  height: 100vh;
}

.max-h-\[calc\(100vh-3rem\)\]{
  max-height: calc(100vh - 3rem);
}

.min-h-0{
  min-height: 0px;
}

.w-1\/2{
  width: 50%;
}

.w-28{
  width: 7rem;
}

.w-4{
  width: 1rem;
}

.w-5{
  width: 1.25rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[46\%\]{
  width: 46%;
}

.w-auto{
  width: auto;
}

.w-full{
  width: 100%;
}

.w-px{
  width: 1px;
}

.min-w-0{
  min-width: 0px;
}

.max-w-3xl{
  max-width: 48rem;
}

.max-w-\[1100px\]{
  max-width: 1100px;
}

.max-w-\[1600px\]{
  max-width: 1600px;
}

.max-w-\[1680px\]{
  max-width: 1680px;
}

.max-w-\[52rem\]{
  max-width: 52rem;
}

.max-w-full{
  max-width: 100%;
}

.max-w-sm{
  max-width: 24rem;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-\[2\]{
  flex: 2;
}

.flex-\[4\]{
  flex: 4;
}

.flex-none{
  flex: none;
}

.grow{
  flex-grow: 1;
}

.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize{
  resize: both;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.items-start{
  align-items: flex-start;
}

.items-center{
  align-items: center;
}

.items-baseline{
  align-items: baseline;
}

.items-stretch{
  align-items: stretch;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-1{
  gap: 0.25rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-y-4{
  row-gap: 1rem;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-y-auto{
  overflow-y: auto;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.break-words{
  overflow-wrap: break-word;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.border{
  border-width: 1px;
}

.border-b{
  border-bottom-width: 1px;
}

.border-l-\[3px\]{
  border-left-width: 3px;
}

.border-r{
  border-right-width: 1px;
}

.border-t{
  border-top-width: 1px;
}

.border-t-2{
  border-top-width: 2px;
}

.border-brand-green{
  --tw-border-opacity: 1;
  border-color: rgb(23 132 93 / var(--tw-border-opacity));
}

.border-brand-line{
  --tw-border-opacity: 1;
  border-color: rgb(220 228 220 / var(--tw-border-opacity));
}

.border-brand-red{
  --tw-border-opacity: 1;
  border-color: rgb(232 84 69 / var(--tw-border-opacity));
}

.bg-brand-green{
  --tw-bg-opacity: 1;
  background-color: rgb(23 132 93 / var(--tw-bg-opacity));
}

.bg-brand-ink\/30{
  background-color: rgb(24 35 29 / 0.3);
}

.bg-brand-line{
  --tw-bg-opacity: 1;
  background-color: rgb(220 228 220 / var(--tw-bg-opacity));
}

.bg-brand-paper{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 246 / var(--tw-bg-opacity));
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white\/90{
  background-color: rgb(255 255 255 / 0.9);
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-px{
  padding: 1px;
}

.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-10{
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-9{
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-9{
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

.pb-4{
  padding-bottom: 1rem;
}

.pb-5{
  padding-bottom: 1.25rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-5{
  padding-left: 1.25rem;
}

.pt-4{
  padding-top: 1rem;
}

.pt-5{
  padding-top: 1.25rem;
}

.pt-6{
  padding-top: 1.5rem;
}

.text-left{
  text-align: left;
}

.text-center{
  text-align: center;
}

.text-right{
  text-align: right;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-\[11px\]{
  font-size: 11px;
}

.text-\[13px\]{
  font-size: 13px;
}

.text-\[15px\]{
  font-size: 15px;
}

.text-\[17px\]{
  font-size: 17px;
}

.text-\[32px\]{
  font-size: 32px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold{
  font-weight: 700;
}

.font-extrabold{
  font-weight: 800;
}

.font-medium{
  font-weight: 500;
}

.font-semibold{
  font-weight: 600;
}

.uppercase{
  text-transform: uppercase;
}

.capitalize{
  text-transform: capitalize;
}

.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-none{
  line-height: 1;
}

.leading-normal{
  line-height: 1.5;
}

.leading-relaxed{
  line-height: 1.625;
}

.leading-snug{
  line-height: 1.375;
}

.leading-tight{
  line-height: 1.25;
}

.tracking-tight{
  letter-spacing: -0.025em;
}

.tracking-wide{
  letter-spacing: 0.025em;
}

.text-brand-green{
  --tw-text-opacity: 1;
  color: rgb(23 132 93 / var(--tw-text-opacity));
}

.text-brand-ink{
  --tw-text-opacity: 1;
  color: rgb(24 35 29 / var(--tw-text-opacity));
}

.text-brand-muted{
  --tw-text-opacity: 1;
  color: rgb(102 115 107 / var(--tw-text-opacity));
}

.text-brand-navy{
  --tw-text-opacity: 1;
  color: rgb(23 62 55 / var(--tw-text-opacity));
}

.text-brand-red{
  --tw-text-opacity: 1;
  color: rgb(232 84 69 / var(--tw-text-opacity));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.underline{
  text-decoration-line: underline;
}

.decoration-brand-line{
  text-decoration-color: #dce4dc;
}

.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-card{
  --tw-shadow: 0 1px 1px #173e3705;
  --tw-shadow-colored: 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-elevated{
  --tw-shadow: 0 5px 16px #2643341a;
  --tw-shadow-colored: 0 5px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.last\:border-b:last-child{
  border-bottom-width: 1px;
}

.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}

.hover\:bg-brand-line:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(220 228 220 / var(--tw-bg-opacity));
}

.hover\:bg-brand-navy:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(23 62 55 / var(--tw-bg-opacity));
}

.hover\:bg-brand-paper:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(247 249 246 / var(--tw-bg-opacity));
}

.hover\:decoration-brand-green:hover{
  text-decoration-color: #17845d;
}

.hover\:decoration-brand-ink:hover{
  text-decoration-color: #18231d;
}

@media (min-width: 640px){
  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  .md\:block{
    display: block;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:gap-x-12{
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .md\:border-l-0{
    border-left-width: 0px;
  }

  .md\:border-r-\[3px\]{
    border-right-width: 3px;
  }

  .md\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:pl-0{
    padding-left: 0px;
  }

  .md\:pr-4{
    padding-right: 1rem;
  }

  .md\:text-right{
    text-align: right;
  }
}

@media (min-width: 1024px){
  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}