:root {
  --dashen-icon-size-nav: 30px;
  --dashen-icon-size-command: 21px;
}

/* The dense writing workspace uses a quieter optical scale than the shelf. */
.brand-skin-preview-v5 .workspace-page {
  --dashen-icon-size-nav: 20px;
  --dashen-icon-size-command: 18px;
}

/* The mark already carries its own navy tile. A second shadow reads as a
   translucent white frame against the top bar. */
.brand-skin-preview-v5 .brand img {
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

/* Approved pixel icons are reserved for navigation and product-level commands. */
#moduleNav .rail-button::before,
.rail-bottom-button[data-modal="settings"]::before,
.topbar .dashen-pixel-command::before,
.library-tools .primary-button[data-modal="new-book"]::before,
.library-tools .search-field::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  background-image: var(--dashen-icon-mono);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}

#moduleNav .rail-button > .icon,
.rail-bottom-button[data-modal="settings"] > .icon,
.topbar .dashen-pixel-command > .icon,
.library-tools .primary-button[data-modal="new-book"] > .icon,
.library-tools .search-field > .icon {
  display: none;
}

#moduleNav .rail-button::before,
.rail-bottom-button[data-modal="settings"]::before {
  width: var(--dashen-icon-size-nav);
  height: var(--dashen-icon-size-nav);
}

#moduleNav .rail-button.active::before,
#moduleNav .rail-button:hover::before,
.rail-bottom-button[data-modal="settings"]:hover::before,
.topbar .dashen-pixel-command:hover::before,
.library-tools .primary-button[data-modal="new-book"]::before,
.library-tools .search-field:focus-within::before {
  background-image: var(--dashen-icon-color);
}

#moduleNav .rail-button[data-module="writing"] {
  --dashen-icon-color: url("/static/brand/icons/final/writing-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/writing-ui-mono.png?v=20260716-3");
}

#moduleNav .rail-button[data-module="project"] {
  --dashen-icon-color: url("/static/brand/icons/final/direction-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/direction-ui-mono.png?v=20260716-3");
}

#moduleNav .rail-button[data-module="outline"] {
  --dashen-icon-color: url("/static/brand/icons/final/outline-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/outline-ui-mono.png?v=20260716-3");
}

#moduleNav .rail-button[data-module="world"] {
  --dashen-icon-color: url("/static/brand/icons/final/world-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/world-ui-mono.png?v=20260716-3");
}

#moduleNav .rail-button[data-module="characters"] {
  --dashen-icon-color: url("/static/brand/icons/final/characters-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/characters-ui-mono.png?v=20260716-3");
}

#moduleNav .rail-button[data-module="related"] {
  --dashen-icon-color: url("/static/brand/icons/final/inspiration-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/inspiration-ui-mono.png?v=20260716-3");
}

.rail-bottom-button[data-modal="settings"] {
  --dashen-icon-color: url("/static/brand/icons/final/settings-ui.png?v=20260716-3");
  --dashen-icon-mono: url("/static/brand/icons/final/settings-ui-mono.png?v=20260716-3");
}

.topbar .dashen-pixel-command::before,
.library-tools .primary-button[data-modal="new-book"]::before,
.library-tools .search-field::before {
  width: var(--dashen-icon-size-command);
  height: var(--dashen-icon-size-command);
}

.topbar [data-action="go-shelf"] {
  --dashen-icon-color: url("/static/brand/icons/final/shelf.png");
  --dashen-icon-mono: url("/static/brand/icons/final/shelf-mono.png");
}

.topbar [data-modal="stats"] {
  --dashen-icon-color: url("/static/brand/icons/final/stats.png");
  --dashen-icon-mono: url("/static/brand/icons/final/stats-mono.png");
}

.topbar [data-modal="search"],
.library-tools .search-field {
  --dashen-icon-color: url("/static/brand/icons/final/search.png");
  --dashen-icon-mono: url("/static/brand/icons/final/search-mono.png");
}

.topbar [data-modal="import"] {
  --dashen-icon-color: url("/static/brand/icons/final/import.png");
  --dashen-icon-mono: url("/static/brand/icons/final/import-mono.png");
}

.topbar [data-modal="export"] {
  --dashen-icon-color: url("/static/brand/icons/final/export.png");
  --dashen-icon-mono: url("/static/brand/icons/final/export-mono.png");
}

.topbar [data-modal="theme"] {
  --dashen-icon-color: url("/static/brand/icons/final/theme.png");
  --dashen-icon-mono: url("/static/brand/icons/final/theme-mono.png");
}

.library-tools .primary-button[data-modal="new-book"] {
  --dashen-icon-color: url("/static/brand/icons/final/new.png");
  --dashen-icon-mono: url("/static/brand/icons/final/new-mono.png");
}

.library-tools .primary-button[data-modal="new-book"]::before {
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 18%));
}

@media (max-width: 1120px) {
  :root { --dashen-icon-size-nav: 24px; }
}

/* The production V5 skin previously carried temporary icon assets. */
.brand-skin-preview-v5 #moduleNav .rail-button::before,
.brand-skin-preview-v5 .rail-bottom-button[data-modal="settings"]::before {
  width: var(--dashen-icon-size-nav);
  height: var(--dashen-icon-size-nav);
  flex-basis: var(--dashen-icon-size-nav);
  background-color: transparent;
  background-image: var(--dashen-icon-mono);
  background-size: contain;
  -webkit-mask: none;
  mask: none;
  filter: none;
  opacity: 1;
}

.brand-skin-preview-v5 #moduleNav .rail-button.active::before,
.brand-skin-preview-v5 #moduleNav .rail-button:hover::before,
.brand-skin-preview-v5 .rail-bottom-button[data-modal="settings"]:hover::before {
  background-color: transparent;
  background-image: var(--dashen-icon-color);
  background-size: contain;
  -webkit-mask: none;
  mask: none;
  filter: none;
}

/* V5 had a higher-specificity temporary mask for Direction; keep the final
   approved feather-sword asset in both states. */
.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"]::before {
  background-color: transparent;
  background-image: var(--dashen-icon-mono);
  background-size: contain;
  -webkit-mask: none;
  mask: none;
  filter: none;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"]:hover::before,
.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"].active::before {
  background-color: transparent;
  background-image: var(--dashen-icon-color);
  background-size: contain;
  -webkit-mask: none;
  mask: none;
  filter: none;
}

.brand-skin-preview-v5 .topbar .dashen-pixel-command::before,
.brand-skin-preview-v5 .library-tools .primary-button[data-modal="new-book"]::before,
.brand-skin-preview-v5 .library-tools .search-field::before {
  width: var(--dashen-icon-size-command);
  height: var(--dashen-icon-size-command);
  flex-basis: var(--dashen-icon-size-command);
  background-color: transparent;
  background-image: var(--dashen-icon-mono);
  background-size: contain;
  -webkit-mask: none;
  mask: none;
}

/* Beat V5's temporary data-modal mask rule so the approved raster set is
   actually used by the top-level product commands. */
.brand-skin-preview-v5 .topbar .ghost-button.dashen-pixel-command[data-modal]::before {
  width: var(--dashen-icon-size-command);
  height: var(--dashen-icon-size-command);
  flex-basis: var(--dashen-icon-size-command);
  background-color: transparent;
  background-image: var(--dashen-icon-mono);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask: none;
  mask: none;
  filter: none;
  opacity: 1;
}

.brand-skin-preview-v5 .topbar .dashen-pixel-command:hover::before,
.brand-skin-preview-v5 .topbar .ghost-button.dashen-pixel-command[data-modal]:hover::before,
.brand-skin-preview-v5 .library-tools .primary-button[data-modal="new-book"]::before,
.brand-skin-preview-v5 .library-tools .search-field:focus-within::before {
  background-image: var(--dashen-icon-color);
}

/* The writing workspace uses smooth filled translations of the approved
   pixel concepts until the final pixel set is drawn against a stable UI. */
.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button::before,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button[data-modal="settings"]::before {
  display: none;
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button > .icon,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button[data-modal="settings"] > .icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: currentColor;
  stroke: none;
}

/* Keep the rest of the writing workspace in the same smooth filled family.
   These replace the temporary pixel commands and the remaining thin-line glyphs. */
.brand-skin-preview-v5 .workspace-page .topbar .dashen-pixel-command::before {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .topbar .dashen-pixel-command > .icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
  stroke: none;
}

/* The account silhouette needs more optical weight than adjacent command glyphs. */
.brand-skin-preview-v5 .workspace-page .topbar .avatar-button > .icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: currentColor;
  stroke: none;
}

.brand-skin-preview-v5 .workspace-page .icon-button > .dash-icon,
.brand-skin-preview-v5 .workspace-page .assistant-panel .dash-icon {
  fill: currentColor;
  stroke: none;
}

/* Shelf commands use the same smooth filled family as the writing workspace.
   The brand mascot in the story entry remains a brand asset, not a command icon. */
.brand-skin-preview-v5 .shelf-page .topbar .ghost-button[data-modal]::before,
.brand-skin-preview-v5 .shelf-page .library-tools .primary-button[data-modal="new-book"]::before,
.brand-skin-preview-v5 .shelf-page .library-tools .search-field::before {
  display: none;
}

.brand-skin-preview-v5 .shelf-page .topbar .ghost-button[data-modal] > .icon,
.brand-skin-preview-v5 .shelf-page .library-tools .primary-button[data-modal="new-book"] > .icon,
.brand-skin-preview-v5 .shelf-page .library-tools .search-field > .icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
  stroke: none;
}

.brand-skin-preview-v5 .shelf-page .topbar .avatar-button > .icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: currentColor;
  stroke: none;
}

.brand-skin-preview-v5 .shelf-page .book-more > .dash-icon {
  fill: currentColor;
  stroke: none;
}
/* 20260722 icon neutral */
/* Keep the approved icon geometry, but give inactive controls a neutral
   graphite tone instead of the previous blue-grey cast. Interactive and
   semantic states continue to inherit their existing blue/red/white color. */
.brand-skin-preview-v5 button:where(:not(.primary-button):not(.danger-button):not(.is-danger)) > .icon,
.brand-skin-preview-v5 .search-field > .icon {
  color: #555;
}

.brand-skin-preview-v5 button:is(:hover, :focus-visible, .active, [aria-pressed="true"], [aria-current="page"]) > .icon,
.brand-skin-preview-v5 button:is(.primary-button, .danger-button, .is-danger) > .icon,
.brand-skin-preview-v5 .search-field:focus-within > .icon {
  color: inherit;
}
/* Icons on dark primary surfaces stay bright without waiting for hover. */
.brand-skin-preview-v5 .workspace-page .assistant-composer button[type="submit"] > .icon,
.brand-skin-preview-v5 .workspace-page .assistant-reopen > .icon {
  color: inherit;
}