/* Greenomes dashboard preview — a restrained genomic health workspace. */
.insights-visual { min-width: 0; }
.dash {
  padding: 7px;
  border: 1px solid #2b302f;
  border-radius: 22px;
  background: #151817;
  overflow: hidden;
  box-shadow: 0 24px 60px -40px rgba(10, 18, 17, 0.5);
}
[data-theme="dark"] .dash { background: #121514; border-color: #2c3331; }
.dash-app {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 486px;
  overflow: hidden;
  border-radius: 17px;
  background: #faf9f4;
  color: #1a201e;
}
.dash-nav {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 11px 14px;
  border-right: 1px solid #e8e6de;
  background: #fffefa;
}
.dash-brand { display: flex; align-items: center; gap: 6px; padding: 0 4px 18px; color: #171b1a; font-size: 0.72rem; font-weight: 750; letter-spacing: -0.03em; }
.dash-brand-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: #167a68; color: #fff; font-size: 0.62rem; font-weight: 800; }
.dash-nav nav { display: grid; gap: 3px; }
.dash-nav nav span { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border-radius: 8px; color: #727874; font-size: 0.61rem; font-weight: 550; white-space: nowrap; }
.dash-nav nav span.is-active { background: #eeeee5; color: #1d2421; font-weight: 700; }
.dash-nav nav svg { width: 14px; height: 14px; flex: none; }
.dash-profile { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 10px 4px 0; border-top: 1px solid #eceae3; }
.dash-profile > span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #dfece8; color: #167a68; font-size: 0.54rem; font-weight: 800; }
.dash-profile div { display: grid; min-width: 0; }
.dash-profile strong { overflow: hidden; color: #303633; font-size: 0.55rem; text-overflow: ellipsis; white-space: nowrap; }
.dash-profile small { color: #8b918e; font-size: 0.49rem; }
.dash-main { min-width: 0; padding: 23px 25px 20px; background: #faf9f4; }
.dash-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dash-kicker { display: block; margin-bottom: 3px; color: #7b817e; font-size: 0.55rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.dash-topline h3 { margin: 0; color: #202522; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.55rem, 2.65vw, 2.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.025em; }
.dash-preview { flex: none; padding: 5px 8px; border: 1px solid #dddcd5; border-radius: 999px; color: #777d79; font-size: 0.5rem; font-weight: 650; }
.dash-main section.dash-summary { width: auto; max-width: none; margin: 0; padding: 14px 15px 13px; border: 1px solid #e2e1da; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px -18px rgba(22, 31, 28, 0.4); }
.dash-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-summary-head > div { display: grid; }
.dash-summary-head span { color: #2f3532; font-size: 0.66rem; font-weight: 750; }
.dash-summary-head small { margin-top: 1px; color: #909592; font-size: 0.48rem; }
.dash-share { padding: 4px 8px; border: 1px solid #deded8; border-radius: 999px; background: #fff; color: #5e6561; font-size: 0.49rem; font-weight: 650; }
.dash-genome-map { position: relative; height: 14px; margin: 13px 0 10px; overflow: hidden; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 2px, #fff 2px 3px), linear-gradient(90deg, #e7a418 0 8%, #50a9eb 8% 28%, #486fe4 28% 42%, #19a897 42% 62%, #36ae69 62% 100%); }
.dash-genome-map::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24) 48%, transparent); }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-stats div { display: grid; min-width: 0; }
.dash-stats strong { color: #1f2522; font-size: 0.95rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dash-stats span { display: flex; align-items: center; gap: 4px; margin-top: 3px; overflow: hidden; color: #858b87; font-size: 0.46rem; white-space: nowrap; }
.dash-stats i { width: 5px; height: 5px; flex: none; border-radius: 50%; }
.dash-stats .is-review { background: #e7a418; }
.dash-stats .is-typical { background: #4d82e5; }
.dash-stats .is-positive { background: #19a897; }
.dash-stats .is-low { background: #36ae69; }
.dash-main section.dash-library { width: auto; max-width: none; margin: 15px 0 0; padding: 0; }
.dash-library-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dash-library h4 { margin: 0; color: #282e2b; font-family: "Instrument Serif", Georgia, serif; font-size: 1.05rem; font-weight: 400; }
.dash-search { display: flex; align-items: center; gap: 4px; min-width: 94px; padding: 5px 9px; border: 1px solid #dfded7; border-radius: 999px; background: #fff; color: #969b98; font-size: 0.48rem; }
.dash-search svg { width: 10px; height: 10px; }
.dash-filters { display: flex; gap: 4px; margin: 8px 0 10px; overflow: hidden; }
.dash-filters span { padding: 4px 7px; border-radius: 999px; background: #eeeee5; color: #555c58; font-size: 0.47rem; font-weight: 650; white-space: nowrap; }
.dash-filters span.is-active { background: #222725; color: #fff; }
.dash-filters b { margin-left: 2px; opacity: 0.58; font-size: 0.42rem; }
.dash-table-head, .dash-condition { display: grid; grid-template-columns: minmax(132px, 1.35fr) minmax(104px, 1fr) 54px; align-items: center; column-gap: 10px; }
.dash-table-head { padding: 0 8px 5px; color: #959a97; font-size: 0.44rem; }
.dash-condition { position: relative; min-height: 47px; padding: 7px 7px 7px 40px; border-top: 1px solid #e9e7e0; }
.dash-condition-art { position: absolute; left: 7px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; }
.dash-condition-art svg { width: 16px; height: 16px; }
.dash-condition-art.is-heart { background: #e6efff; color: #4d82e5; }
.dash-condition-art.is-metabolic { background: #fff0d7; color: #d68d13; }
.dash-condition-art.is-med { background: #dff3ed; color: #167a68; }
.dash-condition > div { display: grid; min-width: 0; }
.dash-condition strong { overflow: hidden; color: #343a37; font-size: 0.55rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dash-condition small { color: #979c99; font-size: 0.45rem; }
.dash-context { display: grid; gap: 4px; color: #6e7571; font-size: 0.46rem; white-space: nowrap; }
.dash-context::before { content: ''; grid-area: 1 / 1; width: 100%; height: 3px; border-radius: 4px; background: #e7e8e4; }
.dash-context i { grid-area: 1 / 1; z-index: 1; width: var(--w); height: 3px; border-radius: 4px; background: #167a68; }
.dash-condition em { justify-self: end; padding: 3px 6px; border-radius: 999px; font-size: 0.45rem; font-style: normal; font-weight: 750; }
.dash-condition em.is-typical { background: #e8effd; color: #3f6fc9; }
.dash-condition em.is-review { background: #fff0d4; color: #a76e0e; }
.dash-condition em.is-positive { background: #dff3ed; color: #167a68; }
@media (max-width: 760px) {
  .dash-preview { display: none; }
}
@media (max-width: 560px) {
  .dash { padding: 7px; border-radius: 20px; }
  .dash-app { grid-template-columns: 1fr; min-height: 430px; border-radius: 14px; }
  .dash-nav { display: none; }
  .dash-main { padding: 18px 14px 14px; }
  .dash-preview { display: none; }
  .dash-table-head, .dash-condition { grid-template-columns: minmax(118px, 1fr) 48px; }
  .dash-table-head span:nth-child(2), .dash-context { display: none; }
}