/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Safari/iOS can still render native disclosure markers on summary.
   Hide them for custom-caret summaries only. */
summary.list-none {
  list-style: none;
}

summary.list-none::-webkit-details-marker {
  display: none;
}

summary.list-none::marker {
  content: "";
}

/* Library rails are CSS-variable tracks so the resize controller only updates
   presentation. The same widths naturally carry between wide and medium modes. */
.library-shell-grid {
  --library-folders-width: 14rem;
  --library-notebooks-width: 19rem;
}

.library-books-icon {
  width: 1.375rem;
  height: 1.375rem;
}

/* The outlined books have less visual mass than the solid Today calendar.
   A small optical correction keeps the two header landmarks balanced. */
.surface-library-books-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.surface-library-books-drawer-icon {
  width: 1.1rem;
  height: 1.1rem;
}

/* Tablet and desktop split views can temporarily give the current notebook
   the full workspace. Phones keep their sequential Back navigation instead. */
@media (min-width: 48rem) {
  .library-shell-grid[data-library-layout-available="true"][data-library-layout="notebooks"] {
    grid-template-columns: var(--library-notebooks-width) minmax(0, 1fr);
  }

  .library-shell-grid[data-library-layout-available="true"][data-library-layout="notebooks"]
    > [data-library-panel="folders"] {
    display: none !important;
  }

  .library-shell-grid[data-library-layout-available="true"][data-library-layout="focus"]
    > [data-library-panel="folders"],
  .library-shell-grid[data-library-layout-available="true"][data-library-layout="focus"]
    > [data-library-panel="notebooks"] {
    display: none !important;
  }

  .library-shell-grid[data-library-layout-available="true"][data-library-layout="focus"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .library-shell-grid[data-library-layout-available="true"]:not([data-library-layout="focus"])
    [data-library-focus-enter],
  .library-shell-grid[data-library-layout-available="true"][data-library-layout="focus"]
    [data-library-focus-exit] {
    display: inline-flex;
  }

  /* In the medium overview, the Library toggle moves to Notebooks after the
     Library rail is hidden. Detail view has its own navigation copy. */
  .library-shell-grid[data-library-layout-available="true"][data-medium-mode="browse"][data-library-layout="notebooks"]
    [data-library-layout-control-position="notebooks"] {
    display: inline-flex;
  }
}

@media (min-width: 64rem) {
  /* Wide layouts have no separate medium navigation link, so the spatial
     toggle remains beside Notebooks in every non-aggregate view. */
  .library-shell-grid[data-library-layout-available="true"][data-library-layout="notebooks"]
    [data-library-layout-control-position="notebooks"] {
    display: inline-flex;
  }
}

/* The document header responds to the space of its resizable content panel,
   not merely to the browser width. This prevents a wide browser with a narrow
   content panel from forcing its title and controls into one another. */
[data-document-surface] {
  container-type: inline-size;
}

.document-header-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.document-header-title {
  grid-row: 2;
}

.document-header-controls {
  grid-row: 1;
  justify-self: end;
}

@container (min-width: 32rem) {
  .document-header-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .document-header-title {
    grid-column: 1;
    grid-row: 1;
  }

  .document-header-controls {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Review owns the live queue count once it replaces the Ready panel. The
   Library badge is the pre-session snapshot, so hide it until Review exits. */
.library-shell-grid:has([data-library-review-mode="true"])
  [data-library-view="due"]
  [data-library-view-count] {
  display: none;
}

/* Review owns the live remaining count after a session starts. Keep the app
   bar action available, but do not leave its pre-session number visible. */
body:has([data-library-review-mode="true"]) [data-app-ready-count] {
  display: none;
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .library-shell-grid[data-medium-mode="browse"],
  .library-shell-grid[data-medium-mode="aggregate"] {
    grid-template-columns: var(--library-folders-width) minmax(0, 1fr);
  }

  .library-shell-grid[data-medium-mode="detail"] {
    grid-template-columns: var(--library-notebooks-width) minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .library-shell-grid[data-aggregate-view="true"] {
    grid-template-columns: var(--library-folders-width) minmax(0, 1fr);
  }

  .library-shell-grid[data-aggregate-view="false"] {
    grid-template-columns: var(--library-folders-width) var(--library-notebooks-width) minmax(0, 1fr);
  }
}

/* The grab zone is intentionally wider than its quiet one-pixel rule. This is
   forgiving with a mouse while leaving the columns visually uncluttered. */
.library-column-resizer::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: transparent;
  transition: background-color 120ms ease, width 120ms ease;
}

.library-column-resizer:hover::after,
.library-column-resizer:focus-visible::after,
[data-library-resizing] .library-column-resizer::after {
  width: 2px;
  background: #94a3b8;
}

.library-column-resizer:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: -2px;
}

details > summary .collections-caret {
  transition: transform 150ms ease;
}

.collections-tree-disclosure .collections-caret {
  transition: transform 150ms ease;
}

details[open] > summary .collections-caret {
  transform: rotate(90deg);
}

.collections-tree-disclosure[data-open="1"] .collections-caret {
  transform: rotate(90deg);
}

.collections-system-icon .system-icon-outline {
  display: inline-flex;
}

.collections-system-icon .system-icon-filled {
  display: none;
}

details[open] > summary .collections-system-icon .system-icon-outline {
  display: none;
}

details[open] > summary .collections-system-icon .system-icon-filled {
  display: inline-flex;
}

.collections-tree-disclosure[data-open="1"] .collections-system-icon .system-icon-outline {
  display: none;
}

.collections-tree-disclosure[data-open="1"] .collections-system-icon .system-icon-filled {
  display: inline-flex;
}

details[open] > summary .doc-link {
  display: inline-flex;
}

details:not([open]) > .collections-children {
  display: none;
  margin-top: 0;
}

[data-collection-node-branch][data-collection-node-open="0"] > .collections-children {
  display: none;
  margin-top: 0;
}

[data-notebook-id][data-expanded-image-mode="thumbnail"] [data-expanded-image-mode-panel="large"] {
  display: none !important;
}

[data-notebook-id][data-expanded-image-mode="thumbnail"] [data-expanded-image-mode-panel="thumbnail"] {
  display: block !important;
}

[data-notebook-id][data-expanded-image-mode="large"] [data-expanded-image-mode-panel="thumbnail"] {
  display: none !important;
}

[data-notebook-id][data-expanded-image-mode="large"] [data-expanded-image-mode-panel="large"] {
  display: block !important;
}

/* Shared subtle hover treatment for editable/read-only note textareas. */
.note-textarea-hover {
  transition: background-color 150ms ease;
}

.note-textarea-hover:hover {
  background-color: #f9fafb;
}

/* Keep note actions quiet until they are relevant. Keyboard focus always reveals
   them; mouse/trackpad users get them on hover, and touch users get them after
   expanding a note. */
.note-menu-affordance,
.note-edit-affordance,
.note-drag-affordance {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, color 150ms ease;
}

.note-action-surface:focus-within .note-menu-affordance,
.note-edit-surface:focus-within .note-edit-affordance,
.note-action-surface:focus-within .note-drag-affordance {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .note-action-surface:hover .note-menu-affordance,
  .note-edit-surface:hover .note-edit-affordance,
  .note-action-surface:hover .note-drag-affordance {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  .note-menu-affordance[data-note-inline-expanded="true"],
  .note-edit-affordance[data-note-inline-expanded="true"],
  .note-drag-affordance[data-note-inline-expanded="true"] {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Batch selection temporarily owns each row. Hide the contextual actions with
   CSS so entering and leaving the mode does not rewrite every note element. */
[data-select-active="true"] .note-menu-affordance,
[data-select-active="true"] .note-edit-affordance,
[data-select-active="true"] .note-drag-affordance {
  opacity: 0 !important;
  pointer-events: none !important;
}

.peer:checked + .review-toggle {
  border-color: #111827;
  background-color: #111827;
}

.peer:checked + .review-toggle .review-toggle__knob {
  transform: translateX(16px);
}

.review-toggle.is-checked {
  border-color: #111827;
  background-color: #111827;
}

.review-toggle.is-checked .review-toggle__knob {
  transform: translateX(16px);
}

.review-bar-slim {
  width: 2px;
}

.review-bar-flag {
  width: 12px;
  border: 0;
  padding: 0;
  background: transparent;
}

.review-bar-flag::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -4px;
  right: -4px;
  background: transparent;
}

.review-bar-flag__stem {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 2px;
  border-radius: 9999px;
  z-index: 1;
}

/* Brand accents and the "today" review status intentionally share the exact
   gold used by the Retinere logo rather than approximating it with utilities. */
:root {
  --retinere-brand-color: #F7BA00;
  --review-status-scheduled: #FFF800;
  --review-status-today: var(--retinere-brand-color);
  --review-status-overdue: #FF2000;
}

.retinere-brand-icon {
  color: var(--retinere-brand-color);
}

.retinere-brand-accent {
  color: #0f172a;
  background-color: var(--retinere-brand-color);
}

.review-status-scheduled {
  background-color: var(--review-status-scheduled);
}

.review-status-today {
  background-color: var(--review-status-today);
}

.review-status-overdue {
  background-color: var(--review-status-overdue);
}

.review-status-border-scheduled {
  border-left-color: var(--review-status-scheduled);
}

.review-status-border-today {
  border-left-color: var(--review-status-today);
}

.review-status-border-overdue {
  border-left-color: var(--review-status-overdue);
}

.sortable-ghost,
.sortable-drag,
.sortable-fallback {
  list-style: none;
  pointer-events: none;
}

li.reorder-dragged {
  opacity: 0.15;
}

li.reorder-drop-child {
  position: relative;
}

.collections-reorder-drop-marker {
  position: fixed;
  display: none;
  height: 3px;
  background: rgba(99, 102, 241, 0.9);
  border-radius: 9999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
  pointer-events: none;
  z-index: 9999;
}

li.reorder-drop-child {
  background: none;
  box-shadow: none;
}

li.reorder-drop-child > div {
  background: rgba(99, 102, 241, 0.06);
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.2);
  border-radius: 0.5rem;
}

[data-collections-reorder-target="tree"][data-reorder-dragging="true"] .sortable-ghost {
  display: none;
}

[data-collections-reorder-target="tree"][data-reorder-dragging="true"] button,
[data-collections-reorder-target="tree"][data-reorder-dragging="true"] summary,
[data-collections-reorder-target="tree"][data-reorder-dragging="true"] a {
  pointer-events: none;
}

.app-chrome-wordmark-invert {
  filter: none;
}

.app-chrome-slate {
  background: #ffffff;
  border-bottom: 1px solid #ffffff;
}

.app-navigation-header {
  /* Match the offsets used by the sticky Library workspace columns exactly.
     A minimum alone can let a browser grow the bar by a couple of rasterized
     pixels while the workspace still subtracts 3.25rem. */
  height: 3.25rem;
  min-height: 3.25rem;
  /* A real border rasterizes as one divider at fractional browser zoom levels. */
  border-bottom-color: #e5e7eb;
}

.app-collections-header,
.app-page-header-band {
  position: relative;
  /* Keep header dropdowns above positioned review markers and tree controls. */
  z-index: 10;
  background: #ffffff;
  border-bottom: 1px solid #ffffff;
}

/* System collections are titled by their virtual root in the outliner. */
[data-system-view="true"] .app-collections-header {
  display: none;
}

[data-note-drop-notebook-id][data-note-drop-active="true"],
[data-note-drop-system-slug][data-note-drop-active="true"] {
  border-color: #818cf8;
  background: #eef2ff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

[data-library-folder-drop-id][data-library-folder-drop-active="true"],
[data-note-drop-system-slug][data-library-folder-drop-active="true"] {
  /* Match the selected notebook card instead of introducing another state style. */
  border-radius: 0.75rem;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}

[data-library-notebook-dragged="true"] {
  opacity: 0.6;
}

/* Uniform mode keeps tree structure but removes depth/type-based title emphasis. */
[data-hierarchy-mode="uniform"] [data-tree-title] {
  color: #374151;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5rem;
}

[data-library-search][open] > summary {
  visibility: hidden;
}

/* The persistent actions grow only while the compact phone header is active.
   At 640px the labels and account pill return, so the denser bar is safer. */
@media (max-width: 39.999rem) {
  .app-navigation-header {
    height: 4rem;
    min-height: 4rem;
  }

  .library-shell-grid,
  .library-shell-grid [data-library-panel="folders"],
  .library-shell-grid [data-library-panel="notebooks"] {
    min-height: calc(100vh - 4rem);
  }
}

/* Phone and single-column tablet layouts have Apple-like breathing room
   already, but the original type and 16px symbols underused it. Scale the
   information as a coherent set while leaving desktop rails unchanged. Keep
   this after the shared rules above so the narrow-screen values win cleanly. */
@media (max-width: 47.999rem) {

  [data-library-panel="folders"] [data-library-panel-title],
  [data-library-panel="notebooks"] [data-library-panel-title] {
    font-size: 1.375rem;
    line-height: 1.75rem;
  }

  [data-library-panel="folders"] [data-library-group-heading],
  [data-library-panel="notebooks"] [data-library-group-heading] {
    font-size: 0.8125rem;
    line-height: 1.125rem;
  }

  [data-library-panel="folders"] [data-library-tools] > summary,
  [data-library-panel="folders"] [data-library-new-folder-control] > summary,
  [data-library-panel="notebooks"] [data-library-new-notebook-control] > summary {
    width: 2.75rem;
    height: 2.75rem;
  }

  [data-library-panel="folders"] [data-library-tools] > summary svg,
  [data-library-panel="folders"] [data-library-new-folder-control] > summary svg,
  [data-library-panel="notebooks"] [data-library-new-notebook-control] > summary svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  [data-library-panel="folders"] [data-library-group] a {
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }

  [data-library-panel="folders"] [data-library-group] a > span:first-child {
    gap: 0.75rem;
  }

  [data-library-panel="folders"] [data-library-group] a svg,
  [data-library-panel="folders"] [data-library-group] [data-system-collection-icon] {
    width: 1.25rem;
    height: 1.25rem;
  }

  [data-library-panel="folders"] [data-library-item-count],
  [data-library-panel="folders"] [data-library-view-count] {
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  [data-library-panel="notebooks"] [data-library-notebook-id] {
    padding: 1rem;
  }

  [data-library-panel="notebooks"] [data-library-notebook-title] {
    font-size: 1.0625rem;
    line-height: 1.5rem;
  }

  [data-library-panel="notebooks"] [data-library-notebook-description] {
    font-size: 0.9375rem;
    line-height: 1.25rem;
  }

  [data-hierarchy-mode="uniform"] [data-tree-title] {
    font-size: 1.0625rem;
    line-height: 1.625rem;
  }
}

/* Native details elements keep the Library disclosures accessible without a
   bespoke accordion. Rotate only our caret and remove the open-state spacing
   when a section is collapsed. */
[data-library-section][open] > summary [data-library-section-caret] {
  transform: rotate(90deg);
}

[data-library-section]:not([open]) > summary {
  margin-bottom: 0;
}