/* ============================================================
   BROWSER APP — Internal sn:// page browser.
   Character: Clean, information-forward. Like a polished docs site.
   ============================================================ */

.window.app-browser .window-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.browser-app {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
}

/* Address bar */
.browser-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f0f6ff 0%, #e2edff 100%);
  border-bottom: 1px solid rgba(24,100,200,0.18);
}

.browser-bar input {
  border: 1px solid rgba(24,100,200,0.28);
  border-radius: 8px;
  background: #ffffff;
  color: #0a1e40;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: 0.78rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.browser-bar input:focus {
  outline: none;
  border-color: rgba(24,100,200,0.60);
  box-shadow: 0 0 0 3px rgba(24,100,200,0.12);
}

.browser-bar button {
  border: 1px solid rgba(24,100,200,0.34);
  border-radius: 7px;
  background: linear-gradient(180deg, #3a8ff0, #1464c8);
  color: #ffffff;
  padding: 7px 16px;
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease;
}

.browser-bar button:hover { filter: brightness(1.12); }

/* Page content */
.browser-page {
  overflow: auto;
  padding: 28px 32px;
  background: #ffffff;
  color: #0a1830;
}

.browser-page h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.6rem);
  color: #050e22;
  margin: 0 0 10px;
  line-height: 1.0;
}

.browser-page p {
  color: #2a4880;
  line-height: 1.75;
  max-width: 70ch;
  margin: 0 0 18px;
}

/* Project cards inside browser */
.browser-page .project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.browser-page .project-card,
.browser-page .route-button {
  border: 1px solid rgba(24,100,200,0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, #f4f9ff, #e8f2ff);
  color: #0a1830;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.browser-page .project-card:hover,
.browser-page .route-button:hover {
  transform: translateY(-1px);
  border-color: rgba(24,100,200,0.38);
  background: linear-gradient(180deg, #ffffff, #deeeff);
}

.browser-page .project-card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0 0 5px;
  color: #091832;
}

.browser-page .project-card span { color: #4068a0; font-size: 0.80rem; }

/* Code/route display */
.browser-page code {
  background: rgba(24,100,200,0.10);
  border: 1px solid rgba(24,100,200,0.20);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: #1050a0;
}