/* CUTD site frame — the fixed layer shared by every page (split from classical.css, 2026-11-10; rules moved verbatim).
   Design tokens and base rules, site-wide input behaviour, the CUTD logo/title bar, the footer, and the content box of the
   blank shell pages. The DDBJ header and the DDBJ/NIG footer markup are styled by /assets/site-shell/site-shell.css and ddbj-header.css,
   which load before this file. Load order on every page: fonts.css, site-shell.css, ddbj-header.css, site-frame.css,
   site-nav.css, then the page's own stylesheet. Site-wide rules belong here, not in a page stylesheet. */
:root {
  --ink: #17242d; --muted: #55646e; --faint: #5c6a73; --rule: #d3dbe0; --rule-soft: #e8edf0; --line: #98a5ad;
  --navy: #16364d; --link: #155e8c; --accent: #39c5bb; --sel: #d0e7f5; --hover: #f0f6fa;
  --warn: #8a4f00; --rank-top: #17687a; --rank-bar: #6b7a84; --pick: #78c7d2; --cmp: #78c7d2; --warn-bg: #fff7e6; --err: #a3261b; --mono: var(--cutd-font-mono);
}
[hidden] { display: none !important; }
body { color: var(--ink); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 8px 12px; background: #fff; }
.skip-link:focus { left: 8px; }
/* ---------- Shared shell, design B (2026-11-09): two-tier CUTD bar, site notice, footer ---------- */
/* The shell spans the window on every page, like the DDBJ bar above it: 24 px gutters (16 px at 760 px and below), no
   max width, so the logo, the navigation and the footer sit in the same place on every page (Fable panel 2026-11-09:
   full-width shell 8.33 vs centred box 6.17 vs all left-aligned 5.33). Its two lines both run across the window.
   --page-max is only the page content's box: 1680 px, centred on blank pages and left-aligned on the Classical pages
   (classical.css); on table pages below 1640 px the table + ranking width (column tokens in "Table state"). Help sizes
   its own content. */
:root { --page-max: 1680px; }
.cutd-bar { height: auto; background: #fff; border-bottom: 1px solid var(--rule); }
.cutd-bar-inner { position: relative; flex-direction: column; align-items: stretch; gap: 0; height: auto; max-width: none; margin: 0; padding: 0 24px; }
/* Brand row: logo slot (fixed-height img) + two parallel titles. The column gap exists only between titles on one line,
   so the rule drawn 13 px before the second title is clipped away when that title wraps under the first. */
.cutd-brand { display: flex; align-items: center; gap: 22px; align-self: flex-start; max-width: 100%; padding: 12px 0 10px; color: var(--ink); line-height: 1.2; text-decoration: none !important; }
.cutd-brand:hover { color: var(--ink); }
.cutd-logo { display: block; flex: none; width: auto; height: 52px; max-width: 260px; object-fit: contain; object-position: left center; }
.cutd-brand-text { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 25px; min-width: 0; overflow: hidden; }
.cutd-title { font-size: 19px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cutd-title + .cutd-title { position: relative; }
.cutd-title + .cutd-title::before { content: ""; position: absolute; left: -13px; top: 2px; bottom: 2px; border-left: 1px solid var(--line); }
/* Footer: across the window with the bar's gutters (overrides site-shell.css's 1280 px box and 42 px gutters) */
.site-footer-inner, .footer-bottom-inner { max-width: none; padding-inline: 24px; }
/* Blank shell pages (/home/, /contact/): their content box is the Classical home's, 1680 px centred */
body.shell-page .page-content { max-width: var(--page-max); padding: 14px 24px 24px; }
/* Short screens: a compact bar (about 25 px less) so the table keeps its first rows in view */
@media (min-width: 761px) and (max-height: 800px) {
  .cutd-brand { gap: 18px; padding: 8px 0 6px; }
  .cutd-logo { height: 40px; }
  .cutd-title { font-size: 17px; }
}
/* no highlight ring while typing in any text box: the Classical search, the DDBJ header search, the compare box and the
   home search (user, 2026-11-09 and 2026-11-10); buttons and links keep their keyboard focus ring */
input[type="search"]:focus, input[type="search"]:focus-visible,
input[type="text"]:focus, input[type="text"]:focus-visible,
textarea:focus, textarea:focus-visible { outline: none; }
@media (max-width: 760px) {
  .cutd-bar-inner { padding: 0 16px; }
  .cutd-brand { gap: 14px; padding: 10px 0 8px; }
  .cutd-logo { height: 40px; }
  .cutd-brand-text { flex-direction: column; align-items: flex-start; }
  .cutd-title { font-size: 14px; white-space: normal; }
  .cutd-title + .cutd-title::before { display: none; }
  .site-footer-inner, .footer-bottom-inner { padding-inline: 16px; }
  body.shell-page .page-content { padding-inline: 16px; }
}
@media (max-width: 640px) {
  /* Brand: the logo row with the CUTD Menu button at its right end, the two titles under the logo.
       The button stays inside .cutd-navigation (cutd-navigation.js needs it there) and is placed here by position. */
  .cutd-brand { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* footer, narrow screens: the shared shell moves the NIG logo to the left at <=680 px;
   keep it in the bottom-right corner, as on wide screens (same right-edge correction for the PNG padding) */
@media (max-width: 680px) {
  .footer-nig-logo { justify-self: end; margin-left: 0; margin-right: calc(var(--nig-logo-width) * -80 / 1142); }
}