/* ==========================================================================
   CUADERNO
   ========================================================================== */
.view-journal { padding-top: 0; padding-bottom: 0; }
.view-journal > .journal { max-width: 1360px; }
.journal {
  display: grid;
  grid-template-columns: 320px 1fr;
  height: 100%;
  min-height: 100%;
}
.journal-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-5) var(--space-5) 0;
  border-right: 1px solid var(--line);
  min-height: 0;
}
.journal-side-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.journal-side .view-title { margin-top: var(--space-2); }
.journal-list { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 2px; margin: 0 calc(-1 * var(--space-2)); padding: 0 var(--space-2); }
.j-item {
  display: grid;
  gap: 3px;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius);
  text-align: left;
  transition: background-color var(--dur-1);
}
.j-item:hover { background: var(--sunk); }
.j-item.is-active { background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.j-item b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-item p { font-size: var(--fs-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-item time { font-size: .7rem; color: var(--ink-4); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.journal-main { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.journal-empty { margin: auto; }
.journal-doc { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.journal-doc-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-2); }
.journal-meta { font-size: .75rem; font-weight: 600; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.save-state { margin-left: auto; font-size: .75rem; color: var(--ink-3); transition: opacity var(--dur-2); }

.journal-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 var(--space-5);
  padding: 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-width: 36px;
  height: 36px;
  padding: 0 .5em;
  border-radius: 99px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-2);
}
.tool:hover { background: var(--sunk); color: var(--ink); }
.tool .icon { width: 18px; height: 18px; }
.tool-wide { padding: 0 .9em; font-weight: 600; }
.tool-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }

.journal-page { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-5) var(--space-8); }
.journal-page > * { max-width: 720px; margin-inline: auto; }
.journal-title {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: var(--space-5);
  resize: none;
  overflow: hidden;
  field-sizing: content;
}
.journal-title::placeholder { color: var(--ink-4); }

.prose {
  min-height: 50vh;
  outline: none;
  font-family: var(--font-reading);
  font-size: calc(var(--read-size) - 1px);
  line-height: var(--read-leading);
  color: var(--ink);
}
.prose { position: relative; }
.prose.is-empty::before { content: attr(data-placeholder); position: absolute; top: 0; left: 0; right: 0; color: var(--ink-4); pointer-events: none; }
.prose > * + * { margin-top: .9em; }
.prose h2 { font-family: var(--font-display); font-size: 1.9em; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; margin-top: 1.4em; }
.prose h3 { font-family: var(--font-ui); font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: 1.8em; }
.prose blockquote { padding-left: 1em; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose a { color: var(--accent); text-decoration: underline; }

.ref-badge {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .02em .55em .06em;
  margin: 0 .1em;
  border-radius: 99px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  vertical-align: .08em;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.ref-badge:hover { background: var(--accent); color: var(--accent-ink); }
.ref-quote {
  margin: 1.2em 0;
  padding: 1em 1.2em;
  border-radius: var(--radius);
  background: var(--sunk);
  border-left: 3px solid var(--accent);
  font-style: normal !important;
}
.ref-quote cite { display: block; margin-top: .4em; font-family: var(--font-ui); font-size: .72em; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

.journal-media { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.journal-media h3 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-3); }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.video { display: grid; gap: var(--space-2); }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame button { position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: center; }
.video-frame button::after { content: ""; width: 64px; height: 44px; border-radius: 12px; background: rgb(0 0 0 / .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 24px no-repeat; }
.video-foot { display: flex; justify-content: flex-end; }

@media (max-width: 960px) {
  .journal { grid-template-columns: 260px 1fr; }
}
@media (max-width: 760px) {
  .view-journal { padding-inline: 0; }
  .journal { grid-template-columns: 1fr; }
  .journal-side { padding: var(--space-5) var(--gutter) calc(var(--tabbar-h) + var(--space-5)); border-right: 0; }
  .journal.is-editing .journal-side { display: none; }
  .journal:not(.is-editing) .journal-main { display: none; }
  .journal-doc-head { padding: var(--space-3) var(--space-3) var(--space-2); }
  .journal-toolbar { margin: 0 var(--space-3); border-radius: var(--radius); overflow-x: auto; flex-wrap: nowrap; }
  .journal-page { padding: var(--space-5) var(--gutter) calc(var(--tabbar-h) + var(--space-8)); }
}