@charset "UTF-8";
/* ==================================================================
   nbr.css - NBRP-Rat strain pages (Strains_list, Strains_d, EN/JP)
   One stylesheet for all four pages. Colours = NBRP2008 scheme of the
   old site; layout = CSS grid / flexbox, responsive.
   Breakpoints: >= 1000 px desktop (same width as the old 1000 px
   tables), 640-999 px tablet (fluid), < 640 px phone (one column;
   search form compact: name + keyword, the rest behind .nbr-more).
   ================================================================== */

:root {
  --nbr-red:       #8b2a2c;   /* header bars, buttons, menu accent */
  --nbr-red-text:  #e5e5e5;
  --nbr-data:      #e6e6e6;   /* data cells                        */
  --nbr-alt:       #e1d8d8;   /* captions, alternating rows        */
  --nbr-text:      #383838;
  --nbr-link:      #700002;
  --nbr-hover:     #007038;
  --nbr-line:      #ffffff;   /* cell borders                      */
  --nbr-dark:      #848284;
  --nbr-yellow:    #ffcc00;   /* strain-name bar                   */
  --nbr-blue:      #3366ff;   /* NBRP Rat No                       */
  --nbr-darkred:   #800000;   /* strain name                       */
  --nbr-control:   #000099;   /* control strain                    */
  --nbr-marker:    #009900;   /* marker strain                     */
  --nbr-kw:        #0099ff;   /* keyword field                     */
  --nbr-kw-border: #990000;
  --nbr-cap-width: 190px;     /* caption column on desktop         */
}

/* ---------- page frame ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #F7F7F7;
  font-family: Tahoma, Verdana, "Meiryo", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
}
form { margin: 0; }
.nbr-page { max-width: 1000px; margin: 0 auto; padding: 0 12px 24px; box-sizing: border-box; }

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; }

input[type="text"], select {
  font-size: 14px;
  padding: 4px 6px;
  border: 1px solid var(--nbr-dark);
  background: #fff;
  box-sizing: border-box;
}
input[type="checkbox"] { margin: 0 4px 0 0; vertical-align: middle; }

.nbr-btn, .Button {
  display: inline-block;
  background: var(--nbr-red);
  color: var(--nbr-red-text);
  border: 1px solid var(--nbr-dark);
  border-top-color: #ededed; border-left-color: #ededed;
  padding: 4px 14px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}
.nbr-btn:hover, .Button:hover { background: #a33a3c; }

/* ---------- Kopf, Navigation und Fuß kommen aus dem gemeinsamen Rahmen ../nbrp-ui/nbrp.css ---------- */
.nbrp-content > .nbr-page { max-width: none; padding: 0 0 20px; }

/* ---------- card with red header bar ---------- */
.nbr-card { margin-top: 10px; }
.nbr-bar {
  margin: 0;
  background: var(--nbr-red);
  color: var(--nbr-red-text);
  font-weight: bold;
  font-size: 15px;
  line-height: 1.3;
  padding: 6px 14px;
  border-radius: 9px 9px 0 0;
}
/* detail page: title bar with "back to the list" and previous / next strain */
.nbr-bar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding-top: 4px; padding-bottom: 4px; }
.nbr-bar-nav h1 { margin: 0; font: inherit; order: 1; }
.nbr-bar-nav a.nbr-backlink {
  order: 2; display: inline-flex; align-items: center; gap: 5px;
  color: var(--nbr-red-text); text-decoration: none; font-weight: normal; font-size: 13px; line-height: 1.2;
  padding: 3px 10px 3px 7px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .5);
  transition: background .15s, color .15s;
}
.nbr-bar-nav a.nbr-backlink svg { flex: none; }
.nbr-bar-nav a.nbr-backlink:hover, .nbr-bar-nav a.nbr-backlink:focus-visible { background: var(--nbr-red-text); color: var(--nbr-red); border-color: var(--nbr-red-text); outline: none; }
.nbr-pager { order: 3; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.nbr-navpos { font-weight: normal; font-size: 13px; min-width: 4.5em; text-align: center; white-space: nowrap; }
.nbr-navpos:empty { display: none; }
.nbr-bar-nav a.nbr-navbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .12);
  color: var(--nbr-red-text); text-decoration: none; transition: background .15s, color .15s;
}
.nbr-bar-nav a.nbr-navbtn svg { display: block; }
.nbr-bar-nav a.nbr-navbtn:hover, .nbr-bar-nav a.nbr-navbtn:focus-visible { background: var(--nbr-red-text); color: var(--nbr-red); border-color: var(--nbr-red-text); outline: none; }
.nbr-bar-nav a.nbr-navbtn.is-off { opacity: .35; cursor: default; pointer-events: none; }
.nbr-error { background: var(--nbr-data); color: #FF0000; border: 1px solid var(--nbr-line); padding: 6px 8px; font-size: 13px; }

/* ---------- caption / value rows ---------- */
.nbr-row { display: grid; grid-template-columns: var(--nbr-cap-width) minmax(0, 1fr); }
.nbr-row-order { grid-template-columns: var(--nbr-cap-width) minmax(0, 1fr) auto; }
.nbr-cap, .nbr-val, .nbr-action, .nbr-photos { border: 1px solid var(--nbr-line); padding: 6px 8px; box-sizing: border-box; min-width: 0; }
.nbr-cap { background: var(--nbr-alt); color: var(--nbr-text); font-weight: bold; font-size: 13px; }
.nbr-val, .nbr-action, .nbr-photos { background: var(--nbr-data); color: var(--nbr-text); overflow-wrap: anywhere; }
.nbr-text .nbr-val { line-height: 1.55; }
.nbr-action { display: flex; align-items: center; justify-content: center; }
.nbr-org { margin-left: 1.6em; }

/* ---------- identification row (No / name / common name / RGD) ---------- */
.nbr-idrow { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr) minmax(150px, 1fr) auto; }
.nbr-idrow > div { border: 1px solid var(--nbr-line); padding: 6px 8px; background: var(--nbr-data); color: var(--nbr-text); min-width: 0; overflow-wrap: anywhere; }
.nbr-id-no { color: var(--nbr-blue); font-weight: bold; }
.nbr-id-name { background: var(--nbr-yellow); color: var(--nbr-darkred); font-weight: bold; text-align: center; font-size: 15px; }
.nbr-id-name .nbr-id-label { color: #000; }
.nbr-id-rgd { text-align: right; white-space: nowrap; }

/* ---------- block with photos on the right ---------- */
.nbr-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.nbr-split-main { min-width: 0; display: flex; flex-direction: column; }
.nbr-split-main .nbr-row:last-child { flex: 1; }
.nbr-photos { display: flex; gap: 8px; align-items: flex-start; justify-content: center; max-width: 380px; }
.nbr-photos a { display: block; flex: 0 1 auto; min-width: 0; }
.nbr-photos img { display: block; max-height: 170px; width: auto; }

/* ---------- checkbox groups ---------- */
.nbr-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 3px 12px; align-items: start; }
.nbr-checks-inline { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.nbr-check { display: inline-flex; align-items: flex-start; gap: 4px; line-height: 1.35; cursor: pointer; }
.nbr-check input { flex: none; margin-top: 2px; }
.nbr-flags { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--nbr-line); }
.nbr-control { color: var(--nbr-control); font-weight: bold; }
.nbr-marker  { color: var(--nbr-marker);  font-weight: bold; }
.nbr-links a { margin-right: 1.2em; }

/* read-only checkboxes on the detail page: rendered disabled (not clickable, not focusable),
   drawn by CSS so they do not look greyed out */
.nbr-ro .nbr-check { cursor: default; }
.nbr-ro input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; margin: 1px 5px 0 0;
  border: 1px solid var(--nbr-dark);
  background: #fff;
  opacity: 1;
  pointer-events: none;
}
.nbr-ro .nbr-check span[disabled] { display: inline-flex; }
.nbr-ro input[type="checkbox"]:checked {
  background: var(--nbr-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.3 2.3 4.7-4.7' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
  border-color: var(--nbr-red);
}

/* ---------- search form (list page) ---------- */
.nbr-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3 + 3 fields on PC and tablet, one column on the phone */
.nbr-field { background: var(--nbr-data); border: 1px solid var(--nbr-line); padding: 6px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nbr-field-label { font-weight: bold; font-size: 13px; color: var(--nbr-text); }
.nbr-field input[type="text"] { width: 100%; max-width: 340px; }
.nbr-field-kw { outline: 2px solid var(--nbr-kw-border); outline-offset: -3px; }
.nbr-field-kw .nbr-field-label { color: var(--nbr-kw); font-variant: small-caps; font-size: 15px; }
.nbr-searchbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; background: var(--nbr-data); border: 1px solid var(--nbr-line); padding: 8px; color: var(--nbr-text); }
.nbr-searchbar .nbr-total { margin-left: auto; }
.nbr-more { display: none; }   /* toggle for the compact phone search; shown only below 640 px (see phone section) */

/* ---------- result grid (list page) ---------- */
.nbr-tablewrap { overflow-x: auto; margin-top: 10px; }
table.Grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.Grid th { font-size: 14px; text-align: left; vertical-align: middle; padding: 6px 8px; white-space: nowrap;
  background: linear-gradient(#f2f2f2, #cfcfcf); color: #252525;
  border: 1px solid var(--nbr-line); border-right-color: var(--nbr-dark); border-bottom-color: var(--nbr-dark); }
.Grid th a { display: inline-block; padding: 4px 3px; line-height: 0; vertical-align: middle; border-radius: 3px; }
.Grid th a:hover, .Grid th a:focus-visible { background: #fff; }
.Grid th img { width: 11px; height: 7px; vertical-align: middle; }   /* sort arrows (SVG, crisp at any scale) */
.Grid td { font-size: 14px; padding: 6px 8px; border: 1px solid var(--nbr-line); vertical-align: top; background: var(--nbr-data); color: var(--nbr-text); }
.Grid tr.Row:nth-child(odd) td { background: var(--nbr-alt); }   /* row 1 is the caption row */
.Grid tr.NoRecords td { font-style: italic; }

/* pager: First/Prev/Next/Last as buttons with vector chevrons (25 px high), page numbers as buttons of the same height */
.Grid tr.Footer td { text-align: center; padding: 10px 8px; white-space: normal; font-size: 15px; line-height: 2.4; }
.Grid tr.Footer a, .Grid tr.Footer .nbr-cur {
  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 2px;
  line-height: 23px; text-align: center; font-weight: bold; text-decoration: none;
  border: 1px solid var(--nbr-dark); border-radius: 4px; background: #fff; color: var(--nbr-link);
}
.Grid tr.Footer a:hover, .Grid tr.Footer a:focus-visible { background: var(--nbr-red); color: var(--nbr-red-text); border-color: var(--nbr-red); }
.Grid tr.Footer .nbr-cur { background: var(--nbr-red); color: var(--nbr-red-text); border-color: var(--nbr-red); }
/* 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; }
.Grid tr.Footer select { font-size: 15px; padding: 3px 4px; height: 25px; margin: 0 12px 0 4px; vertical-align: middle; }

/* ================= tablet ================= */
@media (max-width: 860px) {
  :root { --nbr-cap-width: 150px; }
  .nbr-idrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nbr-id-no  { grid-column: 1; grid-row: 1; }
  .nbr-id-rgd { grid-column: 2; grid-row: 1; }
  .nbr-idrow:not(:has(.nbr-id-rgd a)) .nbr-id-no { grid-column: 1 / -1; }
  .nbr-id-name, .nbr-id-common { grid-column: 1 / -1; }
}

/* ================= phone ================= */
@media (max-width: 639px) {
  .nbr-page { padding: 0 8px 20px; }

  .nbr-row, .nbr-row-order, .nbr-idrow, .nbr-split { grid-template-columns: minmax(0, 1fr); }
  .nbr-cap { padding-bottom: 3px; border-bottom: 0; }
  .nbr-id-no, .nbr-id-rgd, .nbr-id-name, .nbr-id-common { grid-column: auto; grid-row: auto; }
  .nbr-id-rgd { text-align: left; }
  .nbr-photos { max-width: none; justify-content: flex-start; flex-wrap: wrap; }
  .nbr-photos img { max-height: none; max-width: 100%; }
  .nbr-checks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .nbr-fields { grid-template-columns: minmax(0, 1fr); }
  .nbr-field input[type="text"] { max-width: none; }
  .nbr-searchbar .nbr-total { margin-left: 0; width: 100%; }

  /* compact search on the phone: strain name and keyword stay open, the other fields and the check-box groups (.nbr-opt)
     sit behind a small toggle under the keyword field (.nbr-more). The script in Strains_list(.jp).aspx adds
     .nbr-collapsible / .is-open; without JavaScript everything stays visible. PC and tablet: unchanged. */
  .nbr-fields > .nbr-field { order: 2; }
  .nbr-fields > .nbr-field:first-child { order: 0; }
  .nbr-fields > .nbr-field-kw, .nbr-fields > .nbr-more { order: 1; }   /* name, keyword, toggle, then the optional fields */
  .nbr-more { display: block; background: var(--nbr-data); border: 1px solid var(--nbr-line); padding: 7px 8px 8px; }
  .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; }
  .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; }
  .nbr-collapsible:not(.is-open) .nbr-opt { display: none; }
  .nbr-collapsible.is-open .nbr-opt { animation: nbr-reveal .22s ease-out; }

  /* result grid as stacked cards; the sorter row becomes a row of chips */
  table.Grid, table.Grid tbody, table.Grid tr, table.Grid td { display: block; }
  table.Grid thead, table.Grid tr.Caption { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
  table.Grid tr.Caption th { display: inline-flex; align-items: center; gap: 2px; padding: 4px 8px; }
  table.Grid tr.Row { margin-bottom: 6px; border: 1px solid var(--nbr-line); }
  table.Grid tr.Row td { border: 0; padding: 3px 6px; }
  table.Grid td.c-no::before, table.Grid td.c-name::before, table.Grid td.c-common::before, table.Grid td.c-pi::before { font-weight: bold; }
  html[lang="en"] table.Grid td.c-no::before     { content: "NBRP Rat No: "; }
  html[lang="en"] table.Grid td.c-name::before   { content: "Strain name: "; }
  html[lang="en"] table.Grid td.c-common::before { content: "Common name: "; }
  html[lang="en"] table.Grid td.c-pi::before     { content: "Principal Investigator: "; }
  html[lang="ja"] table.Grid td.c-no::before     { content: "NBRP Rat No: "; }
  html[lang="ja"] table.Grid td.c-name::before   { content: "系統名: "; }
  html[lang="ja"] table.Grid td.c-common::before { content: "通称: "; }
  html[lang="ja"] table.Grid td.c-pi::before     { content: "研究責任者: "; }
  table.Grid tr.Footer td { text-align: center; padding: 10px 4px; }
  .Grid tr.Footer select { margin: 0 6px 6px 0; }
}

@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; } }