/* File browser — an always-visible panel docked below the canvas (see
   base.css's .workspace/.file-browser-handle), resizable by dragging the
   handle above it (public/js/file-browser-resize.js). Word-Start-Screen
   inspired: a pinned "New map" card first, then every folder/map in the
   current folder as a card grid, with a breadcrumb for navigating between
   folders.

   Background is deliberately --panel (white), not --bg (the canvas's
   tinted blue-gray) — the two need to read as visually distinct regions,
   not one continuous surface split by a thin line. */
.opening-page {
  height: 280px;
  min-height: 120px;
  max-height: 80vh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
}
/* Collapsed via the toolbar's "Browse maps" button (public/js/persistence.js's
   setFileBrowserOpen()) -- fully hidden rather than shrunk to a strip, since
   there's nothing useful to show at a sliver of height and the button is
   always reachable in the toolbar to bring it back. */
.opening-page.collapsed { display: none; }

.opening-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.opening-page-topbar-actions { display: flex; gap: 8px; }
.opening-page-topbar-actions .tbtn { width: auto; padding: 0 12px; gap: 6px; }

/* "My maps" / "Shared with me" — public/js/persistence.js's switchView().
   A plain segmented control, not real tabs with tabpanels, but role="tab"
   in the markup for a screen reader's benefit regardless. */
.opening-page-tabs {
  display: flex;
  gap: 2px;
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 2px;
}
.opening-page-tab {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.opening-page-tab:hover { color: var(--ink); }
.opening-page-tab.active { background: var(--panel); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Hidden while "Shared with me" is active (persistence.js's
   updateViewTabsUI()) -- folders belong to the owner's own tree, not a
   flat shared-with-you list, so the folder-browsing chrome has nothing to
   act on there. .load-modal-breadcrumb is shared with pdf-link.js's own
   Drive picker (see modals.css); scoping .hidden here rather than on the
   bare class keeps that unaffected. */
.opening-page-toolbar .load-modal-breadcrumb.hidden,
.opening-page-toolbar #btnNewFolder.hidden {
  display: none;
}

.opening-page-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px 40px;
}

/* margin-left: auto on the actions block (not justify-content:
   space-between on this container) pins them to the right regardless of
   whether the breadcrumb is present -- space-between would instead snap a
   lone remaining child to the *left* once the breadcrumb is hidden (see
   .load-modal-breadcrumb.hidden below, for the "Shared with me" view). */
.opening-page-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
/* :not(.icon-only) so #btnToggleView (a square icon button living in this
   same toolbar) keeps the fixed-width icon-only sizing from base.css
   instead of being stretched out like the text-and-icon "New folder"
   button. */
.opening-page-toolbar .tbtn:not(.icon-only) { width: auto; padding: 0 12px; gap: 6px; }
.opening-page-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.opening-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}
.opening-page-grid-empty {
  grid-column: 1 / -1;
  padding: 40px 10px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.opening-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  text-align: center;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.opening-card:hover { box-shadow: var(--shadow-sm); border-color: var(--node-border); }
.opening-card.drag-over { background: var(--accent-soft); border-color: var(--accent); }
.opening-card.dragging { opacity: 0.5; }

.opening-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.opening-card-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Folders get the green accent, maps the blue one -- a deliberate second
   category, not decoration: green reads as "organize", blue as
   "content/action", consistent with the same split in pdf-link.js's Drive
   picker (modals.css). */
.opening-card.folder-card .opening-card-icon { background: var(--accent2-soft); color: var(--accent2); }

.opening-card.new-map-card {
  border-style: dashed;
  border-color: #b7c3da;
  background: transparent;
}
.opening-card.new-map-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.opening-card.new-map-card .opening-card-icon { background: transparent; border: 1.5px dashed var(--accent); color: var(--accent); }
.opening-card.new-map-card .opening-card-name { color: var(--accent); }

.opening-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.opening-card-meta { font-size: 11px; color: var(--ink-soft); margin-top: -6px; }

/* Permission tag on a "Shared with me" card (persistence.js's
   buildSharedMapCard()) -- edit gets the same green "you can act on this"
   accent as a folder card, view-only a neutral gray so it doesn't read as
   an affordance. */
.share-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
}
.share-badge-edit { background: var(--accent2-soft); color: var(--accent2); }
.share-badge-view { background: var(--panel-soft); color: var(--ink-soft); }

.opening-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 3px;
}
.opening-card:hover .opening-card-actions { display: flex; }
.opening-card-action {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: var(--panel-translucent);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.opening-card-action:hover { background: var(--accent-soft); color: var(--accent); }
.opening-card-action.danger:hover { background: var(--danger-soft); color: var(--danger); }
.opening-card-action svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* List view — toggled via #btnToggleView (public/js/persistence.js), stored
   per-browser so it survives reloads. Same card markup as grid view, just
   laid out as a row instead of a column, so none of buildMapCard()'s/
   buildFolderCard()'s DOM needs to change between the two modes. */
.opening-page-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opening-page-grid.list-view .opening-card {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 8px 14px;
  gap: 12px;
}
.opening-page-grid.list-view .opening-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.opening-page-grid.list-view .opening-card-icon svg { width: 16px; height: 16px; }
.opening-page-grid.list-view .opening-card-name {
  flex: 1;
  text-align: left;
}
.opening-page-grid.list-view .opening-card-meta { margin-top: 0; flex-shrink: 0; }
/* Actions only reveal on hover in grid view (see .opening-card:hover above);
   in a list row there's always room for them, so they stay visible. */
.opening-page-grid.list-view .opening-card-actions {
  position: static;
  display: flex;
  flex-shrink: 0;
}