/* Shared editor toolbar visual grammar.
 * Interaction, IDs, dimensions and persistence contracts remain owned by the
 * existing Map Editor / Writing Editor implementations. This file normalizes
 * only toolbar surfaces and visual state.
 */

.nm-editor-subheader,
.nm-writing-toolbar-region {
  --nm-toolbar-fg: #334155;
  --nm-toolbar-muted-fg: #64748b;
  --nm-toolbar-hover: #e9eef5;
  --nm-toolbar-active: #dfe7f1;
  --nm-toolbar-accent-bg: #dbeafe;
  --nm-toolbar-accent-hover: #bfdbfe;
  --nm-toolbar-accent-fg: #1d4ed8;
  --nm-toolbar-focus: #2563eb;
}

/* ===== Map Editor sub header ===== */

.nm-editor-subheader .subheader-toolbar-row {
  gap: 6px;
}

.nm-editor-subheader #line-style-select-btn,
.nm-editor-subheader #filter-btn {
  margin-left: 4px;
}

/* All normal toolbar controls are flat. Control type must not be expressed by
 * the presence or absence of a permanent box. */
.nm-editor-subheader .nm-editor-toolbar-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--nm-toolbar-fg);
  box-shadow: none;
}

.nm-editor-subheader .nm-editor-toolbar-button--wide {
  width: 88px;
  min-width: 88px;
  padding-inline: 8px;
}

.nm-editor-subheader .nm-editor-toolbar-button--utility,
.nm-editor-subheader .nm-editor-toolbar-button--chooser,
.nm-editor-subheader .nm-editor-toolbar-button--primary,
.nm-editor-subheader .nm-editor-toolbar-button--mode:not([aria-pressed="true"]):not([aria-expanded="true"]) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nm-editor-subheader .nm-editor-toolbar-button--utility:hover:not(:disabled):not([aria-disabled="true"]),
.nm-editor-subheader .nm-editor-toolbar-button--chooser:hover:not(:disabled):not([aria-disabled="true"]),
.nm-editor-subheader .nm-editor-toolbar-button--primary:hover:not(:disabled):not([aria-disabled="true"]),
.nm-editor-subheader .nm-editor-toolbar-button--mode:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):not([aria-expanded="true"]) {
  border-color: transparent;
  background: var(--nm-toolbar-hover);
  box-shadow: none;
}

.nm-editor-subheader .nm-editor-toolbar-button--utility:active:not(:disabled):not([aria-disabled="true"]),
.nm-editor-subheader .nm-editor-toolbar-button--chooser:active:not(:disabled):not([aria-disabled="true"]),
.nm-editor-subheader .nm-editor-toolbar-button--primary:active:not(:disabled):not([aria-disabled="true"]),
.nm-editor-subheader .nm-editor-toolbar-button--mode:active:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):not([aria-expanded="true"]) {
  background: var(--nm-toolbar-active);
}

/* Persistent state alone gets a visible surface. */
.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-pressed="true"],
.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-expanded="true"] {
  border-color: transparent;
  background: var(--nm-toolbar-accent-bg);
  color: var(--nm-toolbar-accent-fg);
  box-shadow: none;
}

.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-pressed="true"]:hover,
.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-expanded="true"]:hover {
  border-color: transparent;
  background: var(--nm-toolbar-accent-hover);
}

/* A one-shot primary action remains flat. Primary hierarchy belongs to actions
 * such as Save, not to a persistent blue tile in a compact tool row. */
.nm-editor-subheader .nm-editor-toolbar-button--primary img {
  filter: none;
}

/* Plan-gated controls stay in the same family and are communicated by muted
 * treatment plus the existing plan guard rather than a separate gray box. */
.nm-editor-subheader .nm-editor-toolbar-button--plan-gated,
.nm-editor-subheader .nm-editor-toolbar-button--plan-gated:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]) {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-muted-fg);
  box-shadow: none;
  opacity: .5;
}

.nm-editor-subheader .nm-editor-toolbar-button:disabled,
.nm-editor-subheader .nm-editor-toolbar-button[aria-disabled="true"] {
  opacity: .46;
  box-shadow: none;
}

.nm-editor-subheader .nm-editor-toolbar-button:disabled:hover,
.nm-editor-subheader .nm-editor-toolbar-button[aria-disabled="true"]:hover {
  border-color: transparent;
  background: transparent;
}

.nm-editor-subheader .nm-editor-toolbar-button:focus-visible {
  outline: 2px solid var(--nm-toolbar-focus);
  outline-offset: 2px;
}

.nm-editor-subheader .nm-editor-toolbar-button > img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.nm-editor-subheader #filter-btn > img {
  width: 20px;
  height: 20px;
}

/* Keep the history separator; spacing and separators, not boxes, own grouping. */
.nm-editor-subheader .nm-editor-toolbar-group {
  gap: 4px;
  padding-right: 8px;
}

/* ===== Writing Editor toolbar ===== */

/* Specificity intentionally exceeds writing_editor.css so the same grammar is
 * preserved in both the standalone editor and the embedded Map Editor panel. */
.nm-writing-app .nm-writing-toolbar {
  gap: 3px;
  padding: 4px 6px;
}

.nm-writing-app .nm-writing-toolbar .memo-toolbar-btn {
  margin-right: 0;
}

.nm-writing-app .nm-writing-toolbar button {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--nm-toolbar-fg);
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
}

.nm-writing-app .nm-writing-toolbar button:not(:disabled):hover {
  border-color: transparent;
  background: var(--nm-toolbar-hover);
  box-shadow: none;
}

.nm-writing-app .nm-writing-toolbar button:not(:disabled):active {
  background: var(--nm-toolbar-active);
}

/* Search / read-aloud launchers expose persistent open state with aria-expanded. */
.nm-writing-app .nm-writing-toolbar button[aria-expanded="true"] {
  border-color: transparent;
  background: var(--nm-toolbar-accent-bg);
  color: var(--nm-toolbar-accent-fg);
}

.nm-writing-app .nm-writing-toolbar button[aria-expanded="true"]:hover {
  background: var(--nm-toolbar-accent-hover);
}

.nm-writing-app .nm-writing-toolbar button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.nm-writing-app .nm-writing-toolbar button:disabled:hover {
  border-color: transparent;
  background: transparent;
}

.nm-writing-app .nm-writing-toolbar .nm-writing-toolbar-icon-button {
  width: 34px;
  min-width: 34px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nm-writing-app .nm-writing-toolbar-icon-button img {
  width: 19px;
  height: 19px;
}

.nm-writing-app .nm-writing-toolbar button:focus-visible {
  outline: 2px solid var(--nm-toolbar-focus);
  outline-offset: 2px;
}

/* Save is intentionally outside .nm-writing-toolbar and keeps its primary
 * filled treatment. Character count remains plain status text. */
.nm-writing-app .nm-writing-toolbar-status-slot .nm-writing-editor-counts {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ===== Dark mode ===== */

html.dark .nm-editor-subheader,
html.dark .nm-writing-toolbar-region {
  --nm-toolbar-fg: #e2e8f0;
  --nm-toolbar-muted-fg: #94a3b8;
  --nm-toolbar-hover: #1e293b;
  --nm-toolbar-active: #273449;
  --nm-toolbar-accent-bg: #1e3a8a;
  --nm-toolbar-accent-hover: #1d4ed8;
  --nm-toolbar-accent-fg: #dbeafe;
  --nm-toolbar-focus: #60a5fa;
}

html.dark .nm-editor-subheader .nm-editor-toolbar-button {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-fg);
}

html.dark .nm-editor-subheader .nm-editor-toolbar-button--utility:hover:not(:disabled):not([aria-disabled="true"]),
html.dark .nm-editor-subheader .nm-editor-toolbar-button--chooser:hover:not(:disabled):not([aria-disabled="true"]),
html.dark .nm-editor-subheader .nm-editor-toolbar-button--primary:hover:not(:disabled):not([aria-disabled="true"]),
html.dark .nm-editor-subheader .nm-editor-toolbar-button--mode:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):not([aria-expanded="true"]) {
  background: var(--nm-toolbar-hover);
}

html.dark .nm-editor-subheader .nm-editor-toolbar-button--mode[aria-pressed="true"],
html.dark .nm-editor-subheader .nm-editor-toolbar-button--mode[aria-expanded="true"] {
  border-color: transparent;
  background: var(--nm-toolbar-accent-bg);
  color: var(--nm-toolbar-accent-fg);
  box-shadow: none;
}

html.dark .nm-editor-subheader .nm-editor-toolbar-button--plan-gated,
html.dark .nm-editor-subheader .nm-editor-toolbar-button--plan-gated:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]) {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-muted-fg);
  box-shadow: none;
}

/* Existing image assets remain readable on the dark Map Editor toolbar. */
html.dark .nm-editor-subheader .nm-editor-toolbar-button > img,
html.dark .nm-editor-subheader .nm-editor-toolbar-button--chooser img {
  filter: invert(1) brightness(1.1);
}

html.dark .nm-editor-subheader .nm-editor-toolbar-button--primary img {
  filter: invert(1) brightness(1.1);
}

html.dark .nm-writing-app .nm-writing-toolbar button {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-fg);
}

html.dark .nm-writing-app .nm-writing-toolbar button:not(:disabled):hover {
  background: var(--nm-toolbar-hover);
}

html.dark .nm-writing-app .nm-writing-toolbar button[aria-expanded="true"] {
  background: var(--nm-toolbar-accent-bg);
  color: var(--nm-toolbar-accent-fg);
}

html.dark .nm-writing-app .nm-writing-toolbar-icon-button img {
  filter: invert(1) brightness(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .nm-editor-subheader .nm-editor-toolbar-button,
  .nm-writing-app .nm-writing-toolbar button {
    transition-duration: 1ms;
  }
}

/*
 * Legacy Phase 4 layout CSS still contains the former boxed toolbar grammar.
 * Scope the canonical toolbar rules to #sub-header so they win by specificity
 * without priority overrides. Remove this compatibility guard when the legacy
 * declarations are deleted from map_editor_layout_motion.css.
 */
#sub-header.nm-editor-subheader .nm-editor-toolbar-button,
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--utility,
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--chooser,
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--primary:not(:disabled):not([aria-disabled="true"]),
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode:not([aria-pressed="true"]):not([aria-expanded="true"]) {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-fg);
  box-shadow: none;
}

#sub-header.nm-editor-subheader .nm-editor-toolbar-button--utility:hover:not(:disabled):not([aria-disabled="true"]),
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--chooser:hover:not(:disabled):not([aria-disabled="true"]),
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--primary:hover:not(:disabled):not([aria-disabled="true"]),
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):not([aria-expanded="true"]) {
  border-color: transparent;
  background: var(--nm-toolbar-hover);
  color: var(--nm-toolbar-fg);
  box-shadow: none;
}

#sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-pressed="true"],
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-expanded="true"] {
  border-color: transparent;
  background: var(--nm-toolbar-accent-bg);
  color: var(--nm-toolbar-accent-fg);
  box-shadow: none;
}

#sub-header.nm-editor-subheader .nm-editor-toolbar-button--plan-gated,
#sub-header.nm-editor-subheader .nm-editor-toolbar-button--plan-gated:hover:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]) {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-muted-fg);
  box-shadow: none;
  opacity: .5;
}

html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button,
html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button--utility,
html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button--chooser,
html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button--primary:not(:disabled):not([aria-disabled="true"]),
html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode:not([aria-pressed="true"]):not([aria-expanded="true"]) {
  border-color: transparent;
  background: transparent;
  color: var(--nm-toolbar-fg);
  box-shadow: none;
}

html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-pressed="true"],
html.dark #sub-header.nm-editor-subheader .nm-editor-toolbar-button--mode[aria-expanded="true"] {
  border-color: transparent;
  background: var(--nm-toolbar-accent-bg);
  color: var(--nm-toolbar-accent-fg);
  box-shadow: none;
}