/* style.css - Versie 2.10.0 */
/* --- Global Reset & Variables --- */
/* Test 2 Rob */
*,
*:before,
*:after {
  box-sizing: border-box;
}

:root {
  --bg-color: #fdfdfc;
  --text-color: #111111;
  --menu-bg: rgba(255, 255, 255, 0.95);
  --menu-border: #e0e0e0;
  --modal-border-color: var(--menu-border);
  --font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --font-size: 18px;
  --line-height: 1.6;
}

[data-theme='dark'] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --menu-bg: rgba(30, 30, 30, 0.95);
  --menu-border: #333333;
}

[data-theme='oled'] {
  --bg-color: #000000;
  --text-color: #cccccc;
  --menu-bg: rgba(10, 10, 10, 0.95);
  --menu-border: #222222;
}

html,
body {
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  transition:
    background-color 0.3s,
    color 0.3s;
  overflow-x: hidden;
}

/* --- View Management --- */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* --- Algemene UI Helpers --- */
.btn-full-width {
  width: 100%;
  padding: 12px;
  font-weight: bold;
  border-radius: 8px;
  margin-top: 10px;
}
.error-msg {
  color: #d9534f;
  display: none;
  margin-top: 15px;
  font-size: 14px;
}

/* --- Login --- */
.login-container {
  max-width: 400px;
  margin: 80px auto;
  padding: 25px;
  text-align: center;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.login-container h1 {
  margin-top: 0;
  font-size: 20px;
}
.login-container input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 16px;
}

/* --- Dashboard --- */
.dash-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 15px 20px;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--menu-border);
  background: var(--menu-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dash-header h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
}
.header-actions {
  position: relative;
  display: flex;
  align-items: center;
}

/* Dashboard Dropdown Menu */
.dash-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  display: none;
  flex-direction: column;
  min-width: 255px;
  z-index: 1000;
}
.dash-dropdown.active {
  display: flex;
}
.dash-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid var(--menu-border);
  width: 100%;
  white-space: nowrap;
  transition: background 0.1s;
}
.dash-dropdown-item:last-child {
  border-bottom: none;
}
.dash-dropdown-item:active {
  opacity: 0.7;
}
.dash-dropdown-item.danger {
  color: #d9534f;
}

#story-list {
  max-width: 800px;
  margin: 15px auto;
  padding: 0 15px;
}

/* --- Story Card --- */
.story-card {
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  padding: 12px 15px;
  border-radius: 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
}
.story-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.drag-handle {
  cursor: grab;
  color: var(--text-color);
  opacity: 0.4;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.drag-handle:active {
  cursor: grabbing;
}
.story-card-info {
  flex-grow: 1;
  min-width: 0;
  cursor: pointer;
}
.story-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-options {
  flex-shrink: 0;
  opacity: 0.7;
}
.story-actions {
  display: none;
  width: 100%;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--menu-border);
}
.story-actions.active {
  display: flex;
}
.loading-text {
  text-align: center;
  opacity: 0.6;
  margin-top: 30px;
  font-size: 14px;
}

.draft-card {
  border-color: rgba(243, 179, 12, 0.65);
}
.draft-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f3b30c;
  color: #111111;
  font-size: 13px;
  font-weight: 800;
}
.draft-status {
  display: block;
  margin-top: 3px;
  color: #9a6a00;
  font-size: 12px;
  line-height: 1.3;
}
[data-theme='dark'] .draft-status,
[data-theme='oled'] .draft-status {
  color: #f3c955;
}
.editor-save-status {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.72;
  text-align: center;
  flex-shrink: 0;
}
.editor-save-status[data-state='saved'] {
  color: #2f8f46;
  opacity: 1;
}
.editor-save-status[data-state='dirty'],
.editor-save-status[data-state='saving'] {
  color: #9a6a00;
  opacity: 1;
}
.editor-save-status[data-state='error'] {
  color: #d9534f;
  opacity: 1;
  font-weight: 600;
}
#btn-save-story:disabled {
  opacity: 0.55;
  cursor: wait;
}

.draft-choice-modal-content {
  width: min(92%, 440px);
  padding: 20px;
}
.draft-choice-modal-content h2 {
  margin: 0 0 10px;
  font-size: 18px;
}
.draft-choice-modal-content p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.8;
}
.draft-choice-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
button.ui-btn.draft-choice-button {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}
button.ui-btn.draft-choice-button.danger-action {
  color: #d9534f;
  border-color: rgba(217, 83, 79, 0.45);
}

/* --- Reader View (Dynamische Viewport) --- */
#reader-view.active {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--bg-color);
  z-index: 50;
}

#reader-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: auto;
  touch-action: pan-y;
}

#reader-content {
  padding: 25px 20px 80px 20px;
  font-size: var(--font-size);
  line-height: var(--line-height);
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  hyphens: auto;
  -webkit-hyphens: auto;
}
#reader-content h1,
#reader-content h2 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  line-height: 1.2;
}
#reader-content p {
  margin-top: 0;
  margin-bottom: 1.5em;
}
#reader-content ul,
#reader-content ol {
  margin-bottom: 1.5em;
  padding-left: 20px;
}
#reader-content strong {
  font-weight: bold;
}

/* Menu balken tonen/verbergen */
#reader-view .menu-bar {
  display: none;
  flex-shrink: 0;
}
#reader-view.ui-visible .menu-bar {
  display: flex;
}

.menu-bar {
  background-color: var(--menu-bg);
  border-bottom: 1px solid var(--menu-border);
  padding: 10px 15px;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
}
.menu-bar.bottom {
  border-bottom: none;
  border-top: 1px solid var(--menu-border);
}
.toc-btn {
  border: none !important;
  font-weight: bold;
  font-size: 15px !important;
}

/* --- SVG Button Styling --- */
button.ui-btn,
label.ui-btn {
  background: transparent;
  border: 1px solid var(--menu-border);
  color: var(--text-color);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.ui-btn.active {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}
button.ui-btn.icon-only,
label.ui-btn.icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}
button.ui-btn.danger-icon {
  color: #d9534f;
  border-color: rgba(217, 83, 79, 0.3);
}

/* --- Rules & TOC --- */
.rule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--menu-border);
}
.rule-item-text {
  font-size: 15px;
}
.add-rule-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}
.add-rule-form input[type='text'] {
  padding: 10px;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--menu-bg);
  color: var(--text-color);
  font-size: 15px;
}
.toc-item {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--menu-border);
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
}
.toc-item.h2 {
  padding-left: 20px;
  font-size: 13px;
  opacity: 0.8;
}

/* --- Name Suggestions & Controls --- */
.suggestion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  margin-top: 4px;
}
.threshold-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.8;
}
.threshold-control input[type='range'] {
  width: 80px;
}

.name-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.suggestion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--text-color);
  color: var(--bg-color);
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  transition:
    opacity 0.2s,
    transform 0.1s;
}
.suggestion-chip-text {
  cursor: pointer;
}
.suggestion-chip-text:active {
  opacity: 0.7;
  transform: scale(0.95);
}
.suggestion-chip-ignore {
  cursor: pointer;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  background: rgba(128, 128, 128, 0.3);
  transition: all 0.2s;
}
.suggestion-chip-ignore:hover,
.suggestion-chip-ignore:active {
  opacity: 1;
  background: #d9534f;
  color: white;
}

/* Voor genegeerde chips in de lijst onderaan */
.suggestion-chip.ignored-chip {
  background: transparent;
  border: 1px dashed var(--menu-border);
  color: var(--text-color);
  opacity: 0.7;
  padding: 4px 10px;
  font-weight: normal;
}
.suggestion-chip.ignored-chip .suggestion-chip-ignore {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--menu-border);
}

/* --- Compact Grouped Name Suggestions --- */
.suggestion-group {
  width: 100%;
  padding: 9px 0;
  border-bottom: 1px solid var(--menu-border);
}

.suggestion-group:last-child {
  border-bottom: none;
}

.suggestion-group-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  text-align: left;
}

.suggestion-group-title {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.78;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestion-group-toggle {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
  padding-left: 8px;
}

.suggestion-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.suggestion-group.collapsed .suggestion-group-chips {
  display: none;
}

.grouped-suggestion-chip {
  flex-wrap: nowrap;
  max-width: 100%;
  background: var(--text-color);
  color: var(--bg-color);
}

.suggestion-chip-label {
  opacity: 0.65;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.grouped-suggestion-chip .suggestion-chip-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .grouped-suggestion-chip .suggestion-chip-text {
    max-width: 160px;
  }
}

/* --- Optional Rule Aliases --- */
.alias-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 2px;
}
.alias-options.hidden,
.edit-rule-cancel.hidden {
  display: none;
}
.alias-options-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--menu-bg);
}
.alias-options-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.alias-options-title {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.78;
}
.alias-options-count {
  font-size: 12px;
  opacity: 0.6;
}
.alias-options-toggle {
  flex-shrink: 0;
  border: 1px solid var(--menu-border);
  border-radius: 999px;
  padding: 6px 10px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.alias-options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(22vh, 210px);
  max-height: min(22dvh, 210px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  overscroll-behavior: contain;
}
.alias-option-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--menu-bg);
  color: var(--text-color);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.alias-option-row.selected {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}
.alias-option-check {
  width: 18px;
  text-align: center;
  font-weight: 800;
}
.alias-option-label {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.65;
  white-space: nowrap;
}
.alias-option-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.edit-rule-cancel {
  margin-top: 0;
  border-style: dashed !important;
}
@media (max-width: 420px) {
  .alias-options-list {
    max-height: min(18vh, 170px);
    max-height: min(18dvh, 170px);
  }
  .alias-option-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
  }
  .alias-option-label {
    display: none;
  }
}

/* --- Character Profiles & Compact Suggestion Actions --- */
.suggestion-group-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.suggestion-group-title-button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  text-align: left;
}
.suggestion-group-title-button svg {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.suggestion-group:not(.collapsed) .suggestion-group-title-button svg {
  transform: rotate(90deg);
}
.suggestion-group-actions,
.character-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
button.ui-btn.suggestion-action-button {
  width: 34px;
  height: 34px;
}
.rules-overview-section,
.rules-section-heading {
  display: none;
}
#rules-modal.rules-overview-mode .rules-overview-section,
#rules-modal.rules-overview-mode .rules-section-heading {
  display: block;
}
.rules-overview-section h3,
.rules-section-heading {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.65;
}
#characters-list {
  max-height: min(18vh, 150px);
  max-height: min(18dvh, 150px);
  overflow-y: auto;
  margin-bottom: 10px;
}
.character-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--menu-border);
}
.character-item-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.empty-section-text {
  margin: 0 0 10px;
  font-size: 13px;
  opacity: 0.6;
}
.character-form-section {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.character-form-section h3 {
  margin: 0;
  font-size: 15px;
}
.character-form-section p {
  margin: -5px 0 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.65;
}
.character-form-section label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.82;
}
.character-form-section input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--menu-bg);
  color: var(--text-color);
  font: inherit;
  font-size: 15px;
}
@media (max-width: 420px) {
  button.ui-btn.suggestion-action-button {
    width: 32px;
    height: 32px;
  }
  .suggestion-group-action-row {
    gap: 6px;
  }
  .character-modal-content {
    height: 94vh;
    height: 94dvh;
  }
}

/* --- Sprint 1.4b: Character Variant Mapping --- */
.character-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.character-item-text small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
}
.character-variants-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.character-variant-count {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid var(--menu-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
}
.character-variants-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.character-variant-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  opacity: 0.7;
}
.character-variant-row.active {
  opacity: 1;
  border-color: var(--text-color);
}
.character-variant-toggle {
  display: flex !important;
  align-items: flex-start;
  padding-top: 3px;
}
.character-variant-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.character-variant-toggle span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--menu-border);
  border-radius: 6px;
}
.character-variant-toggle input:checked + span {
  background: var(--text-color);
  color: var(--bg-color);
  border-color: var(--text-color);
}
.character-variant-toggle input:checked + span::after {
  content: '✓';
  font-size: 13px;
  font-weight: 800;
}
.character-variant-fields {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.character-variant-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.character-variant-source strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.character-variant-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.6;
}
.character-variant-fields input.character-variant-replace {
  padding: 7px 8px;
  font-size: 13px;
}

/* --- Sprint 1.6d-2: Delen en rollenbeheer --- */
.story-role {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--menu-border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0.72;
  margin-right: auto;
}
.story-role-owner {
  opacity: 0.55;
}
.story-role-editor,
.story-role-reader {
  border-style: dashed;
}
.sharing-story-title {
  margin: 3px 0 0;
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  opacity: 0.65;
}
.sharing-explanation {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.7;
}
.sharing-feedback {
  min-height: 18px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #2f7d32;
}
.sharing-feedback.error,
.sharing-error {
  color: #d9534f;
}
.sharing-add-area {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--menu-border);
}
button.ui-btn.sharing-add-toggle {
  gap: 7px;
  border-style: dashed;
  font-weight: 700;
}
.sharing-add-toggle span {
  font-size: 20px;
  line-height: 0.8;
}
.sharing-add-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--menu-border);
  border-radius: 10px;
  background: var(--menu-bg);
}
.sharing-add-form.hidden,
.sharing-add-toggle.hidden {
  display: none;
}
.sharing-add-form label {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
}
.sharing-add-form select,
.sharing-role-select {
  width: 100%;
  padding: 9px 30px 9px 10px;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--menu-bg);
  color: var(--text-color);
  font: inherit;
  font-size: 13px;
}
.sharing-add-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.sharing-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 155px) 38px;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid var(--menu-border);
}
.sharing-user-row:last-child {
  border-bottom: 0;
}
.sharing-user-info {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
}
.sharing-user-info strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.sharing-user-info span {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--text-color);
  color: var(--bg-color);
  font-size: 10px;
  font-weight: 700;
}
.sharing-user-info small {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.55;
}
.sharing-revoke:disabled,
.sharing-role-select:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.sharing-empty,
.sharing-error {
  margin: 12px 0;
  font-size: 13px;
}
@media (max-width: 420px) {
  .sharing-modal-content {
    width: 94%;
    height: 92vh;
    height: 92dvh;
    max-height: 92dvh;
  }
  .sharing-user-row {
    grid-template-columns: minmax(0, 1fr) 112px 36px;
    gap: 6px;
  }
  .sharing-add-form {
    grid-template-columns: 1fr;
  }
  .sharing-add-actions {
    grid-column: 1;
  }
}

/* --- Sprint 1.9d-1f: Consistent Modal and Menu Behavior --- */
.profile-avatar-btn {
  flex: 0 0 36px;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  min-height: 36px;
  padding: 0 !important;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--menu-border) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--text-color) !important;
  font-family: var(--font-family) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}
.profile-avatar-btn > span {
  display: block;
  font: inherit;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
#dashboard-view .header-actions {
  gap: 8px;
}
#reader-view .profile-avatar-btn {
  flex-basis: 36px;
}
.profile-menu {
  display: none;
  position: fixed;
  width: min(280px, calc(100vw - 24px));
  flex-direction: column;
  z-index: 1200;
  overflow: hidden;
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  background: var(--menu-bg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.profile-menu.active {
  display: flex;
}
.profile-menu-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 15px;
  border: 0;
  border-bottom: 1px solid var(--menu-border);
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.profile-menu-item:last-child {
  border-bottom: 0;
}
.profile-menu-item:active {
  opacity: 0.7;
}
.profile-menu-item.danger {
  color: #d9534f;
}
.profile-menu-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 800;
}
.profile-detail-content {
  display: flex;
  flex-direction: column;
  width: min(92%, 460px);
  min-height: 310px;
  max-height: min(82vh, 520px);
  max-height: min(82dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.profile-detail-content .modal-header {
  margin-bottom: 14px;
}
.profile-detail-content .profile-modal-close {
  flex-shrink: 0;
}
.profile-data-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  font-size: 13px;
}
.profile-data-row span {
  opacity: 0.65;
}
.profile-data-row strong,
.profile-data-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.profile-fieldset {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.profile-fieldset legend,
.profile-font-setting > span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.75;
}
.profile-theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
button.ui-btn.profile-theme-btn {
  width: 100%;
  border-radius: 10px;
}
.profile-font-setting {
  display: block;
}
.profile-font-setting > span {
  display: flex;
  justify-content: space-between;
}
#profile-font-size {
  width: 100%;
}
.profile-settings-feedback {
  min-height: 18px;
  margin-top: 7px;
  font-size: 12px;
}
.profile-settings-feedback[data-state='saved'] {
  color: #2f8f46;
}
.profile-settings-feedback[data-state='saving'] {
  color: #9a6a00;
}
.profile-settings-feedback[data-state='error'] {
  color: #d9534f;
}
.notification-explanation,
.notification-privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.72;
}
.notification-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0 10px;
  padding: 13px;
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  background: var(--menu-bg);
}
.notification-status-indicator {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: #9a6a00;
}

.notification-status[data-state='enabled'] .notification-status-indicator {
  background: #2f8f46;
}

.notification-status[data-state='allowed'] .notification-status-indicator {
  background: #9a6a00;
}

.notification-status[data-state='blocked'] .notification-status-indicator,
.notification-status[data-state='unsupported'] .notification-status-indicator,
.notification-status[data-state='error'] .notification-status-indicator {
  background: #d9534f;
}
.notification-status strong {
  display: block;
  font-size: 14px;
}
.notification-status p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.72;
}
.notification-feedback {
  min-height: 20px;
  margin: 4px 0;
  font-size: 12px;
  line-height: 1.45;
}
.notification-feedback[data-state='info'] {
  color: #9a6a00;
}
[data-theme='dark'] .notification-feedback[data-state='info'],
[data-theme='oled'] .notification-feedback[data-state='info'] {
  color: #f3c955;
}
.notification-actions {
  margin: 4px 0 14px;
}
.notification-actions .ui-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
@media (max-width: 420px) {
  .profile-data-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .profile-data-row strong,
  .profile-data-row code {
    text-align: left;
  }
}

.profile-menu-icon svg {
  display: block;
}
.technical-version-list {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--menu-border);
}
.technical-version-list .profile-data-row {
  padding: 6px 0;
}

#technical-modal .profile-detail-content {
  width: min(94%, 620px);
  max-height: 92vh;
  max-height: 92dvh;
}
#technical-modal .profile-data-row {
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  border-bottom: 1px solid
    color-mix(in srgb, var(--menu-border) 55%, transparent);
}
#technical-modal .profile-data-row:last-child {
  border-bottom: 0;
}
#technical-modal .profile-data-row strong,
#technical-modal .profile-data-row code {
  text-align: left;
}
@media (max-width: 560px) {
  #technical-modal .profile-detail-content {
    width: min(94%, 460px);
  }
  #technical-modal .profile-data-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}
#profile-user-id,
#profile-serviceworker-scope,
#profile-serviceworker-script {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  word-break: break-all;
}
#reader-view .menu-bar.top {
  justify-content: flex-start;
  gap: 10px;
}
#reader-view .menu-bar.top #btn-toc {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#reader-view .menu-bar.top #btn-rules,
#reader-view .menu-bar.top .profile-avatar-btn,
#reader-view .menu-bar.top #btn-back {
  flex-shrink: 0;
}

#dashboard-view #dash-dropdown {
  right: 44px;
}

/* --- Sprint 1.9g: Account profile --- */
.account-form {
  display: grid;
  gap: 12px;
}
.account-form label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}
.account-form input[type='text'],
.account-form input[type='password'] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--menu-bg);
  color: var(--text-color);
  font: inherit;
  font-size: 15px;
}
.account-form > small {
  font-size: 11px;
  opacity: 0.65;
}
.privacy-toggle-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px !important;
  padding: 10px 0;
  border-top: 1px solid var(--menu-border);
  border-bottom: 1px solid var(--menu-border);
}
.privacy-toggle-row > span {
  display: grid;
  gap: 3px;
}
.privacy-toggle-row small {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.68;
}
.privacy-toggle-row input {
  width: 42px;
  height: 24px;
  accent-color: var(--text-color);
}

/* --- Sprint 1.9g-1: UI typography consistency --- */
.modal-content,
.profile-menu,
.dash-dropdown {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.45;
}
.modal-header h2 {
  font-size: 18px;
  line-height: 1.3;
}
.account-form label,
.profile-fieldset legend,
.profile-font-setting > span {
  font-size: 13px;
  line-height: 1.4;
}
.account-form input[type='text'],
.account-form input[type='password'],
.sharing-role-select {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.4;
}
.profile-data-row,
.notification-explanation,
.notification-privacy,
.profile-menu-item {
  font-size: 14px;
}
.privacy-toggle-row small,
.account-form > small,
.notification-status p {
  font-size: 12px;
  line-height: 1.45;
}
.profile-settings-feedback,
.notification-feedback {
  font-size: 12px;
  line-height: 1.4;
}
.profile-detail-content .btn-full-width {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.3;
}

/* --- DEV-1b environment indicator --- */
html[data-environment='development'] body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 2000;
  background: var(--environment-accent);
  pointer-events: none;
}
.environment-indicator {
  position: fixed;
  top: 3px; /* max(8px, env(safe-area-inset-top)); */
  left: 50dvw;
  translate: -50% 0; /* Of: transform: translateX(-50%); */
  /* max(72px, calc(env(safe-area-inset-left) + 64px));*/
  z-index: 2001;
  padding: 1px 1px;
  border: 1px solid var(--environment-accent);
  border-radius: 0px;
  background: var(--environment-accent);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  font-size: 10px;
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: 0.08em;
  pointer-events: none;
}
html[data-environment='development'] {
  --modal-border-color: color-mix(
    in srgb,
    var(--environment-accent) 42%,
    var(--menu-border)
  );
}
html[data-environment='development'] .login-container,
html[data-environment='development'] .dash-header,
html[data-environment='development'] .menu-bar {
  border-color: var(--modal-border-color);
}
html[data-environment='development'] .dash-header,
html[data-environment='development'] .menu-bar.top {
  box-shadow: inset 0 3px 0 var(--environment-accent-soft);
}
html[data-environment-mismatch='true'] .environment-indicator {
  border-style: dashed;
}
@media (max-width: 560px) {
  .environment-indicator {
    top: 3px; /* max(10px, calc(env(safe-area-inset-top) + 2px)); */
    left: 50dvw;
    translate: -50% 0; /* Of: transform: translateX(-50%); */
    /* max(68px, calc(env(safe-area-inset-left) + 60px)); */
  }
}

/* --- Central modal framework and scrollbar source of truth --- */
:root {
  --modal-edge: 16px;
  --modal-padding: 16px;
  --modal-radius: 12px;
  --modal-header-height: 67px;
  --modal-width-compact: 420px;
  --modal-width-standard: 500px;
  --modal-width-wide: 680px;
  --modal-width-workspace: 900px;
  --modal-standard-height: 620px;
  --modal-workspace-height: 760px;
  --scroll-thumb: rgba(90, 90, 90, 0.38);
  --scroll-thumb-active: rgba(70, 70, 70, 0.62);
}
[data-theme='dark'] {
  --scroll-thumb: rgba(210, 210, 210, 0.3);
  --scroll-thumb-active: rgba(230, 230, 230, 0.52);
}
[data-theme='oled'] {
  --scroll-thumb: rgba(220, 220, 220, 0.32);
  --scroll-thumb-active: rgba(245, 245, 245, 0.58);
}
html,
body,
#reader-scroll-container,
.modal-body,
#edit-story-content,
.rules-overview-scroll-area,
#name-suggestions,
.alias-options-list,
.character-form-scroll,
.sharing-users {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#reader-scroll-container::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#edit-story-content::-webkit-scrollbar,
.rules-overview-scroll-area::-webkit-scrollbar,
#name-suggestions::-webkit-scrollbar,
.alias-options-list::-webkit-scrollbar,
.character-form-scroll::-webkit-scrollbar,
.sharing-users::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#reader-scroll-container::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
#edit-story-content::-webkit-scrollbar-track,
.rules-overview-scroll-area::-webkit-scrollbar-track,
#name-suggestions::-webkit-scrollbar-track,
.alias-options-list::-webkit-scrollbar-track,
.character-form-scroll::-webkit-scrollbar-track,
.sharing-users::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#reader-scroll-container::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
#edit-story-content::-webkit-scrollbar-thumb,
.rules-overview-scroll-area::-webkit-scrollbar-thumb,
#name-suggestions::-webkit-scrollbar-thumb,
.alias-options-list::-webkit-scrollbar-thumb,
.character-form-scroll::-webkit-scrollbar-thumb,
.sharing-users::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#reader-scroll-container::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
#edit-story-content::-webkit-scrollbar-thumb:hover,
.rules-overview-scroll-area::-webkit-scrollbar-thumb:hover,
#name-suggestions::-webkit-scrollbar-thumb:hover,
.alias-options-list::-webkit-scrollbar-thumb:hover,
.character-form-scroll::-webkit-scrollbar-thumb:hover,
.sharing-users::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-active);
}
body.modal-open {
  overflow: hidden;
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(var(--modal-edge), env(safe-area-inset-top))
    max(var(--modal-edge), env(safe-area-inset-right))
    max(var(--modal-edge), env(safe-area-inset-bottom))
    max(var(--modal-edge), env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.modal.active {
  display: flex;
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--modal-width-standard));
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - (2 * var(--modal-edge)));
  max-height: calc(100dvh - (2 * var(--modal-edge)));
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-color);
  border: 1px solid var(--modal-border-color);
  border-radius: var(--modal-radius);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.modal--compact .modal-content {
  width: min(100%, var(--modal-width-compact));
}
.modal--wide .modal-content {
  width: min(100%, var(--modal-width-wide));
}
.modal--workspace .modal-content {
  width: min(100%, var(--modal-width-workspace));
}
#profile-modal .modal-content,
#notifications-modal .modal-content,
#reading-settings-modal .modal-content,
#password-modal .modal-content,
#story-notification-modal .modal-content {
  height: min(
    var(--modal-standard-height),
    calc(100vh - (2 * var(--modal-edge)))
  );
  height: min(
    var(--modal-standard-height),
    calc(100dvh - (2 * var(--modal-edge)))
  );
}
.modal--workspace .modal-content {
  max-height: min(
    var(--modal-workspace-height),
    calc(100vh - (2 * var(--modal-edge)))
  );
  max-height: min(
    var(--modal-workspace-height),
    calc(100dvh - (2 * var(--modal-edge)))
  );
}
#editor-modal .modal-content {
  height: min(
    var(--modal-workspace-height),
    calc(100vh - (2 * var(--modal-edge)))
  );
  height: min(
    var(--modal-workspace-height),
    calc(100dvh - (2 * var(--modal-edge)))
  );
}
.modal-header,
.modal-footer {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--modal-padding);
  background: var(--bg-color);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--modal-header-height);
  border-bottom: 1px solid var(--menu-border);
}
.modal-header h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.modal-header .icon-only {
  flex: 0 0 36px;
}
.modal-footer {
  border-top: 1px solid var(--menu-border);
}
.modal-footer .btn-full-width {
  margin-top: 0;
}
.modal-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: var(--modal-padding);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
.modal-body > :first-child {
  margin-top: 0;
}
.modal-body > :last-child {
  margin-bottom: 0;
}
.modal code,
.modal pre,
.modal a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
#technical-modal .profile-data-row {
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
}
#technical-modal .profile-data-row strong,
#technical-modal .profile-data-row code {
  text-align: left;
}
#editor-modal .modal-body {
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.editor-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
#edit-story-title,
#editor-find,
#editor-replace,
#edit-story-content {
  width: 100%;
  border: 1px solid var(--menu-border);
  border-radius: 8px;
  background: var(--menu-bg);
  color: var(--text-color);
  font: inherit;
}
#edit-story-title,
#editor-find,
#editor-replace {
  min-height: 42px;
  padding: 10px 12px;
}
.editor-search-panel {
  display: grid;
  gap: 8px;
}
.editor-search-panel.hidden {
  display: none;
}
.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.search-actions {
  display: flex;
  gap: 8px;
}
#edit-story-content {
  flex: 1 1 auto;
  min-height: 180px;
  padding: 12px;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 1.5;
}
.editor-footer {
  display: grid;
  gap: 8px;
}
#draft-choice-modal {
  z-index: 1300;
}
@media (max-width: 560px) {
  .search-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .search-row:last-child {
    grid-template-columns: 1fr;
  }
  .search-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
#toc-list {
  max-height: none;
  overflow: visible;
}
.modal-footer-actions {
  display: grid;
  gap: 8px;
}
.notification-actions .btn-full-width {
  margin: 0;
}
.sharing-modal-body {
  overflow-y: auto;
}
.sharing-users {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}
.character-modal-body {
  overflow-y: auto;
}
.character-modal-body .character-form-scroll {
  overflow: visible;
}
#character-modal-back {
  flex-shrink: 0;
}

/* Regels: one workflow, exactly two overview scroll regions. */
#rules-modal .modal-body {
  overflow: hidden;
}
#rules-modal.rules-overview-mode .modal-body {
  display: grid;
  grid-template-rows: minmax(112px, 1fr) auto auto minmax(150px, 1.25fr);
  gap: 10px;
}
#rules-modal.rules-overview-mode .add-rule-form {
  display: contents;
}
#rules-modal.rules-overview-mode .rules-overview-scroll-area,
#rules-modal.rules-overview-mode #name-suggestions {
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
#rules-modal.rules-overview-mode .rules-overview-scroll-area {
  grid-row: 1;
}
#rules-modal.rules-overview-mode #btn-manual-rule {
  grid-row: 2;
  display: flex;
  width: 100%;
  margin: 0;
}
#rules-modal.rules-overview-mode .suggestion-header {
  grid-row: 3;
  display: flex;
  margin: 0;
}
#rules-modal.rules-overview-mode #name-suggestions {
  grid-row: 4;
  display: block;
}
#rules-modal.rules-overview-mode #characters-list,
#rules-modal.rules-overview-mode #rules-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
#rules-modal.rules-overview-mode #characters-list {
  margin-bottom: 10px;
}
#rules-modal.rules-overview-mode .add-rule-form > input,
#rules-modal.rules-overview-mode #alias-options,
#rules-modal.rules-overview-mode #btn-cancel-rule-edit,
#rules-modal.rules-overview-mode #btn-add-rule,
#rules-modal.rules-overview-mode #rule-form-mode-title {
  display: none;
}
#rules-modal.rules-form-mode .rules-overview-scroll-area,
#rules-modal.rules-form-mode .suggestion-header,
#rules-modal.rules-form-mode #name-suggestions,
#rules-modal.rules-form-mode #btn-manual-rule,
#rules-modal.rules-alias-mode .rules-overview-scroll-area,
#rules-modal.rules-alias-mode .suggestion-header,
#rules-modal.rules-alias-mode #name-suggestions,
#rules-modal.rules-alias-mode #btn-manual-rule {
  display: none;
}
#rules-modal.rules-form-mode .modal-body,
#rules-modal.rules-alias-mode .modal-body {
  overflow-y: auto;
}
#rules-modal.rules-form-mode .add-rule-form,
#rules-modal.rules-alias-mode .add-rule-form {
  display: flex;
  min-height: 0;
  margin-top: 0;
}
#rules-modal.rules-alias-mode .add-rule-form > input,
#rules-modal.rules-alias-mode #btn-cancel-rule-edit,
#rules-modal.rules-alias-mode #btn-add-rule {
  display: none;
}
#rules-modal.rules-alias-mode .alias-options-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
#rules-modal.rules-form-mode #alias-options .alias-options-list {
  display: none;
}
#rules-modal .rules-mode-back {
  display: none;
}
.rules-overview-section,
.rules-section-heading {
  display: none;
}
#rules-modal.rules-overview-mode .rules-overview-section,
#rules-modal.rules-overview-mode .rules-section-heading {
  display: block;
}

@media (max-width: 560px) {
  :root {
    --modal-edge: 10px;
    --modal-padding: 14px;
    --modal-header-height: 63px;
    --modal-standard-height: 500px;
  }
  .modal--wide .modal-content {
    width: min(100%, var(--modal-width-standard));
  }
  .modal--workspace .modal-content {
    max-height: calc(100vh - (2 * var(--modal-edge)));
    max-height: calc(100dvh - (2 * var(--modal-edge)));
  }
  #editor-modal .modal-content {
    height: calc(100vh - (2 * var(--modal-edge)));
    height: calc(100dvh - (2 * var(--modal-edge)));
  }
  #technical-modal .profile-data-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  #rules-modal.rules-overview-mode .modal-body {
    grid-template-rows: minmax(105px, 1fr) auto auto minmax(140px, 1.2fr);
  }
}

/* --- SHR-1A-2: rustige informatiehierarchie in bevestigingsmodal --- */
.draft-choice-story-label {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.7;
}
.draft-choice-story-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.draft-choice-story-label[hidden],
.draft-choice-story-title[hidden] {
  display: none;
}

/* --- SHR-1B: expliciet meldingswaardige definitieve verhaalwijziging --- */
.editor-significant-change-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid var(--menu-border);
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.editor-significant-change-option > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.editor-significant-change-option small {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.68;
}
.editor-significant-change-option[hidden] { display: none; }
.editor-significant-change-option input {
  width: 42px;
  height: 24px;
  margin: 0;
  accent-color: var(--text-color);
  justify-self: end;
}
.editor-significant-change-option:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* SHR-1C voorkeuren */
.notification-preferences { margin: 16px 0; }
.notification-preferences .privacy-toggle-row { margin-top: 8px; }

/* SHR-1C-2A gecombineerde meldingen-UX */
.notification-modal-content { max-height: min(var(--modal-standard-height), calc(100dvh - (2 * var(--modal-edge)))); }
.notification-modal-body { display: grid; gap: 16px; padding: 16px; overflow-y: auto; }
.notification-section { display: grid; gap: 9px; }
.notification-section + .notification-section { padding-top: 15px; border-top: 1px solid var(--menu-border); }
.notification-section h3 { margin: 0; font-size: 15px; }
.notification-section-intro { margin: 0; font-size: 12px; line-height: 1.4; opacity: .68; }
.notification-modal-body .notification-status { margin: 0; padding: 11px 12px; }
.notification-modal-body .notification-feedback { min-height: 0; margin: 0; }
.notification-device-action.btn-full-width { margin-top: 0; }
.notification-preference-list { display: grid; }
.notification-preference-row {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}
.notification-preference-row + .notification-preference-row { border-top: 1px solid var(--menu-border); }
.notification-preference-row > span { min-width: 0; }
.notification-preference-row input { flex: 0 0 auto; justify-self: end; }
.notification-preference-row:focus-within { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.notification-device-action[hidden] { display: none !important; }
.story-notification-modal-body { display: grid; align-content: start; grid-auto-rows: max-content; gap: 12px; }
.story-notification-intro, .story-notification-general, .story-notification-prompt { margin: 0; font-size: 13px; }
.story-notification-title { font-size: 15px; }
.story-notification-options { display: grid; border: 1px solid var(--menu-border); border-radius: 12px; overflow: hidden; }
.story-notification-option { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 0; border-bottom: 1px solid var(--menu-border); background: transparent; color: var(--text-color); text-align: left; cursor: pointer; }
.story-notification-option:last-child { border-bottom: 0; }
.story-notification-option span:first-child { display: grid; gap: 2px; }
.story-notification-option small { font-size: 12px; line-height: 1.35; opacity: .65; }
.story-notification-radio { width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 50%; opacity: .55; }
.story-notification-option[aria-checked='true'] { background: rgba(128,128,128,.12); }
.story-notification-option[aria-checked='true'] .story-notification-radio { border-width: 5px; opacity: 1; }
.btn-story-notification[data-enabled='true'] { opacity: 1; }
.btn-story-notification[data-enabled='false'] { opacity: .62; }
@media (max-height: 620px) { .notification-modal-content { max-height: 96vh; } .notification-modal-body { gap: 12px; padding: 12px 16px; } }

/* FBK-1B/1C/1D: verhaal-bottomsheet, reacties en sorteermodus */
.server-story-card .story-actions{display:none!important}.drag-handle{display:none}.sort-mode-active .drag-handle,.server-story-card .drag-handle{display:none}body:has(#sort-mode-bar:not([hidden])) .server-story-card .drag-handle{display:flex}.story-card-info h3{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}.story-sheet{position:fixed;inset:0;z-index:1200;display:none}.story-sheet.active{display:block}.story-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)}.story-sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--bg-secondary,#1d1d1d);border:1px solid var(--border-color,#444);border-radius:18px 18px 0 0;padding:8px 12px max(14px,env(safe-area-inset-bottom));box-shadow:0 -12px 36px rgba(0,0,0,.4)}.story-sheet-handle{width:42px;height:4px;border-radius:2px;background:currentColor;opacity:.3;margin:0 auto 10px}.story-sheet-header{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-color,#444);padding-bottom:10px}.story-sheet-header>div{min-width:0;flex:1}.story-sheet-header h2{font-size:18px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.story-sheet-header small{opacity:.7}.story-sheet-actions{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:14px 0 6px}.story-sheet-action{position:relative;flex:0 0 36px;width:36px;height:36px;min-width:36px;padding:0}.story-sheet-action.primary-action{color:var(--environment-accent,#ff0000);border-color:var(--environment-accent,#ff0000)}.story-sheet-more-menu{position:absolute;right:48px;top:48px;background:var(--bg-secondary,#1d1d1d);border:1px solid var(--border-color,#444);border-radius:10px;padding:6px;z-index:2}.story-sheet-more-menu button{border:0;background:transparent;color:#e95950;padding:10px 12px;white-space:nowrap}.reaction-popover{position:absolute;left:10px;right:10px;bottom:74px;background:var(--bg-secondary,#1d1d1d);border:1px solid var(--environment-accent,#ff0000);border-radius:14px;padding:10px;box-shadow:0 10px 28px rgba(0,0,0,.45)}.reaction-popover:after{content:"";position:absolute;bottom:-8px;left:36%;width:14px;height:14px;background:inherit;border-right:1px solid var(--environment-accent,#ff0000);border-bottom:1px solid var(--environment-accent,#ff0000);transform:rotate(45deg)}.reaction-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.reaction-choice{min-width:0;border:0;background:transparent;color:inherit;border-radius:8px;padding:4px 1px;display:flex;flex-direction:column;align-items:center}.reaction-choice.selected{background:var(--environment-accent-soft,rgba(255,0,0,.18));outline:1px solid var(--environment-accent,#ff0000)}.reaction-emoji{font-size:24px;line-height:30px}.reaction-choice small{min-height:12px;font-size:10px}.reaction-feedback{font-size:12px;min-height:16px;text-align:center;margin-top:5px}.reaction-badge{position:absolute;right:-5px;top:-7px;font-size:14px;line-height:16px}.reaction-loading{grid-column:1/-1;text-align:center;padding:15px}.sort-mode-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));z-index:1100;width:min(340px,calc(100% - 20px));background:var(--bg-secondary,#1d1d1d);border:1px solid var(--environment-accent,#ff0000);border-radius:12px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between}.sort-mode-bar[hidden]{display:none}

/* FBK-1 correctieronde */
.reaction-emoji,.reaction-badge{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif}.reaction-feedback.success{color:var(--success-color,#4caf50)}.reaction-feedback.error{color:var(--error-color,#e95950)}.story-sheet-header>.ui-btn.icon-only{width:44px;height:44px;min-width:44px}.story-sheet-header>.ui-btn.icon-only svg{width:24px;height:24px}.dash-dropdown-item svg{flex:0 0 18px}.story-sheet-panel{max-width:520px;left:50%;right:auto;width:calc(100% - 24px);transform:translate(-50%,100%)}.story-sheet.active .story-sheet-panel{transform:translate(-50%,0)}@media(max-width:600px){.story-sheet-panel{max-width:none;left:0;right:0;width:auto;transform:translateY(100%)}.story-sheet.active .story-sheet-panel{transform:translateY(0)}}

/* FBK-1 tweede correctieronde */
.story-sheet-header>.ui-btn.icon-only{width:36px;height:36px;min-width:36px;padding:0}.story-sheet-header>.ui-btn.icon-only svg{width:18px;height:18px}.story-sheet-header{gap:6px}.story-sheet-more-menu{right:50px;top:52px;min-width:190px;padding:4px}.story-sheet-more-menu .dash-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;text-align:left}.story-sheet-more-menu .dash-dropdown-item svg{flex:0 0 18px}.reaction-emoji-fallback{display:inline-flex;width:26px;height:30px;align-items:center;justify-content:center}.reaction-emoji-fallback svg{width:26px;height:26px;display:block}

/* FBK-1 laatste UX-correctie: thema, badgefallback en exclusieve sorteermodus */
.story-sheet-panel,.story-sheet-more-menu,.reaction-popover,.sort-mode-bar{background:var(--menu-bg);color:var(--text-color);border-color:var(--menu-border)}
.story-sheet-header{border-color:var(--menu-border)}
.reaction-popover{border-color:var(--environment-accent)}
.reaction-badge .reaction-badge-emoji{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:14px;line-height:18px}
.reaction-badge .reaction-emoji-fallback{width:18px;height:18px}
.reaction-badge .reaction-emoji-fallback svg{width:18px;height:18px}
body.story-sort-mode .dash-header{pointer-events:none;opacity:.58}
body.story-sort-mode #story-list .server-story-card{pointer-events:none;user-select:none}
body.story-sort-mode #story-list .server-story-card .drag-handle{pointer-events:auto;cursor:grab}
body.story-sort-mode #story-list .server-story-card .btn-options{visibility:hidden}
body.story-sort-mode #story-list .server-story-card:active .drag-handle{cursor:grabbing}
body.story-sort-mode .sort-mode-bar{pointer-events:auto;opacity:1}

/* FBK-1 vierde correctieronde: lege menu's verbergen en mobiel sorteren stabiliseren */
#story-sheet-more[hidden],#story-sheet-more-menu[hidden]{display:none!important}
body.story-sort-mode #story-list{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body.story-sort-mode #story-list .server-story-card{pointer-events:auto;touch-action:pan-y}
body.story-sort-mode #story-list .server-story-card .story-card-info,body.story-sort-mode #story-list .server-story-card .btn-options,body.story-sort-mode #story-list .server-story-card .story-actions{pointer-events:none}
body.story-sort-mode #story-list .server-story-card .drag-handle{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.sortable-fallback{opacity:.95!important;z-index:1300!important}
.sortable-ghost{opacity:.25!important}

/* FBK-1 vijfde correctieronde: rolbadge, effectieve belstatus en stabiele sortering */
.story-role-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-top:6px;padding:4px 8px;border:1px solid var(--menu-border);border-radius:999px;font-size:11px;line-height:1;color:var(--text-color);opacity:.82}
.story-role-badge svg{flex:0 0 14px}
.story-sheet-action.btn-story-notification[data-enabled="true"] svg{fill:currentColor}
.story-sheet-action.btn-story-notification[data-enabled="false"] svg{fill:none}
#story-sheet-more[hidden],#story-sheet-more:disabled,#story-sheet-more-menu[hidden]{display:none!important}
body.story-sort-mode #story-list{position:relative;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body.story-sort-mode #story-list .server-story-card{pointer-events:none;touch-action:auto}
body.story-sort-mode #story-list .server-story-card .drag-handle{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.sortable-fallback{position:fixed!important;pointer-events:none!important;z-index:1300!important}


/* FBK-1E - Verhaalgegevens en Nieuw-status */
.story-new-star{display:inline-block;margin-right:6px;font-size:15px;font-weight:900;line-height:1;color:var(--environment-accent,#ed6a53);vertical-align:.02em}.story-details-list{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:8px 14px;margin:0 0 20px}.story-details-list dt{font-weight:700}.story-details-list dd{margin:0;min-width:0}.story-change-list{display:grid;gap:0}.story-change-item{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid rgba(127,127,127,.25)}.story-change-item span{font-size:.88rem;opacity:.78}@media(max-width:600px){.story-details-list{grid-template-columns:1fr;gap:3px}.story-details-list dd{margin-bottom:8px}}

/* FBK-1E-2 afrondende UX-correctie */
#story-details-modal .modal-content {
  height: min(
    var(--modal-standard-height),
    calc(100vh - (2 * var(--modal-edge)))
  );
  height: min(
    var(--modal-standard-height),
    calc(100dvh - (2 * var(--modal-edge)))
  );
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#story-details-modal .modal-body{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.story-changes-section{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
.story-changes-section>h3{flex:0 0 auto;margin-bottom:8px}
.story-changes-scroll{flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
.reaction-popover:after{left:clamp(16px,calc(var(--reaction-arrow-x,50%) - 10px),calc(100% - 26px));transform:rotate(45deg)}
@media (max-width: 600px) {
  .story-changes-scroll {
    min-height: 80px;
  }
}

/* FBK-1E-2 secundair menu: standaardkleur en destructieve uitzondering */
.story-sheet-more-menu .dash-dropdown-item{color:currentColor}
.story-sheet-more-menu .dash-dropdown-item.danger-action{color:#d9534f}

/* FBK-1E-2 mobiele verhaalmenu-correctie */
body.story-sheet-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}.story-card-info{-webkit-touch-callout:none}

/* FBK-1E-2 primaire dangeractie en niet-selecteerbare bibliotheekbediening */
.story-sheet-action.danger-action{color:#d9534f;border-color:rgba(217,83,79,.3)}
#dashboard-view .dash-header,#dashboard-view .story-card,#dashboard-view .story-card-info,#dashboard-view .story-card-info h3,#dashboard-view .story-card-info small,#dashboard-view .story-role{-webkit-user-select:none;user-select:none;cursor:default}
#dashboard-view .story-card-info{-webkit-touch-callout:none;touch-action:manipulation}
#dashboard-view button,#dashboard-view [role="button"]{cursor:pointer}


/* QOL-1: login, mobiele verhaalgegevens en technische groepering */
.password-input-wrap{position:relative;width:100%}.password-input-wrap input{width:100%;padding-right:48px}.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;background:transparent;color:currentColor;cursor:pointer;border-radius:50%}.password-toggle:hover,.password-toggle:focus-visible{background:rgba(127,127,127,.14);outline:none}.technical-section{margin:0 0 18px}.technical-section:last-child{margin-bottom:0}.technical-section h3{margin:0 0 8px;font-size:1rem}.technical-section .profile-data-row:first-of-type{border-top:1px solid var(--menu-border)}
@media (max-width:600px){#story-details-modal .modal-body{overflow-y:auto;overscroll-behavior:contain}#story-details-modal .story-changes-section{display:block;flex:none;min-height:0}#story-details-modal .story-changes-scroll{display:block;overflow:visible;min-height:0;padding-right:0}}

#password-modal .password-input-wrap{display:block;margin-top:6px}

#technical-modal .modal-body{overflow-y:auto}#technical-modal .technical-section h3{position:static}

/* LEES-1B: subtiele, niet-interactieve leesvoortgang */
#reader-view .menu-bar.bottom {
  position: relative;
}
.reading-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(
    in srgb,
    var(--environment-accent, var(--text-color)) 18%,
    transparent
  );
}
.reading-progress-value {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--environment-accent, var(--text-color));
  transition: transform 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .reading-progress-value {
    transition: none;
  }
}



/* LEES-1B: actueel hoofdstuk in hoofdstukindeling */
button.toc-item { width:100%; border:0; background:transparent; font-family:inherit; text-align:left; }
.toc-item.current { position:relative; padding-left:14px; color:var(--environment-accent,var(--text-color)); font-weight:700; opacity:1; }
.toc-item.current::before { content:''; position:absolute; top:8px; bottom:8px; left:0; width:3px; border-radius:999px; background:var(--environment-accent,var(--text-color)); }
.toc-item.h2.current { padding-left:34px; }
.toc-item.h2.current::before { left:20px; }

/* LEES-1C-2: compact verhaalmenu in de leesweergave */
#reader-view #btn-rules[hidden] { display: none !important; }
.reader-actions { position: relative; flex: 0 0 36px; }
.reader-actions-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: max-content;
  min-width: 220px;
  overflow: hidden;
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  background: var(--menu-bg);
  color: var(--text-color);
  box-shadow: 0 8px 25px rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.reader-actions-menu[hidden], .reader-actions-item[hidden] { display: none !important; }
.reader-actions-item {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 11px 15px;
  border: 0;
  border-bottom: 1px solid var(--menu-border);
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.reader-actions-item:last-child { border-bottom: 0; }
.reader-actions-item:active { opacity: .7; }
.reader-actions-item svg { width: 18px; height: 18px; justify-self: center; }
@media (max-width:560px) {
  #reader-view .menu-bar.top { gap: 7px; }
  .reader-actions-menu { right: -44px; min-width: 210px; max-width: calc(100vw - 20px); }
}

/* LEES-1C-2 correctie: directe regelsactie voor readers */
.reader-actions[hidden],
#btn-reader-rules-direct[hidden] {
  display: none !important;
}
#btn-reader-rules-direct {
  flex: 0 0 36px;
}



/* OPM-1B-3B-0 correctie: consistente opmerkingeninstelling voor lezers */
.sharing-add-form {
  align-items: end;
}
.sharing-comment-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 11px 0;
  border-top: 1px solid var(--menu-border);
  cursor: pointer;
}
.sharing-comment-access.hidden { display: none !important; }
#sharing-add-comment-permission {
  grid-column: 1 / -1;
  padding: 12px 2px 4px;
}
.sharing-comment-access-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.sharing-comment-access-copy strong {
  font-size: 12px;
  line-height: 1.35;
}
.sharing-comment-access-copy small {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  opacity: .68;
}
.sharing-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 24px;
}
.sharing-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.sharing-switch > span {
  width: 42px;
  height: 24px;
  border: 1px solid var(--menu-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color) 10%, transparent);
  transition: background .15s, border-color .15s;
}
.sharing-switch > span::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: var(--text-color);
  opacity: .65;
  transition: transform .15s, opacity .15s;
}
.sharing-switch input:checked + span {
  border-color: var(--text-color);
  background: var(--text-color);
}
.sharing-switch input:checked + span::after {
  transform: translateX(18px);
  background: var(--bg-color);
  opacity: 1;
}
.sharing-switch input:focus-visible + span {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.sharing-switch input:disabled + span { opacity: .45; cursor: wait; }
.sharing-user-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 155px) 38px;
  align-items: center;
  row-gap: 9px;
}
.sharing-reader-comment {
  grid-column: 1 / 3;
  padding: 2px 0 4px;
}
@media (max-width: 420px) {
  .sharing-user-row { grid-template-columns: minmax(0, 1fr) 112px 36px; }
  .sharing-reader-comment { grid-column: 1 / -1; }
  #sharing-add-comment-permission { grid-column: 1; }
}


/* OPM-1B-3B-0 afronding: mobiele indeling Delen beheren */
@media (max-width: 560px) {
  #sharing-modal {
    padding: max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    align-items: center;
  }
  #sharing-modal .sharing-modal-content {
    width: 100%;
    height: min(92dvh, 760px);
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    border-radius: 16px;
  }
  #sharing-modal .modal-header {
    min-height: 64px;
    padding: 14px 16px;
  }
  #sharing-modal .modal-header h2 {
    flex: 0 1 auto;
    max-width: 42%;
    font-size: 18px;
    line-height: 1.2;
  }
  #sharing-modal .sharing-story-title {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    padding: 0 8px;
    text-align: center;
    font-size: 11px;
  }
  #sharing-modal .modal-body {
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #sharing-modal .sharing-explanation {
    margin-bottom: 8px;
  }
  #sharing-modal .sharing-feedback {
    margin-bottom: 10px;
  }
  #sharing-modal .sharing-add-area {
    padding-bottom: 14px;
  }
  #sharing-modal button.ui-btn.sharing-add-toggle {
    min-height: 44px;
  }
  #sharing-modal .sharing-add-form {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  #sharing-modal .sharing-add-form label {
    gap: 7px;
    font-size: 12px;
  }
  #sharing-modal .sharing-add-form select,
  #sharing-modal .sharing-role-select {
    min-height: 44px;
    font-size: 15px;
  }
  #sharing-modal #sharing-add-comment-permission {
    grid-column: 1;
    padding: 12px 0 2px;
  }
  #sharing-modal .sharing-add-actions {
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #sharing-modal .sharing-add-actions .ui-btn {
    width: 100%;
    min-height: 42px;
  }
  #sharing-modal .sharing-users {
    gap: 12px;
    padding-top: 12px;
  }
  #sharing-modal .sharing-user-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--menu-border);
    border-radius: 12px;
    background: var(--menu-bg);
  }
  #sharing-modal .sharing-user-row:last-child {
    border-bottom: 1px solid var(--menu-border);
  }
  #sharing-modal .sharing-user-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 7px;
    width: 100%;
  }
  #sharing-modal .sharing-user-info strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  #sharing-modal .sharing-user-info span {
    align-self: start;
    justify-self: end;
  }
  #sharing-modal .sharing-user-info small {
    grid-column: 1 / -1;
  }
  #sharing-modal .sharing-role-select {
    grid-column: 1;
    width: 100%;
  }
  #sharing-modal .sharing-reader-comment {
    grid-column: 1;
    padding: 11px 0 0;
  }
  #sharing-modal .sharing-comment-access {
    gap: 12px;
  }
  #sharing-modal .sharing-comment-access-copy strong {
    font-size: 13px;
  }
  #sharing-modal .sharing-comment-access-copy small {
    font-size: 12px;
  }
  #sharing-modal .sharing-switch {
    justify-self: end;
  }
  #sharing-modal .sharing-revoke {
    grid-column: 1;
    width: auto;
    min-width: 44px;
    height: 44px;
    justify-self: start;
  }
  #sharing-modal .sharing-revoke:disabled {
    display: none;
  }
}
@media (max-width: 380px) {
  #sharing-modal .modal-header h2 { max-width: 38%; }
  #sharing-modal .modal-body { padding: 13px; }
  #sharing-modal .sharing-add-actions { grid-template-columns: 1fr; }
}


/* OPM-1B-3B-0 laatste mobiele correctie: header en intrekactie */
@media (max-width: 560px) {
  #sharing-modal .modal-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    min-height: 82px;
  }
  #sharing-modal .modal-header h2 {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }
  #sharing-modal .sharing-story-title {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  #sharing-modal .modal-header .modal-close,
  #sharing-modal .modal-header .icon-only {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
  }
  #sharing-modal .sharing-user-row {
    position: relative;
    padding-right: 70px;
  }
  #sharing-modal .sharing-user-row .sharing-revoke {
    position: absolute;
    top: 12px;
    right: 12px;
    grid-column: auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    justify-self: auto;
  }
  #sharing-modal .sharing-user-info {
    padding-right: 0;
  }
}

/* OPM-1C: meldingsfrequentie voor opmerkingen en antwoorden */
.annotation-notification-preference{display:grid;gap:0;margin:6px 0 0;padding:12px 0 0;border:0;border-top:1px solid var(--menu-border)}
.annotation-notification-preference legend{padding:0;margin:0 0 4px;font-size:14px;font-weight:700}
.annotation-notification-preference>p{margin:0 0 7px;font-size:12px;line-height:1.4;opacity:.68}
.annotation-notification-preference>label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;padding:11px 0;border-top:1px solid var(--menu-border);cursor:pointer}
.annotation-notification-preference>label>span{display:grid;gap:3px;min-width:0}
.annotation-notification-preference strong{font-size:13px;line-height:1.35}
.annotation-notification-preference small{font-size:11px;line-height:1.4;font-weight:400;opacity:.68}
.annotation-notification-preference input{width:20px;height:20px;margin:0;accent-color:var(--text-color)}
.annotation-notification-preference>label:focus-within{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}