app.css

/* Global component styling, paired with the landing graphic's scoped atlas.css. */
.gradio-container { max-width:1280px!important; margin:auto!important; padding:24px 20px 40px!important; color-scheme:light; }
#eukaryotic-atlas { padding:0!important; border:0!important; background:transparent!important; }
.gradio-container .atlas-panel { background:transparent; border:0; border-radius:0; padding:22px 20px; box-shadow:none; gap:16px; margin-top:0; }
.gradio-container .atlas-panel + .atlas-panel { border-top:1px solid #e3e9dc; }
.gradio-container .quiet-note { color:#647467; font-size:12px; line-height:1.7; }
.gradio-container .quiet-note p { color:#647467; font-size:12px; line-height:1.7; }
.gradio-container .action-button { align-self:flex-end; min-height:46px; }
/* The jump out of the atlas should read as the one action on the page, not as
   another quiet control among the disclosures. */
.gradio-container #atlas-open-database { align-self:stretch; width:100%; margin-top:4px; background:#1f5740; border-color:#1f5740; color:#f6faf3; font:600 15px/1.3 Arial,Helvetica,sans-serif; letter-spacing:.2px; }
.gradio-container #atlas-open-database:hover { background:#143c2b; border-color:#143c2b; }
.gradio-container #atlas-open-database[disabled], .gradio-container #atlas-open-database:disabled { background:#e7eee0; border-color:#dbe3d3; color:#7d8c79; }
.gradio-container .atlas-panel > .form { border:0; background:transparent; box-shadow:none; }
.gradio-container .atlas-panel .form { border-radius:14px; }
.gradio-container .atlas-panel button { transition:background-color .15s, border-color .15s; }
.gradio-container button:focus-visible,.gradio-container a:focus-visible { outline:2px solid #327555; outline-offset:3px; }
.gradio-container .prose a { text-underline-offset:3px; }
.gradio-container .prose code { color:#315641; }
/* Gradio's block padding sat around the whole disclosure, so a one-line title
   occupied 76px. The frame is the button; the body carries its own padding. */
.gradio-container .atlas-disclosure { border:1px solid #e3e9dc; border-radius:12px; box-shadow:none; margin-top:8px; padding:0; background:#fbfcf7; }
.gradio-container .atlas-disclosure > button.label-wrap { padding:11px 14px; min-height:0; }
.gradio-container .atlas-disclosure > button.label-wrap > span:first-child { font:600 14px/1.4 Arial,Helvetica,sans-serif; color:#2a4a38; }
.gradio-container .atlas-disclosure > button.label-wrap > span.icon { font-size:9px; line-height:1; color:#8c9a86; }
.gradio-container .atlas-disclosure > button.label-wrap + * { padding:0 14px 14px; }
.lineage-query textarea, .lineage-query input { font-size:14px; }
.lineage-matches .wrap { display:flex; flex-direction:column; gap:2px; }
.lineage-matches label { border-radius:8px; padding:7px 10px; font-size:13px; }
.lineage-matches label:hover { background:#eef3e9; }
#annotation-plot { border:1px solid #e0e6d8; background:#fffefa; border-radius:16px; overflow:hidden; }
#annotation-plot .plot-container { background:#fffefa; }
#annotation-examples { font-size:12px; }
#annotation-examples .label { color:#647467; }
#annotation-results { border-radius:14px; }
@media(max-width:700px) {
 .gradio-container { padding:12px 10px 24px!important; }
 .gradio-container .atlas-panel { padding:18px 12px; }
 #atlas-navigation { border-radius:18px; padding:8px 8px 0; }
 .gradio-container .action-button { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .gradio-container .atlas-panel button { transition:none; } }

/* Full-width navigation: one equal segment for each view. */
.gradio-container { width:100%!important; min-width:0!important; box-sizing:border-box; }
/* The navigation is the card: the two views sit inside one curved boundary and
   the control reads as a toggle rather than a pair of tabs. */
#atlas-navigation { border:1px solid #e0e6d8; background:#f7f8f0; border-radius:24px; padding:12px 12px 0; min-width:0; max-width:100%; box-shadow:0 12px 50px #234b2910; }
#atlas-navigation > .tab-wrapper { width:100%; height:auto!important; min-height:0; border:0!important; box-shadow:none!important; margin:0; padding:0; }
#atlas-navigation > .tab-wrapper > .tab-container { display:grid!important; grid-template-columns:1fr 1fr; gap:4px; width:100%!important; height:auto!important; box-sizing:border-box; border:0!important; border-radius:14px; padding:4px; margin:0; background:#e7eee0; box-shadow:none!important; }
#atlas-navigation > .tab-wrapper > .tab-container > button { display:flex!important; align-items:center; justify-content:center; width:100%; min-width:0; min-height:40px; height:auto!important; box-sizing:border-box; padding:9px 12px; margin:0!important; border:0!important; border-radius:11px; box-shadow:none!important; background:transparent; color:#4c6450; font:600 14px/1.3 Arial,Helvetica,sans-serif; white-space:nowrap; text-align:center; text-decoration:none!important; transition:background-color .15s, color .15s; }
#atlas-navigation > .tab-wrapper > .tab-container > button:hover { background:#dce6d4; color:#173c30; }
#atlas-navigation > .tab-wrapper > .tab-container > button[aria-selected="true"] { background:#1f5740; color:#f6faf3; }
#atlas-navigation > .tab-wrapper::before, #atlas-navigation > .tab-wrapper::after,
#atlas-navigation > .tab-wrapper > .tab-container::before, #atlas-navigation > .tab-wrapper > .tab-container::after,
#atlas-navigation > .tab-wrapper > .tab-container > button::before, #atlas-navigation > .tab-wrapper > .tab-container > button::after { content:none!important; display:none!important; }
#atlas-navigation > .tab-wrapper > .overflow-menu { display:none!important; }
#atlas-overview, #atlas-database { border:0; background:transparent; padding:0; min-width:0; max-width:100%; }
@media(max-width:700px) {
 #atlas-navigation > .tab-wrapper > .tab-container { gap:18px; }
 #atlas-navigation > .tab-wrapper > .tab-container > button { font-size:13px; padding:0 1px 9px; }
}

/* Database tab: one small title per section, a single search bar, and one
   toolbar for the viewer, in place of numbered headers and nested boxes. */
#atlas-database .db-section { font:600 15px/1.3 Arial,Helvetica,sans-serif; color:#1f3d2e; margin:0; padding:0; }
#atlas-database .atlas-panel { gap:12px; padding:20px 20px 18px; }
#atlas-database .db-search { gap:10px; align-items:stretch; }
#atlas-database .db-search textarea, #atlas-database .db-search input { min-height:46px; font-size:14px; }
#atlas-database .db-search button { min-height:46px; }
#atlas-database .db-toolbar { gap:10px; }
#atlas-database .db-actions { gap:8px; justify-content:flex-start; }
#atlas-database .db-actions button { min-height:36px; }
#annotation-examples { margin-top:-2px; }
#annotation-examples .label { font-size:12px; }
#atlas-database .db-heading { padding:0!important; margin:0; min-height:0; border:0; background:transparent; }
#atlas-database .db-heading > * { padding:0!important; margin:0!important; }
#atlas-database .db-actions > * { flex:0 0 auto!important; width:auto!important; min-width:0!important; padding:0 18px; }
#atlas-database .db-toolbar fieldset .wrap { flex-wrap:nowrap; }
#atlas-database .db-toolbar fieldset label { white-space:nowrap; }
#db-prepare:disabled { opacity:1; cursor:progress; }
#db-prepare:disabled::before { content:""; display:inline-block; width:11px; height:11px; margin-right:8px; vertical-align:-1px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:db-spin .8s linear infinite; }
@keyframes db-spin { to { transform:rotate(360deg); } }
/* What was annotated and how: a lead and a closed disclosure at the top of
   both tabs, aligned with the content padding below it. */
.gradio-container .tab-intro { padding:22px 20px 0; gap:8px; background:transparent; border:0; }
.gradio-container .tab-intro-lead, .gradio-container .tab-intro-lead p { font:15px/1.65 Arial,Helvetica,sans-serif; color:#33503f; max-width:860px; margin:0; }
.gradio-container .tab-intro .atlas-disclosure { margin-top:4px; }
#atlas-overview .tab-intro + * .atlas, #atlas-overview .atlas { padding-top:8px; }
.gradio-container .tab-intro .atlas-disclosure ul { padding-left:22px; margin:6px 0 0; list-style:disc; }
.gradio-container .tab-intro .atlas-disclosure li { margin:3px 0; }