/* Interface Portfolio project pages (/interface-portfolio/<slug>): sub-nav counter and go-to, progress line, hero, silver screenshot frames, bottom nav. Class prefix ip2-. */

/* Tokens: dark and light values match the pf2- tokens on interface-portfolio.html.
   Pink and blue are the site's own --pink and --blue page variables. */
[data-theme="dark"] {
  --ip2-text:    #ECECF0;
  --ip2-text-2:  #9A9AA3;
  --ip2-muted:   #7C7C85;
  --ip2-sep:     #3A3A42;
  --ip2-track:   #16161A;
  --ip2-line:    #1D1D21;
  --ip2-field:   #141418;
  --ip2-field-b: #2A2A30;
  --ip2-panel:   #0C0C0F;
  --ip2-hover:   #111115;
  --ip2-pink-a:  rgba(255,32,96,.7);
  --ip2-blue-a:  rgba(0,207,255,.7);
}
[data-theme="light"] {
  --ip2-text:    #0d0d0d;
  --ip2-text-2:  #5e6b7c;
  --ip2-muted:   #6b7d93;
  --ip2-sep:     #c2c9d2;
  --ip2-track:   #e4e8ee;
  --ip2-line:    #d5dae1;
  --ip2-field:   #ffffff;
  --ip2-field-b: #d5dae1;
  --ip2-panel:   #eef0f3;
  --ip2-hover:   #f8f9fb;
  --ip2-pink-a:  rgba(255,32,96,.7);
  --ip2-blue-a:  rgba(0,119,187,.7);
}

/* ── Context bar: All work + counter group ─────────────── */
.ip2-all { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--jb-text); padding: 6px 10px; border-radius: 8px; white-space: nowrap; flex: none; }
.ip2-all i { color: var(--blue); font-size: 16px; }
.ip2-all:hover { background: var(--jb-hover); color: var(--jb-text); }

.ip2-count { display: flex; align-items: center; height: 34px; border: 1px solid var(--jb-border); border-radius: 8px; overflow: hidden; flex: none; }
.ip2-count .ip2-arrow { width: 34px; height: 100%; display: grid; place-items: center; color: var(--jb-text-2); }
.ip2-count a.ip2-arrow:hover { background: var(--ip2-track); color: var(--jb-text); }
.ip2-count .ip2-arrow.is-off { opacity: .3; }
.ip2-count-mid { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; border-left: 1px solid var(--jb-border); border-right: 1px solid var(--jb-border); white-space: nowrap; font-family: var(--font-mono); font-size: 13px; color: var(--ip2-muted); }

.ip2-go-in {
  width: 38px; height: 24px; padding: 0;
  background: var(--ip2-field); border: 1px solid var(--ip2-field-b); border-radius: 5px;
  color: var(--ip2-text); font: inherit; text-align: center; outline: none;
  -moz-appearance: textfield;
}
.ip2-go-in::placeholder { color: var(--ip2-muted); opacity: 1; }
.ip2-go-in:focus { border-color: var(--pink); }
.ip2-total { white-space: nowrap; }
/* While the input has focus, a Go button (added by detail-v2.js) replaces the › arrow in the same spot */
.ip2-count .ip2-go-top { display: none; width: 34px; height: 100%; border-radius: 0; }
/* Keyed to the input's own focus (is-going), not :focus-within: a focused › link would hide itself mid-tap */
.ip2-count.is-going .ip2-go-top { display: grid; }
.ip2-count.is-going .ip2-arrow-next { display: none; }

/* 2px progress line along the bottom edge of the sticky bar */
.ip2-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ip2-track); pointer-events: none; }
.ip2-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--blue)); }

/* ── Content ───────────────────────────────────────────── */
.ip2-main { max-width: 960px; margin: 0 auto; padding: 56px 24px 72px; }

.ip2-kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }
.ip2-kicker .ip2-bar { color: var(--ip2-sep); margin: 0 8px; }
.ip2-kicker .ip2-n { color: var(--pink); }

.ip2-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 1.0; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ip2-text);
  margin: 14px 0 14px;
}

.ip2-meta { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 13px; color: var(--ip2-text-2); }
.ip2-pill { display: flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; border: 1px solid var(--ip2-field-b); border-radius: 999px; padding: 4px 12px; color: var(--ip2-text); }
.ip2-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.ip2-pill:hover { border-color: var(--blue); color: var(--ip2-text); }

/* Silver frame screenshots */
.ip2-shots { display: flex; flex-direction: column; gap: 28px; margin-top: 48px; }
.ip2-frame {
  position: relative; margin: 0; padding: 10px; border-radius: 14px;
  background: linear-gradient(160deg, #24262c, #131418 55%, #1c1d22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px #2a2c33, 0 30px 60px -36px rgba(0,0,0,.9);
}
.ip2-frame::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ip2-pink-a), var(--ip2-blue-a), transparent);
}
.ip2-frame img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Bottom nav: Prev | Go to + All work | Next */
.ip2-bnav { margin-top: 56px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); border: 1px solid var(--ip2-line); border-radius: 12px; overflow: hidden; }
.ip2-side { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; color: var(--ip2-text); }
a.ip2-side:hover { background: var(--ip2-hover); color: var(--ip2-text); }
.ip2-side.is-off { opacity: .3; }
.ip2-prev { border-top: 2px solid var(--pink); }
.ip2-next { border-top: 2px solid var(--blue); text-align: right; }
.ip2-dir { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; white-space: nowrap; }
.ip2-prev .ip2-dir { color: var(--pink); }
.ip2-next .ip2-dir { color: var(--blue); }
.ip2-title { font-size: 16px; font-weight: 600; line-height: 1.3; }

.ip2-mid { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 18px 20px; border-left: 1px solid var(--ip2-line); border-right: 1px solid var(--ip2-line); background: var(--ip2-panel); }
.ip2-goto { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--ip2-muted); white-space: nowrap; }
.ip2-goto .ip2-go-in { width: 48px; height: 28px; border-radius: 6px; }
.ip2-go-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; border-radius: 6px; color: var(--blue); font-size: 16px; cursor: pointer; }
.ip2-go-btn:hover { background: var(--ip2-hover); }
.ip2-all-sm { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ip2-text-2); white-space: nowrap; }
.ip2-all-sm:hover { color: var(--ip2-text); }

.ip2-main :focus-visible { outline: 2px solid var(--jb-cyan); outline-offset: 2px; }

/* ── Context bar at the header's mobile breakpoint ─────────
   jb-header.css hides .jb-sub-item .jb-crumbs at 1100px and below (keyed to the class, not :has,
   to avoid a first-paint title flash). All work takes the left side, the counter gets 44px targets. */
@media (max-width: 1100px) {
  .ip2-all { flex: 1; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 15px; }
  .ip2-count { height: 40px; }
  .ip2-count .ip2-arrow, .ip2-count .ip2-go-top { width: 44px; font-size: 18px; }
  .ip2-count-mid { padding: 0 8px; }
  .ip2-go-in { width: 46px; height: 28px; font-size: 16px; } /* 16px stops iOS zooming on focus */
  .ip2-count-mid { font-size: 13px; }
}

/* ── Mobile content (4a) ───────────────────────────────── */
@media (max-width: 767px) {
  .ip2-main { padding: 32px 16px 40px; }
  .ip2-kicker { font-size: 11px; }
  .ip2-kicker .ip2-bar { margin: 0 6px; }
  .ip2-h1 { font-size: 38px; margin: 10px 0 12px; }
  .ip2-meta { flex-wrap: wrap; gap: 10px; font-size: 12px; }
  .ip2-pill { padding: 4px 10px; }

  .ip2-shots { gap: 18px; margin-top: 28px; }
  .ip2-frame { padding: 6px; border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px #2a2c33, 0 20px 40px -26px rgba(0,0,0,.9); }
  .ip2-frame::before { left: 16px; right: 16px; }
  .ip2-frame img { border-radius: 5px; }

  .ip2-bnav { margin-top: 36px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .ip2-side { padding: 16px; min-height: 84px; }
  .ip2-prev { grid-column: 1; grid-row: 1; border-right: 1px solid var(--ip2-line); }
  .ip2-next { grid-column: 2; grid-row: 1; }
  .ip2-dir { font-size: 10px; }
  .ip2-title { font-size: 14px; }
  .ip2-mid { grid-column: 1 / -1; grid-row: 2; flex-direction: row; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; border-top: 1px solid var(--ip2-line); }
  .ip2-goto .ip2-go-in { width: 52px; height: 36px; font-size: 16px; }
  .ip2-go-btn { width: 44px; height: 44px; font-size: 18px; }
  .ip2-all-sm { font-size: 14px; min-height: 44px; }
}