/* V4 shell uses customer-neutral theme and brand tokens. */
html[data-shell="refined"] { --rfd-sidebar-w: 248px; --rfd-toolbar-h: 64px; }
html[data-shell="refined"][data-refined-collapsed] { --rfd-sidebar-w: 82px; }
html[data-shell="refined"][data-theme="light"] { --bg: #f7f8f8; --border2: #c9cfd1; }
html[data-shell="refined"] body:not(.admin-page) .hub-page.is-active { padding: 36px 48px 64px; width: 100%; max-width: 2336px; margin-inline: auto; box-sizing: border-box; }
/* A 220 px menu and 24 px gutters between 901 and 1099 px; the page keeps its room. */
@media (min-width: 901px) and (max-width: 1099px) {
  html[data-shell="refined"] { --rfd-sidebar-w: 220px; }
  html[data-shell="refined"] body:not(.admin-page) .hub-page.is-active { padding: 28px 24px 56px; }
  html[data-shell="refined"] body:not(.admin-page) .rfd-toolbar { padding-left: 24px; padding-right: 24px; }
  /* The 220 px menu is 28 px narrower: the foot gives up some padding so "About Agent Hotel" is not cut. */
  html[data-shell="refined"] .rfd-sidebar-footer { padding-inline: 6px; }
  html[data-shell="refined"] .rfd-sidebar-footer .rfd-navlink { padding-inline: 10px; gap: 10px; }
}
html[data-shell="refined"] body:not(.admin-page) .hub-page__title { font-size: 40px; line-height: 48px; font-weight: 700; }
html[data-shell="refined"] body:not(.admin-page) .hub-page__subtitle { font-size: 16px; line-height: 24px; margin: 6px 0 28px; color: var(--text-secondary); }
html[data-shell="refined"] body:not(.admin-page) .rfd-toolbar { min-height: 64px; height: 64px; padding-left: 48px; padding-right: 48px; }
.rfd-sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border-light); }
/* Collapsed menu (82 px): the foot gives up its side padding and centres its items under the menu's icons, so About and
   Send feedback keep room for the item's own padding and their 20 px icon (app and Admin alike). */
html[data-shell="refined"][data-refined-collapsed] .rfd-sidebar-footer { display: grid; justify-items: center; padding: 12px 0; }
.rfd-favorites-count { margin-left: auto; color: var(--text-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
/* V4 active menu item: a light green fill and a green icon instead of the grey fill and side bar; Favorites fills its heart.
   The app and Admin share these menu rules (Admin loads this file too). */
html[data-shell="refined"] [data-refined-sidebar] .rfd-navlink.is-active { background: var(--accentSoft); color: var(--text-primary, var(--text)); }
html[data-shell="refined"] [data-refined-sidebar] .rfd-navlink.is-active .rfd-navlink__icon { color: var(--link); }
html[data-shell="refined"] [data-refined-sidebar] .rfd-navlink.is-active .rfd-navlink__bar { display: none; }
/* V4: Admin reads like the other menu items until it is the active page. */
html[data-shell="refined"] [data-refined-sidebar] .rfd-navlink--admin:not(.is-active) { color: var(--text2); }
html[data-shell="refined"] [data-refined-sidebar] .rfd-navlink.is-active[data-page="favorites"] .rfd-navlink__icon svg { fill: currentColor; }
.rfd-toolbar .rfd-userfoot { display: flex; align-items: center; flex-shrink: 0; padding: 0; margin: 0; border: 0; }
.rfd-toolbar .rfd-avatar-chip { margin: 0; width: 44px; height: 44px; padding: 4px; border: 0; border-radius: 50%; justify-content: center; }
.rfd-toolbar .rfd-avatar-info, .rfd-toolbar .rfd-account__chevron { display: none; }
.rfd-toolbar .rfd-account-menu { left: auto; right: 0; top: calc(100% + 8px); bottom: auto; width: 300px; max-width: calc(100vw - 24px); border-radius: 16px; box-shadow: 0 16px 40px rgb(33 34 36 / 16%); }
.settings-drawer .rfd-themeseg { display: flex; width: fit-content; max-width: 100%; gap: 4px; margin: 0; }
/* Text buttons here, not the toolbar's 32x26 icon buttons: the size follows the label (Light/Dark/System ran together). */
.settings-drawer .rfd-segbtn { width: auto; height: auto; white-space: nowrap; padding: 10px 14px; min-height: 44px; font-size: 15px; }
html[data-shell="refined"] body:not(.admin-page) .rfd-mobile-nav .rfd-navlink.is-active { color: var(--text-primary); }
@media (max-width: 900px) {
  html[data-shell="refined"] body:not(.admin-page) .hub-page.is-active { padding: 24px 16px 100px; }
  html[data-shell="refined"] body:not(.admin-page) .hub-page__title { font-size: 32px; line-height: 40px; }
  html[data-shell="refined"] body:not(.admin-page) .rfd-toolbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  html[data-shell="refined"] body:not(.admin-page) .rfd-toolbar__right { gap: 4px; }
  html[data-shell="refined"] body:not(.admin-page) .rfd-toolbar .rfd-userfoot { display: flex; }
  .rfd-toolbar .rfd-account-menu { position: fixed; top: 60px; right: 12px; left: auto; bottom: auto; }
  .rfd-toolbar .mobile-brand [data-app-name] { display: none; }
  .rfd-toolbar .rfd-submit { min-height: 44px; max-width: 140px; }
}

@media (max-width: 900px) {
  html[data-shell="refined"] body:not(.admin-page) [data-mobile-search-open] { width: 44px; min-width: 44px; padding: 10px; flex: 0 0 44px; }
}

/* V4: the count on the selected Favorites tab is grey like the others; the tab itself shows the selection. */
html[data-shell="refined"] body:not(.admin-page) .collection-tab.is-active .collection-tab__count { color: var(--text-secondary, var(--text2)); background: var(--sidebarItem, #f1f3f3); }
html[data-shell="refined"] .my-collection-grid.catalog-v4-grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px; }
html[data-shell="refined"] .collection-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
/* The flex display rules above (and inline-flex on the counts) would override [hidden]: a hidden tab row (no
   suggestions) or count (nothing waiting) stays hidden. */
.collection-tabs[hidden],
.collection-tab__count[hidden],
html[data-shell="refined"] .collection-tabs[hidden],
html[data-shell="refined"] .collection-tab__count[hidden] { display: none; }
html[data-shell="refined"] :is([data-favorite-type], [data-submissions-tab]) { min-height: 44px; }
html[data-shell="refined"] :is([data-favorite-type], [data-submissions-tab])[aria-pressed="true"] { color: var(--link); border-color: currentColor; font-weight: 600; }
/* V4 Submissions: My content, Pending review, Archived and Suggestions are tabs; the first three show the content
   panel, Suggestions shows the suggestions panel. Before the page scripts set a view both panels show as before. */
html[data-shell="refined"] .submissions-tabs { margin: 0 0 16px; }
[data-page="submissions"][data-submissions-view="suggestions"] > .submissions-panel:not([data-community-inbox]),
[data-page="submissions"][data-submissions-view]:not([data-submissions-view="suggestions"]) > [data-community-inbox] { display: none; }
/* V4 Agents: the sort menu sits at the right end of the filter row, with the shared chevron (the agent controls'
   own select rule resets the background shorthand). */
html[data-shell="refined"] .agent-filter-bar .filter-bar__menus { flex: 1 1 auto; }
html[data-shell="refined"] .agent-filter-bar .agent-sort { margin-left: auto; }
html[data-shell="refined"] .agent-filter-bar .agent-sort select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 0 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
/* Night list: single-choice Type and Platform, shown only with the night list (the sort-control flex must not undo
   hidden), with the same chevron as the sort menu. */
.agent-night-filter[hidden] { display: none; }
html[data-shell="refined"] .agent-filter-bar .agent-night-filter select { max-width: 15rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 0 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
@media (max-width: 600px) { html[data-shell="refined"] .agent-filter-bar .agent-night-filter select { max-width: none; } }
/* V4 Agents: the explanation lines sit behind "How availability works" under the intro, in a small box. */
html[data-shell="refined"] .agent-availability-help { max-width: 72ch; margin: 4px 0 0; }
html[data-shell="refined"] .agent-availability-help[open] { margin-bottom: 16px; }
html[data-shell="refined"] .agent-availability-help > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--link); font-weight: 600; cursor: pointer; list-style: none; }
html[data-shell="refined"] .agent-availability-help > summary::-webkit-details-marker { display: none; }
html[data-shell="refined"] .agent-availability-help > summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; }
html[data-shell="refined"] .agent-availability-help__body { margin-top: 6px; padding: 12px 14px; color: var(--text-secondary, var(--text2)); font-size: 14px; line-height: 1.5; background: var(--bg-surface, var(--surface)); border: 1px solid var(--border-light, #dfe4e3); border-radius: 8px; }
html[data-shell="refined"] .agent-availability-help__body p { margin: 0 0 6px; }
html[data-shell="refined"] .agent-availability-help__body p:last-child { margin-bottom: 0; }
/* Archived shows published content only, so the submission list heading is left out there. */
[data-page="submissions"][data-submissions-view="archived"] #submissionsContentPanel > .skills-panel__header { display: none; }
/* Refresh, Clear completed and Show hidden belong to My content; the Suggestions tab has its own Refresh. */
[data-page="submissions"][data-submissions-view="suggestions"] .submissions-v4-header-actions { display: none; }
/* Clear completed acts on the completed rows of My content, which Pending review and Archived do not show. */
[data-page="submissions"]:is([data-submissions-view="pending"], [data-submissions-view="archived"]) [data-clear-completed-submissions] { display: none; }
@media (max-width: 900px) {
  html[data-shell="refined"] .my-collection-grid.catalog-v4-grid { grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr)); }
}

/* All catalog adapters share the V4 density and narrow-screen contract. */
html[data-shell="refined"] body:not(.admin-page) .hub-page :is([data-agent-hotel-grid], [data-prompt-grid], [data-usecase-grid], [data-apps-grid], [data-lab-apps-grid]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 20px;
}
@media (max-width: 900px) {
  html[data-shell="refined"] body:not(.admin-page) .hub-page :is([data-agent-hotel-grid], [data-prompt-grid], [data-usecase-grid], [data-apps-grid], [data-lab-apps-grid]) {
    grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
  }
}

/* V4: the Use case and Works with menus sit above full-width cards; there is no filter rail. */
html[data-shell="refined"] [data-page="prompts"] .library-layout { grid-template-columns: minmax(0, 1fr); }
/* The menus and sort live in the toolbar, so it stays visible on small screens (the old rail drawer is gone). */
@media (min-width: 769px) {
  html[data-shell="refined"] [data-page="prompts"] .library-main-header--toolbar { align-items: center; }
}
@media (max-width: 768px) {
  html[data-shell="refined"] [data-page="prompts"] .browse-toolbar-shell { display: flex; }
  html[data-shell="refined"] [data-page="prompts"] .library-main-header--toolbar { align-items: flex-start; }
}

/* V4 sentence case: labels, eyebrows and detail terms are never forced to uppercase. */
html[data-shell="refined"] body:not(.admin-page) .hub-page :is(.home-hero__eyebrow, dt) {
  letter-spacing: 0;
  text-transform: none;
}

/* Related-agents picker matches V4 form fields instead of the browser fieldset frame. */
fieldset[data-agent-relations] { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--border-light, var(--border, #e5e7e8)); border-radius: 8px; }
fieldset[data-agent-relations][hidden] { display: none; }
fieldset[data-agent-relations] legend { padding: 0 4px; color: var(--text, #212224); font-size: 14px; font-weight: 600; line-height: 20px; }
fieldset[data-agent-relations] p { margin: 0; color: var(--text-secondary, var(--text2, #4d575d)); font-size: 14px; line-height: 20px; }
fieldset[data-agent-relations] label { display: flex !important; align-items: center; gap: 8px; min-height: 40px; }
fieldset[data-agent-relations] button { justify-self: start; min-height: 40px; padding: 0 14px; border: 2px solid var(--border2, #c9cfd1); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #212224); font: inherit; font-weight: 600; cursor: pointer; }
fieldset[data-agent-relations] :focus-visible { outline: 3px solid var(--link, var(--brand-primary)); outline-offset: 3px; }

/* From 360 px the toolbar has room for the share button on one line; below that it keeps the
   compact 112 px wrapping layout from refined.css. The longest label, "Del et brukstilfelle", fits at 390 px. */
@media (min-width: 360px) and (max-width: 900px) {
  html[data-shell="refined"] body:not(.admin-page) .rfd-submit { max-width: none; white-space: nowrap; padding: 4px 12px; }
}

/* The skill publication tile shows its date in the same value style as Version, File and Updated. */
html[data-shell="refined"] .skills-meta__item .catalog-published-date[data-date-only]:not([hidden]) { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }

/* Page and detail headings take focus from code after a route change or search so screen readers
   announce the new view. They are not controls, so they show no focus ring. */
html[data-shell="refined"] body:not(.admin-page) :is(h1, h2, h3)[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* One V4 section heading scale (24/32 semibold) on Discover, Agents and Apps. */
html[data-shell="refined"] body:not(.admin-page) .agent-hotel__h { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: normal; }