/* ===================================================================
   CARTFIT.AI · chrome.css
   fixed chrome: rails / nav / pager / status bar
   load order matters — see index.html
   =================================================================== */

/* =================================================================
   FIXED CHROME — rails / nav / pager / bar
   ================================================================= */
.rail {
  position: fixed; top: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--line-1);
  z-index: 5;
  pointer-events: none;
}
.rail--l { left: var(--page-pad); }
.rail--r { right: var(--page-pad); }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  padding: 0;
  padding-left: var(--page-pad);
  padding-right: 0;
  z-index: 10;
  background: var(--bg-0);
  border-bottom: 1px solid transparent;
}
.nav__l { display: flex; align-items: center; }
.nav__c {
  display: flex; gap: 40px;
  margin-left: auto;
  align-items: center;
  padding-right: 32px;
}
.nav::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--line-1);
}
.logo {
  display: inline-flex; align-items: center; gap: 13px;
  color: var(--fg-0);
}
.logo__img { height: 38px; width: auto; display: block; }
.logo__type {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.18em;
}
.logo__dot { color: var(--accent); }

.nav__link {
  font-family: var(--font-jp);
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--fg-2);
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.nav__link:hover { color: var(--fg-0); }
.nav__link.is-active { color: var(--fg-0); }
.nav__link.is-active::before {
  content: ''; position: absolute;
  left: -10px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; background: var(--accent);
}

/* お問い合わせ button — flush to the very right edge, full nav height */
.nav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch;
  height: var(--nav-h);
  padding: 0 32px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line-2);
  color: var(--fg-0);
  font-family: var(--font-jp);
  font-weight: 500; font-size: 13px;
  letter-spacing: 0.16em;
  background: transparent;
  transition: background .2s, color .2s;
}
.nav__cta:hover { background: var(--accent); color: var(--bg-0); }

.nav__r { display: inline-flex; align-items: stretch; gap: 24px; height: var(--nav-h); margin-right: 0; padding-right: 0; }
.nav__r > .lang, .nav__r > .status { align-self: center; }
.nav__r > .nav__cta { margin-right: 0; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-jp); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; }
.lang__btn { color: var(--fg-2); padding: 4px 0; }
.lang__btn.is-active { color: var(--fg-0); }
.lang__sep { color: var(--fg-3); }

.status { display: inline-flex; align-items: center; gap: 8px; }
.status__dot {
  width: 6px; height: 6px; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200,255,0,.6); }
  100% { box-shadow: 0 0 0 8px rgba(200,255,0,0); }
}
.status__txt {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.22em;
  color: var(--fg-2);
}

/* RIGHT PAGER */
.pager {
  position: fixed;
  right: calc(var(--page-pad) - 28px - 8px);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 18px;
  z-index: 6;
}
.pager__item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--fg-3);
}
.pager__item i {
  display: block;
  width: 14px; height: 1px; background: currentColor;
  transition: width .25s, background .25s;
}
.pager__item span {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .25s, transform .25s, color .25s;
}
.pager__item:hover { color: var(--fg-1); }
.pager__item:hover i { width: 22px; }
.pager__item:hover span { opacity: 1; transform: translateX(0); }
.pager__item.is-active { color: var(--accent); }
.pager__item.is-active i { width: 28px; background: var(--accent); }
.pager__item.is-active span { opacity: 1; transform: translateX(0); color: var(--fg-0); }

/* BOTTOM STATUS BAR */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 var(--page-pad);
  background: var(--bg-0);
  border-top: 1px solid var(--line-1);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em;
  color: var(--fg-2);
  z-index: 10;
}
.bar__l, .bar__r { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.bar__k { color: var(--fg-3); }
.bar__v { color: var(--fg-1); }
.bar__c { overflow: hidden; }
.bar__tick {
  display: inline-block; white-space: nowrap;
  animation: tick 40s linear infinite;
  color: var(--fg-2);
  font-size: 10.5px; letter-spacing: 0.16em;
  padding-left: 100%;
}
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


/* =================================================================
   NAV — disabled links
   ================================================================= */
.nav__link--disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* =================================================================
   responsive — chrome
   ================================================================= */
@media (max-width: 1100px) {
  .nav__c { display: none; }
  .nav__r { margin-left: auto; }
  .pager { display: none; }
}
@media (max-width: 720px) {
  .bar { font-size: 9.5px; gap: 12px; padding: 0 16px; }
  .bar__l { display: none; }
}
@media (max-width: 768px) {
  .rail, .lang { display: none; }
  .nav {
    padding-left: 20px;
    padding-right: 0;
    justify-content: space-between;
  }
  .nav__r { gap: 0; }
  .nav__cta { padding: 0 20px; font-size: 12px; }
  .bar__l { display: none; }
  .bar__c { flex: 1; }
  .bar__r { display: none; }
}