#journalview {
  grid-area: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  align-content: start;
  gap: 16px;
  padding: 24px;
  background: #0a1121;
  color: #e9eef9;
}
.journal-head, .journal-note-form, .journal-note, .journal-scientist, .journal-sheet {
  border: 1px solid #243055;
  border-radius: 14px;
  background: #111a30;
  padding: 18px;
}
.journal-head { display: grid; gap: 6px; }
.journal-head > span { color: #8fa6ff; font: 700 11px ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.journal-head h2 { margin: 0; font-size: 22px; }
.journal-head p, .journal-note small { margin: 0; color: #9daccc; }
.journal-tabs, .journal-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.journal-tabs button, .journal-toolbar button, .journal-toolbar select, .journal-note-form select, .journal-note-form button {
  border: 1px solid #344269;
  border-radius: 9px;
  background: #182442;
  color: #e9eef9;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.journal-tabs button.active, .journal-toolbar button.primary, .journal-note-form button { background: #5b46f0; border-color: #5b46f0; color: #fff; }
.journal-note-form { display: grid; gap: 10px; }
.journal-note-form label { font-weight: 700; }
.journal-note-form textarea { box-sizing: border-box; width: 100%; min-height: 110px; resize: vertical; background: #0b1326; color: #e9eef9; border: 1px solid #344269; border-radius: 9px; padding: 12px; font: inherit; }
.journal-note-form button { justify-self: start; }
.journal-note-form small { color: #efadad; }
.journal-note p { margin: 8px 0 0; white-space: pre-wrap; }
.journal-scientist h3, #journalview > h3 { margin: 0 0 8px; }
.journal-scientist p { margin: 6px 0; }
.journal-empty { color: #aebbd2; }
.journal-sheet { line-height: 1.75; overflow-wrap: anywhere; }
.journal-sheet h1 { margin: 0 0 18px; font-size: 26px; }
.journal-sheet h2 { margin: 22px 0 6px; font-size: 16px; color: #c6d2f1; }
.journal-sheet p { margin: 0 0 8px; white-space: pre-line; }
.journal-sheet a { color: #8fddcc; }
@media (max-width: 860px) { #journalview { grid-area: main; padding: 16px; } }
@media print {
  body:has(#journalview[style*="display: grid"]) > :not(#journalview) { display: none !important; }
  #journalview { display: block !important; color: #111; background: #fff; overflow: visible; padding: 0; }
  .journal-head, .journal-tabs, .journal-toolbar, .journal-note-form { display: none !important; }
  .journal-sheet { border: 0; background: #fff; color: #111; padding: 0; }
}

/* Research studio: contained layout, illuminated materials, and quiet depth. */
#journalview {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  padding: 82px clamp(18px, 3vw, 42px) 40px;
  background: radial-gradient(ellipse at 95% 8%, #633fc32b, transparent 48%),
    radial-gradient(ellipse at 0% 48%, #2bafbe16, transparent 50%), #090e1d;
  scrollbar-color: #504578 #0a1121;
  container-type: inline-size;
}
#journalview > * { min-width: 0; grid-area: auto; }
#journalview .journal-head {
  display: grid;
  position: relative;
  overflow: hidden;
  gap: 20px;
  padding: clamp(22px, 4cqi, 38px);
  border-radius: 24px;
  border-color: #bc9eff45;
  background: radial-gradient(ellipse at 100% 0%, #b48cff30, transparent 65%),
    linear-gradient(135deg, #252044, #121b32 65%, #122b38);
  box-shadow: inset 0 1px #e1d7ff33, 0 20px 46px #0005, 0 2px 4px #0005;
}
#journalview .journal-head::after {
  content: ""; position: absolute; width: 160px; height: 160px; right: -80px; top: -80px;
  border: 1px solid #dacaff40; border-radius: 50%;
  box-shadow: 0 0 0 18px #cdbaff09, 0 0 0 42px #cdbaff06, 0 0 65px #b991ff30;
  pointer-events: none;
}
#journalview .journal-head > span { color: #bdacf7; font-size: 10px; letter-spacing: .14em; line-height: 1.7; }
#journalview .journal-head > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: #8df1d5; box-shadow: 0 0 12px #8df1d5aa; }
#journalview .journal-head h2 { font-size: clamp(25px, 5.8cqi, 40px); line-height: 1.17; letter-spacing: -.035em; font-weight: 650; max-width: 24ch; overflow-wrap: anywhere; }
.journal-summary { display: none; }
.journal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.journal-stats > div { display: grid; gap: 4px; padding: 12px 8px; border-top: 1px solid #c3bcff24; }
.journal-stats strong { font-size: 25px; font-weight: 500; letter-spacing: -.04em; color: #faf6ff; }
.journal-stats span { color: #b7c0d7; font-size: 10px; line-height: 1.4; }
.journal-stats > div:last-child strong { color: #e7bf96; }
.journal-tabs { margin: 0; padding: 5px; gap: 4px; width: fit-content; max-width: 100%; border: 1px solid #b4a4ee20; border-radius: 13px; background: #060b1977; }
.journal-tabs button { background: transparent; border-color: transparent; font-size: 12px; padding: 9px 12px; }
.journal-tabs button.active, .journal-toolbar button.primary, .journal-note-form button {
  background: linear-gradient(155deg, #9479fa, #6244df); border-color: #c5b3ff55;
  box-shadow: inset 0 1px #ffffff35, 0 4px 12px #27136377;
}
.journal-note-form, .journal-note, .journal-scientist, .journal-sheet {
  position: relative; border-radius: 20px; border-color: #91a5d329;
  background: linear-gradient(145deg, #1b2740e6, #11192de6);
  box-shadow: inset 0 1px #d5e4ff12, 0 8px 24px #0003;
  padding: 22px; overflow-wrap: anywhere;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.journal-note-form { gap: 14px; }
.journal-note-form label { font-size: 16px; letter-spacing: -.02em; }
.journal-note-form textarea { min-height: 130px; border-color: #94a8dd30; border-radius: 12px; background: #090f20a6; line-height: 1.65; box-shadow: inset 0 2px 6px #0003; }
.journal-note-form textarea::placeholder { color: #8998b4; }
.journal-note-form select, .journal-toolbar select { min-width: 0; max-width: 100%; background: #121b30; border-color: #94a8dd30; }
#journalview :is(button, select, textarea, a):focus-visible { outline: 2px solid #b7a2ff; outline-offset: 4px; }
#journalview button { transition: transform .18s ease, filter .18s ease; }
#journalview button:active { transform: translateY(1px); }
#journalview button:disabled { opacity: .55; cursor: wait; }
#journalview > h3 { margin: 12px 0 0; padding-left: 3px; color: #b5c2dc; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.journal-note { border-left: 2px solid #a38afc; padding-left: 25px; }
.journal-note[data-kind="observation"] { border-left-color: #67d8d0; }
.journal-note[data-kind="anomaly"] { border-left-color: #efb782; }
.journal-note small { font-size: 10px; letter-spacing: .035em; line-height: 1.7; }
.journal-note p { line-height: 1.75; color: #dbe3f5; font-size: 14px; }
.journal-scientist { background: radial-gradient(ellipse at 100% 0%, #369d9b20, transparent 70%), #111c2c; }
.journal-scientist h3 { font-size: 16px; letter-spacing: -.02em; color: #9cdbd5; }
.journal-scientist p, .journal-empty { color: #a5b6d0; line-height: 1.75; }
.journal-sheet { padding: clamp(22px, 5cqi, 42px); background: linear-gradient(110deg, #20293c, #172032); border-top: 2px solid #baa7ec; }
.journal-sheet h1 { letter-spacing: -.03em; line-height: 1.25; }
.journal-sheet h2 { border-bottom: 1px solid #94a8dd20; padding-bottom: 10px; }
.journal-sheet a { text-underline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .journal-note:hover { transform: perspective(900px) translateY(-3px) rotateX(1deg); border-color: #b59bf66b; box-shadow: inset 0 1px #e2d6ff28, 0 16px 32px #0005, 0 0 22px #775bcc0c; }
  #journalview button:hover { filter: brightness(1.13); }
}
@container (max-width: 360px) { .journal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { #journalview *, #journalview *::after { animation: none !important; transition: none !important; } }
@media (max-width: 860px) { #journalview { padding: 78px 16px 24px; } }
@media print {
  body:has(#journalview[style*="display: grid"]) { display: block !important; height: auto !important; overflow: visible !important; }
  #journalview { padding: 0; background: white; container-type: normal; }
  #journalview .journal-head, .journal-toolbar, .journal-note-form { display: none !important; }
  .journal-sheet, .journal-note, .journal-scientist { background: white; color: #111; box-shadow: none; border: 0; break-inside: avoid; }
  #journalview :is(p, h1, h2, h3, small, a) { color: #111; }
}

/* A browsable card deck keeps the notebook bounded as research grows. */
#journalview .journal-head { gap: 14px; padding: 24px; }
#journalview .journal-head h2 { font-size: clamp(23px, 4.5cqi, 34px); }
.journal-stats > div { padding: 8px 4px 0; }
.journal-stats strong { font-size: 22px; }
.journal-tabs { width: auto; }
.journal-tabs button { flex: 1 0 auto; padding: 8px 10px; }
.journal-workspace { display: grid; gap: 18px; padding: 0 4px 12px; }
.journal-deck-controls { display: flex; gap: 8px; }
.journal-workspace :is(input, select, button) {
  min-width: 0; border: 1px solid #9eace033; border-radius: 10px; padding: 10px 12px;
  background: #141e33; color: #e9eef9; font: inherit; font-size: 12px;
}
.journal-deck-controls input { flex: 1; width: 0; }
.journal-deck-controls select { max-width: 45%; }
.journal-workspace > select { width: 100%; text-overflow: ellipsis; }
.journal-deck { position: relative; isolation: isolate; margin: 0 6px 8px; outline-offset: 6px; }
.journal-deck::before, .journal-deck::after {
  content: ""; position: absolute; inset: 10px 5px -6px; z-index: -1; border: 1px solid #9a85cc38;
  border-radius: 20px; background: #1c2440; transform: rotate(1.2deg); pointer-events: none;
}
.journal-deck::after { inset: 14px 10px -12px; z-index: -2; transform: rotate(-1.3deg); background: #10192c; }
.journal-deck-card { height: clamp(190px, 26vh, 320px); overflow: auto; box-sizing: border-box; background: linear-gradient(135deg, #25314a, #141c31 80%); }
.journal-deck-card h3 { font-size: 20px; line-height: 1.35; margin: 14px 0 8px; letter-spacing: -.025em; }
.journal-deck-card a { display: block; color: #a7e6dd; margin-top: 12px; text-underline-offset: 4px; }
.journal-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journal-pager span { font-size: 12px; color: #b2bfd9; font-variant-numeric: tabular-nums; }
.journal-pager button { cursor: pointer; }
#journalview .journal-pager button:disabled { cursor: default; opacity: .35; }
@keyframes journal-card-arrive { from { opacity: .3; transform: perspective(900px) translateX(12px) rotateY(-4deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .journal-deck-card { animation: journal-card-arrive .24s ease-out; } }
@media print { .journal-deck-controls, .journal-pager, .journal-workspace > select { display: none; } .journal-deck-card { height: auto; overflow: visible; } .journal-deck::before, .journal-deck::after { display: none; } }

/* Scientist-controlled workspace and accessible tools. */
#journalview { --journal-accent: #bba6ff; }
#journalview[data-accent="teal"] { --journal-accent: #80e0d0; }
#journalview[data-accent="amber"] { --journal-accent: #f4cb88; }
#journal-panel { display: grid; gap: 16px; min-width: 0; }
#journalview .journal-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#journalview .journal-tabs button { min-height: 44px; flex: 0 0 auto; }
#journalview :is(button, input, select, summary) { min-height: 44px; }
#journalview :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible { outline: 3px solid var(--journal-accent); outline-offset: 3px; }
#journalview .journal-note { border-left-color: var(--journal-accent); }
#journalview .journal-head > span { color: var(--journal-accent); }
.journal-config { display: grid; gap: 16px; padding: 24px; border: 1px solid #9aadd533; border-radius: 20px; background: linear-gradient(130deg, #1d2940, #111a2d); box-shadow: inset 0 1px #ffffff14, 0 12px 30px #0003; }
.journal-config h3 { font-size: 22px; letter-spacing: -.025em; }
.journal-config p { color: #bfcbe0; line-height: 1.65; }
.journal-config :is(form, .journal-tool-review, .journal-tool-shelf, .journal-measurement) { display: grid; gap: 12px; min-width: 0; }
.journal-config :is(input, select, textarea, button) { width: 100%; min-width: 0; border: 1px solid #8da4d54d; border-radius: 10px; padding: 10px 12px; background: #0c1527; color: #edf2ff; font: inherit; }
.journal-config label { font-weight: 550; color: #dce5f5; }
.journal-config textarea { min-height: 90px; resize: vertical; }
.journal-config button { cursor: pointer; background: #303559; }
.journal-config button[type="submit"] { background: linear-gradient(130deg, #7459d9, #5135b4); }
.journal-config button:disabled { cursor: default !important; }
.journal-tool-review:empty { display: none; }
.journal-tool-review, .journal-measurement { padding: 20px; border-radius: 16px; border: 1px solid #b8a4ff40; background: #101a2b; }
.journal-config .journal-equipment-status { color: #f1cd91; font-size: 12px; }
.journal-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.journal-settings-grid > div { display: grid; gap: 8px; }
.journal-section-setting { display: flex; align-items: center; gap: 8px; }
.journal-section-setting label { flex: 1; display: flex; gap: 10px; align-items: center; min-width: 0; }
.journal-section-setting input { width: 22px; height: 22px; min-height: 22px !important; accent-color: #9b82f9; }
.journal-section-setting button { width: 44px; flex: 0 0 44px; }
.journal-config details { overflow-x: auto; }
.journal-config summary { padding: 10px 0; cursor: pointer; }
.journal-config table { width: 100%; border-collapse: collapse; font-size: 12px; }
.journal-config :is(th, td) { padding: 10px; text-align: left; border-bottom: 1px solid #7588b34d; overflow-wrap: anywhere; }
.journal-config caption { text-align: left; padding: 8px; color: #bdcbe4; }
#journalview[data-density="compact"] :is(.journal-head, .journal-config, .journal-note, .journal-note-form) { padding: 16px; gap: 10px; }
#journalview[data-size="large"] { font-size: 17px; }
#journalview[data-size="large"] :is(.journal-note p, .journal-tabs button, .journal-workspace input, .journal-workspace select, .journal-workspace button, .journal-pager span) { font-size: 16px; }
#journalview[data-contrast="high"] :is(.journal-head, .journal-note, .journal-config, .journal-note-form, .journal-sheet) { background: #080e1b; border-color: #b7c9ed; }
#journalview[data-contrast="high"] :is(p, small, label, .journal-stats span) { color: #f2f5ff; }
#journalview[data-motion="off"] *, #journalview[data-motion="off"] *::after { animation: none !important; transition: none !important; transform: none !important; }
@media (min-width: 861px) {
  body:has(#journalview[data-width="wide"][style*="display: grid"]) { grid-template-columns: var(--rail) var(--c-chats) 0 minmax(0, 1fr) var(--c-chat); }
  body:has(#journalview[data-width="wide"][style*="display: grid"]) #peelcol { display: none !important; }
}
body:has(#journalview[style*="display: grid"]) #graphbar .graph-only { display: none !important; }
@container (max-width: 380px) { .journal-settings-grid { grid-template-columns: minmax(0, 1fr); } .journal-config { padding: 16px; } }
@media (forced-colors: active) { #journalview * { box-shadow: none; } #journalview button { border: 1px solid ButtonText; } .journal-tabs button.active { outline: 2px solid Highlight; } }
@media print { #journal-panel { display: block; } .journal-config form, .journal-config button { display: none; } }