@charset "UTF-8";
/* ==================================================================
   nbrx.css - NBRP-Rat strainsx (Phänotyp-Tabellen, Genotyp, Archiv 2004)
   Gleiche Farben und Formen wie /nbr/strains (nbr.css); die Seiten behalten
   die CodeCharge-Klassen (Multipads*), hier bekommen sie ihr Aussehen.
   Rahmen (Kopf, Menü, Knöpfe, Fuß): ../nbrp-ui/nbrp.css
   Breiten: >= 1000 px PC | 720-999 px Tablet | < 720 px Telefon
   Archiv 2004 (dbjppub_list): Suchformular am Tablet als zweispaltiges Raster (kein seitliches Rollen),
   am Telefon nur 系統 + キーワード offen, der Rest hinter dem kleinen Knopf .nbr-more (Skript in der Seite).
   ================================================================== */

:root {
  --nbr-red:       #8b2a2c;
  --nbr-red-text:  #e5e5e5;
  --nbr-data:      #e6e6e6;   /* Datenzellen                       */
  --nbr-alt:       #e1d8d8;   /* Beschriftungen, Wechselzeilen     */
  --nbr-alt2:      #ece7e7;   /* zweite Zeilenfarbe                */
  --nbr-text:      #383838;
  --nbr-link:      #700002;
  --nbr-hover:     #007038;
  --nbr-line:      #ffffff;   /* Zellzwischenräume                 */
  --nbr-dark:      #848284;
  --nbr-cap-width: 190px;
}

/* ---------- Seite ---------- */
body { font-family: Tahoma, Verdana, "Meiryo", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; font-size: 14px; line-height: 1.4; color: #333333; }
.nbrp-content > .nbr-page { max-width: none; padding: 0 0 20px; }
a:link, a:visited { color: var(--nbr-link); text-decoration: none; }
a:hover, a:active, a:focus-visible { color: var(--nbr-hover); }
img { max-width: 100%; height: auto; }
table, th, td, input, select, button { font-family: inherit; }
p { margin: 0 0 10px; }
blockquote { margin: 0 0 10px 24px; }
.nbr-intro { font-size: 14px; }

/* ---------- Unternavigation (Phänotyp-Tabellen, FOB-Teile, Chromosomen) ---------- */
.nbr-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 12px; }
.nbr-subnav-2 { margin-top: -6px; }
.nbr-subnav-cap { font-weight: bold; color: var(--nbr-red); margin-right: 2px; white-space: nowrap; }
.nbr-subnav a { display: inline-block; padding: 4px 11px; border: 1px solid #cdc4c4; border-radius: 14px; background: #fff; color: #333; font-size: 13px; line-height: 1.3; }
.nbr-subnav a:hover, .nbr-subnav a:focus-visible { background: #f3e9e9; color: var(--nbr-red); border-color: #d9a9a9; }
.nbr-subnav a.is-current { background: var(--nbr-red); border-color: var(--nbr-red); color: #fff; font-weight: bold; }
.nbr-subnav a.is-external::after { content: " \2197"; opacity: .6; }

/* ---------- Karten und rote Balken ---------- */
.nbr-card { display: block; margin: 0 0 16px; }
h1.nbr-bar { margin: 0; background: var(--nbr-red); color: var(--nbr-red-text); font-size: 16px; font-weight: bold; padding: 7px 12px; border-radius: 4px 4px 0 0; line-height: 1.3; }
.nbr-card h1.nbr-bar { margin-bottom: 0; }

/* ---------- Tabellen (Suchformular, Datensatz) ---------- */
table.MultipadsFormTABLE { border-collapse: separate; border-spacing: 2px; background: var(--nbr-data); width: 100%; margin: 0; }
.nbr-detail table.MultipadsFormTABLE, .nbr-search table.MultipadsFormTABLE { border-radius: 0 0 4px 4px; }
.MultipadsFieldCaptionTD { background: var(--nbr-alt); color: var(--nbr-text); font-weight: bold; padding: 6px 8px; vertical-align: top; white-space: nowrap; width: 1%; }
.nbr-detail .MultipadsFieldCaptionTD { width: var(--nbr-cap-width); white-space: normal; }
.MultipadsDataTD, .MultipadsAltDataTD { background: var(--nbr-data); color: var(--nbr-text); padding: 5px 8px; vertical-align: top; }
.MultipadsFooterTD { background: var(--nbr-alt); padding: 6px 8px; }
.MultipadsErrorDataTD { background: #fff; color: #d00000; padding: 6px 8px; }
.MultipadsSeparatorTD { background: var(--nbr-alt); }
.nbr-search .MultipadsFooterTD { text-align: left; }
.nbr-search .MultipadsFooterTD + .MultipadsFooterTD { text-align: right; }

/* Eingabefelder und Knöpfe */
input[type="text"], .MultipadsInput, select, .MultipadsSelect, textarea, .MultipadsTextarea {
  font-size: 14px; padding: 4px 6px; border: 1px solid var(--nbr-dark); background: #fff; color: #222; box-sizing: border-box; max-width: 100%; border-radius: 2px;
}
input[type="text"], .MultipadsInput { width: 20em; max-width: 100%; }
.MultipadsButton, input[type="submit"], input[type="button"] {
  display: inline-block; background: var(--nbr-red); color: var(--nbr-red-text); border: 0; border-radius: 4px; padding: 6px 14px;
  font-weight: bold; font-size: 13px; cursor: pointer; line-height: 1.3;
}
.MultipadsButton:hover, input[type="submit"]:hover, input[type="button"]:hover { background: #a33a3c; }
.nbr-chartlink { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.nbr-btn-chart { background: #4b5a7a; }
.nbr-btn-chart:hover { background: #5d6e94; }
.MultipadsSorterLink { font-weight: bold; }
.nbr-more, tr.nbr-more-row { display: none; }   /* Knopf der kompakten Telefonsuche (dbjppub_list), nur < 720 px */
.MultipadsDataLink, .nbr-link { color: var(--nbr-link); }

/* ---------- Ergebnistabellen: rollen in ihrem Kasten, erste Spalte und Kopfzeile bleiben stehen ---------- */
.nbr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--nbr-data); border-radius: 0 0 4px 4px; margin: 0; max-width: 100%; }
table.nbr-grid { border-collapse: separate; border-spacing: 2px; width: auto; min-width: 100%; margin: 0; }
table.nbr-grid td, table.nbr-grid th { padding: 5px 8px; vertical-align: top; }
table.nbr-grid td { white-space: nowrap; }
.nbr-dbjp table.nbr-grid td { white-space: normal; }   /* Archiv 2004: Stichwortspalte ist Fließtext */
table.nbr-grid .MultipadsColumnTD {
  background: linear-gradient(#f2f2f2, #cfcfcf); color: #252525; font-weight: bold; text-align: left; vertical-align: bottom;
  white-space: nowrap; border-bottom: 1px solid var(--nbr-dark); position: sticky; top: 0; z-index: 2;
}
table.nbr-grid .MultipadsDataTD { background: var(--nbr-data); }
table.nbr-grid .MultipadsAltDataTD { background: var(--nbr-alt2); }
table.nbr-grid td:first-child, table.nbr-grid .MultipadsColumnTD:first-child { position: sticky; left: 0; z-index: 1; }
table.nbr-grid .MultipadsColumnTD:first-child { z-index: 3; }
table.nbr-grid td:first-child { box-shadow: 2px 0 0 var(--nbr-line); }
.nbr-th-cap { display: block; }
.nbr-th-sort { display: block; line-height: 0; margin-top: 2px; }
.nbr-th-sort a { display: inline-block; padding: 3px 3px 2px; border-radius: 3px; line-height: 0; }
.nbr-th-sort a:hover { background: #fff; }
.nbr-th-linksort { line-height: 1.3; }
.nbr-th-linksort a { color: #252525; font-weight: bold; padding: 0; }
.nbr-norec { padding: 10px 12px; font-style: italic; background: var(--nbr-data); }

/* Blätterleiste (unter der Tabelle, rollt nicht mit): Knöpfe 25 px hoch, Pfeile als Vektorsymbole */
.nbr-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 10px 8px; background: var(--nbr-alt); border-radius: 0 0 4px 4px; margin: 2px 0 16px; font-size: 14px; }
.nbr-pager a, .nbr-pager .MultipadsNavigatorLink {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; vertical-align: middle; box-sizing: border-box;
  min-width: 2.2em; height: 25px; padding: 0 8px; margin: 0; line-height: 23px; text-align: center; font-weight: bold;
  border: 1px solid var(--nbr-dark); border-radius: 4px; background: #fff; color: var(--nbr-link); text-decoration: none;
}
.nbr-pager a:hover, .nbr-pager a:focus-visible { background: var(--nbr-red); color: var(--nbr-red-text); border-color: var(--nbr-red); }
.nbr-pager b { font-weight: bold; }
/* Blätterknöpfe und Sortierpfeile: Vektorsymbole (scharf auf jedem Bildschirm), Farbe folgt dem Text */
.nbr-chev { display: block; width: 12px; height: 12px; flex: none; }
.nbr-chev2 { width: 16px; }
.nbr-chev path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nbr-sort { display: inline-block; width: 11px; height: 7px; vertical-align: middle; }

/* ---------- Tablet (720-999 px) ---------- */
@media (max-width: 999px) {
  :root { --nbr-cap-width: 150px; }
  input[type="text"], .MultipadsInput { width: 16em; }
}
@media (min-width: 720px) and (max-width: 999px) {
  /* Archiv 2004, Suchformular: die vierspaltige Tabelle (Beschriftung | Feld | Beschriftung | Feld) ist breiter als der
     Inhaltsbereich des Tablets (ca. 650 px) und rollte seitlich. Hier wird sie zum zweispaltigen Raster Beschriftung | Feld:
     die Zeilen loesen sich auf (display: contents), jede Zelle wird ein Rasterfeld, die Felder fuellen die Spalte. */
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE { display: block; width: auto; padding: 2px; box-sizing: border-box; }
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE > tbody { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px; }
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE > tbody > tr { display: contents; }
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE td { display: block; min-width: 0; box-sizing: border-box; }
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE td.MultipadsDataTD { display: flex; align-items: center; }   /* das &nbsp; hinter dem Feld nicht in eine zweite Zeile */
  /* Reihenfolge im Raster: 系統 und キーワード zuerst, dann die uebrigen Felder, zuletzt Clear / Search */
  .nbr-dbjp .nbr-search td.nbr-opt, .nbr-dbjp .nbr-search tr.nbr-opt > td { order: 1; }
  .nbr-dbjp .nbr-search td.MultipadsFooterTD, .nbr-dbjp .nbr-search td.MultipadsFooterTD + td, .nbr-dbjp .nbr-search tr:last-child > td { order: 2; }
  .nbr-dbjp .nbr-search .MultipadsFieldCaptionTD { white-space: normal; width: auto; max-width: 200px; }
  .nbr-dbjp .nbr-search td[colspan] { grid-column: 1 / -1; }
  .nbr-dbjp .nbr-search td.MultipadsFooterTD[colspan] { grid-column: 2; }
  .nbr-dbjp .nbr-search input[type="text"] { width: 100%; }
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE tr.nbr-more-row > td { display: none; }   /* Knopfzeile des Telefons bleibt weg */
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE td.MultipadsDataTD { font-size: 0; }        /* das &nbsp; hinter dem Feld nimmt keinen Platz */
  .nbr-dbjp .nbr-search table.MultipadsFormTABLE td.MultipadsDataTD > * { font-size: 14px; }
  /* Archiv 2004, Datensatz: Beschriftungsspalte schmaler, lange Werte (Adressen, Literatur) brechen in der Zelle um */
  .nbr-dbjp .nbr-detail table.MultipadsFormTABLE { table-layout: fixed; }
  .nbr-dbjp .nbr-detail .MultipadsFieldCaptionTD { width: 140px; }
  .nbr-dbjp .nbr-detail .MultipadsDataTD { overflow-wrap: anywhere; word-break: break-word; }
  .nbr-dbjp .nbr-detail .MultipadsDataTD img, .nbr-dbjp .nbr-detail .MultipadsDataTD table { max-width: 100%; }
}

/* ---------- Telefon (< 720 px) ---------- */
@media (max-width: 719px) {
  .nbrp-content > .nbr-page { padding: 0 0 16px; }
  .nbr-subnav a { padding: 4px 9px; font-size: 12px; }
  /* Such- und Datensatztabellen: Zellen untereinander (macht nbrp.css für alle Tabellen) - nur Feinheiten */
  .MultipadsFieldCaptionTD { white-space: normal; width: auto; }
  .nbr-search .MultipadsFooterTD, .nbr-search .MultipadsFooterTD + .MultipadsFooterTD { text-align: left; }
  input[type="text"], .MultipadsInput { width: 100%; }
  /* Ergebnistabellen bleiben Tabellen (nbrp.css stapelt sonst jede Tabelle) und rollen seitlich in ihrem Kasten */
  body:not(.nbrp-wide) .nbrp-content .nbr-scroll table.nbr-grid { display: table; width: auto !important; min-width: 100%; max-width: none !important; }
  body:not(.nbrp-wide) .nbrp-content .nbr-scroll table.nbr-grid tbody { display: table-row-group; }
  body:not(.nbrp-wide) .nbrp-content .nbr-scroll table.nbr-grid tr { display: table-row; margin: 0; border: 0; }
  body:not(.nbrp-wide) .nbrp-content .nbr-scroll table.nbr-grid td, body:not(.nbrp-wide) .nbrp-content .nbr-scroll table.nbr-grid th { display: table-cell; width: auto !important; padding: 4px 6px; text-align: left; }
  body .nbrp-content .nbr-scroll table.nbr-grid td:empty { display: table-cell; }
  table.nbr-grid { font-size: 13px; }
  .nbr-scroll { margin-left: -2px; margin-right: -2px; }
  /* Hinweis über der Tabelle: seitlich wischen (der Stammname links bleibt stehen) */
  .nbr-wide::before { display: block; content: "\2190 swipe sideways for more columns \2192"; font-size: 12px; color: #555; padding: 4px 8px 2px; font-style: italic; }
  html[lang="ja"] .nbr-wide::before { content: "\2190 横にスクロールすると続きの列が見えます \2192"; }
  .nbr-pager { padding: 8px 6px; font-size: 13px; }
  .nbr-pager a, .nbr-pager .MultipadsNavigatorLink { height: 24px; line-height: 22px; min-width: 2em; padding: 0 7px; gap: 4px; }

  /* Archiv 2004, kompakte Suche am Telefon: 系統 und キーワード bleiben offen, die uebrigen Felder (.nbr-opt) sitzen hinter
     dem kleinen Knopf unter dem Stichwortfeld. Das Skript in dbjppub_list.aspx setzt .nbr-collapsible / .is-open;
     ohne JavaScript bleibt alles sichtbar. (Die Zellen stapelt nbrp.css bereits untereinander.) */
  /* Das Suchformular wird wie am Tablet zum Raster (eine Spalte), damit die Reihenfolge frei ist:
     系統, キーワード, Knopf, dann die uebrigen Felder (aufgeklappt), zuletzt Clear / Search. */
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE { display: block; width: auto; padding: 2px; box-sizing: border-box; }
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE > tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE > tbody > tr { display: contents; }
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE td { display: block; width: auto; min-width: 0; box-sizing: border-box; margin: 0; border: 0; }
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE td.MultipadsFieldCaptionTD { padding: 5px 8px 3px; }
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE td.MultipadsDataTD { padding: 3px 8px 7px; font-size: 0; }   /* das &nbsp; hinter dem Feld: keine Leerzeile */
  body .nbrp-content .nbr-dbjp .nbr-search table.MultipadsFormTABLE td.MultipadsDataTD > * { font-size: 14px; }
  body .nbrp-content .nbr-dbjp .nbr-search tr.nbr-more-row > td { order: 1; padding: 0; }
  body .nbrp-content .nbr-dbjp .nbr-search td.nbr-opt, body .nbrp-content .nbr-dbjp .nbr-search tr.nbr-opt > td { order: 2; }
  body .nbrp-content .nbr-dbjp .nbr-search td.MultipadsFooterTD, body .nbrp-content .nbr-dbjp .nbr-search tr:last-child > td { order: 3; }
  body .nbrp-content .nbr-dbjp .nbr-search td[colspan] { grid-column: 1 / -1; }
  .nbr-dbjp .nbr-more { display: block; padding: 7px 8px 8px; background: var(--nbr-data); }
  .nbr-more-btn {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    background: #fff; color: var(--nbr-link); border: 1px solid #cdc4c4; border-radius: 15px;
    padding: 4px 10px 4px 8px; margin: 0; font: inherit; font-size: 12.5px; line-height: 1.3; cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .nbr-more-btn:hover, .nbr-more-btn:focus-visible { border-color: var(--nbr-red); color: var(--nbr-red); outline: none; background: #fff; }
  .nbr-more-btn[aria-expanded="true"] { background: #f7f1f1; }
  .nbr-more-ico { width: 14px; height: 14px; flex: none; }
  .nbr-more-ico path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
  .nbr-more-ico circle { fill: #fff; stroke: currentColor; stroke-width: 1.4; }
  .nbr-more-chev { width: 10px; height: 10px; flex: none; transition: transform .2s; }
  .nbr-more-chev path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .nbr-more-btn[aria-expanded="true"] .nbr-more-chev { transform: rotate(180deg); }
  .nbr-more-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 9px; background: var(--nbr-red); color: #fff; font-size: 11px; font-weight: bold; line-height: 1;
  }
  .nbr-more-count[hidden] { display: none; }
  body .nbrp-content .nbr-dbjp .nbr-search.nbr-collapsible:not(.is-open) table.MultipadsFormTABLE td.nbr-opt,
  body .nbrp-content .nbr-dbjp .nbr-search.nbr-collapsible:not(.is-open) table.MultipadsFormTABLE tr.nbr-opt > td { display: none; }
  .nbr-collapsible.is-open td.nbr-opt, .nbr-collapsible.is-open tr.nbr-opt > td { animation: nbr-reveal .22s ease-out; }
}
@keyframes nbr-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }