/* Field Notes: the researcher's notebook (js/notebook.js), and the card + notes split in the
   card viewer. All values come from tokens.css. */

/* ---------- Notebook ---------- */
.nb {
  container-type: inline-size;
  position: relative; height: 100%; min-height: 0;
  display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(35deg, var(--c-shade-faint) 0 var(--s-hair), transparent var(--s-hair) var(--s-2)),
    var(--nb-kraft);
  color: var(--nb-kraft-ink);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.nb__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--nb-kraft-deep); color: var(--c-on-primary);
}
.nb__title { margin: 0; font-size: var(--fs-md); display: flex; align-items: center; white-space: nowrap; }
.nb__title .bi { flex-direction: row; gap: 0.4em; }
/* A narrow notebook keeps just the 📓, so the page buttons fit on one row. */
@container (max-width: 820px) { .nb__title .bi { display: none; } }
.nb__bar .btn { background: var(--c-shine-faint); color: var(--c-on-primary); box-shadow: none; }
.nb__bar .btn:disabled { opacity: 0.35; }
.nb__count { min-width: 3.5em; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.nb__filter {
  flex: none; white-space: nowrap; max-width: 100%; overflow: hidden;
  min-height: var(--tap-xs); padding: 0 var(--s-3); border: var(--bw-thin) solid var(--c-shine); border-radius: var(--r-pill);
  background: none; color: inherit; font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer;
}
.nb__filter .bi { flex-direction: row; gap: 0.4em; }

/* Wraps rather than scrolls, so every tool (and the pen / finger toggle at the end) stays in view. */
.nb__tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  background: var(--c-veil); color: var(--c-ink);
  touch-action: manipulation;
}
.nb__sep { flex: none; width: var(--bw-thin); align-self: stretch; margin: var(--s-1); background: var(--c-line); }
.nb__feet { display: none; gap: var(--s-1); }
.nb[data-tool="roller"] .nb__feet { display: flex; }
.nb-tool {
  flex: none; display: grid; place-items: center;
  width: var(--tap-sm); height: var(--tap-sm); border: var(--bw-thin) solid transparent; border-radius: var(--r-sm);
  background: none; font-size: var(--fs-lg); cursor: pointer; touch-action: manipulation;
}
.nb-tool--small { font-size: var(--fs-md); }
.nb-tool[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-good-soft); }
.nb-tool:disabled { opacity: 0.35; cursor: default; }
.nb-colour {
  flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: 50%;
  border: var(--bw-mid) solid var(--c-surface); box-shadow: var(--shadow-1);
  background: var(--pencil); cursor: pointer; touch-action: manipulation;
}
.nb-colour[aria-pressed="true"] { outline: var(--bw-mid) solid var(--c-ink); outline-offset: var(--s-hair); }
[data-colour="graphite"] { --pencil: var(--pencil-graphite); }
[data-colour="red"]      { --pencil: var(--pencil-red); }
[data-colour="orange"]   { --pencil: var(--pencil-orange); }
[data-colour="yellow"]   { --pencil: var(--pencil-yellow); }
[data-colour="green"]    { --pencil: var(--pencil-green); }
[data-colour="blue"]     { --pencil: var(--pencil-blue); }
[data-colour="purple"]   { --pencil: var(--pencil-purple); }
[data-colour="brown"]    { --pencil: var(--pencil-brown); }
.nb-size { display: block; border-radius: 50%; background: var(--c-ink); }
.nb-size--thin { width: var(--s-2); height: var(--s-2); }
.nb-size--thick { width: var(--s-4); height: var(--s-4); }
/* Pen only / finger drawing. */
.nb-input {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: var(--tap-sm); padding: 0 var(--s-3); border: var(--bw-thin) solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-surface); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer;
}
.nb-input .bi { flex-direction: row; gap: 0.3em; }
.nb-input[aria-pressed="true"] { border-color: var(--c-primary); }
/* Phones: one row of tools that scrolls sideways, smaller page buttons, and the pen / finger
   toggle first (just its icon) so it never scrolls out of sight. */
@container (max-width: 520px) {
  .nb__bar { gap: var(--s-1); padding: var(--s-1) var(--s-2); }
  .nb__bar .btn--icon { width: var(--tap-xs); height: var(--tap-xs); min-width: var(--tap-xs); min-height: var(--tap-xs); }
  .nb__tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
  .nb__tools::-webkit-scrollbar { display: none; }
  .nb-input { order: -1; justify-content: center; width: var(--tap-sm); padding: 0; }
  .nb-input .bi { display: none; }
}

/* The desk (kraft) and the page on it. */
.nb__desk { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; touch-action: none; }
.nb__sheet { position: relative; border-radius: var(--r-sm); box-shadow: var(--shadow-3); overflow: hidden; background: var(--nb-paper); }
.nb__sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nb__live { touch-action: none; cursor: crosshair; }
.nb[data-tool="move"] .nb__live { cursor: grab; }
.nb__overlay { position: absolute; inset: 0; pointer-events: none; }
.nb__overlay > * { pointer-events: auto; }

/* Before the first page: a kraft cover with a label. */
.nb__empty {
  display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-6) var(--s-5);
  border-radius: var(--r-md); background: var(--nb-kraft-deep); color: var(--c-on-primary);
  box-shadow: var(--shadow-3); text-align: center; max-width: var(--sheet-w);
}
.nb__empty .bi { align-items: center; }

/* Selection: move by dragging, a handle to resize, one to turn, and delete. */
.nb-sel { position: absolute; border: var(--bw-thin) dashed var(--c-primary); transform-origin: 50% 50%; pointer-events: none; }
.nb-sel__h {
  position: absolute; width: var(--tap-xs); height: var(--tap-xs); margin: calc(var(--tap-xs) / -2);
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--c-primary); color: var(--c-on-primary); font-weight: var(--fw-bold);
  box-shadow: var(--shadow-1); pointer-events: auto; touch-action: none; cursor: pointer;
}
.nb-sel__resize { right: 0; bottom: 0; margin-right: calc(var(--tap-xs) / -2); margin-bottom: calc(var(--tap-xs) / -2); cursor: nwse-resize; }
.nb-sel__rotate { left: 50%; top: 0; margin-top: calc(var(--tap-xs) * -1.2); cursor: grab; }
.nb-sel__del { right: 0; top: 0; margin-right: calc(var(--tap-xs) / -2); background: var(--c-bad); }

.nb-text {
  position: absolute; min-width: 8em; padding: 0; margin: 0;
  border: var(--bw-thin) dashed var(--c-primary); background: var(--c-shine-soft);
  font-family: var(--font); line-height: 1.25; resize: none; outline: none;
  user-select: text; -webkit-user-select: text;
}

.nb__toast {
  position: absolute; left: 50%; bottom: var(--s-4); transform: translateX(-50%); z-index: 3;
  max-width: calc(100% - var(--s-6)); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-surface); font-weight: var(--fw-semi); text-align: center;
  animation: pop-in var(--t-med) var(--ease-bounce);
}
.nb__toast .bi { align-items: center; }

/* Menus inside the notebook */
.nb-menu__list { display: grid; gap: var(--s-2); }
.nb-menu__list .btn { justify-content: flex-start; }
.nb-menu__list .bi { flex-direction: row; gap: 0.4em; }
.nb-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-medal), 1fr)); gap: var(--s-2); max-height: 50dvh; overflow-y: auto; }
.nb-pick__item {
  display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-2);
  border: var(--bw-thin) solid var(--g, var(--c-line)); border-radius: var(--r-md);
  background: var(--c-surface); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semi); cursor: pointer;
}
.nb-pick__item img { height: var(--tap); width: auto; object-fit: contain; }
.nb-pick__item .bi { align-items: center; text-align: center; }
.nb-pick__emoji { font-size: var(--fs-xl); line-height: 1; }

/* Field Notes as a page of the app */
.main[data-view="notes"] { padding: 0; overflow: hidden; }

/* Tile: Field Notes pages linked to the card */
.tile__notes {
  position: absolute; right: var(--s-1); bottom: calc(var(--s-6) + var(--s-2)); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--s-hair);
  min-height: var(--hotspot); padding: 0 var(--s-2); border-radius: var(--r-pill);
  background: var(--nb-kraft-deep); color: var(--c-on-primary); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  box-shadow: var(--shadow-1); cursor: pointer;
}

/* ---------- Card + notes in the viewer ---------- */
.viewer__pane { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.viewer__notes-n {
  position: absolute; top: calc(-1 * var(--s-1)); right: calc(-1 * var(--s-1));
  min-width: var(--hotspot); height: var(--hotspot); padding: 0 var(--s-1); border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--nb-kraft-deep); color: var(--c-on-primary); font-size: var(--fs-xs);
}
.viewer__bar .viewer__notes { position: relative; }
.viewer__bar .viewer__notes.is-on { background: var(--nb-kraft); color: var(--c-on-primary); }
.viewer__tabs { display: none; }
.viewer__divider, .viewer__notespane { position: relative; z-index: 1; }
.viewer__notespane { min-width: 0; min-height: 0; }

.viewer.is-split { flex-direction: row; }
.viewer.is-split .viewer__pane { flex: 0 0 calc(var(--split, 0.5) * 100%); }
.viewer.is-split .viewer__notespane { flex: 1 1 0; }
.viewer__divider {
  flex: none; width: var(--s-4); cursor: col-resize; touch-action: none;
  background: var(--nb-kraft-deep);
  display: grid; place-items: center;
}
.viewer__divider::after { content: ""; width: var(--s-1); height: var(--s-7); border-radius: var(--r-pill); background: var(--c-shine); }
.viewer__divider.is-dragging, .viewer__divider:focus-visible { background: var(--nb-kraft); }
/* One pane fills the screen. */
.viewer.is-max-card .viewer__divider, .viewer.is-max-card .viewer__notespane,
.viewer.is-max-notes .viewer__divider, .viewer.is-max-notes .viewer__pane { display: none; }
.viewer.is-max-card .viewer__pane { flex-basis: 100%; }

/* Portrait tablets: one above the other. */
@media (orientation: portrait) and (min-width: 700px) {
  .viewer.is-split { flex-direction: column; }
  .viewer__divider { width: auto; height: var(--s-4); cursor: row-resize; }
  .viewer__divider::after { width: var(--s-7); height: var(--s-1); }
}
/* Phones: Card | Notes tabs, one pane at a time. */
@media (max-width: 699px) {
  .viewer.is-split { flex-direction: column; }
  .viewer.is-split .viewer__tabs {
    display: flex; position: relative; z-index: 2; gap: var(--s-1);
    padding: max(var(--s-1), env(safe-area-inset-top)) var(--s-2) var(--s-1); background: var(--nb-kraft-deep);
  }
  .viewer__tab {
    flex: 1; min-height: var(--tap-sm); border: 0; border-radius: var(--r-md);
    background: none; color: var(--c-on-primary); font: inherit; font-weight: var(--fw-bold); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  }
  .viewer__tab .bi { flex-direction: row; gap: 0.4em; }
  .viewer__tab[aria-selected="true"] { background: var(--nb-kraft); }
  .viewer.is-split .viewer__divider, .viewer .nb__max { display: none; }
  .viewer.is-split .viewer__pane, .viewer.is-split .viewer__notespane { flex: 1 1 0; }
  .viewer.is-split[data-pane="notes"] .viewer__pane, .viewer.is-split[data-pane="card"] .viewer__notespane { display: none; }
}