.resources-page { --resource-accent: #b65d42; min-width: 0; }

.resource-library-head { margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.resources-head-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 10px; }
.resources-head-actions .button { width: 100%; min-height: 30px; justify-content: center; padding-inline: 8px; font-size: var(--text-control); }
.resources-head-actions .button svg { width: 14px; height: 14px; margin-right: 6px; }

/* Boxed panels on the page, not panes inside one scrolling frame — the grid
   the files and samples tabs use. The page does the scrolling, so nothing
   here caps its own height. The folder tree and the file list are one
   instrument, so they share a box and a hairline; the preview is its own. */
.resources-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(238px, 28%);
  gap: var(--panel-gap);
  align-items: start;
}
.resources-library,
.resources-preview-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-raised);
  box-shadow: 0 9px 28px rgba(34, 31, 25, .045);
}
.resources-library {
  display: grid;
  grid-template-columns: minmax(180px, 31%) minmax(0, 1fr);
}
.resources-tree-panel,
.resources-browser { min-width: 0; }
.resources-tree-panel { padding: 15px 12px; border-right: 1px solid var(--line); background: rgba(23, 23, 19, .018); }

/* Head: the library it belongs to, then the two things you do to it. */
.resource-library-top { display: flex; align-items: flex-end; gap: 6px; }
.resource-library-top .resource-team-select { flex: 1; min-width: 0; }
.btn-text.resource-head-link { margin-top: 8px; }
.resource-team-select { display: grid; gap: 4px; margin: 0 4px 10px; }
.resource-team-select > span,
.resource-preview-panel > header,
.resource-search > span { color: var(--muted); font-size: var(--text-meta); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.resource-team-select select { width: 100%; padding: 6px 20px 6px 0; border: 0; border-bottom: 1px solid var(--muted-line); outline: 0; background: transparent; color: var(--ink); font: 400 17px/1.2 var(--serif); }
.resource-team-select select:focus { border-color: var(--blue); }
.resource-tree { display: grid; gap: 1px; }
.resource-tree-branch { min-width: 0; }
.resource-tree-children { display: grid; gap: 1px; }
.resource-tree-branch.is-collapsed > .resource-tree-children { display: none; }
.resource-tree-monogram { width: 17px; height: 17px; display: inline-grid; place-items: center; vertical-align: middle; border: 1px solid var(--monogram-color, currentColor); border-radius: 50%; margin-right: 6px; color: var(--monogram-color, currentColor); font: italic 10px/1 var(--serif); }
/* Folder settings ("⋮"), floated on top and revealed on hover — same recipe
   as Presentations' and Samples' tree rows, so it doesn't force this row
   taller than the rest of the tree. */
.resource-tree .tree-row-line { position: relative; }
.resource-tree-row-actions { position: absolute; right: 4px; top: 50%; z-index: 1; transform: translateY(-50%); display: flex; opacity: 0; }
.resource-tree .tree-row-line:hover .resource-tree-row-actions, .resource-tree .tree-row-line:focus-within .resource-tree-row-actions { opacity: 1; }
.resource-tree .tree-row-line:has(.resource-tree-row-actions):hover .tree-row-count { visibility: hidden; }

/* Not clipped: a row's action menu has to be able to hang past the last row.
   At a 3px radius the head and toolbar rules overshoot imperceptibly. */
.resources-browser { position: relative; display: flex; flex-direction: column; }
.resources-browser-head { min-height: 66px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 17px 12px; border-bottom: 1px solid var(--line); }
.resources-browser-head > span { flex: none; color: var(--muted); font-size: var(--text-meta); }
.resource-crumbs { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; }
.resource-crumbs button,
.resource-crumbs strong { min-width: 0; padding: 2px 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font: 400 18px/1.15 var(--serif); }
.resource-crumbs button { color: var(--muted); cursor: pointer; }
.resource-crumbs button:hover { color: var(--blue); }
.resource-crumbs button.is-drop-target,
.resource-crumbs strong.is-drop-target { color: var(--blue); box-shadow: inset 0 -2px var(--blue); }
.resource-crumbs > span { color: var(--muted-line); }

.resources-toolbar { min-height: 57px; display: flex; align-items: flex-end; gap: 13px; padding: 10px 17px 11px; border-bottom: 1px solid var(--line); }
.resource-search { min-width: 120px; flex: 1; display: grid; gap: 2px; }
.resource-search input { width: 100%; padding: 3px 0 4px; border: 0; border-bottom: 1px solid var(--muted-line); outline: 0; background: transparent; color: var(--ink); font-size: var(--text-body); }
.resource-search input:focus { border-color: var(--blue); }
.resource-content-search { flex: none; padding-bottom: 4px; white-space: nowrap; }
.resource-content-search input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.resource-content-search span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  transition: border-color .12s, background .12s, color .12s;
}
.resource-content-search span:hover { border-color: var(--ink); color: var(--ink); }
.resource-content-search input:checked + span { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.resource-content-search input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.resource-select input { accent-color: var(--blue); }

.resources-bulk { min-height: 39px; display: flex; align-items: center; gap: 10px; padding: 7px 17px; border-bottom: 1px solid #becbeb; background: rgba(24, 79, 209, .055); font-size: var(--text-control); }
.resources-bulk strong { margin-right: auto; color: var(--blue); font-weight: 600; }
.resources-bulk button { padding: 2px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--muted); cursor: pointer; font-size: var(--text-meta); }
.resources-bulk button:hover { color: var(--blue); }
.resources-bulk button.is-danger:hover { color: var(--red); }

.resources-table-scroll { min-height: 390px; flex: 1; overflow: visible; }
.resources-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-control); }
/* Not sticky any more: the panel no longer scrolls, so a sticky header would
   pin itself to the viewport and ride over the masthead. */
.resources-table th { height: 32px; padding: 7px 9px; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; font-size: var(--text-meta); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.resources-table th:first-child { width: 34px; }
.resources-table:not(.is-search) th:nth-child(2) { width: auto; }
/* Size and Uploaded read as figures, so they sit right against the actions. */
.resources-table th:nth-last-child(3) { width: 88px; }
.resources-table th:nth-last-child(2) { width: 112px; }
.resources-table th:last-child { width: 52px; }
.resources-table th:nth-last-child(3),
.resources-table th:nth-last-child(2),
.resources-table td:nth-last-child(3),
.resources-table td:nth-last-child(2) { text-align: right; }
.resources-table th:nth-last-child(3) button,
.resources-table th:nth-last-child(2) button { width: 100%; text-align: right; }
.resources-table.is-search th:first-child { width: auto; }
.resources-table.is-search th:nth-child(2) { width: 135px; }
.resources-table th button { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.resources-table td { height: 47px; padding: 7px 9px; overflow: hidden; border-bottom: 1px solid var(--line); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
/* Ghost rows for uploads still in flight — see table()'s transferRows in
   index.js. Same look as pages/project/files/files.css's .list-table rules. */
.resources-table tr.is-in-transfer td { padding: 9px 10px; color: var(--muted); background: var(--paper-raised); font-style: italic; }
.resources-table tr.is-in-transfer.is-error td { font-style: normal; }
.resources-table tr.is-in-transfer .icon-button { margin-left: 6px; }
.resource-row { transition: background .12s, opacity .12s; }
.resource-row:hover { background: color-mix(in srgb, var(--paper-raised) 85%, transparent); }
.resource-row.is-active { box-shadow: inset 3px 0 var(--resource-accent); background: rgba(182, 93, 66, .055); }
.resource-row.is-selected { background: rgba(24, 79, 209, .055); }
.resource-row.is-drop-target { box-shadow: inset 0 0 0 2px var(--blue); background: var(--blue-soft); }
.resource-row.is-drag-source { opacity: .3; }
.resource-name { max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.resource-name:hover span { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.resource-name svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.resource-folder-name svg { color: var(--resource-accent); }
.resource-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-location { max-width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--blue); cursor: pointer; text-overflow: ellipsis; white-space: nowrap; font-size: inherit; }
.resource-type { background: rgba(23, 23, 19, .07); color: var(--muted); }
/* The row cells clip their overflow; the menu has to escape this one. */
.resource-row-actions { overflow: visible; text-align: right; }
.resource-menu { position: relative; display: inline-block; }
.resource-menu-toggle { font-size: 15px; letter-spacing: 1px; }
.resource-menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper-raised); }
.resource-menu-panel {
  position: fixed;
  display: grid;
  min-width: 158px;
  padding: 4px;
}
.resource-menu-panel[hidden] { display: none; }
.resource-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: var(--tap-dense);
  padding: 0 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: var(--text-control);
  text-align: left;
  white-space: nowrap;
}
.resource-menu-item:hover, .resource-menu-item:focus-visible { background: var(--blue-soft); color: var(--blue); }
.resource-menu-item svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.resource-menu-item:hover svg { color: inherit; }
.resource-menu-item.is-danger:hover { background: rgba(181, 59, 47, .08); color: var(--red); }
.icon-button.is-dense.resource-icon-button:hover:not(.is-danger) { color: var(--blue); }
.resource-icon-button svg,
.resources-page svg { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.resource-icon-button svg { width: 15px; height: 15px; }

.resources-empty { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 8px; margin: 0; padding: 28px; color: var(--muted); text-align: center; }
.resources-drop-empty svg { width: 32px; height: 32px; color: var(--resource-accent); }
.resources-drop-empty strong { color: var(--ink); font: 400 20px/1.2 var(--serif); }
.resources-drop-empty span { font-size: var(--text-control); }


.resources-preview-panel > header { height: 43px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); }
.resource-preview-empty { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 30px; color: var(--muted-line); text-align: center; }
.resource-preview-empty svg { width: 33px; height: 33px; }
.resource-preview-empty p { margin: 0; font: italic var(--text-body)/1.4 var(--serif); }
.resource-preview-card { min-width: 0; max-width: 100%; padding: 18px 16px; }
.resource-preview-card > header { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.resource-preview-card > header > div { min-width: 0; }
.resource-preview-card h3 { margin: 0; overflow-wrap: anywhere; font: 400 20px/1.15 var(--serif); }
.resource-preview-card header p { margin: 4px 0 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-meta); }
.resource-preview-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 15px 0; }
.resource-preview-card dl div { min-width: 0; }
.resource-preview-card dt { color: var(--muted); font-size: var(--text-meta); letter-spacing: .08em; text-transform: uppercase; }
.resource-preview-card dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-meta); }
.resource-preview-actions { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 13px; }
.resource-preview-actions .resource-icon-button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 2px; }
.resource-preview-content { min-height: 440px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; border: 1px solid var(--line); background: #fffdf7; color: var(--muted); }
.resource-preview-content > * { max-width: 100%; }
.resource-preview-content iframe,
.resource-preview-content img,
.resource-preview-content pre { justify-self: stretch; }
.resource-preview-content p { padding: 18px; font-size: var(--text-control); text-align: center; }
.resource-preview-content img { width: 100%; max-height: 720px; display: block; object-fit: contain; }
.resource-preview-content iframe { width: 1px; min-width: 100%; max-width: 100%; height: 840px; border: 0; }
.resource-preview-content pre { width: 100%; max-height: 840px; margin: 0; padding: 14px; overflow: auto; color: var(--ink); font: 10px/1.55 var(--mono); white-space: pre-wrap; }

.resources-drop-callout { position: absolute; inset: 9px; z-index: 8; display: none; place-items: center; align-content: center; gap: 9px; border: 2px dashed var(--blue); background: rgba(219, 229, 255, .94); color: var(--blue); pointer-events: none; }
.resources-drop-callout svg { width: 31px; height: 31px; }
.resources-drop-callout span { font-size: var(--text-body); }
.resources-page.is-dragging .resources-drop-callout { display: grid; }
.resources-page.is-dragging.has-specific-drop .resources-drop-callout { display: none; }
.resources-browser.is-drop-target .resources-drop-callout,
.resources-page.is-drop-target .resources-drop-callout { display: grid; }

/* The file preview at full size. A phone opens it on any tap, because the rail
   is not on screen; a desktop opens it from the expand control, because a 28%
   rail is narrower than a PDF viewer can usefully draw itself in. */
.resource-preview-dialog .resources-preview-panel { border: 0; border-radius: 0; box-shadow: none; }
.resource-preview-dialog .resource-preview-content { min-height: min(68dvh, 680px); }
.resource-preview-dialog .resource-preview-content iframe { height: min(76dvh, 820px); }
.resource-preview-dialog [data-resource-action="expand-preview"] { display: none; }
.resource-preview-close { position: absolute; z-index: 3; top: 12px; right: 12px; background: var(--paper-raised); }

.resource-dialog { width: min(var(--dialog-sm), calc(100% - 24px)); }
.resource-dialog.is-move { width: min(520px, calc(100% - 24px)); }
.resource-dialog-card { position: relative; }
.resource-dialog-close { position: absolute; top: 12px; right: 13px; }
.resource-dialog-card .dialog-head { margin: 0 28px 22px 0; }
.resource-dialog-card .dialog-head p { margin: 7px 0 0; color: var(--muted); font-size: var(--text-control); }
.resource-dialog-error { min-height: 18px; margin: 6px 0; color: var(--red); font-size: var(--text-meta); }
.resource-dialog-card .dialog-actions { margin-top: 17px; }
.resource-move-picker { max-height: 360px; display: grid; gap: 2px; padding: 5px; overflow-y: auto; border: 1px solid var(--line); background: var(--paper); }
.resource-move-destination { width: 100%; min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; align-items: center; gap: 9px; padding: 8px 9px 8px calc(9px + var(--depth, 0) * 13px); border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; text-align: left; }
.resource-move-destination:hover { background: rgba(23, 23, 19, .045); }
.resource-move-destination.is-selected { border-color: #becbeb; background: var(--blue-soft); color: var(--blue); }
.resource-move-folder svg { width: 17px; height: 17px; color: var(--resource-accent); }
.resource-move-destination > span:nth-child(2) { min-width: 0; display: grid; }
.resource-move-destination strong,
.resource-move-destination small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-move-destination strong { font-size: var(--text-control); font-weight: 600; }
.resource-move-destination small { color: var(--muted); font-size: var(--text-meta); }
.resource-move-check { opacity: 0; font-size: var(--text-control); }
.resource-move-destination.is-selected .resource-move-check { opacity: 1; }
.resource-move-actions > span { min-width: 0; flex: 1; overflow: hidden; color: var(--muted); font-size: var(--text-meta); text-overflow: ellipsis; white-space: nowrap; }

.resources-no-team { padding: 60px 24px; border: 1px dashed var(--line-dashed); border-radius: 3px; text-align: center; }
.resources-no-team h2 { margin: 0; font: 400 33px/1.1 var(--serif); }
.resources-no-team p { margin: 8px 0 0; color: var(--muted); }

@media (max-width: 900px) {
  /* Preview drops under the library, still its own box. */
  .resources-workspace { grid-template-columns: minmax(0, 1fr); }
  .resources-library { grid-template-columns: minmax(160px, 26%) minmax(0, 1fr); }
  .resources-preview-panel { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
  .resources-preview-panel > header { height: auto; align-items: flex-start; padding-top: 18px; border-right: 1px solid var(--line); border-bottom: 0; }
  .resource-preview-empty { min-height: 150px; }
  .resource-preview-card { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(250px, 1.35fr); gap: 0 20px; }
  .resource-preview-card > header,
  .resource-preview-card dl,
  .resource-preview-actions { grid-column: 1; }
  .resource-preview-content { grid-column: 2; grid-row: 1 / span 4; min-height: 480px; }
}

@media (max-width: 700px) {
  /* The tree goes entirely: a folder column, even folded into a row of chips,
     costs more than it earns at this width. The crumbs walk back up and the
     folder rows in the list walk down, which is the whole of what the tree
     offered. The library picker and its actions move above the list. */
  .resources-library { grid-template-columns: minmax(0, 1fr); }
  .resource-tree { display: none; }
  .resources-tree-panel { padding: 12px 11px; border-right: 0; border-bottom: 1px solid var(--line); }
  .resource-library-head { display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: end; gap: 10px; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .resource-library-top { grid-column: 1; }
  .resource-team-select { max-width: none; margin-bottom: 0; }
  .resources-head-actions { grid-column: 2; grid-template-columns: auto auto; margin-top: 0; }
  .btn-text.resource-head-link { grid-column: 1 / -1; margin-top: 0; }
  /* Bulk selection needs a toolbar to be worth anything, and there is no room
     for one; the row actions cover the single-item cases. */
  .resources-table .resource-select { display: none; }
  .resource-crumbs button,
  .resource-crumbs strong { font-size: 15px; }
  .resources-browser { min-height: 420px; }
  /* Only ever seen inside the sheet: in the page it would be a tall empty
     panel under the list. Moving it into the dialog takes it out of the
     workspace, which is what makes the second rule apply. */
  .resources-workspace > .resources-preview-panel { display: none; }
  .resource-preview-dialog .resources-preview-panel { display: block; }
  .resources-preview-panel > header { height: 43px; align-items: center; padding-top: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .resource-preview-card { display: block; }
  .resource-preview-content { margin-top: 14px; }
  .resources-table th:nth-last-child(2),
  .resources-table td:nth-last-child(2) { display: none; }
}

@media (max-width: 560px) {
  .resource-library-head { display: block; }
  .resource-team-select { margin-bottom: 10px; }
  .resources-head-actions { grid-template-columns: 1fr 1fr; margin-top: 8px; }
  .btn-text.resource-head-link { margin-top: 8px; }
  .resources-toolbar { align-items: stretch; flex-wrap: wrap; }
  .resource-search { flex-basis: 100%; }
  .resources-table th:nth-last-child(3),
  .resources-table td:nth-last-child(3) { display: none; }
  .resource-preview-card dl { grid-template-columns: 1fr; }
}