/* Writing Desk v20.8.24 — Focus hierarchy and mobile writing alignment.
   Presentation only. Use the palette-defined roles, never fixed green/teal.
   The established Focus & Flow emphasis preference controls intensity. */
html[data-wd-palette]{
  --wd-layer-nested:color-mix(in srgb,var(--paper) 52%,var(--raised) 48%);
  --wd-layer-recessed:color-mix(in srgb,var(--bg) 64%,var(--paper) 36%);
  --wd-layer-selection:color-mix(in srgb,var(--wd-focused-bg) 55%,var(--bg) 45%);
  --wd-layer-callout:color-mix(in srgb,var(--bg) 78%,var(--paper) 22%);
  --wd-focus-edge:var(--wd-action-border);
}
/* Clear panel -> nested record -> active selection. Keep color-coded status independent. */
html[data-wd-palette] :is(.vt-root,.category-group,.bible-hub-section,.library-entry-card){
  border-color:var(--line)!important;
}
html[data-wd-palette] :is(.library-hierarchy-row,.character-group-entry,.timeline-event,.vt-decade-card,.vt-year-card,.vt-month-card,.relationship-connection-card,.location-tree-row,.library-entry-card .library-entry){
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
html[data-wd-palette] :is(.character-group-entry,.timeline-event,.vt-decade-card,.vt-year-card,.vt-month-card,.relationship-connection-card){
  background:var(--wd-layer-nested)!important;
  border-color:var(--line)!important;
}
/* Selected content is slightly recessed, edged with the palette's accent, not flooded with color. */
html[data-wd-palette] :is(.location-tree-row.selected,.library-hierarchy-row.is-expanded-parent,.library-hierarchy-row.organization-hierarchy-row.is-expanded-parent,.recent-draggable.selected-fragment-row>.recent-item.active,.recent-group-heading.focused-arc,.character-group-row.selected,.vt-decade-card[aria-pressed="true"],.vt-year-card[aria-pressed="true"],.vt-month-card[aria-pressed="true"]){
  background:var(--wd-layer-selection)!important;
  border-color:var(--wd-focus-edge)!important;
  box-shadow:inset 3px 0 0 var(--accent);
}
/* Keyboard focus and work in progress remain visible without lighting up entire parent panels. */
html[data-wd-palette] :is(.timeline-event,.vt-decade-card,.vt-year-card,.vt-month-card,.character-group-entry,.relationship-connection-card,.library-entry-card,.fragment-card-container):focus-within{
  background:var(--wd-layer-selection)!important;
  border-color:var(--wd-focus-edge)!important;
  box-shadow:inset 3px 0 0 var(--accent);
}
html[data-wd-palette] :is(.modal,.fragment-context,.global-notes-panel,.reference-panel):focus-within{--wd-focused-surface:var(--wd-layer-recessed)}
/* Dense interior details should read as intentional insets rather than one continuous block. */
html[data-wd-palette] :is(.bible-hub-section,.category-group,.vt-root) :is(.library-hierarchy-row:not(.is-expanded-parent),.character-group-entry,.timeline-event,.vt-decade-card,.vt-year-card,.vt-month-card){
  border-style:solid;
}
html[data-wd-palette][data-wd-tone="dark"] :is(.moment-why,.moment-inline-editor){
  background:var(--wd-layer-callout)!important;
  color:var(--text)!important;
  border:1px solid var(--wd-focus-edge)!important;
  border-left:4px solid var(--accent)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent) 10%,transparent);
}
html[data-wd-palette][data-wd-tone="light"] :is(.moment-why,.moment-inline-editor){
  background:color-mix(in srgb,var(--paper) 76%,var(--wd-focused-bg) 24%)!important;
  color:var(--text)!important;
  border:1px solid var(--wd-focus-edge)!important;
  border-left:4px solid var(--accent)!important;
}
html[data-wd-palette] :is(.moment-why,.moment-inline-editor) :is(h2,h3,h4,strong,summary){color:var(--accent)!important}
/* The existing preference affects both key information and selection strength. */
body[data-wd-emphasis="subtle"]{
  --wd-layer-selection:var(--wd-surface-tint);
  --wd-focus-edge:var(--line);
}
body[data-wd-emphasis="balanced"]{
  --wd-layer-selection:color-mix(in srgb,var(--wd-focused-bg) 72%,var(--bg) 28%);
  --wd-focus-edge:var(--wd-action-border);
}
body[data-wd-emphasis="strong"]{
  --wd-layer-selection:color-mix(in srgb,var(--wd-focused-bg) 55%,var(--bg) 45%);
  --wd-focus-edge:var(--accent);
}
/* Define these on body because the selected emphasis lives there; inherited custom
   properties override the root values without touching the user's palette. */
body[data-wd-emphasis="subtle"] :is(.moment-why,.moment-inline-editor){border-left-width:2px!important}
body[data-wd-emphasis="balanced"] :is(.moment-why,.moment-inline-editor){border-left-width:3px!important}
body[data-wd-emphasis="strong"] :is(.moment-why,.moment-inline-editor){border-left-width:4px!important}
/* An open app menu or filter must stand off the surface beneath it. */
html[data-wd-palette] :is(.smart-select-popover,.more-menu,.writing-tools-menu,.sidebar-create-menu){
  box-shadow:0 14px 36px #0007,0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)!important;
}
/* The mobile writing modes have one invariant: centered as three equal columns.
   Override older flex spacing; respect zoom and phone safe-area insets. */
@media(max-width:670px){
  #writingToolbar.writing-toolbar{
    left:0!important;right:0!important;width:100%!important;
    display:flex;justify-content:center!important;align-items:center;
    padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))!important;
  }
  #writingToolbar .toolbar-tools{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:center;justify-items:stretch;justify-content:initial!important;
    flex:0 1 480px!important;
    width:min(100%,480px)!important;max-width:480px!important;
    min-width:0;margin:0 auto!important;gap:clamp(2px,1.1vw,9px)!important;
  }
  #writingToolbar .toolbar-tools .format-button{
    display:flex;justify-content:center!important;align-items:center!important;
    text-align:center!important;white-space:nowrap;
    width:100%;min-width:0;max-width:100%;min-height:44px;
    flex:none!important;margin:0!important;
    gap:clamp(2px,1vw,7px)!important;padding:7px 2px!important;
  }
  #writingToolbar .toolbar-tools .format-button span{min-width:0;text-align:center}
}
@media(max-width:365px){#writingToolbar .toolbar-tools .format-button{font-size:calc(10px * var(--wd-ui-scale,1))!important}}
@media(prefers-reduced-motion:reduce){
 html[data-wd-palette] :is(.library-hierarchy-row,.character-group-entry,.timeline-event,.vt-decade-card,.vt-year-card,.vt-month-card,.relationship-connection-card,.location-tree-row){transition:none!important}
}