.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; border-radius: 2px; 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; }
.resource-head-link { margin-top: 8px; padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: var(--text-meta); }
.resource-head-link:hover { text-decoration: underline; }
.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 #aaa499; 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; }
/* Depth reads from the nesting itself: each level is inset behind a guide
   rule, rather than every row carrying a computed padding. */
.resource-tree-line { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; }
.resource-tree-children { display: grid; gap: 1px; margin-left: 8px; padding-left: 9px; border-left: 1px solid var(--line); }
.resource-tree-branch.is-collapsed > .resource-tree-children { display: none; }
.resource-tree-toggle { width: 18px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.resource-tree-toggle span { font-size: 15px; line-height: 1; transition: transform .12s ease-out; }
.resource-tree-toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.resource-tree-toggle:hover { color: var(--ink); }
.resource-tree-spacer { width: 18px; }
.resource-tree-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px 7px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-size: var(--text-control);
  transition: color .12s, background .12s, border-color .12s;
}
.resource-tree-row:hover { background: rgba(23, 23, 19, .045); color: var(--ink); }
.resource-tree-row.is-active { border-left-color: var(--resource-accent); background: rgba(182, 93, 66, .08); color: var(--ink); }
.resource-tree-row.is-drop-target { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.resource-tree-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-tree-row small { color: var(--muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.resource-tree-icon svg { width: 16px; height: 16px; }
.resource-tree-monogram { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font: italic 10px/1 var(--serif); }

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

.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 #aaa499; 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; }
.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; }
.resource-row { transition: background .12s, opacity .12s; }
.resource-row:hover { background: rgba(251, 249, 243, .85); }
.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: 3px; }
.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 { display: inline-flex; padding: 3px 6px 2px; border: 1px solid #c7c1b6; border-radius: 2px; color: var(--muted); font-size: var(--text-meta); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
/* 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;
  z-index: 200;
  display: grid;
  min-width: 158px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}
.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: rgba(24, 79, 209, .08); 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); }
.resource-icon-button { width: 25px; height: 25px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color .12s, background .12s, opacity .12s; }
.resource-icon-button:hover { background: rgba(23, 23, 19, .065); color: var(--blue); }
.resource-icon-button.is-danger:hover { color: var(--red); }
.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: #aaa499; 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 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; 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(430px, 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); 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; }
  .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; }
  .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; }
}