/* === Base and Utility === */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #f0f2f5;
    display: flex;
    flex-direction: column;
}

/* The inspector, browser and editor are fixed-viewport layouts: they measure
   their panels against the window and scroll inside them, so the page itself
   must not scroll. The landing page is an ordinary document that runs well
   past the fold, and inherited that lock — it rendered with everything below
   the first screen unreachable. Pages that are documents opt out, and scroll
   below the navbar rather than as a whole: when body itself scrolled, its
   scrollbar narrowed the navbar on these pages alone and the links jumped
   sideways on the way in and out. */
body.page-flow > .page-content {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Elsewhere the wrapper must not exist for layout: the fixed-viewport pages
   size their panels as children of body. */
.page-content {
    display: contents;
}

.hidden {
    display: none !important;
}


/* === Navbar === */
.top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;
  border-bottom: 2px solid #dcdfe6;
  color: #3c4043;
  padding: 0 15px;
  height: 40px;
  /* body is a flex column: on the landing page, taller than the window, the
     bar was shrunk down to its content and came out shorter than elsewhere. */
  flex-shrink: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 20;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}


.intro .navbar-home {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: inherit;
}

/* Block, or the image sits on the text baseline and rides above the title. */
.navbar-logo img {
  display: block;
  height: 25px;
}

.navbar-title {
  font-weight: bold;
  color: #3c4043;
}

.navbar-title-accent {
  color: #4f46e5;
}

/* Fixed gaps rather than percentages of a 30%-wide box: the percentages only
   fitted four links, and a fifth pushed the last one off the right edge. */
.navbar-links {
    display: flex;
    flex-direction: row;
    margin-right: 1.5em;
    align-items: center;
    justify-content: flex-end;
}

.navbar-links a, .intro a {
    text-decoration: none;
    color: #3c4043;
    font-size: 0.95em;
    transition: color 0.2s;
}


.navbar-links a:hover {
  color: #1a73e8;
}

.navbar-links .navbar-land {
    display: flex;
    gap: 2em;
}

.navbar-links .navbar-land a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    padding: 3px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}

.navbar-links .navbar-land a:hover {
    color: #111;
    border-bottom: 2px solid #aaa;
}

.navbar-links .navbar-land a.active {
    color: #000;
    font-weight: 600;
    border-bottom: 2px solid #000;
}

/* The editor is the platform's centre: the one link drawn as a button. */
.navbar-links .navbar-land a.navbar-editor {
    color: #fff;
    background: #4f46e5;
    border-radius: 6px;
    padding: 3px 12px;
    border-bottom: none;
}

.navbar-links .navbar-land a.navbar-editor:hover,
.navbar-links .navbar-land a.navbar-editor.active {
    color: #fff;
    background: #4338ca;
    border-bottom: none;
}

/* On a phone the five links and the title do not fit in one 40px row. */
@media (max-width: 760px) {
    .top-navbar {
        height: auto;
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 6px 12px;
    }
    .navbar-links {
        margin-right: 0;
    }
    .navbar-links .navbar-land {
        flex-wrap: wrap;
        gap: 0.4em 1em;
    }
    .navbar-links .navbar-land a {
        font-size: 14px;
    }
}

/* === Layout Containers === */
.container {
    display: flex;
    overflow: hidden;
    flex: 1;
    height: calc(100vh - 42px);
}

.center-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.top-panels {
    flex: 1 1 70%;
    display: flex;
    max-height: 100%;
    min-height: 0;
}


/* === Left Panel === */
.left-panel {
    width: 280px;
    min-width: 280px;
    max-width: 40vw;
    flex-shrink: 0;
    background-color: #f7f8fa;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-right: 1px solid #dcdfe6;
    transition: width 0.3s ease-in-out;
    height: calc(100vh - 40px);
}

.left-panel.browser.collapsed {
    width: 75px; 
    max-width: 75px;
}

.left-panel.resizing {
  transition: none !important;
}

#left-panel.resizable-enabled .resizer {
  cursor: ew-resize;
}

.left-panel.collapsed {
    width: 55px;
    min-width: 55px;
    max-width: 55px;
}

.left-panel.collapsed .left-panel-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.left-panel.collapsed .panel-title,
.left-panel.collapsed .title-separator {
    display: none;
}

.left-panel .resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  cursor: default;
  z-index: 10;
  background-color: transparent;
}

body.noselect {
  user-select: none;
}

.left-panel-header {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 10px 0 15px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-bottom: 1px solid #a0a0a0;
    margin-bottom: 9px;
}

.hamburger-icon, .filter-icon {
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.hamburger-icon {
    font-size: 24px;
}

.hamburger-icon:hover, .filter-icon:hover {
    background-color: #e8eaed;
}

.left-panel.collapsed .hamburger-icon, .filter-icon {
    margin-right: 0;
}

.panel-title {
    font-size: 1em;
    font-weight: 500;
    color: #3c4043;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.collapsible-menu-content {
    padding: 0 15px 15px 15px;
    overflow: auto;
    flex: 1;
    opacity: 1;
    flex-direction: column;
    transition: opacity 0.2s ease-out 0.1s;
    position: relative;
    height: calc(100% - 50px);
}

.left-panel.collapsed .collapsible-menu-content {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.15s ease-in, visibility 0s linear 0.15s;
}

/* === Controls in Left Panel === */
#run-visualization {
    width: 100%;
    max-width: 230px;
    padding: 9px 12px;
    margin-bottom: 15px;
    box-sizing: border-box;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

#run-visualization:hover:not([disabled]) {
    background-color: #185abc;
}

#run-visualization:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
}

.text-area-group{
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 80%;
}

.text-area-group label {
    display: block;
    margin-top: 10px;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 0.85em;
    color: #5f6368;
}

.text-area-group textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 0.9em;
}

.text-area-group textarea:disabled {
    background-color: #f1f3f4;
    color: #70757a;
    cursor: not-allowed;
    border-color: #e8eaed;
}

.text-area-group textarea:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 1px #1a73e8;
    outline: none;
}

/* === Sticky Search === */
.sticky-search {
    position: sticky;
    top: 0;
    background: #f7f8fa;
    z-index: 10;
}

/* === Middle Panel === */
.middle-panel, .right-panel {
    flex: 1;
    background-color: #f0f2f5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
}

.middle-panel {
    flex-shrink: 0;
    min-width: 48vw;
}

.right-panel {
    flex-grow: 1;
}

.middle-panel-header, .right-panel-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent;
    box-sizing: border-box;
    border-bottom: 1px solid #a0a0a0;
}

.header-title-centered {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em 0;
}

.dropdown-title-container {
    display: flex;
    align-items: center;
    padding-top: 8px;
    width: 90%;
    overflow: hidden;
    flex-shrink: 0;
    gap: 10px;
}

.selector-wrapper {
    flex-grow: 1;
    flex-basis: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Styles for the buttons */
.camera-button,
.copy-spec-button,
.expand-button,
.download-button,
.modal-button {
    background-color: #1a73e8; 
    color: white; 
    border: none;
    padding: 10px 12px; 
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    height: 38px;
    box-sizing: border-box;
    position: relative;
}


.camera-button i,
.copy-spec-button i,
.expand-button i,
.download-button i {
    font-size: 1.2em;
}

.camera-button:not(:disabled):hover,
.copy-spec-button:not(:disabled):hover,
.download-button:not(:disabled):hover {
    background-color: #185abc; 
}

.expand-button, .cancel-button{
    background-color: #8c8484;
}

.expand-button:hover, .cancel-button:hover {
    background-color: #666060;
}

.camera-button:disabled,
.copy-spec-button:disabled,
.download-button:disabled {
    cursor: not-allowed; 
    opacity: 0.6;
    background-color: #a8a7a7;
}


.copy-spec-button {
    padding: 0; 
    overflow: hidden; 
}

.copy-spec-button .default-content,
.copy-spec-button .feedback-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 10px 12px;
    box-sizing: border-box;
    transition: transform 0.3s ease, opacity 0.3s ease;
}


.copy-spec-button .feedback-content {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100%); 
    opacity: 0;
    background-color: #28a745; 
    color: white;
}


.copy-spec-button.copied .default-content {
    transform: translateY(-100%); 
    opacity: 0;
}

.copy-spec-button.copied .feedback-content {
    transform: translateY(0); 
    opacity: 1;
}


.copy-spec-button .feedback-content i {
    margin-right: 5px;
}

.copy-spec-button.copied {
    cursor: default;
    pointer-events: none;
}

/* Tooltip container */
.global-tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10000;
}

/* Tooltip content */
.global-tooltip .tooltip-content {
  background: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  transform: translateY(0);
}

/* Arrow */
.global-tooltip .tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}


.dropdown-main-title {
    font-size: 1em;
    font-weight: 500;
    color: #3c4043;
    margin-right: 12px;
    white-space: nowrap;
}

#content-selector {
    max-width: 280px;
    padding: 7px 10px;
    font-size: 0.9em;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #dadce0;
    background-color: #fff;
    cursor: pointer;
}

#content-selector:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 1px #1a73e8;
    outline: none;
}

#content-selector:disabled {
    background-color: #f1f3f4;
    color: #70757a;
    border-color: #e8eaed;
    cursor: not-allowed;
}

.middle-panel-main-content {
    padding: 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
}

.middle-panel-main-content p,
.right-panel p {
    color: #70757a;
    font-size: 0.95em;
    padding: 20px;
    text-align: center;
}

/* === Right Panel === */
.right-panel {
    border-left: 1px solid #ccc;
}

/* Folded away (script.js), the reference view leaves a strip with its toggle
   and the chart takes the width. */
.right-panel.collapsed {
    flex: 0 0 55px;
}

.right-panel.collapsed .header-title-centered,
.right-panel.collapsed .right-panel-content-area {
    display: none;
}

.right-panel-header {
    position: relative;
}

.panel-toggle {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-toggle:hover {
    background-color: #e8eaed;
}

.right-panel.collapsed .panel-toggle i {
    transform: rotate(180deg);
}

.right-panel-content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* The reference view is one scrolling column: the figure at the panel's
   width, then the paper and what the example shows. It used to share out
   fixed percentages of the height and give the figure 60% of the width, so
   a wide crop came out 60px tall and longer text had nowhere to go. */
#vis2 {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.9em;
    line-height: 1.45;
    color: #3c4043;
}

.reference-title {
    font-size: 1.15em;
    font-weight: bold;
}

.image-wrapper {
    display: block;
    cursor: zoom-in;
}

.figure-frame {
    display: block;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4px;
}

.figure-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* The part of the figure the example reproduces. The wide shadow veils the
   rest of the figure, which stays readable as context. */
.figure-region {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #e8710a;
    border-radius: 3px;
    box-shadow: 0 0 0 9999px rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.figure,
.reference-type {
    font-size: 0.85em;
    color: #5f6368;
}

.figure {
    text-align: center;
}

.reference-citation a {
    margin-left: 0.3em;
    white-space: nowrap;
}

/* === Visualization === */
#vis {
    width: 100% !important;
    box-sizing: border-box;
    flex-grow: 1;
    max-height: 100%;
    overflow: hidden;
    margin-top: 16px;
    justify-content: center;

    gap: 0 1em;
    display: grid !important;
    grid-template-columns: 7fr 3fr;
    /* The controls take what they need and the chart gets the rest. A fixed
       35% for the bottom row left the chart about 200px short, which is what
       made tall charts such as BioFabric come out small. */
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: 
        "chart quality"
        "progress proc";

    /* !important beats the 38px right padding vega-embed gives a chart with
       an actions menu, which Pro-Ex removes. */
    padding: 0 16px !important;
}

#vis:not(:has(#quality-panel)) .chart-wrapper {
  grid-column: 1 / span 2 !important;
}

/* === Search Interface === */
mark {
    background-color: yellow;
    padding: 0;
}

#searchInput {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    width: 100%;
}

#searchInput.error {
    border-color: red;
}

#searchButton {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: transparent;
    width: auto;
    color: black;
}

#matchStatus {
    display: block;
    margin-top: 10px;
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 10px;
    color: #5f6368;
}

/* === Advanced Editor === */
#advanced-editor-container{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}


#advanced-spec-editor {
    height: 100%;
    max-height: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: monospace;
    white-space: pre;
    overflow-y: scroll;
}


/* === Toggle Switch === */
.control-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.7em;
}

#hierarchy {
    overflow: hidden;
    user-select: none;
}

#hierarchy .control-item {
    margin-bottom: 0.4em;
}

#hierarchy .tree-node {
    margin-bottom: 0.6em;
}

#hierarchy .tree-header {
    display: flex;
    align-items: center;
    padding: 0.6em;
    cursor: pointer;
    border-radius: 0.5em;
    transition: all 0.2s ease;
    background: #bdc1c63e;
}

#hierarchy .tree-header:hover {
    background: #bdc1c67e;
}

#hierarchy .tree-header.expanded {
    margin-bottom: 0.4em;
}

#hierarchy .tree-content {
    padding-left: 1.8em;
}

#hierarchy .toggle-icon {
    margin-right: 0.6em;
    font-size: 18px;
    color: var(--accent-teal);
    transition: transform 0.3s ease;
}

.expanded .toggle-icon {
    transform: rotate(90deg);
}

#hierarchy .node-name {
    flex: 1;
    font-weight: 500;
}

#hierarchy .node-count {
    background: rgba(91, 192, 190, 0.2);
    color: var(--accent-cyan);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}




.toggle-label {
    margin-left: 10px;
    font-size: 0.9em;
    color: #3c4043;
    user-select: none;
}


.toggle-switch {
    position: relative;
    display: inline-block;
    min-width: 44px;
    min-height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bdc1c6;
    transition: 0.3s;
}


.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background-color: #1a73e8;
}

input:checked + .slider-green {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* === Input Fixes === */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* === Footer === */
.footer-panel {
    min-height: 15vh; /* 15% of the view height */
    height: auto;
    flex-shrink: 0;
    padding: 10px;
    background-color: #f2f2f2;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.snapshot-row {
    display: flex;
    gap: 4%;
    overflow-x: auto;
    height: fit-content;
    margin: 1% 1% 0;
    align-items: center;
}

.snapshot {
    position: relative;
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4em;
    flex: 0 0 auto;
    height: fit-content;
    padding: 0.4em;
    font-size: 0.85em;
    width: 6em;
}

.snapshot-thumbnail {
    position: relative;
    width: 5.5em;
    height: 5.5em;
    background: linear-gradient(#ddd, #ccc);
    border-radius: 0.3em;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
}

.selectedThumb {
    border: 2px solid green;
}

.snapshot-label {
    display: block;
    text-align: center;
    font-weight: normal;
    font-size: 0.75em;
    outline: none;
    cursor: text;
    max-width: 100%;
    max-height: 2.4em;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
}

.snapshot-label:focus {
    border: 1px solid #007bff;
    background-color: rgba(0, 123, 255, 0.05);
    box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
}


/* === BROWSER === */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2em;
  padding: 2em;
  width: 95%;
  overflow-y: auto;
}

.gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s;
  min-width: 0;
}

.gallery-item:hover {
  transform: scale(1.03);
}

.image-card {
  cursor: pointer;
  overflow: hidden;
  border-radius: 0.5em;
  transition: transform 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-card img {
  width: 100%;
  height: auto;
  /*display: block;*/
  border-radius: 8px;
  object-fit: contain;
}

.image-title {
  margin-top: 8px;
  font-size: 14px;
  color: #444;
  text-align: center;
  word-break: break-word;
}

/* Overlay */
.overlay, #upload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}


.overlay-content {
  background: #fff;
  padding: 0 4vh 2em;
  width: 90vw;
  max-width: 90%;
  max-height: 90%;
  border-radius: 2vw;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#upload-overlay .overlay-content {
    width: 60vw;
}

.overlay-main-content {
    display: flex;
    flex-direction: row;
    gap: 2vw;
    max-height: 80vh;
    overflow: hidden;
}

.overlay-main-content .left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 45%;
}

.left-column img {
  max-width: 99%;
  max-height: 55vh;
  object-fit: contain;
  margin-bottom: 2em;
  border-radius: 0.8vw;
  border: 0.5px solid;
}

.overlay-main-content .right-column {
    flex: 1 1 auto;
    overflow: hidden;
}


#meta-title {
    font-size: 2.5em;
}


.right-column p {
    padding: 2vh;
}

.try-button, .upload-trigger-button, .submit-button {
  margin-top: 16px;
  padding: 10px 20px;
  background-color: #0077cc;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.try-button {
    margin-top: 0;
    padding: 1.2em 2em;
}

.try-button:hover, .upload-trigger-button:hover, .submit-button:hover {
  background-color: #005fa3;
}

/* === Form elements === */
#upload-form h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 2vh;
}

#upload-form label {
    display: block;
    margin-top: 1.5vh;
    font-weight: bold;
    font-size: 1em;
}

#upload-form label span {
    color: red;
    margin-left: 4px;
}

#upload-form input,
#upload-form textarea,
#upload-form select {
    width: 100%;
    padding: 1vh;
    margin-top: 0.5vh;
    border-radius: 0.5vw;
    border: 1px solid #ccc;
    font-size: 1em;
    box-sizing: border-box;
}

/* === Form buttons === */
.upload-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 3vh;
}

.upload-button-container {
    flex-shrink: 0; 
    padding: 1rem;
    width: 100%;
    text-align: center;
    border-top: 1px solid #ccc;
}

.submit-button,
.cancel-button {
    padding: 1vh 2vw;
    font-size: 1em;
    border: none;
    border-radius: 0.7vw;
    cursor: pointer;
    margin-top: 1.5em;
    color: white;
}

/* === FILTERS === */
.left-panel input[type="text"],
.left-panel select {
    width: 85%;
    margin-top: 0.2em;
    border: 1px solid #bbb;
    border-radius: 0.5em;
    font-size: 1em;
    align-self: start;
    padding: 0.5em;
}

.left-panel select {
    width: calc(85% + 6px);
}

#chart-count-label {
    margin: 1em;
    font-size: 0.95em;
    color: #444;
    text-align: center;
    font-weight: 600;
}

.order-row {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 92%;
}

.order-row label {
    flex: 0 0 auto;
}

.order-row select {
    flex: 1 1 auto;
}

/* === Landing page === */
.landing {
    max-width: 62em;
    margin: 0 auto;
    padding: 2.5em 1.5em 4em;
}

.landing-hero h1 {
    font-size: 3em;
    margin: 0 0 0.2em;
}

.landing-lede {
    font-size: 1.15em;
    line-height: 1.6;
    max-width: 46em;
    opacity: 0.9;
}

.landing-lede code {
    font-family: monospace;
    background: rgba(240, 180, 41, 0.15);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    margin-top: 1.8em;
}

.landing-cta {
    display: inline-block;
    padding: 0.6em 1.3em;
    border-radius: 8px;
    border: 1px solid #666;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, background 0.15s;
}

.landing-cta:hover {
    transform: translateY(-2px);
}

.landing-cta.primary {
    background: #eb901a;
    border-color: #eb901a;
    color: #1b1b1b;
    font-weight: 600;
}

.landing-section {
    margin-top: 3em;
}

.landing-section h2 {
    margin-bottom: 0.2em;
}

.landing-sub {
    opacity: 0.75;
    max-width: 46em;
    line-height: 1.55;
}

.landing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: 1em;
    margin-top: 1.2em;
}

.landing-card {
    display: block;
    padding: 1.1em;
    border: 1px solid #444;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}

.landing-card:not(.static):hover {
    transform: translateY(-3px);
    border-color: #eb901a;
}

.landing-card-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: #eb901a;
    color: #1b1b1b;
    font-weight: 700;
    margin-bottom: 0.6em;
}

.landing-card-title {
    font-weight: 600;
    margin-bottom: 0.35em;
}

.landing-card-blurb {
    font-size: 0.92em;
    line-height: 1.5;
    opacity: 0.78;
}

.landing-code {
    margin-top: 1.2em;
    padding: 1.1em 1.3em;
    border: 1px solid #444;
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
}

/* === Home page ===
   Full-width bands, content up to 1240px: the old single 62em column left most
   of a wide screen empty on both sides. */
.home h2 {
    margin: 0 0 0.2em;
    font-size: 1.6em;
}

.home-band {
    padding: 3em 0;
    background: #fff;
}

.home-band-tint {
    background: #f6f5fb;
}

.home-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.home .landing-lede code,
.home .landing-sub code {
    font-family: monospace;
    background: rgba(240, 180, 41, 0.15);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

.home-hero {
    padding: 3.5em 0 3em;
    background: linear-gradient(180deg, #fff 0%, #f6f5fb 100%);
}

.home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3em;
    align-items: center;
}

.home-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8em;
    font-weight: 600;
    color: #b8670a;
}

.home-title {
    display: flex;
    align-items: center;
    gap: 0.25em;
    font-size: 3.6em;
    letter-spacing: -0.02em;
    margin: 0.1em 0 0.25em;
}

.home-title-logo {
    flex: none;
    width: 0.95em;
    height: 0.95em;
}

/* Same rhythm as the mosaic tiles, so the logo's bars rise as the tiles land. */
.home-logo-arriving {
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0);
    animation: home-logo-rise 0.3s ease-out forwards;
    animation-delay: calc(var(--i) * 0.35s + 0.2s);
}

.home-logo-drawn {
    opacity: 0;
    animation: home-logo-settle 0.3s ease-out forwards;
    animation-delay: calc(var(--i) * 0.35s + 0.55s);
}

@keyframes home-logo-rise {
    to { transform: none; }
}

@keyframes home-logo-settle {
    to { opacity: 1; }
}

.home-title-accent {
    color: #4f46e5;
}

/* Six tiles fading in one after another, with a bar counting them: a chart of
   charts that arrives in chunks. */
.home-mosaic {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.home-mosaic-tile {
    display: block;
    margin: 0;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e3e1ee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(40, 30, 90, 0.07);
    opacity: 0;
    animation: home-chunk 0.5s ease-out forwards;
    animation-delay: calc(var(--i) * 0.35s + 0.2s);
}

.home-mosaic-tile img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
}

.home-mosaic-tile:hover {
    border-color: #a5b4fc;
    box-shadow: 0 8px 22px rgba(79, 70, 229, 0.18);
}

.home-mosaic-caption {
    display: block;
    font-size: 0.75em;
    padding: 0.35em 0.6em 0.5em;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-mosaic-progress {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: 3px;
    background: #e3e1ee;
    overflow: hidden;
}

.home-mosaic-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: #eb901a;
    animation: home-fill calc(var(--n) * 0.35s) steps(6, end) 0.2s forwards;
}

@keyframes home-chunk {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes home-fill {
    to { width: 100%; }
}

/* Every exemplar, scrolling past in an endless strip; it holds still under the
   pointer so a card can be clicked. */
.home-strip {
    overflow: hidden;
    background: #1f2430;
    padding: 18px 0;
}

.home-strip-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: home-strip 90s linear infinite;
}

.home-strip:hover .home-strip-track {
    animation-play-state: paused;
}

@keyframes home-strip {
    to { transform: translateX(calc(-50% - 7px)); }
}

.home-strip-card {
    flex: 0 0 auto;
    width: 220px;
    text-decoration: none;
    color: #e8e8f0;
    font-size: 0.82em;
}

.home-strip-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
    .home-mosaic-tile,
    .home-mosaic-progress span {
        animation: none;
        opacity: 1;
        width: 100%;
    }
    .home-logo-arriving,
    .home-logo-drawn {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .home-strip {
        overflow-x: auto;
    }
    .home-strip-track {
        animation: none;
    }
}

.home-tutorials {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1em;
    margin-top: 1.4em;
}

.home .landing-card {
    background: #fff;
    border-color: #dcdfe6;
}

/* The spec on the left; the chart and what the backend said on the right. */
.home-backend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    gap: 1.5em;
    align-items: start;
    margin-top: 1.5em;
}

.home-backend-spec .landing-code {
    margin: 0.8em 0;
    font-size: 0.84em;
    background: #fff;
    border-color: #dcdfe6;
}

.home-backend-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
    align-items: end;
}

.home-backend-controls label {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    font-size: 0.82em;
    font-family: monospace;
    font-weight: 700;
}

.home-backend-controls input {
    width: 7em;
    padding: 0.45em 0.5em;
    font: inherit;
    font-weight: 400;
    border: 1px solid #b9bcc6;
    border-radius: 6px;
}

#vis.home-backend-vis {
    margin-top: 0;
    min-height: 420px;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    padding: 10px !important;
    box-sizing: border-box;
}

.home-backend-idle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 0 2em;
    text-align: center;
    color: #777;
}

.home-backend-log-title {
    font-weight: 600;
    margin-bottom: 0.5em;
}

.home-backend-run #vis {
    margin-bottom: 1em;
}

.home-backend-log {
    list-style: none;
    margin: 0;
    padding: 0.8em 1em;
    min-height: 7em;
    background: #1f2430;
    color: #e8e8f0;
    border-radius: 10px;
    font-family: monospace;
    font-size: 0.8em;
    line-height: 1.7;
}

.home-backend-log .out { color: #ffc46b; }
.home-backend-log .in { color: #9fe3b0; }
.home-backend-log .muted { color: #9aa0b0; }
.home-backend-log .error { color: #ff9b94; }

.home-backend-own {
    font-size: 0.88em;
    line-height: 1.5;
    margin-top: 1.2em;
}

.home-backend-own p {
    margin: 0.3em 0;
}

.home-backend-own .landing-code {
    margin: 0.5em 0;
    padding: 0.7em 0.9em;
    background: #fff;
    border-color: #dcdfe6;
}

.home-backend-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    margin-top: 0.6em;
}

.home-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3em;
}

.home-split .landing-code {
    background: #fbfbfd;
    border-color: #dcdfe6;
}

.home-cases {
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    margin-top: 1.2em;
}

.home-case {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 1em;
    align-items: center;
    padding: 0.6em;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}

.home-case:hover {
    transform: translateY(-2px);
    border-color: #eb901a;
}

.home-case img,
.home-case-placeholder {
    width: 130px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.home-case-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f2430;
    color: #9fe3b0;
    font-family: monospace;
    font-size: 0.72em;
    text-align: center;
}

.home .landing-gallery-card {
    background: #fff;
    border-color: #dcdfe6;
}

.home-paper {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 3em;
    align-items: start;
}

/* The first page of the PDF: the paper itself, one click from the arXiv page. */
.home-paper-cover {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dcdfe6;
    box-shadow: 0 14px 34px rgba(40, 30, 90, 0.16);
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-paper-cover:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(40, 30, 90, 0.22);
}

.home-paper-cover img {
    display: block;
    width: 100%;
}

.home .home-paper-title {
    font-size: 1.35em;
    font-weight: 600;
    line-height: 1.4;
    margin: 0.4em 0 0.3em;
}

.home-paper-authors {
    margin: 0 0 0.8em;
    color: #444;
}

.home-paper-abstract {
    margin: 0 0 1em;
    color: #333;
    line-height: 1.6;
    max-width: 62em;
}

.home-paper-deeper {
    margin: 0;
    font-weight: 600;
    color: #4f46e5;
}

/* The page's index: under the strip, then pinned under the navbar while the
   rest scrolls (page-content is the scrolling box, so top: 0 is its top). */
.home-index {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #e3e1ee;
}

.home-index .home-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3em 1.6em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}

.home-index a {
    color: #444;
    font-weight: 500;
    font-size: 0.95em;
    text-decoration: none;
}

.home-index a:hover {
    color: #4f46e5;
}

.home-index a.home-index-editor {
    margin-left: auto;
    color: #4f46e5;
    font-weight: 600;
}

/* On a phone one row that scrolls sideways: wrapped, the pinned index took a
   third of the screen. */
@media (max-width: 760px) {
    .home-index .home-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }
}

/* Section headings land below the pinned index, not under it. */
.home [id] {
    scroll-margin-top: 3.2em;
}

/* Into the community gallery: its own line under the hero's buttons, so it
   reads as an invitation rather than a fourth button. */
.home-share {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 1.1em;
    padding: 0.6em 1.1em;
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.home-share:hover {
    background: #e0e7ff;
    transform: translateY(-1px);
}

.home-share i {
    font-size: 1.3em;
}

.home-contribute {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3em;
    align-items: center;
}

.home-repo {
    display: flex;
    align-items: center;
    gap: 0.8em;
    padding: 1em 1.4em;
    border-radius: 12px;
    background: #24292f;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(20, 20, 40, 0.18);
    transition: transform 0.2s;
}

.home-repo:hover {
    transform: translateY(-2px);
}

.home-repo i {
    font-size: 3em;
}

.home-repo-name {
    display: block;
    font-weight: 700;
    font-size: 1.1em;
}

.home-repo-blurb {
    display: block;
    font-size: 0.9em;
    color: #c8cad3;
}

.home-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2em;
    margin-top: 1.5em;
}

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

.home-person img,
.home-person-initials {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 0.8em;
    display: block;
    box-shadow: 0 6px 18px rgba(40, 30, 90, 0.12);
}

.home-person-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f2430;
    color: #fff;
    font-size: 2.4em;
    font-weight: 700;
}

.home-person-name {
    font-weight: 600;
}

.home-person-affiliation {
    font-size: 0.9em;
    color: #555;
    margin: 0.2em 0 0.4em;
}

.home-person-link {
    font-size: 0.85em;
}

.home-footer {
    padding: 2em 0 2.5em;
    background: #1f2430;
    color: #c8cad3;
    font-size: 0.9em;
}

.home-footer a {
    color: #fff;
}

@media (max-width: 1180px) {
    .home-tutorials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .home-hero-grid,
    .home-split,
    .home-backend,
    .home-paper,
    .home-contribute {
        grid-template-columns: minmax(0, 1fr);
    }
    .home-paper-cover {
        width: 180px;
    }
    .home-title {
        font-size: 2.6em;
    }
}

@media (max-width: 560px) {
    .home-wrap {
        padding: 0 16px;
    }
    .home-tutorials {
        grid-template-columns: minmax(0, 1fr);
    }
    #vis.home-backend-vis {
        overflow-x: auto;
    }
}

/* === Feedback page === */
.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    max-width: 40em;
}

.feedback-form label {
    font-weight: 600;
    margin-top: 0.8em;
}

.feedback-form textarea,
.feedback-form input[type="text"] {
    font: inherit;
    padding: 0.6em 0.75em;
    border: 1px solid #b9bec7;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}

.feedback-form textarea {
    resize: vertical;
}

.feedback-form button {
    font: inherit;
    cursor: pointer;
}

.feedback-optional {
    font-weight: 400;
    opacity: 0.7;
}

/* Off-screen rather than display:none, which some bots know to skip. */
.feedback-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.feedback-note {
    padding: 0.7em 1em;
    border-radius: 8px;
    max-width: 40em;
}

.feedback-note.ok {
    background: rgba(46, 160, 67, 0.12);
    border: 1px solid rgba(46, 160, 67, 0.5);
}

.feedback-note.error {
    background: rgba(207, 34, 46, 0.1);
    border: 1px solid rgba(207, 34, 46, 0.5);
}

/* === ProVega grammar helpers in the editor === */
.editor-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}

.editor-label-actions {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.grammar-status {
    font-size: 0.85em;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    white-space: nowrap;
}

.grammar-status.ok {
    background: rgba(21, 127, 59, 0.12);
    color: #157f3b;
}

.grammar-status.error {
    background: rgba(179, 38, 30, 0.12);
    color: #b3261e;
    cursor: help;
}

.grammar-reference-toggle {
    font-size: 0.85em;
    padding: 0.25em 0.7em;
    border-radius: 6px;
    border: 1px solid #d0d4da;
    background: #fff;
    color: #3c4043;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.grammar-reference-toggle:hover {
    background: #f1f3f4;
    border-color: #b5bac1;
}

.grammar-reference-toggle.active {
    background: #eb901a;
    border-color: #eb901a;
    color: #fff;
}

.grammar-reference {
    margin-top: 0.6em;
    max-height: 16em;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 0.5em;
    background: #fff;
}

#grammar-reference-filter {
    width: 100%;
    margin-bottom: 0.5em;
}

.grammar-entry {
    display: flex;
    gap: 0.6em;
    align-items: baseline;
    padding: 0.25em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.grammar-entry-key {
    flex: 0 0 auto;
    font-family: monospace;
    background: transparent;
    border: none;
    color: #b26a00;
    cursor: pointer;
    padding: 0;
}

.grammar-entry-key:hover {
    text-decoration: underline;
}

.grammar-entry-detail {
    font-size: 0.85em;
    line-height: 1.35;
}

.grammar-entry-path {
    font-family: monospace;
    opacity: 0.55;
}

.grammar-entry-type {
    opacity: 0.8;
}

.grammar-entry-refs {
    opacity: 0.45;
    font-style: italic;
}

.grammar-entry-empty {
    opacity: 0.6;
    padding: 0.5em;
}

/* Use case filter for the curated exemplars */
.use-case-filter {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    width: 92%;
    margin-bottom: 0.5em;
}

.use-case-filter > label:first-child {
    font-weight: 600;
}

.use-case-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    font-size: 0.95em;
}

/* Shown instead of a thumbnail for exemplars that have not been rendered yet */
.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    border-radius: 8px;
    background: repeating-linear-gradient(45deg, #eef0f4, #eef0f4 10px, #e5e8ee 10px, #e5e8ee 20px);
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #5f6368;
    font-size: 0.9em;
}



/* === EDITOR === */
/* Modal style */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 0 1em 1em 1em;
    border: 1px solid #888;
    width: 80%;
    max-width: 1000px;
    height: 80%;
    display: flex;
    flex-direction: column;
}

#editorModalEditor {
    flex: 1;
    border: 1px solid #ccc;
}

.modal-footer {
    text-align: right;
    margin-top: 10px;
    display: flex;
    gap: 5%;
    justify-content: center;
}

#upload-json {
    background-color: #eb901a; 
    display: flex; 
    align-items: center; 
    gap: 2px; 
    margin-top: 0px;
}

#openEditorBtn{
    background-color: #c99cf5; 
    margin-top: 0px;
}

#dropdown-toggle {
    border: none; 
    border-left: solid 1px #ccc; 
    background: #eb901a; 
    padding: 0 12px; 
    cursor: pointer; 
    color: white;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#upload-json:disabled, #openEditorBtn:disabled, #dropdown-toggle:disabled {
    background-color: #e0e0e0;
    color: #767575;
    cursor: not-allowed;
}

#uploadedFilesDropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    list-style: none;
    margin: 0;
    margin-top: 2.2px;
    padding: 0;
    z-index: 10000;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    background-color: #f7f8fa;
}

#uploadedFilesDropdown li {
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#uploadedFilesDropdown li:hover {
  background-color: #f0f0f0;
}
/* === Community gallery === */
.image-author {
    font-size: 12px;
    color: #777;
    text-align: center;
}

/* The submission form is taller than the old upload form; on a laptop screen
   it has to scroll inside the overlay rather than lose its buttons. */
#upload-overlay .overlay-content {
    overflow-y: auto;
    text-align: left;
    max-width: 44em;
}

.submit-intro {
    line-height: 1.5;
    color: #444;
}

.submit-intro code {
    font-family: monospace;
}

#upload-form .submit-optional {
    font-weight: 400;
    color: #777;
}

.submit-status {
    min-height: 1.2em;
    margin: 1em 0 0;
}

.submit-status.ok {
    color: #1e7b34;
    font-weight: 600;
}

.submit-status.error {
    color: #b3261e;
    font-weight: 600;
}

.landing-empty {
    opacity: 0.6;
    font-style: italic;
}

.landing-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    gap: 1em;
    margin-top: 1.2em;
}

.landing-gallery-card {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.7em;
    border: 1px solid #444;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, border-color 0.15s;
}

.landing-gallery-card:hover {
    transform: translateY(-3px);
    border-color: #eb901a;
}

.landing-gallery-card img,
.landing-gallery-card .image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

/* === The smallest backend, on the home page === */
.landing-backend {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5em;
    align-items: start;
}

@media (max-width: 900px) {
    .landing-backend {
        grid-template-columns: minmax(0, 1fr);
    }
}

.landing-backend .landing-code {
    margin-top: 0;
    font-size: 0.82em;
}

.landing-code-mark {
    background: rgba(240, 180, 41, 0.35);
    font-weight: 700;
}

.landing-backend-run .landing-actions {
    margin-top: 0;
}

/* #vis is the editor's grid, and ProVega places its panels by the grid's area
   names. Here it gets half the page, where the 3fr column is narrower than
   the 260px process panel, so everything stacks in one column instead. */
#vis.landing-backend-vis {
    max-height: none;
    margin-top: 1em;
    padding: 0 !important;
    min-height: 1em;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "chart" "quality" "progress" "proc";
}

#vis.landing-backend-vis:not(:has(#quality-panel)) .chart-wrapper {
    grid-column: 1 / -1 !important;
}

/* === Visits page (/stats) === */
.stats-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 3em;
    font-size: 1.1em;
}

.stats-totals b {
    font-size: 1.6em;
    color: #4f46e5;
}

.stats-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3em;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.stats-table th,
.stats-table td {
    text-align: left;
    padding: 0.35em 0.6em;
    border-bottom: 1px solid #e3e1ee;
}

.stats-bar {
    width: 40%;
}

.stats-bar span {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: #818cf8;
}

@media (max-width: 760px) {
    .stats-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* === Review page === */
.review-count {
    font-size: 0.6em;
    vertical-align: middle;
    padding: 0.1em 0.6em;
    border-radius: 1em;
    background: #e5e8ee;
}

.review-item {
    display: grid;
    grid-template-columns: 12em minmax(0, 1fr);
    gap: 1.2em;
    padding: 1em 0;
    border-top: 1px solid #dcdfe6;
}

.review-cover img,
.review-cover .image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
}

.review-meta {
    font-size: 0.88em;
    color: #666;
}

.review-description {
    line-height: 1.5;
}

.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.review-actions form {
    margin: 0;
}

.review-actions .landing-cta {
    font: inherit;
    font-size: 0.9em;
    padding: 0.4em 0.9em;
    background: none;
    cursor: pointer;
}

.review-actions .landing-cta.primary {
    background: #eb901a;
}

.review-preview #vis {
    max-height: none;
}

button.landing-cta {
    font: inherit;
    cursor: pointer;
}

button.landing-cta:disabled {
    opacity: 0.6;
    cursor: progress;
}

.modal-button.submit-gallery-button {
    background-color: #eb901a;
    color: #1b1b1b;
    font-weight: 600;
}

.modal-button.submit-gallery-button:hover {
    background-color: #d17d10;
}

.modal-button.submit-gallery-attention {
    animation: submit-gallery-pulse 1.4s ease-out 6;
}

@keyframes submit-gallery-pulse {
    0% { box-shadow: 0 0 0 0 rgba(235, 144, 26, 0.7); }
    100% { box-shadow: 0 0 0 14px rgba(235, 144, 26, 0); }
}