/*
 * 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;
}

/* Wide screens can progressively reveal more room for the current notebook.
   The content panel always remains visible, so its View menu is also the
   reliable way back from Focus. Medium and phone layouts retain their existing
   two-stage and sequential navigation. */
@media (min-width: 64rem) {
  .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"],
  .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);
  }

  /* The Library toggle moves to the next visible column when its own rail is
     hidden, matching the spatial behavior of native split-view applications. */
  .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;
}