/* Profile (DCOSMOS-PROFILE): the Surveyor's License and Passport under a
   License | Passport toggle, then the Friends section. Since
   SC-SHIP-INTERIOR (DESIGN_DECISIONS.md section 66) this is a popup inside
   the Ship Interior (index.html #profilePopup, js/profile-popup.js), not a
   screen of its own; the popup's own rules follow the document rules
   below. Tight spacing, small clear headers, no dead vertical space; every
   control still meets the 40px touch-target floor. */
/* DCOSMOS-DOCTOGGLE: the LICENSE | PASSPORT pill toggle, the ship
   builder's Build/Orbit Preview tabs (assets/ship-generator.html
   .mode-tabs) reproduced here -- border, radius, background, font, and
   active-state colors copied verbatim, laid in-flow instead of
   position: fixed over a 3D scene. */
.profile-doc-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid #2a3542; border-radius: 9px;
  background: rgba(8, 11, 15, 0.9);
}
.profile-doc-tabs button {
  appearance: none; border: none; background: none; color: #7d8ea6; cursor: pointer;
  font: 500 11px/1 var(--font-data); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0 14px; min-height: 40px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.profile-doc-tabs button:hover { color: #d3dde9; }
.profile-doc-tabs button[data-active="1"] { background: #1a222c; color: #e4ecf5; }
/* The toggle and the one visible document sit as one unit, centered in the
   popup card at every width (owner correction 2026-08-23: the earlier
   flush-left desktop layout left the license/passport hugging the left
   edge with the whole right half of the screen empty). The panel is the
   card's scrolling area: on a screen shorter than the documents it
   scrolls inside the card while the card's close control stays put. */
.profile-doc-panel {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 4px 8px 6px; width: 100%; min-height: 0; overflow-y: auto;
}
/* The license card + passport book (DESIGN_DECISIONS.md section 26),
   js/license-card.js + js/passport-book.js. Only one mount is ever visible
   at a time (the other carries the `hidden` attribute). This box is a full-
   width, definite-size row that centers whichever mount is showing with
   justify-content -- a plain CSS fix (owner correction 2026-08-23) for two
   bugs the old width: fit-content box had: the fit-content parent gave the
   mount's own width: 100% nothing definite to resolve against, so it
   either collapsed to 0 or (once the mount forced its own pixel width
   through JS) silently overflowed past this box's edge -- either way, the
   card never landed centered. */
.profile-credentials { width: 100%; padding: 8px 0 4px; display: flex; justify-content: center; }
/* The Friends section (SC-FRIENDS-LIST, js/friends-list.js): an honest
   empty surface directly under the documents, reserving the home the
   friends mechanic will live in. Same border/background family as
   .profile-doc-tabs above, so it reads as app UI, not a third paper
   document; the header and empty-state text reuse the section classes
   this file already carries. */
.profile-friends { width: 100%; max-width: 560px; margin: 2px auto 0; box-sizing: border-box; border: 1px solid #2a3542; border-radius: 9px; background: rgba(8, 11, 15, 0.9); padding: 10px 14px 4px; }
/* SC-SHIP-INTERIOR: the popup itself. A scrim over the whole interior
   (absolute inside #ship, the fixed layer from the header line down, so
   the header's nav buttons stay reachable above it and a nav press closes
   it) with the card centered on it. The card is a column: the close
   control floats in its top-right corner, sharing the row with the
   centered toggle, and the document panel above scrolls. The top padding
   clears the nav buttons hanging below the header line. */
.profile-popup { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-hang, 42px) + 10px) 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(4, 8, 16, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.profile-popup[hidden] { display: none; }
.profile-popup-card { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: 100%; background: linear-gradient(180deg, #0d1526, #080d18); border: 1px solid rgba(120, 160, 220, 0.28); border-radius: 16px; box-shadow: 0 24px 90px rgba(0, 0, 0, 0.6); padding: 10px 6px 8px; }
/* A 44px round X, the same close control the capture screen floats over its camera view (css/cosmos-scanner.css .scanner-close). */
.profile-popup-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(4, 8, 16, 0.62); color: #f1f5f9; font-size: 28px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.profile-popup-close:hover { border-color: var(--accent); color: var(--accent); }
.profile-section { padding: 10px 14px; }
.profile-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
  min-height: 20px;
}
.profile-section-header h3 {
  margin: 0; font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.profile-empty {
  color: var(--text-dim); font-size: 12px;
  text-align: center; padding: 10px 0;
}
/* Surveyor's Journal (DESIGN_DECISIONS.md section 22): one merged,
   day-grouped event stream, one plain sentence per row. Replaces the old
   Discovery Feed / Discovery Timeline / Recent Discoveries / Scan Log
   sections below it -- those four CSS blocks are gone with them. The
   journal screen (index.html #journal) wraps this stream in the same
   aged-paper sheet the license and passport wear -- the tokens below are
   copied verbatim from css/cosmos-passport.css's .passport-shell, not a
   new paper invented for this screen. Physical-document reasoning again:
   theme-invariant, ink on parchment regardless of the app's light/dark
   theme setting. */
.journal-sheet {
  position: relative; max-width: 640px; margin: 0 auto; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(122, 52, 32, .45);
  background: linear-gradient(160deg, #d9c79a, #c9b076 60%, #b89c5e);
  box-shadow: 0 22px 48px rgba(0, 0, 0, .5);
  --card-ink: #3a2c14; --card-dim: #8a7550; --card-accent: #7a3420;
  --card-line: rgba(122, 52, 32, .45); --card-hair: rgba(40, 25, 5, .18);
}
.journal-texture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.journal-sheet-content { position: relative; z-index: 1; padding: 6px 16px 16px; }
.journal-sheet-content .profile-section-header h3 { color: var(--card-ink); }
.journal-stream {
  max-height: 420px;
  overflow-y: auto;
}
.journal-date-group { margin-bottom: 2px; }
.journal-date-label {
  font-size: 11px;
  color: var(--card-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-data);
  padding: 8px 0 4px;
  font-weight: 600;
}
.journal-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--card-hair);
}
.journal-entry:last-child { border-bottom: none; }
.journal-entry-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--card-accent);
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.journal-entry-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.journal-entry-text {
  font-size: 13px;
  color: var(--card-ink);
  flex: 1;
  min-width: 160px;
}
.journal-entry-time {
  font-size: 10px;
  color: var(--card-dim);
  font-family: var(--font-data);
  white-space: nowrap;
}
.journal-sheet-content .profile-empty { color: var(--card-dim); }
.journal-show-earlier {
  display: block;
  margin: 8px auto 2px;
  background: none;
  border: 1px solid var(--card-line);
  color: var(--card-dim);
  cursor: pointer;
  font-size: 12px;
  min-height: 40px;
  padding: 6px 16px;
  border-radius: 6px;
}
.journal-show-earlier:hover { color: var(--card-accent); border-color: var(--card-accent); }
/* SC-DOC-SPIN (owner 2026-08-26): each artwork panel reserves its full
   4:3 box before the image arrives and shows a spinner centered in it,
   so a slow connection reads as loading, never as an empty page. The
   image paints over it, and the ready class (set by the image's own
   load event) stops the animation so nothing spins forever unseen. */
.doc-art { position: relative; min-height: 180px; width: 100%; max-width: 1100px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: rgba(10, 16, 28, 0.55); }
.doc-art::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(148, 197, 255, 0.25); border-top-color: rgba(148, 197, 255, 0.9); animation: docArtSpin 0.9s linear infinite; }
.doc-art.ready::before { display: none; animation: none; }
.doc-art img { display: block; width: 100%; height: auto; }
@keyframes docArtSpin { to { transform: rotate(360deg); } }