/* ============================================================
   Smart Write — application styles
   Calm, airy, hairline. Colors come from css/variables.css.
   ============================================================ */

   * { box-sizing: border-box; }

   html, body { height: 100%; }
   
   body {
     margin: 0;
     overflow: hidden;
     font-family: var(--font-ui);
     background: var(--app-bg);
     color: var(--text);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     transition: background .3s ease, color .3s ease;
   }
   
   [hidden] { display: none !important; }
   
   h2 { font-size: 22px; font-weight: 500; margin: 0; margin-bottom: 30px; }
   
   button, input, select, textarea { font: inherit; color: inherit; }
   
   ::selection { background: var(--sel-bg); }
   
   /* ============================================================
      Header
      ============================================================ */
   .app-header {
     height: var(--header-height);
     border-bottom: 1px solid var(--hairline);
     padding: 0 18px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     background: var(--header-bg);
     transition: background .3s ease, border-color .3s ease, opacity .15s ease;
   }

   .app-header.hidden {
    opacity: 0.1;
   }
   

   .app-header.hidden:hover {
    opacity: 1;
   }


   .app-title-group-left {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
   }
   
   .app-title {
    font-family: "Idiqlat", sans-serif;
    font-size: 19px;
    font-weight: 200;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 0px 0 0px 16px;
}


   .app-title-group {
    display: flex;
    align-items: flex-end;
    gap: 93px;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
    align-content: flex-start;
    overflow: hidden;
}



   .nav-back-slot {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     width: 32px;
     height: 32px;
   }

   .nav-back-button:disabled,
   .nav-back-button[aria-disabled="true"] {
     visibility: hidden;
     pointer-events: none;
   }

   .home-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     width: 32px;
     height: 32px;
     padding: 0;
     border: none;
     border-radius: var(--radius-sm);
     background: transparent;
     color: var(--text-dim);
     cursor: pointer;
     transition: background .16s ease, color .16s ease;
   }
   .home-button:hover {
     background: color-mix(in srgb, var(--text) 6%, transparent);
     color: var(--text);
   }
   .home-icon {
     display: block;
     width: 20px;
     height: 20px;
   }

   .app-actions {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
   }

   #header-actions-editor,
   #header-actions-view {
     display: flex;
     align-items: center;
     gap: 6px;
   }

   #header-actions-view {
     margin-left: 4px;
   }
   
   /* button groups read as quiet segmented controls */
   .action-button-group {
     display: flex;
     align-items: center;
     gap: 4px;
   }
   #abgrp-text-zoom {
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     overflow: hidden;
     gap: 0;
   }
   #abgrp-text-zoom button {
     border: none;
     border-radius: 0;
     background: transparent;
     min-width: 32px;
   }
   #abgrp-text-zoom button:first-child { border-right: 1px solid var(--hairline); }

   .app-actions button,
   .import-label {
     background: transparent;
     color: var(--text-dim);
     border: none;
     border-radius: var(--radius-sm);
     padding: 7px 11px;
     cursor: pointer;
     font-size: 12.5px;
     font-weight: 450;
     letter-spacing: .01em;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     white-space: nowrap;
     transition: background .16s ease, color .16s ease;
   }
   .app-actions button:hover,
   .import-label:hover {
     background: color-mix(in srgb, var(--text) 6%, transparent);
     color: var(--text);
   }
   .app-actions button.active,
   .app-actions button[aria-pressed="true"] {
     background: var(--accent-soft);
     color: var(--accent);
   }
   .app-actions .icon-btn {
     width: var(--header-icon-btn-size);
     height: var(--header-icon-btn-size);
     padding: 0;
   }
   .app-actions .icon-btn .ico {
     width: var(--header-icon-size);
     height: var(--header-icon-size);
     flex-shrink: 0;
   }
   .import-label input { display: none; }
   
   .divider {
     width: 1px;
     height: 22px;
     background: var(--hairline);
     margin: 0 4px;
     flex-shrink: 0;
   }

   /* Collapsible header action groups (overflow → popout menu) */
   .header-action-popout {
     position: relative;
     display: inline-flex;
     align-items: center;
   }
   .header-action-popout__inline {
     display: inline-flex;
     align-items: center;
     gap: 4px;
   }
   .header-action-popout__inline[hidden] {
     display: none !important;
   }
   .header-action-popout__trigger[hidden] {
     display: none !important;
   }
   .header-popout {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     min-width: 148px;
     background: var(--raised-bg);
     border: 1px solid var(--hairline);
     border-radius: var(--radius);
     box-shadow: 0 8px 28px rgba(0,0,0,.26);
     z-index: 100;
     padding: 4px;
     display: flex;
     flex-direction: column;
     gap: 1px;
   }
   .header-popout[hidden] { display: none !important; }
   .header-popout button,
   .header-popout .import-label {
     width: 100%;
     justify-content: flex-start;
     border-radius: var(--radius-sm);
   }
   .header-popout #abgrp-text-zoom {
     border: none;
     border-radius: 0;
     width: 100%;
   }
   .header-popout #abgrp-text-zoom button {
     flex: 1;
     justify-content: center;
   }
   .header-popout #abgrp-text-zoom button:first-child {
     border-right: 1px solid var(--hairline);
   }
   .header-popout #abgrp-file-actions {
     flex-direction: column;
     width: 100%;
     gap: 1px;
   }
   .header-popout #abgrp-file-actions button,
   .header-popout #abgrp-file-actions .import-label {
     width: 100%;
     justify-content: flex-start;
   }

   @media (max-width: 1100px) {
     .app-title-group { gap: 24px; }
     .breadcrumb__crumb:not(.breadcrumb__crumb--current),
     .breadcrumb__sep { display: none; }
   }
   
   .editor-font-select {
     background: transparent;
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     padding: 6px 8px;
     font-size: 12px;
     color: var(--text-dim);
     cursor: pointer;
   }

   #abgrp-editor-font-actions {
     border: none;
     border-radius: 0;
     overflow: visible;
     z-index:3;
   }
   #abgrp-media-skin {
     overflow: visible;
     z-index: 3;
   }
   #abgrp-media-skin:hover .editor-font-button-hover-pullout-content,
   #abgrp-media-skin:focus-within .editor-font-button-hover-pullout-content {
     max-width: 141px;
     width: 141px;
   }
   #abgrp-media-skin .editor-font-button-hover-pullout-content > button {
     flex: 1 1 50%;
     min-width: 0;
     width: 50%;
     box-sizing: border-box;
   }
   #abgrp-editor-font-actions .editor-font-select {
     border: none;
     border-radius: 0;
     background: var(--col-popout-bg);
   }
   #abgrp-editor-font-actions button:not(#editor-font-button-hover-pullout-toggle),
   #abgrp-editor-linegap-actions button:not(#editor-linegap-hover-pullout-toggle),
   #abgrp-plot-rowgap-actions button:not(#plot-rowgap-hover-pullout-toggle),
   #abgrp-reader-bookmark-actions button:not(#reader-bookmark-hover-pullout-toggle),
   #abgrp-media-skin button:not(#media-skin-hover-pullout-toggle) {
     border: none;
     border-radius: 0;
     background: var(--col-popout-bg);
   }
   #abgrp-media-skin .editor-font-button-hover-pullout-content > button:hover {
     background: color-mix(in srgb, var(--text) 6%, transparent);
     color: var(--text);
   }
   #abgrp-media-skin .editor-font-button-hover-pullout-content > button.active,
   #abgrp-media-skin .editor-font-button-hover-pullout-content > button[aria-pressed="true"] {
     background: var(--accent-soft);
     color: var(--accent);
   }
   #abgrp-editor-font-actions .editor-font-select + button,
   #abgrp-editor-font-actions button + .fontsize-input,
   #abgrp-editor-font-actions .fontsize-input + button,
   #abgrp-editor-linegap-actions button + .fontsize-input,
   #abgrp-editor-linegap-actions .fontsize-input + button,
   #abgrp-plot-rowgap-actions button + .fontsize-input,
   #abgrp-plot-rowgap-actions .fontsize-input + button,
   #abgrp-media-skin button + button {
     border-left: 1px solid var(--hairline);
   }

   #abgrp-editor-status-actions {
     border: none;
     border-radius: 0;
     overflow: visible;
   }
   #abgrp-editor-status-actions .editor-font-select {
     border: none;
     border-right: 1px solid var(--hairline);
     border-radius: 0;
   }
   #abgrp-editor-status-actions button:not(#editor-status-hover-pullout-toggle) {
     border: none;
     border-radius: 0;
     background: transparent;
   }
   #abgrp-editor-status-actions .editor-font-select + button {
     border-left: 1px solid var(--hairline);
   }
   .fontsize-input {
     width: 2.4em;
     min-width: 2.4em;
     flex: 0 0 2.4em;
     box-sizing: border-box;
     padding: 6px 4px;
     border: none;
     border-radius: 0;
     background: var(--col-popout-bg);
     font: inherit;
     font-size: 12px;
     font-variant-numeric: tabular-nums;
     text-align: center;
     color: var(--text-dim);
     -moz-appearance: textfield;
     appearance: textfield;
   }
   .fontsize-input:focus {
     outline: none;
     color: var(--text);
     background: var(--accent-soft);
   }

   /* Pullout: label stays fixed; panel grows left (out of flow). Same look as before. */
   .editor-font-button-hover-pullout {
     display: inline-flex;
     align-items: stretch;
     position: relative;
     z-index: 100px;
    }
   .editor-font-button-hover-pullout-content {
     position: absolute;
     right: 100%;
     top: 0;
     height: 100%;
     display: flex;
     align-items: stretch;
     overflow: hidden;
     width: max-content;
     max-width: 0;
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
     z-index: 1;
     background-color: var(--col-popout-bg);
     border: 1px solid transparent;
     border-right: none;
     border-radius: var(--radius-sm) 0 0 var(--radius-sm);
     transition:
       max-width var(--panel-duration) var(--panel-ease),
       opacity var(--panel-duration) var(--panel-ease),
       border-color var(--panel-duration) var(--panel-ease),
       visibility 0s linear var(--panel-duration);
   }
   .editor-font-button-hover-pullout:hover .editor-font-button-hover-pullout-content,
   .editor-font-button-hover-pullout:focus-within .editor-font-button-hover-pullout-content {
     max-width: 22rem;
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
     border-color: var(--hairline);
     transition:
       max-width var(--panel-duration) var(--panel-ease),
       opacity var(--panel-duration) var(--panel-ease),
       border-color var(--panel-duration) var(--panel-ease),
       visibility 0s;
      z-index:100;
   }
   .editor-font-button-hover-pullout-content > .editor-font-select,
   .editor-font-button-hover-pullout-content > button {
     align-self: stretch;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding-top: 0;
     padding-bottom: 0;
     min-height: 0;
   }
   .editor-font-button-hover-pullout-content > .fontsize-input {
     align-self: stretch;
     display: block;
     padding-top: 0;
     padding-bottom: 0;
     min-height: 0;
   }
   .editor-font-button-hover-pullout:hover #editor-font-button-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #editor-font-button-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #editor-status-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #editor-status-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #editor-linegap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #editor-linegap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #plot-rowgap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #plot-rowgap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #media-skin-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #media-skin-hover-pullout-toggle,
   #abgrp-reader-bookmark-actions.is-placed:hover #reader-bookmark-hover-pullout-toggle,
   #abgrp-reader-bookmark-actions.is-placed:focus-within #reader-bookmark-hover-pullout-toggle {
     box-shadow: inset 1px 0 0 var(--hairline);
   }
   #editor-font-button-hover-pullout-toggle,
   #editor-status-hover-pullout-toggle,
   #editor-linegap-hover-pullout-toggle,
   #plot-rowgap-hover-pullout-toggle,
   #media-skin-hover-pullout-toggle,
   #reader-bookmark-hover-pullout-toggle {
     flex-shrink: 0;
     position: relative;
     z-index: 2;
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
   }
   .editor-font-button-hover-pullout:hover #editor-font-button-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #editor-font-button-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #editor-status-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #editor-status-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #editor-linegap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #editor-linegap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #plot-rowgap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #plot-rowgap-hover-pullout-toggle,
   .editor-font-button-hover-pullout:hover #media-skin-hover-pullout-toggle,
   .editor-font-button-hover-pullout:focus-within #media-skin-hover-pullout-toggle,
   #abgrp-reader-bookmark-actions.is-placed:hover #reader-bookmark-hover-pullout-toggle,
   #abgrp-reader-bookmark-actions.is-placed:focus-within #reader-bookmark-hover-pullout-toggle {
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     border-left-color: transparent;
   }
   @media (prefers-reduced-motion: reduce) {
     .editor-font-button-hover-pullout-content {
       transition: none;
     }
   }

   .view-host[hidden] {
     display: none !important;
   }

   .app-view {
     display: none;
   }

   .view-page-card {
     max-width: 760px;
     margin: 40px auto;
     padding: 24px;
     border: 1px solid var(--hairline);
     border-radius: var(--radius-md);
     background: var(--panel-bg);
   }

   .view-page-card h1 {
     margin-top: 0;
   }

   .view-page-card p {
     color: var(--text-dim);
   }

   .view-menu-item {
     padding: 12px 14px;
     border-bottom: 1px solid var(--hairline);
     color: var(--text-dim);
     font-size: 13px;
   }
   
   /* ============================================================
      Login screen
      Full-viewport overlay — sits above everything, including the
      header, so the app is invisible until the user signs in.
      ============================================================ */
   .login-head {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
   .login-head h1 {
     font-size: 21px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0;
     color: var(--text);
   }
   .login-head p {
     margin: 0;
     font-size: 13.5px;
     color: var(--text-dim);
   }

   .login-form {
     display: flex;
     flex-direction: column;
     gap: 14px;
   }

   .login-error {
     font-size: 13px;
     color: var(--danger);
     background: color-mix(in srgb, var(--danger) 10%, transparent);
     border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
     border-radius: var(--radius-sm);
     padding: 10px 13px;
   }
   .login-error[hidden] { display: none !important; }

   .login-submit {
     width: 100%;
     justify-content: center;
     padding: 11px 16px;
     font-size: 14px;
     font-weight: 600;
   }

   .login-forgot {
     align-self: center;
     background: none;
     border: none;
     padding: 0;
     font: inherit;
     font-size: 13px;
     color: var(--text-dim);
     cursor: pointer;
     text-decoration: underline;
     text-underline-offset: 2px;
   }

   .login-confirm {
     margin: 0;
     font-size: 13.5px;
     color: var(--text-dim);
   }
   .login-confirm[hidden] { display: none !important; }

   .login-footer {
     font-size: 12px;
     color: var(--text-faint);
     text-align: center;
   }

   /* ============================================================
      User menu
      ============================================================ */
   .app-account-cluster {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
   }

   .app-account-cluster .icon-btn {
     width: var(--header-icon-btn-size);
     height: var(--header-icon-btn-size);
     padding: 0;
     background: transparent;
     color: var(--text-dim);
     border: none;
     border-radius: var(--radius-sm);
     cursor: pointer;
   }

   .app-account-cluster .icon-btn:hover {
     background: color-mix(in srgb, var(--text) 6%, transparent);
     color: var(--text);
   }

   .app-account-cluster .icon-btn .ico {
     width: var(--header-icon-size);
     height: var(--header-icon-size);
     flex-shrink: 0;
   }

   .app-user-menu {
     position: relative;
     flex-shrink: 0;
   }

   .user-menu-trigger {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 5px 6px 5px 10px;
     border: 1px solid transparent;
     border-radius: var(--radius);
     background: transparent;
     color: var(--text-dim);
     cursor: pointer;
     font-size: 13px;
     font-weight: 450;
     letter-spacing: .01em;
     transition: background .16s ease, border-color .16s ease, color .16s ease;
   }
   .user-menu-trigger:hover {
     background: color-mix(in srgb, var(--text) 6%, transparent);
     border-color: var(--hairline);
     color: var(--text);
   }
   .user-menu-trigger[aria-expanded="true"] {
     background: var(--accent-soft);
     border-color: color-mix(in srgb, var(--accent) 30%, transparent);
     color: var(--accent);
   }

   .user-menu-name {
     max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

   .user-menu-avatar {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: var(--raised-bg);
     border: 1px solid var(--hairline-strong);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     overflow: hidden;
     color: var(--text-faint);
     transition: border-color .16s ease, color .16s ease;
   }
   .user-menu-trigger:hover .user-menu-avatar {
     border-color: var(--text-dim);
     color: var(--text-dim);
   }
   .user-menu-trigger[aria-expanded="true"] .user-menu-avatar {
     border-color: var(--accent);
     color: var(--accent);
   }
   .user-menu-avatar img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

   .user-menu-popout {
     position: absolute;
     top: calc(100% + 6px);
     right: 0;
     min-width: 168px;
     background: var(--raised-bg);
     border: 1px solid var(--hairline);
     border-radius: var(--radius);
     box-shadow: 0 8px 28px rgba(0,0,0,.26);
     z-index: 100;
     padding: 4px;
     display: flex;
     flex-direction: column;
   }
   .user-menu-popout[hidden] { display: none !important; }

   .user-menu-item {
     display: flex;
     align-items: center;
     gap: 9px;
     width: 100%;
     padding: 8px 11px;
     border: none;
     background: transparent;
     color: var(--text-dim);
     font-size: 13px;
     font-weight: 450;
     border-radius: var(--radius-sm);
     cursor: pointer;
     text-align: left;
     transition: background .14s ease, color .14s ease;
   }
   .user-menu-item:hover {
     background: color-mix(in srgb, var(--text) 6%, transparent);
     color: var(--text);
   }
   .user-menu-item--danger { color: var(--danger); }
   .user-menu-item--danger:hover {
     background: color-mix(in srgb, var(--danger) 10%, transparent);
     color: var(--danger);
   }

   .user-menu-sep {
     height: 1px;
     background: var(--hairline);
     margin: 3px 4px;
   }

   /* Off-DOM stash for views mounted into #app-root on navigate */
   #account-view-stash {
     display: none !important;
   }
   #account-view-stash #account-view-host[hidden] {
     display: none !important;
   }

   /* Account / Settings full-page views */
   .user-view {
     max-width: var(--ui-sz-max-width-lg);
     margin: 48px auto;
     padding: 0 24px 80px;
     
   }
   .user-view__head {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 32px;
     justify-content: space-between;
   }
   .user-view__avatar-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   .user-view__title {
     font-size: 22px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0 0 3px;
   }
   .user-view__sub {
     font-size: 13px;
     color: var(--text-dim);
     margin: 0;
   }
   .user-view__section {
     margin-bottom: 28px;
   }
   .user-view__section-head {
     font-size: 11px;
     font-weight: 500;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--text-faint);
     margin: 0 0 12px;
     padding-bottom: 8px;
     border-bottom: 1px solid var(--hairline);
   }
   .user-view__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0 23px;
    border-bottom: 1px solid var(--hairline);
    margin: 17px 0 17px 0;
   }
   .user-view__row:last-child { border-bottom: none; }
   .user-view__row-label {
     font-size: 13px;
     color: var(--text-dim);
   }
   .user-view__row-value {
     font-size: 13px;
     color: var(--text);
   }

   /* Authors / pen names page */
   .authors-page {
     max-width: 920px;
     margin: 48px auto;
     padding: 0 24px 80px;
   }
   .authors-page__head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 28px;
   }
   .authors-page__title {
     font-size: 22px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0 0 3px;
   }
   .authors-page__sub {
     font-size: 13px;
     color: var(--text-dim);
     margin: 0;
     max-width: 480px;
   }
   .authors-page__layout {
     display: grid;
     grid-template-columns: 220px 1fr;
     gap: 24px;
     align-items: start;
   }
   .authors-page__list {
     display: flex;
     flex-direction: column;
     gap: 2px;
     border-right: 1px solid var(--hairline);
     padding-right: 16px;
     margin: 0;
   }
   .authors-page__list-item {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
     width: 100%;
     border: none;
     border-radius: var(--radius-sm);
     background: transparent;
     color: var(--text-dim);
     padding: 9px 10px;
     font-size: 13.5px;
     text-align: left;
     cursor: pointer;
     transition: background .14s ease, color .14s ease;
   }
   .authors-page__list-item:hover {
     background: color-mix(in srgb, var(--text) 5%, transparent);
     color: var(--text);
   }
   .authors-page__list-item.active {
     background: var(--accent-soft);
     color: var(--accent);
     font-weight: 500;
   }
   .authors-page__list-item .avatar { flex-shrink: 0; }
   .authors-page__list-name {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .authors-page__profile-row {
     margin-bottom: 8px;
   }
   .authors-page__list-count {
     font-size: 11px;
     color: var(--text-faint);
     font-variant-numeric: tabular-nums;
   }
   .authors-page__detail { min-width: 0; }
   .authors-page__panel-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     margin-bottom: 8px;
   }
   .authors-page__panel-head h2 {
     font-size: 18px;
     font-weight: 600;
     margin: 0;
     letter-spacing: -0.02em;
   }
   .authors-page__panel-actions { display: flex; gap: 6px; flex-wrap: wrap; }
   .authors-page__works {
     list-style: none;
     margin: 0;
     padding: 0;
   }
   .authors-page__works li { border-bottom: 1px solid var(--hairline); }
   .authors-page__works li:last-child { border-bottom: none; }
   .authors-page__work-link {
     display: block;
     width: 100%;
     border: none;
     background: none;
     color: var(--text);
     text-align: left;
     padding: 10px 0;
     font-size: 13.5px;
     cursor: pointer;
     transition: color .14s ease;
   }
   .authors-page__work-link:hover { color: var(--accent); }
   .authors-page__hint {
     font-size: 13px;
     color: var(--text-faint);
     margin: 0;
   }
   .authors-page__empty-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
     font-size: 13px;
     color: var(--text-dim);
   }
   @media (max-width: 720px) {
     .authors-page__layout { grid-template-columns: 1fr; }
     .authors-page__list {
       border-right: none;
       padding-right: 0;
       border-bottom: 1px solid var(--hairline);
       padding-bottom: 16px;
     }
   }

   /* Settings page */
   .settings-page {
     max-width: 920px;
     margin: 0 auto;
     padding: 30px 24px 0;
     width: 100%;
     flex: 1;
     min-height: 0;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
     overflow: hidden;
   }
   .settings-page__head {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 20px;
     margin-bottom: 28px;
     flex-shrink: 0;
   }
   .settings-page__title {
     font-size: 22px;
     font-weight: 600;
     letter-spacing: -0.02em;
     margin: 0 0 3px;
   }
   .settings-page__sub {
     font-size: 13px;
     color: var(--text-dim);
     margin: 0;
     max-width: 480px;
   }
   .settings-page__search-row {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 14px;
     max-width: 480px;
     width: 100%;
   }
   .settings-page__search {
     flex: 1 1 auto;
     min-width: 0;
     width: 100%;
     margin-top: 0;
   }
   .settings-page__search-row > .btn {
     flex-shrink: 0;
   }
   .settings-page__search-row > .btn[hidden] {
     display: none;
   }
   .settings-page__result-route {
     text-transform: none;
     letter-spacing: 0.02em;
     font-size: 12px;
     font-weight: 600;
   }
   .settings-page__result-crumb {
     background: none;
     border: none;
     padding: 0;
     font: inherit;
     color: inherit;
     cursor: pointer;
     transition: color .15s ease;
   }
   .settings-page__result-crumb:hover {
     color: var(--text);
   }
   .settings-page__result-sep {
     margin: 0 0.35em;
     color: var(--text-faint);
     opacity: .6;
   }
   .settings-page__layout {
     display: grid;
     grid-template-columns: 220px 1fr;
     gap: 24px;
     align-items: stretch;
     flex: 1;
     min-height: 0;
     overflow: hidden;
   }
   .settings-page__list {
     display: flex;
     flex-direction: column;
     gap: 2px;
     border-right: 1px solid var(--hairline);
     padding-right: 16px;
     margin: 0;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding-bottom: 80px;
     -webkit-overflow-scrolling: touch;
   }
   .settings-page__list-item {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 10px;
     width: 100%;
     border: none;
     border-radius: var(--radius-sm);
     background: transparent;
     color: var(--text-dim);
     padding: 9px 10px;
     font-size: 13.5px;
     text-align: left;
     cursor: pointer;
     transition: background .14s ease, color .14s ease;
   }
   .settings-page__list-item:hover {
     background: color-mix(in srgb, var(--text) 5%, transparent);
     color: var(--text);
   }
   .settings-page__list-item.active {
     background: var(--accent-soft);
     color: var(--accent);
     font-weight: 500;
   }
   .settings-page__list-name {
     flex: 1;
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .settings-page__detail {
     min-width: 0;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding-bottom: 80px;
     -webkit-overflow-scrolling: touch;
   }
   .settings-page__panel-head {
     margin-bottom: 16px;
   }
   .settings-page__panel-head h2 {
     font-size: 18px;
     font-weight: 600;
     margin: 0 0 4px;
     letter-spacing: -0.02em;
   }
   .settings-page__panel-sub {
     font-size: 13px;
     color: var(--text-dim);
     margin: 0;
   }
   .settings-page__pill-group {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin-left: 20px;
}
   .settings-page__swatches {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     align-items: center;
   }
   .settings-page__swatch {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     border: 2px solid transparent;
     cursor: pointer;
     padding: 0;
   }
   .settings-page__swatch.active {
     border-color: var(--text);
     box-shadow: 0 0 0 1px var(--hairline-strong);
   }
  .settings-page__number-row {
     display: flex;
     gap: 8px;
     align-items: center;
     flex-wrap: wrap;
   }
   .reading-settings {
     display: grid;
     grid-template-columns: 72px 1fr;
     gap: 20px;
     align-items: start;
     margin-top: 12px;
   }
   .reading-settings__preview {
     width: 64px;
     min-height: 140px;
     /* background: #f4efe6; */
     border-radius: var(--radius-sm);
     display: flex;
     justify-content: center;
     padding-top: 8px;
   }
   .reading-settings__art {
    width: 38px;
    height: auto;
    margin-top: 17px;
   }
   .reading-settings__fields {
     min-width: 0;
   }
   .reading-settings__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     justify-content: flex-end;
   }
   .reading-settings__color {
     width: 42px;
     height: 32px;
     padding: 0;
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     background: transparent;
     cursor: pointer;
   }
   .reading-settings__error {
     color: var(--danger, #c45c5c);
     font-size: 13px;
     margin: 10px 0 0;
   }

   .settings-page__select {
     max-width: 220px;
     min-width: 140px;
   }
   .settings-page__number-input {
      width: 72px;
      gap: 7px;
      background: var(--input-bg);
      color: var(--text-dim);
      border: 1px solid var(--hairline);
      border-radius: var(--radius-sm);
      padding: 8px 13px;
      font-size: 13px;
      font-weight: 500;
   }




   @media (max-width: 720px) {
     .settings-page { padding: 22px 18px 0; }
     .settings-page__layout {
       grid-template-columns: 1fr;
       grid-template-rows: auto 1fr;
     }
     .settings-page__list {
       border-right: none;
       padding-right: 0;
       border-bottom: 1px solid var(--hairline);
       padding-bottom: 16px;
       max-height: 180px;
     }
   }


   /* ============================================================
      Storage / Analysis panels (shared layout + badge tokens)
      ============================================================ */

   /* Badge colour tokens — hard-coded where no global var exists,
      with a light-theme override below. */
   .storage-panel,
   .analysis-panel {
     --badge-ok-bg:    rgba(62, 168, 90, 0.16);
     --badge-ok-color: #4ec26a;
     --badge-warn-bg:    rgba(204, 148, 30, 0.16);
     --badge-warn-color: #c99420;
   }
   body.theme-light .storage-panel,
   body.theme-light .analysis-panel {
     --badge-ok-bg:    rgba(22, 111, 50, 0.10);
     --badge-ok-color: #166f32;
     --badge-warn-bg:    rgba(140, 90, 0, 0.10);
     --badge-warn-color: #8c5a00;
   }

   .storage-panel__section,
   .analysis-panel__section {
     margin-bottom: 8px;
   }
   .storage-panel__backend,
   .analysis-panel__backend {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px 0;
     border-bottom: 1px solid var(--hairline);
   }
   .storage-panel__backend:last-child,
   .analysis-panel__backend:last-child { border-bottom: none; }
   .storage-panel__spacer,
   .analysis-panel__spacer { flex: 1; }
   .storage-panel__backend-label,
   .analysis-panel__backend-label {
     font-size: 13.5px;
     font-weight: 500;
     color: var(--text);
   }
   .storage-panel__backend-label--dim,
   .analysis-panel__backend-label--dim {
     font-weight: 400;
     color: var(--text-dim);
   }
   .storage-panel__meta,
   .analysis-panel__meta {
     font-size: 12px;
     color: var(--text-dim);
     margin-top: 2px;
     word-break: break-all;
   }
   .storage-panel__badge,
   .analysis-panel__badge {
     display: inline-flex;
     align-items: center;
     padding: 3px 8px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 600;
     white-space: nowrap;
     flex-shrink: 0;
   }
   .storage-panel__badge--connected,
   .analysis-panel__badge--connected {
     background: var(--badge-ok-bg);
     color: var(--badge-ok-color);
   }
   .storage-panel__badge--needs-reconnect,
   .analysis-panel__badge--needs-reconnect {
     background: var(--badge-warn-bg);
     color: var(--badge-warn-color);
   }
   .storage-panel__badge--disconnected,
   .analysis-panel__badge--disconnected {
     background: color-mix(in srgb, var(--text-dim) 14%, transparent);
     color: var(--text-dim);
   }
   .storage-panel__actions,
   .analysis-panel__actions {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 10px;
   }
   .storage-panel__confirm,
   .analysis-panel__confirm {
     background: var(--accent-soft);
     border-radius: var(--radius-sm);
     padding: 12px 14px;
     margin-top: 8px;
   }
   .storage-panel__confirm p,
   .analysis-panel__confirm p {
     margin: 0 0 10px;
     font-size: 13px;
     color: var(--text);
   }
   .storage-panel__form,
   .analysis-panel__form {
     padding: 16px 0 8px;
   }
   .storage-panel__provider-picker,
   .analysis-panel__provider-picker {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 18px;
   }
   .storage-panel__field,
   .analysis-panel__field {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-bottom: 12px;
   }
   .storage-panel__field label,
   .analysis-panel__field label {
     font-size: 12px;
     color: var(--text-dim);
     font-weight: 500;
   }
   .storage-panel__field-input,
   .analysis-panel__field-input {
     width: 100%;
     background: transparent;
     border: 1px solid var(--hairline-strong);
     border-radius: var(--radius-sm);
     padding: 7px 10px;
     font-size: 13px;
     color: var(--text);
     transition: border-color .15s ease;
   }
   .storage-panel__field-input:focus,
   .analysis-panel__field-input:focus {
     outline: none;
     border-color: var(--accent);
   }
   .storage-panel__error,
   .analysis-panel__error {
     margin: 6px 0 0;
     font-size: 12px;
     color: var(--danger);
     font-weight: 500;
   }
   .storage-panel__loading,
   .analysis-panel__loading {
     padding: 16px 0;
     font-size: 13px;
     color: var(--text-dim);
   }
   @media (max-width: 720px) {
     .storage-panel__field-input,
     .analysis-panel__field-input { font-size: 16px; /* prevent iOS zoom */ }
   }

   .analysis-panel__blurb {
     margin: 8px 0 0;
     font-size: 13px;
     line-height: 1.45;
     color: var(--text-dim);
   }
   .analysis-panel__help {
     margin: 0 0 12px;
     font-size: 12.5px;
   }
   .analysis-panel__help a {
     color: var(--accent);
     text-decoration: none;
   }
   .analysis-panel__help a:hover {
     text-decoration: underline;
   }
   .analysis-panel__pref-row {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 16px;
     padding: 14px 0;
     border-bottom: 1px solid var(--hairline);
   }
   .analysis-panel__pref-label {
     font-size: 13.5px;
     font-weight: 500;
     color: var(--text);
   }
   .analysis-panel__usage {
     padding: 14px 0;
     border-bottom: 1px solid var(--hairline);
   }
   .analysis-panel__usage-figures {
     display: flex;
     flex-wrap: wrap;
     gap: 12px 20px;
     margin-top: 6px;
     font-size: 13px;
     color: var(--text);
   }

   /* ============================================================
      Editor
      editor-panel is the relative, height-contained stage. The
      manuscript scrolls in an inner region; fixed panels reserve
      space via panels.css stage insets and notes margin.
      ============================================================ */
   .editor-panel {
     --editor-pad-y: 26px;
     --editor-pad-x: 28px;
     z-index: 1;
     position: relative;
     height: 100%;
     min-width: 0;
     min-height: 0;
     overflow: hidden;
     background: var(--editor-bg);
     transition: background .3s ease;
     display: flex;
     flex-direction: column;
   }

   .editor-section--manuscript {
     height: calc(100vh - var(--header-height));
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding: var(--editor-pad-y) var(--editor-pad-x);
     transition: margin-left var(--panel-duration) var(--panel-ease);
   }
   
   .ProseMirror { height: 100%; }
   
   #editor-root {
     --editor-max-width: 680px;
     --threads-connector-width: 0px;
     --threads-margin: 0px;
     position: relative;
   }
   
   .editor-shell {
     display: grid;
     grid-template-columns:
       40px
       18px
       minmax(0, 1fr)
       var(--threads-connector-width, 0px)
       var(--threads-margin, 0px);
     align-items: stretch;
     position: relative;
     width: 100%;
     max-width: calc(
       58px
       + var(--editor-max-width)
       + var(--threads-connector-width, 0px)
       + var(--threads-margin, 0px)
     );
     margin: 0 auto;
     min-height: 0;
   }
   .editor-margin { grid-column: 1; }
   #editor--sticker-marginspacer {
     grid-column: 2;
     position: relative;
     overflow: visible;
   }
   #editor-mount { grid-column: 3; min-width: 0; position: relative; }
   #editor--thread-connector {
     grid-column: 4;
     position: relative;
     min-width: 0;
     align-self: stretch;
     overflow: visible;
     pointer-events: none;
   }
   #editor--threads-margin {
     grid-column: 5;
     position: relative;
     min-width: 0;
     align-self: stretch;
     overflow: visible;
   }
   
   #editor-mount .ProseMirror {
     min-height: 72vh;
     outline: none;
     line-height: calc(var(--editor-leading) + var(--editor-line-gap, 0px) / var(--editor-font-size));
     font-family: var(--font-editor);
     font-size: var(--editor-font-size);
     color: var(--text);
     white-space: pre-wrap;
     /* width: 100%;  */
     margin: 0;
     padding: 8px 0 40px 0;
   }
   #editor-mount .ProseMirror p { margin: 0 0 1.05em; }
   
   #editor-mount .ProseMirror h2:not(:first-child) { margin: 1.6em 0 .8em; }
   #editor-mount .ProseMirror h2 {
     font-family: var(--font-editor);
     font-weight: 600;
     font-size: calc(var(--editor-font-size) * var(--editor-heading-scale));
     letter-spacing: -0.01em;
     color: var(--heading);
   }
   /* ============================================================
      Entity tags
      Dim at rest · hovering ANY tag lifts ALL of them · "keep on"
      pins them lit · focus view mutes them (hover still lifts).
      ============================================================ */
   .entity-mark {
     border-radius: var(--radius-xs);
     padding: 0.5px 3px;
     transition: background .22s ease, color .22s ease;
   }
   .entity-mark:not(.entity-note):not(.entity-thread) {
     cursor: grab;
   }
   .entity-mark:not(.entity-note):not(.entity-thread):active {
     cursor: grabbing;
   }
   .entity-mark--drag-source {
     opacity: 0.35;
   }
   body.entity-mark-drag-active {
     cursor: grabbing !important;
   }
   body.entity-mark-drag-active .smart-editor {
     cursor: grabbing !important;
   }
   .entity-mark-drag-ghost {
     position: fixed;
     z-index: 10000;
     pointer-events: none;
     opacity: 0.85;
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
   }
   .entity-mark-drop-indicator {
     position: fixed;
     z-index: 9999;
     width: 2px;
     background: var(--accent, #5b8def);
     border-radius: 1px;
     pointer-events: none;
     transform: translateX(-1px);
   }
   .smart-editor .entity-character { background: color-mix(in srgb, var(--ec-character) var(--tag-base), transparent); }
   .smart-editor .entity-character[data-character-color] {
     background: color-mix(in srgb, var(--character-color, var(--ec-character)) var(--tag-base), transparent);
   }
   .smart-editor .entity-place     { background: color-mix(in srgb, var(--ec-place)     var(--tag-base), transparent); }
   .smart-editor .entity-place[data-place-color] {
     background: color-mix(in srgb, var(--place-color, var(--ec-place)) var(--tag-base), transparent);
   }
   .smart-editor .entity-chapter   { background: color-mix(in srgb, var(--ec-chapter)   var(--tag-base), transparent); }
   .smart-editor .entity-custom    { background: color-mix(in srgb, var(--ec-custom)    var(--tag-base), transparent); }
   
   /* Lit: any tag hovered OR keep-on toggle */
   .smart-editor:has(.entity-mark:hover) .entity-character,
   body.highlights-on .smart-editor .entity-character { background: color-mix(in srgb, var(--ec-character) var(--tag-lit), transparent); }
   .smart-editor:has(.entity-mark:hover) .entity-character[data-character-color],
   body.highlights-on .smart-editor .entity-character[data-character-color] {
     background: color-mix(in srgb, var(--character-color, var(--ec-character)) var(--tag-lit), transparent);
   }
   .smart-editor:has(.entity-mark:hover) .entity-place,
   body.highlights-on .smart-editor .entity-place     { background: color-mix(in srgb, var(--ec-place)     var(--tag-lit), transparent); }
   .smart-editor:has(.entity-mark:hover) .entity-place[data-place-color],
   body.highlights-on .smart-editor .entity-place[data-place-color] {
     background: color-mix(in srgb, var(--place-color, var(--ec-place)) var(--tag-lit), transparent);
   }
   .smart-editor:has(.entity-mark:hover) .entity-chapter,
   body.highlights-on .smart-editor .entity-chapter   { background: color-mix(in srgb, var(--ec-chapter)   var(--tag-lit), transparent); }
   .smart-editor:has(.entity-mark:hover) .entity-custom,
   body.highlights-on .smart-editor .entity-custom    { background: color-mix(in srgb, var(--ec-custom)    var(--tag-lit), transparent); }
   
   /* Focus view mutes the resting state (placed last so it wins over keep-on);
      the hover-any rule above is more specific, so pushing still works. */
   body.focus-view .smart-editor .entity-character,
   body.focus-view .smart-editor .entity-place,
   body.focus-view .smart-editor .entity-chapter,
   body.focus-view .smart-editor .entity-custom { background: transparent; }
   
   /* Thread node tags: render as a colored dot — Class B metadata, no word count,
     no spellcheck. Font-size: 0 hides the label text from the browser's text pipeline
     while keeping the inline element in the layout for coordsAtPos() to work. */
     .entity-thread {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--thread-color, var(--ec-thread, #6b93c4));
      vertical-align: middle;
      margin: 0 2px;
      cursor: grab;
      font-size: 0;
      line-height: 0;
      user-select: none;
      flex-shrink: 0;
      transition: transform .1s ease, box-shadow .1s ease;
      margin: 0 10px 3px;
  }
  .entity-thread:active {
    cursor: grabbing;
  }
  .entity-thread:hover {
    transform: scale(1.3);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--thread-color, var(--ec-thread, #6b93c4)) 30%, transparent);
  }

/* Hover tooltip on thread-node dots */
.thread-dot-tooltip {
  background: var(--panel-bg, #fff);
  border: 1px solid var(--hairline, #e0e0e0);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  font-size: 12px;
  line-height: 1.4;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}
.thread-dot-tooltip strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #111);
}
.thread-dot-tooltip__thread {
  font-size: 11px;
  font-weight: 500;
}
.thread-dot-tooltip__orphan {
  font-size: 11px;
  color: var(--text-dim, #888);
  font-style: italic;
}
.thread-dot-tooltip__hint {
  font-size: 10px;
  color: var(--text-faint, #aaa);
  margin-top: 2px;
}

  /* Notes: colored, clickable; follow the same dim→lit logic via --note-color. */
   .entity-note {
     border-radius: var(--radius-xs);
     padding: 0.5px 2px;
     font-weight: 600;
     cursor: pointer;
     color: var(--note-color, #93b08c);
     background: color-mix(in srgb, var(--note-color, #93b08c) var(--tag-base), transparent);
     transition: background .22s ease;
   }
   .smart-editor:has(.entity-mark:hover) .entity-note,
   body.highlights-on .smart-editor .entity-note {
     background: color-mix(in srgb, var(--note-color, #93b08c) var(--tag-lit), transparent);
   }
   body.focus-view .smart-editor .entity-note { background: transparent; }

   /* Editor View: layer off beats hover-all, keep-lit, and Focus mute. */
   html.editor-view-off-type_character .smart-editor .entity-character,
   html.editor-view-off-type_character .smart-editor:has(.entity-mark:hover) .entity-character,
   html.editor-view-off-type_character body.highlights-on .smart-editor .entity-character,
   html.editor-view-off-type_character body.focus-view .smart-editor .entity-character,
   html.editor-view-off-type_character body.highlights-on .smart-editor .entity-character[data-character-color],
   html.editor-view-off-type_character .smart-editor:has(.entity-mark:hover) .entity-character[data-character-color] {
     background: transparent;
   }
   html.editor-view-off-type_place .smart-editor .entity-place,
   html.editor-view-off-type_place .smart-editor:has(.entity-mark:hover) .entity-place,
   html.editor-view-off-type_place body.highlights-on .smart-editor .entity-place,
   html.editor-view-off-type_place body.focus-view .smart-editor .entity-place,
   html.editor-view-off-type_place body.highlights-on .smart-editor .entity-place[data-place-color],
   html.editor-view-off-type_place .smart-editor:has(.entity-mark:hover) .entity-place[data-place-color] {
     background: transparent;
   }
   html.editor-view-off-type_chapter .smart-editor .entity-chapter,
   html.editor-view-off-type_chapter .smart-editor:has(.entity-mark:hover) .entity-chapter,
   html.editor-view-off-type_chapter body.highlights-on .smart-editor .entity-chapter,
   html.editor-view-off-type_chapter body.focus-view .smart-editor .entity-chapter {
     background: transparent;
   }
   html.editor-view-off-type_custom .smart-editor .entity-custom,
   html.editor-view-off-type_custom .smart-editor:has(.entity-mark:hover) .entity-custom,
   html.editor-view-off-type_custom body.highlights-on .smart-editor .entity-custom,
   html.editor-view-off-type_custom body.focus-view .smart-editor .entity-custom {
     background: transparent;
   }
   html.editor-view-off-type_note .smart-editor .entity-note,
   html.editor-view-off-type_note .smart-editor:has(.entity-mark:hover) .entity-note,
   html.editor-view-off-type_note body.highlights-on .smart-editor .entity-note,
   html.editor-view-off-type_note body.focus-view .smart-editor .entity-note {
     background: transparent;
     color: inherit;
   }

   html.editor-view-off-type_character .smart-editor .entity-character:hover,
   html.editor-view-off-type_character .smart-editor .entity-character:focus-visible,
   html.editor-view-off-type_place .smart-editor .entity-place:hover,
   html.editor-view-off-type_place .smart-editor .entity-place:focus-visible,
   html.editor-view-off-type_chapter .smart-editor .entity-chapter:hover,
   html.editor-view-off-type_chapter .smart-editor .entity-chapter:focus-visible,
   html.editor-view-off-type_custom .smart-editor .entity-custom:hover,
   html.editor-view-off-type_custom .smart-editor .entity-custom:focus-visible,
   html.editor-view-off-type_note .smart-editor .entity-note:hover,
   html.editor-view-off-type_note .smart-editor .entity-note:focus-visible {
     box-shadow: inset 0 0 0 1px var(--hairline-strong);
     background: transparent;
   }

   html.editor-view-off-type_chapter .smart-editor h2.entity-chapter-head:hover,
   html.editor-view-off-type_chapter .smart-editor h2.chapter-head:hover,
   html.editor-view-off-type_chapter .smart-editor h2.entity-chapter-head:focus-visible,
   html.editor-view-off-type_chapter .smart-editor h2.chapter-head:focus-visible {
     box-shadow: none;
     background: none;
     border-bottom: 1px solid var(--hairline-strong);
   }

   html.editor-view-off-type_thread .smart-editor .entity-thread,
   html.editor-view-off-type_thread .smart-editor .entity-thread:hover {
     background: transparent;
     box-shadow: none;
     transform: none;
   }
   html.editor-view-off-type_thread .smart-editor .entity-thread:hover,
   html.editor-view-off-type_thread .smart-editor .entity-thread:focus-visible {
     box-shadow: 0 0 0 1px var(--hairline-strong);
     transform: none;
   }

  /* Spellcheck overlays */
  .spell-error {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ef6a6a;
    text-decoration-thickness: 1.3px;
    text-underline-offset: 2px;
  }

  .grammar-warning {
    cursor: pointer;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #6da4ff;
    text-decoration-thickness: 1.3px;
    text-underline-offset: 2px;
  }

  .spellcheck-popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 15020;
  }

  .spellcheck-popover {
    min-width: 220px;
    max-width: 320px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
    background: var(--panel-bg);
    box-shadow: var(--shadow-md);
    padding: 10px;
    display: grid;
    gap: 8px;
  }

  .spellcheck-popover__title {
    font-size: 12px;
    color: var(--text-dim);
  }

  .spellcheck-popover__list {
    display: grid;
    gap: 6px;
  }

  .spellcheck-popover__suggestion,
  .spellcheck-popover__action {
    border: 1px solid var(--hairline);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--text) 3%, transparent);
    color: var(--text);
    font-size: 12px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
  }

  .spellcheck-popover__suggestion:hover,
  .spellcheck-popover__action:hover {
    background: color-mix(in srgb, var(--text) 9%, transparent);
  }

  .spellcheck-popover__empty {
    font-size: 12px;
    color: var(--text-faint);
  }

  .spellcheck-popover__actions {
    display: flex;
    gap: 6px;
  }

  .editor-context-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 15040;
  }

  .editor-context-menu {
    position: absolute;
    min-width: 220px;
    max-width: 320px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--panel-bg);
    box-shadow: var(--shadow-md);
    padding: 8px;
    display: grid;
    gap: 8px;
  }

  .editor-context-menu__section {
    display: grid;
    gap: 4px;
  }

  .editor-context-menu__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 2px 4px;
  }

  .editor-context-menu__item {
    /* border: 1px solid var(--hairline); */
    border-radius: var(--radius-xs);
    background: 
color-mix(in srgb, var(--text) 3%, transparent);
    color: var(--text);
    font-size: 12px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    background-color: transparent;
    transition: background .14s ease;
    border: none;
  }

  .editor-context-menu__item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 9%, transparent);
  }

  .editor-context-menu__item:disabled {
    opacity: .55;
    cursor: default;
  }
   
   /* ============================================================
      Chapter headings (structural, foldable, no background)
      ============================================================ */
   #editor-mount .ProseMirror h2.entity-chapter-head,
   #editor-mount .ProseMirror h2.chapter-head {
     background: none;
     position: relative;
     
   }
   .chapter-fold {
     position: absolute;
     left: -30px;
     width: 18px; height: 18px;
     display: inline-flex; align-items: center; justify-content: center;
     border: none; background: transparent;
     color: var(--accent);
     cursor: pointer; padding: 0;
     font-size: calc(var(--editor-font-size) * 0.7222222222);
     line-height: 1;
     user-select: none;
   }
   .chapter-fold .ui-caret { color: inherit; }
   .chapter-fold:hover { color: var(--text); }
   #editor-mount .ProseMirror .chapter-hidden { display: none; }
   
   #editor-mount .ProseMirror [contenteditable="false"] { height: 100%; }
   
   #mask-settings-root { padding: 12px 12px; }
   
   /* ============================================================
      Sidebar tree
      ============================================================ */
   .tree-group { margin-bottom: 14px; }
   
   .tree-row {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 7px 8px;
     border-radius: var(--radius-sm);
     position: relative;
     overflow: visible;
     cursor: pointer;
     transition: background .14s ease;
   }
   .tree-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
   .tree-row.tree-indent:not(.tree-row--entity):not(.tree-row--thread-head) { margin-left: 18px; }
   .tree-row--entity.tree-indent { padding-left: 50px; }
   .tree-row--thread-head.tree-indent { padding-left: 50px; }
   .tree-row--thread-node.tree-indent { padding-left: 68px; }

   button.tree-row {
     width: 100%;
     border: none;
     background: transparent;
     color: inherit;
     font: inherit;
     text-align: left;
   }
   button.tree-row--entity .entity-row__label {
     flex: 1;
     min-width: 0;
     font-size: 13px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   button.tree-row--entity .entity-row__subtitle {
     margin-left: auto;
     flex-shrink: 0;
   }
   
   .tree-btn {
     border: none;
     background: transparent;
     color: inherit;
     cursor: pointer;
     padding: 0;
     text-align: left;
     font-size: 13px;
   }
   .tree-btn.group-toggle {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
   }
   
   .tree-row--entity.active,
   .group-btn.active,
   .thread-btn.active { color: var(--accent); }
   /* accent rail on the active row */
   .tree-row--entity.active::before,
   .tree-row:has(.group-btn.active)::before,
   .tree-row:has(.thread-btn.active)::before {
     content: "";
     position: absolute;
     left: 2px; top: 50%; transform: translateY(-50%);
     width: 3px; height: 15px; border-radius: 2px;
     background: var(--accent);
   }
   .tree-row--entity.active,
   .tree-row:has(.group-btn.active),
   .tree-row:has(.thread-btn.active) { background: var(--accent-soft); }
   
   .entity-subtitle { color: var(--text-faint); font-size: 11px; }
   
   /* ============================================================
      Avatars (see scripts/components/avatar.js)
      ============================================================ */
   .avatar {
     flex-shrink: 0;
     display: inline-flex;
     border-radius: 50%;
     overflow: hidden;
     border: 1px solid var(--hairline-strong);
     line-height: 0;
     background: var(--raised-bg);
   }
   .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
   .avatar--blank,
   .avatar-picker__trigger.avatar--blank {
     background: var(--input-bg);
   }
   .avatar-picker__option--upload {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--input-bg);
     color: var(--text-dim);
   }
   .avatar-picker__upload-icon {
     font-size: 20px;
     font-weight: 300;
     line-height: 1;
     user-select: none;
   }
   .avatar-picker__option--upload:hover .avatar-picker__upload-icon,
   .avatar-picker__option--upload:focus-visible .avatar-picker__upload-icon {
     color: var(--text);
   }
   .avatar--fill {
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 0;
     border: none;
   }
   .avatar--xs { width: 22px; height: 22px; }
   .avatar--sm { width: 26px; height: 26px; }
   .avatar--md { width: 40px; height: 40px; }
   .avatar--card { width: 52px; height: 52px; }
   .avatar--lg { width: 64px; height: 64px; }
   .avatar--xl { width: 88px; height: 88px; }
   .avatar--2xl { width: 120px; height: 120px; }

   .avatar-picker { position: relative; display: inline-flex; flex-shrink: 0; }
   .avatar-picker__trigger {
     padding: 0;
     cursor: pointer;
     transition: border-color .15s ease;
   }
   .avatar-picker__trigger:hover,
   .avatar-picker:focus-within .avatar-picker__trigger { border-color: var(--accent); }

   .avatar-picker__menu {
     position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
     display: none; gap: 6px; padding: 6px;
     background: var(--raised-bg); border: 1px solid var(--hairline);
     border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0,0,0,.28); z-index: 20;
     pointer-events: auto;
   }
   .avatar-picker:hover .avatar-picker__menu,
   .avatar-picker:focus-within .avatar-picker__menu {
     display: flex;
   }
   /* Invisible bridge so the pointer can reach the menu without closing */
   .avatar-picker__menu::before {
     content: "";
     position: absolute;
     right: 100%;
     top: 0;
     width: 10px;
     height: 100%;
   }
   .avatar-picker__option {
     border: 2px solid transparent; border-radius: 50%; padding: 0;
     width: 32px; height: 32px; overflow: hidden; cursor: pointer;
     background: var(--raised-bg); line-height: 0;
   }
   .avatar-picker--lg .avatar-picker__option,
   .avatar-picker--xl .avatar-picker__option { width: 40px; height: 40px; }
   .avatar-picker__option:hover,
   .avatar-picker__option:focus-visible { border-color: var(--accent); outline: none; }
   .avatar-picker__option img { display: block; width: 100%; height: 100%; object-fit: cover; }

   /* Place icons — tag bg + darker masked artwork (cover) */
   .place-icon {
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
     overflow: hidden;
     border-radius: 50%;
     border: 1px solid var(--hairline-strong);
     line-height: 0;
   }
   .place-icon--fill {
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 0;
     border: none;
   }
   .place-icon__art {
     position: absolute;
     inset: 0;
     pointer-events: none;
     -webkit-mask-mode: alpha;
     mask-mode: alpha;
   }
   .place-icon__photo {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   .place-icon--custom {
     background: var(--raised-bg);
   }
   .place-icon--xs { width: 22px; height: 22px; }
   .place-icon--sm { width: 26px; height: 26px; }
   .place-icon--md { width: 40px; height: 40px; }
   .place-icon--card { width: 52px; height: 52px; }
   .place-icon--lg { width: 64px; height: 64px; }
   .place-icon--xl { width: 88px; height: 88px; }
   .place-icon--2xl { width: 120px; height: 120px; }

   .place-icon-picker { position: relative; display: inline-flex; flex-shrink: 0; }
   .place-icon-picker__trigger {
     appearance: none;
     padding: 0;
     cursor: pointer;
     transition: border-color .15s ease;
   }
   .place-icon-picker__trigger:hover,
   .place-icon-picker:focus-within .place-icon-picker__trigger { border-color: var(--accent); }

   .place-icon-picker__menu {
     position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
     display: none; gap: 6px; padding: 6px;
     background: var(--raised-bg); border: 1px solid var(--hairline);
     border-radius: var(--radius); box-shadow: 0 8px 26px rgba(0,0,0,.28); z-index: 20;
     pointer-events: auto;
   }
   .place-icon-picker:hover .place-icon-picker__menu,
   .place-icon-picker:focus-within .place-icon-picker__menu {
     display: flex;
   }
   .place-icon-picker__menu::before {
     content: "";
     position: absolute;
     right: 100%;
     top: 0;
     width: 10px;
     height: 100%;
   }
   .place-icon-picker__option {
     border: 2px solid transparent;
     border-radius: 50%;
     padding: 0;
     width: 32px;
     height: 32px;
     overflow: hidden;
     cursor: pointer;
     background: transparent;
     line-height: 0;
   }
   .place-icon-picker--lg .place-icon-picker__option,
   .place-icon-picker--xl .place-icon-picker__option,
   .place-icon-picker--2xl .place-icon-picker__option { width: 40px; height: 40px; }
   .place-icon-picker__option:hover,
   .place-icon-picker__option:focus-visible { border-color: var(--accent); outline: none; }
   .place-icon-picker__option-icon {
     width: 100%;
     height: 100%;
     border: none;
   }
   .place-icon-picker__option--upload {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--input-bg);
     color: var(--text-dim);
   }
   .place-icon-picker__upload-icon {
     font-size: 20px;
     font-weight: 300;
     line-height: 1;
     user-select: none;
   }
   .place-icon-picker__option--upload:hover .place-icon-picker__upload-icon,
   .place-icon-picker__option--upload:focus-visible .place-icon-picker__upload-icon {
     color: var(--text);
   }

   .character-colour-field {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
     margin-top: 10px;
   }
   .character-colour-field > label {
     font-size: 11px;
     color: var(--text-faint);
   }
   .avatar-form-block .character-colour-field {
     margin-top: 8px;
   }
   .character-colour-mixer {
     flex-shrink: 0;
   }
   .character-colour-mixer .colour-mixer__trigger,
   .character-colour-mixer .colour-mixer__swatch {
     border-radius: 50%;
   }

  .user-menu-avatar .avatar { border: none; width: 100%; height: 100%; }

   /* ============================================================
      Colour mixer (see scripts/components/colour-mixer.js)
      ============================================================ */
   .colour-mixer {
     --colour-mixer-trigger: 40px;
     --colour-mixer-swatch: 32px;
     --colour-mixer-gap: 6px;
     --colour-mixer-length: max-content;
     --colour-mixer-count: 0;
     --colour-mixer-radius: 50%;
     --colour-mixer-arm-cross: calc(var(--colour-mixer-trigger) - 4px);
     --colour-mixer-menu-pad: 4px;
     position: relative;
     display: inline-flex;
     flex-shrink: 0;
   }
   .colour-mixer--xs { --colour-mixer-trigger: 22px; --colour-mixer-swatch: 22px; }
   .colour-mixer--sm { --colour-mixer-trigger: 26px; --colour-mixer-swatch: 26px; }
   .colour-mixer--md { --colour-mixer-trigger: 40px; --colour-mixer-swatch: 32px; }
   .colour-mixer--lg { --colour-mixer-trigger: 64px; --colour-mixer-swatch: 40px; }
   .colour-mixer--xl { --colour-mixer-trigger: 88px; --colour-mixer-swatch: 44px; }
   .colour-mixer--2xl { --colour-mixer-trigger: 120px; --colour-mixer-swatch: 48px; }

   .colour-mixer__trigger {
     width: var(--colour-mixer-trigger);
     height: var(--colour-mixer-trigger);
     min-width: var(--colour-mixer-trigger);
     min-height: var(--colour-mixer-trigger);
     max-width: var(--colour-mixer-trigger);
     max-height: var(--colour-mixer-trigger);
     padding: 0;
     border: 1px solid var(--hairline-strong);
     border-radius: var(--colour-mixer-radius);
     cursor: pointer;
     transition: border-color .15s ease, box-shadow .15s ease;
     flex: 0 0 var(--colour-mixer-trigger);
     aspect-ratio: 1 / 1;
     box-sizing: border-box;
     line-height: 0;
   }
   .colour-mixer:hover .colour-mixer__trigger,
   .colour-mixer:focus-within .colour-mixer__trigger {
     border-color: var(--accent);
   }
   .colour-mixer.is-disabled .colour-mixer__trigger {
     opacity: .45;
     cursor: not-allowed;
   }

   .colour-mixer__popout {
     position: absolute;
     display: none;
     z-index: 30;
     pointer-events: none;
     overflow: visible;
   }
   .colour-mixer:hover .colour-mixer__popout,
   .colour-mixer:focus-within .colour-mixer__popout,
   .colour-mixer.colour-mixer--arm-open .colour-mixer__popout,
   .colour-mixer.colour-mixer--mixer-open .colour-mixer__popout {
     display: block;
     pointer-events: auto;
   }
   .colour-mixer[data-direction="right"] .colour-mixer__popout {
     left: calc(100% + 8px);
     top: 0;
   }
   .colour-mixer[data-direction="left"] .colour-mixer__popout {
     right: calc(100% + 8px);
     top: 0;
   }
   .colour-mixer[data-direction="up"] .colour-mixer__popout {
     left: 50%;
     bottom: calc(100% + 8px);
     transform: translateX(-50%);
   }
   .colour-mixer[data-direction="down"] .colour-mixer__popout {
     left: 50%;
     top: calc(100% + 8px);
     transform: translateX(-50%);
   }

   .colour-mixer__popout::before {
     content: "";
     position: absolute;
     pointer-events: auto;
   }
   .colour-mixer[data-direction="right"] .colour-mixer__popout::before {
     right: 100%; top: 0; width: 10px; height: 100%;
   }
   .colour-mixer[data-direction="left"] .colour-mixer__popout::before {
     left: 100%; top: 0; width: 10px; height: 100%;
   }
   .colour-mixer[data-direction="up"] .colour-mixer__popout::before {
     top: 100%; left: 0; width: 100%; height: 10px;
   }
   .colour-mixer[data-direction="down"] .colour-mixer__popout::before {
     bottom: 100%; left: 0; width: 100%; height: 10px;
   }

   .colour-mixer__menu {
     position: relative;
     overflow: visible;
     background: var(--raised-bg);
     border: 1px solid var(--hairline);
     border-radius: var(--radius);
     box-shadow: 0 8px 26px rgba(0,0,0,.28);
     pointer-events: auto;
     box-sizing: border-box;
   }
   /* Arm cross-axis matches trigger footprint */
   .colour-mixer[data-direction="right"] .colour-mixer__menu,
   .colour-mixer[data-direction="left"] .colour-mixer__menu {
     height: var(--colour-mixer-trigger);
     padding: 0 var(--colour-mixer-menu-pad);
     display: flex;
     align-items: center;
   }
   .colour-mixer[data-direction="up"] .colour-mixer__menu,
   .colour-mixer[data-direction="down"] .colour-mixer__menu {
     width: var(--colour-mixer-trigger);
     padding: var(--colour-mixer-menu-pad) 0;
     display: flex;
     flex-direction: column;
     align-items: center;
   }

   .colour-mixer__palette-scroll {
     overflow: hidden;
   }
   .colour-mixer[data-direction="right"] .colour-mixer__palette-scroll,
   .colour-mixer[data-direction="left"] .colour-mixer__palette-scroll {
     max-width: var(--colour-mixer-length);
     max-height: var(--colour-mixer-arm-cross);
     height: var(--colour-mixer-arm-cross);
   }
   .colour-mixer[data-direction="up"] .colour-mixer__palette-scroll,
   .colour-mixer[data-direction="down"] .colour-mixer__palette-scroll {
     max-height: var(--colour-mixer-length);
     max-width: var(--colour-mixer-arm-cross);
     width: var(--colour-mixer-arm-cross);
   }
   .colour-mixer__arm {
     overflow: visible;
     min-width: 0;
     min-height: 0;
   }
   .colour-mixer[data-direction="right"] .colour-mixer__arm,
   .colour-mixer[data-direction="left"] .colour-mixer__arm {
     display: flex;
     align-items: center;
     height: 100%;
     width: 100%;
   }
   .colour-mixer[data-direction="up"] .colour-mixer__arm,
   .colour-mixer[data-direction="down"] .colour-mixer__arm {
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
     height: 100%;
   }
   .colour-mixer--scrollable .colour-mixer__palette-scroll {
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
   }
   .colour-mixer--scrollable .colour-mixer__palette-scroll::-webkit-scrollbar {
     display: none;
   }
   .colour-mixer--scrollable[data-direction="up"] .colour-mixer__palette-scroll,
   .colour-mixer--scrollable[data-direction="down"] .colour-mixer__palette-scroll {
     overflow-x: hidden;
     overflow-y: auto;
   }
   .colour-mixer--scroll-off .colour-mixer__palette-scroll {
     overflow: visible;
     max-width: none;
     max-height: none;
   }

   .colour-mixer__palette {
     display: flex;
     gap: var(--colour-mixer-gap);
     align-items: center;
   }
   .colour-mixer[data-direction="up"] .colour-mixer__palette,
   .colour-mixer[data-direction="down"] .colour-mixer__palette {
     flex-direction: column;
   }

   /* autoSize / manualSize — flex-wrap within a sized container; direction unchanged */
   .colour-mixer--flex-palette .colour-mixer__palette {
     flex-wrap: wrap;
   }
   .colour-mixer--flex-palette[data-direction="right"] .colour-mixer__menu,
   .colour-mixer--flex-palette[data-direction="left"] .colour-mixer__menu {
     height: auto;
     min-height: var(--colour-mixer-trigger);
   }
   .colour-mixer--flex-palette[data-direction="up"] .colour-mixer__menu,
   .colour-mixer--flex-palette[data-direction="down"] .colour-mixer__menu {
     width: auto;
     min-width: var(--colour-mixer-trigger);
   }
   .colour-mixer--autosize {
     max-width: 100%;
   }
   .colour-mixer--autosize .colour-mixer__popout {
     max-width: 100%;
   }
   .colour-mixer--autosize[data-direction="right"] .colour-mixer__palette-scroll,
   .colour-mixer--autosize[data-direction="left"] .colour-mixer__palette-scroll {
     max-width: var(--colour-mixer-autosize-width, 100%);
     width: 100%;
     max-height: none;
     height: auto;
   }
   .colour-mixer--autosize[data-direction="up"] .colour-mixer__palette-scroll,
   .colour-mixer--autosize[data-direction="down"] .colour-mixer__palette-scroll {
     max-height: var(--colour-mixer-autosize-height, 100%);
     height: auto;
     max-width: none;
     width: auto;
   }
   .colour-mixer--manual-size[data-direction="right"] .colour-mixer__menu,
   .colour-mixer--manual-size[data-direction="left"] .colour-mixer__menu {
     width: var(--colour-mixer-manual-size);
     min-width: var(--colour-mixer-manual-size);
     max-width: var(--colour-mixer-manual-size);
     height: auto;
     min-height: var(--colour-mixer-trigger);
     align-items: stretch;
   }
   .colour-mixer--manual-size[data-direction="right"] .colour-mixer__palette-scroll,
   .colour-mixer--manual-size[data-direction="left"] .colour-mixer__palette-scroll {
     max-width: none;
     width: 100%;
     max-height: none;
     height: auto;
     overflow: visible;
   }
   .colour-mixer--manual-size[data-direction="up"] .colour-mixer__menu,
   .colour-mixer--manual-size[data-direction="down"] .colour-mixer__menu {
     height: var(--colour-mixer-manual-size);
     min-height: var(--colour-mixer-manual-size);
     max-height: var(--colour-mixer-manual-size);
     width: auto;
     min-width: var(--colour-mixer-trigger);
     align-items: stretch;
   }
   .colour-mixer--manual-size[data-direction="up"] .colour-mixer__palette-scroll,
   .colour-mixer--manual-size[data-direction="down"] .colour-mixer__palette-scroll {
     max-height: none;
     height: 100%;
     max-width: none;
     width: auto;
     overflow: visible;
   }
   .colour-mixer--flex-palette .colour-mixer__popout {
     z-index: 50;
   }

   .colour-mixer__swatch {
     width: var(--colour-mixer-arm-cross);
     height: var(--colour-mixer-arm-cross);
     min-width: var(--colour-mixer-arm-cross);
     min-height: var(--colour-mixer-arm-cross);
     max-width: var(--colour-mixer-arm-cross);
     max-height: var(--colour-mixer-arm-cross);
     padding: 0;
     border: 2px solid transparent;
     border-radius: var(--colour-mixer-radius);
     cursor: pointer;
     flex: 0 0 var(--colour-mixer-arm-cross);
     aspect-ratio: 1 / 1;
     line-height: 0;
     position: relative;
     box-sizing: border-box;
   }
   .colour-mixer__swatch:hover,
   .colour-mixer__swatch:focus-visible {
     border-color: var(--accent);
     outline: none;
   }
   .colour-mixer__swatch.is-selected {
     border-color: var(--text);
     box-shadow: 0 0 0 1px var(--hairline-strong);
   }

   .colour-mixer__swatch--custom {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--input-bg);
     color: var(--text-dim);
   }
   .colour-mixer__swatch--custom:hover,
   .colour-mixer__swatch--custom:focus-visible {
     color: var(--text);
   }
   .colour-mixer__swatch--custom.is-open {
     border-color: var(--accent);
     color: var(--text);
   }
   .colour-mixer__custom-icon {
     font-size: calc(var(--colour-mixer-arm-cross) * 0.72);
     font-weight: 300;
     line-height: 1;
     user-select: none;
   }

   .colour-mixer__mixer-panel {
     position: absolute;
     z-index: 40;
     width: 176px;
     padding: 10px;
     background: var(--raised-bg);
     border: 1px solid var(--hairline);
     border-radius: var(--radius);
     box-shadow: 0 10px 32px rgba(0,0,0,.32);
     display: flex;
     flex-direction: column;
     gap: 8px;
     pointer-events: auto;
   }
   .colour-mixer__mixer-panel[hidden] { display: none !important; }

   .colour-mixer__mixer-preview {
     width: 100%;
     height: 28px;
     border-radius: var(--radius-sm);
     border: 1px solid var(--hairline-strong);
   }

   .colour-mixer__mixer-sl {
     position: relative;
     width: 100%;
     height: 100px;
     border-radius: var(--radius-sm);
     overflow: hidden;
     border: 1px solid var(--hairline);
     touch-action: none;
   }
   .colour-mixer__mixer-sl-canvas {
     display: block;
     width: 100%;
     height: 100%;
     cursor: crosshair;
   }
   .colour-mixer__mixer-sl-cursor {
     position: absolute;
     width: 12px;
     height: 12px;
     margin: -6px 0 0 -6px;
     border: 2px solid #fff;
     border-radius: 50%;
     box-shadow: 0 0 0 1px rgba(0,0,0,.35);
     pointer-events: none;
   }

   .colour-mixer__mixer-hue-input {
     width: 100%;
     height: 12px;
     appearance: none;
     border-radius: 999px;
     background: linear-gradient(
       90deg,
       #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
     );
     cursor: pointer;
   }
   .colour-mixer__mixer-hue-input::-webkit-slider-thumb {
     appearance: none;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 2px solid #fff;
     box-shadow: 0 0 0 1px rgba(0,0,0,.25);
     background: var(--text);
   }
   .colour-mixer__mixer-hue-input::-moz-range-thumb {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     border: 2px solid #fff;
     box-shadow: 0 0 0 1px rgba(0,0,0,.25);
     background: var(--text);
   }

   .colour-mixer__mixer-hex {
     width: 100%;
     box-sizing: border-box;
     background: var(--input-bg);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     padding: 6px 8px;
     font-size: 12px;
     font-variant-numeric: tabular-nums;
   }
   .colour-mixer__mixer-hex:focus {
     outline: none;
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-soft);
   }

   .colour-mixer__mixer-actions {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
   }
   .colour-mixer__mixer-cancel,
   .colour-mixer__mixer-ok {
     padding: 6px 14px;
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     background: var(--input-bg);
     color: var(--text-dim);
     cursor: pointer;
     font-size: 12px;
     font-weight: 500;
   }
   .colour-mixer__mixer-cancel:hover {
     border-color: var(--hairline-strong);
     color: var(--text);
   }
   .colour-mixer__mixer-ok {
     background: var(--accent-soft);
     color: var(--text);
   }
   .colour-mixer__mixer-ok:hover {
     border-color: var(--accent);
     color: var(--heading);
   }
   
   /* ============================================================
      Forms / chips
      ============================================================ */
   .form-block { margin-bottom: 14px; }
   .form-block label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; }
   .form-block input,
   .form-block textarea,
   .form-block select {
     width: 100%;
     background: var(--input-bg);
     color: var(--text);
     border: 1px solid var(--hairline);
     border-radius: var(--radius-sm);
     padding: 8px 10px;
     transition: border-color .15s ease, box-shadow .15s ease;
     resize: vertical;
   }
   .form-block input:focus,
   .form-block textarea:focus,
   .form-block select:focus {
     outline: none;
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-soft);
   }
   
   .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
   .chip {
     font-size: 11px;
     border-radius: 20px;
     padding: 3px 9px;
     background: var(--accent-soft);
     color: var(--accent);
   }
   
   /* ============================================================
      Settings / mask modal
      ============================================================ */
   .settings-panel {
     position: fixed; inset: 0;
     background: color-mix(in srgb, #000 48%, transparent);
     display: grid; place-items: center;
     backdrop-filter: blur(2px);
     z-index: 1000;
   }
   .settings-panel[hidden] { display: none !important; }
   .settings-card {
     width: min(960px, 96vw);
     max-height: 88vh;
     overflow: auto;
     background: var(--panel-bg);
     border: 1px solid var(--hairline);
     border-radius: var(--radius);
     box-shadow: 0 24px 70px rgba(0,0,0,.4);
   }
   .mask-grid {
     display: grid;
     grid-template-columns: 1.4fr .7fr .7fr 1fr .4fr .4fr;
     gap: 8px; align-items: center; margin-bottom: 8px;
   }
   .mask-grid.header { font-size: 12px; color: var(--text-faint); }
   .mask-grid input,
   .mask-grid select {
     width: 100%; background: var(--input-bg); color: var(--text);
     border: 1px solid var(--hairline); border-radius: var(--radius-xs); padding: 6px 8px;
   }
   .danger { color: var(--danger); }
   .danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent) !important; }
   
   /* ============================================================
      Statistics
      ============================================================ */
   .stats-panel-header {
     padding: 0;
     flex-shrink: 0;
   }
   .stats-panel-toggle {
     display: flex; align-items: center; gap: 8px; width: 100%;
     margin: 0; padding: 14px 16px; border: none; background: transparent;
     color: var(--text-dim); cursor: pointer; text-align: left;
   }
   .stats-panel-toggle .ui-caret { flex-shrink: 0; }
   .stats-panel-toggle:hover .ui-caret { color: var(--accent); }
   .stats-panel-toggle[aria-expanded="false"] .ui-caret { transform: rotate(-90deg); }
   .stats-panel-toggle h2 {
     font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
   }
   
   #statistics-root {
     display: grid;
     grid-template-rows: 1fr;
     flex: 0 1 auto;
     min-height: 0;
     max-height: min(36vh, 240px);
     overflow: hidden;
     padding: 0 18px 16px;
     transition: grid-template-rows .35s var(--panel-ease), max-height .35s var(--panel-ease), padding .15s ease;
   }
   #statistics-root.hidden {
     grid-template-rows: 0fr;
     max-height: 0;
     padding: 0 18px;
   }
   .stats-panel-body {
     display: flex;
     flex-direction: column;
     gap: 10px;
     min-height: 0;
     overflow-x: hidden;
     overflow-y: auto;
     font-size: 13px;
     opacity: 1;
     transition: opacity .3s ease;
   }
   #statistics-root.hidden .stats-panel-body { opacity: 0; }
   .stats-row { display: flex; justify-content: space-between; gap: 12px; }
   .stats-row span:first-child { color: var(--text-dim); white-space: nowrap; }
   .stats-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
   .stats-placeholder { margin: 0; color: var(--text-faint); font-size: 13px; }
   
   
   .color-picker { display: flex; gap: 6px; }
   .color-picker__swatch {
     width: 16px; height: 16px; border-radius: 50%;
     border: 2px solid transparent; background: var(--swatch-color);
     cursor: pointer; padding: 0;
   }
   .color-picker__swatch.is-selected {
     border-color: var(--text);
     box-shadow: 0 0 0 1px var(--hairline-strong);
   }
   
   .notes-list { display: flex; flex-direction: column; gap: 6px; }
   .notes-list-item {
     display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
     border: 1px solid var(--hairline); background: color-mix(in srgb, var(--text) 3%, transparent);
     color: var(--text); border-radius: var(--radius-sm); padding: 9px 11px;
     cursor: pointer; font-size: 13px; transition: background .14s ease, border-color .14s ease;
   }
   .notes-list-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
   .notes-list-item.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
   .notes-list-item__swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
   .notes-list-item__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   
   .notes-empty { margin: 0; color: var(--text-faint); font-size: 13px; line-height: 1.6; }
   
   .notes-editor { display: flex; flex-direction: column; gap: 8px; height: calc(100% - 27px); }
   .notes-editor label { font-size: 12px; color: var(--text-dim); }
   .notes-editor textarea {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff00;
    border: 0px solid transparent;
   
    color: var(--text);
    padding: 9px 9px 9px 0;
    font-size: 13px;
    font-family: inherit;
    pointer-events: auto;
    transition: border-color .15s ease, box-shadow .15s ease;
    min-height: 100%;
   }
   .notes-editor textarea:focus { outline: none; border-color: transparent;}
   .note-tree-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
   .character-tree-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
   .place-tree-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--ec-place); }
   .thread-tree-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--accent); opacity: 0.55; }
   .thread-sidebar-swatch {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     flex-shrink: 0;
   }
   
   /* note stickers — painted in #editor--sticker-marginspacer */
   .note-sticker-gutter {
     position: absolute;
     inset: 0;
     pointer-events: none;
   }
   html.editor-view-off-type_note .note-sticker-gutter { display: none; }
   .note-gutter-marker {
     position: absolute;
     left: 1px;
     margin-top: 5px;
     display: block;
     width: 16px; height: 12px;
     border: none; padding: 0; cursor: pointer; background: transparent;
     color: var(--note-color, #93b08c); line-height: 1; user-select: none;
     pointer-events: auto;
     z-index: 2;
   }
   .note-gutter-marker__icon { display: block; width: 16px; height: 12px; }
   .note-gutter-marker__icon path {
     fill: transparent; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round;
     transition: fill .12s ease;
   }
   .note-gutter-marker:hover .note-gutter-marker__icon path { fill: currentColor; }
   
   /* Stage 3 — entity resolve picker (follows theme; slightly elevated) */
   .entity-picker-overlay {
     position: fixed;
     inset: 0;
     z-index: 1200;
     background: transparent;
   }
   .entity-picker {
     position: fixed;
     z-index: 1201;
     min-width: 240px;
     max-width: 340px;
     padding: 6px 0;
     border-radius: var(--radius-sm);
     border: 1px solid var(--hairline-strong);
     background: var(--raised-bg);
     color: var(--text);
     box-shadow:
       0 10px 32px rgba(0, 0, 0, 0.22),
       0 0 0 1px var(--hairline);
   }
   body.theme-light .entity-picker {
     box-shadow:
       0 12px 36px rgba(15, 17, 20, 0.14),
       0 0 0 1px var(--hairline-strong);
   }
   body.theme-dark .entity-picker {
     box-shadow:
       0 14px 40px rgba(0, 0, 0, 0.55),
       0 0 0 1px var(--hairline-strong);
   }
   .entity-picker__title {
     padding: 8px 14px 6px;
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--text-dim);
   }
   .entity-picker__list { display: flex; flex-direction: column; }
   .entity-picker__row {
     display: flex;
     align-items: center;
     gap: 10px;
     width: 100%;
     padding: 9px 14px;
     border: none;
     background: transparent;
     color: var(--text);
     text-align: left;
     cursor: pointer;
     font: inherit;
     font-size: 14px;
     line-height: 1.3;
   }
   .entity-picker__row:hover,
   .entity-picker__row:focus-visible,
   .entity-picker__row--focused {
     background: var(--accent-soft);
     outline: none;
   }
   .entity-picker__row--new {
     border-top: 1px solid var(--hairline);
     font-weight: 600;
     color: var(--heading);
   }
   .entity-picker__dot {
     width: 9px;
     height: 9px;
     border-radius: 50%;
     flex-shrink: 0;
     box-shadow: 0 0 0 1px var(--hairline);
   }
   .entity-picker__dot--character { background: var(--ec-character); }
   .entity-picker__dot--place { background: var(--ec-place); }
   .entity-picker__dot--note { background: var(--ec-note, #2dd4bf); }
   .entity-picker__dot--chapter { background: var(--ec-chapter); }
   .entity-picker__dot--custom { background: var(--ec-custom); }
   .entity-picker__name {
     flex: 1;
     min-width: 0;
     font-weight: 500;
     color: var(--text);
   }
   .entity-picker__detail {
     font-size: 11px;
     color: var(--text-dim);
     max-width: 120px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

   /* Stage 5 — membership / scope UI */
   .membership-chooser__lead { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
   .membership-chooser__options { display: flex; flex-direction: column; gap: 8px; }
   .membership-chooser__option {
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 4px 10px;
     padding: 10px 12px;
     border: 1px solid var(--hairline);
     border-radius: 8px;
     cursor: pointer;
   }
   .membership-chooser__option-title { font-weight: 500; font-size: 13px; }
   .membership-chooser__option-desc { grid-column: 2; font-size: 12px; color: var(--text-dim); }
   .membership-section__list { margin: 0 0 10px; padding-left: 18px; font-size: 13px; }
   .membership-section__empty { list-style: none; margin-left: -18px; color: var(--text-dim); }
   .membership-picker__select { width: 100%; margin-top: 8px; }
   .asset-outcome-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
   /* Very narrow — slim the side panels so the column still breathes. */
   @media (max-width: 920px) {
     :root {
       --panel-width: 280px;
     }
   }

   /* Shares */
   .shares-page__header,
   .shares-page__row {
     display: grid;
     grid-template-columns: 35% 6% 20% auto;
     gap: 12px;
   }
   .shares-page__header {
     padding: 0 0 10px;
     border-bottom: 1px solid var(--hairline);
     font-size: 11px;
     font-weight: 500;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--text-faint);
   }
   .shares-page__header .shares-page__cell--actions {
     justify-content: flex-start;
     text-align: left;
   }
   .shares-page__row {
     align-items: start;
     padding: 14px 0;
     border-bottom: 1px solid var(--hairline);
   }
   .shares-page__scope { font-weight: 600; color: var(--heading); }
   .shares-page__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 12px; }
   .shares-page__pen { color: var(--text-dim); }
   .shares-page__url {
     display: block;
     font-size: 11px;
     word-break: break-all;
     margin-bottom: 6px;
     color: var(--text-dim);
   }
   .shares-page__cell--actions { display: flex; gap: 6px; }
   .shares-page__row .shares-page__cell--actions {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
     align-items: start;
   }
   .shares-page__row .shares-page__cell--actions .btn {
     justify-content: center;
     padding-inline: 8px;
   }
   .user-view__hint { margin: 4px 0 0; font-size: 12px; color: var(--text-dim); font-weight: 400; }
   .user-view__warn { margin: 6px 0 0; font-size: 12px; color: var(--danger); font-weight: 500; }
   .status-chip--ok { background: #22c55e33; color: #16a34a; }

   /* Public share mode */
   .public-share.library {
     max-width: 1320px;
     margin: 0 auto;
     padding: 30px 34px 80px;
   }
   #app-root.public-share-scroll-root {
     overflow: hidden;
   }
   #app-root.public-share-scroll-root > .public-share.library {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 1320px;
     height: 100%;
     margin: 0 auto;
     padding: 30px 34px 0;
     box-sizing: border-box;
     overflow: hidden;
   }
   #app-root.public-share-scroll-root .public-share__head {
     flex-shrink: 0;
   }
   .public-share__head { margin-bottom: 28px; }
   .public-share__sub { color: var(--text-dim); margin: 6px 0 0; }
   .public-share__scroll-area {
     flex: 1;
     width: 100%;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
     padding-bottom: 100vh;
     -webkit-overflow-scrolling: touch;
   }
   .public-share__author-panel {
     margin-bottom: 40px;
     width: 100%;
   }
   .public-share__author-panel:last-child {
     margin-bottom: 0;
   }
   .public-share__author-layout {
     display: grid;
     grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
     gap: 28px 36px;
     width: 100%;
     align-items: start;
   }
   .public-share__author-shelves {
     min-width: 0;
   }
   .public-share__author-book-count {
     margin-top: -6px;
     font-size: 12px;
     color: var(--text-faint);
     font-weight: 500;
   }
   .public-share__author-profile {
     position: sticky;
     top: 0;
     display: flex;
     flex-direction: column;
     gap: 14px;
     align-self: start;
     transition: opacity 0.2s ease;
   }
   .public-share__book-card {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 0;
     border: none;
     background: transparent;
     cursor: pointer;
     text-align: left;
     color: inherit;
     font: inherit;
   }
   .public-share__author-name {
     margin: 0;
     font-size: 24px;
     font-weight: 700;
     letter-spacing: -0.02em;
     line-height: 1.15;
   }
   .public-share__author-details {
     margin: 0;
     font-size: 13px;
     line-height: 1.55;
     color: var(--text-dim);
     white-space: pre-wrap;
   }
   .public-share__author-publisher {
     margin: 0;
     font-size: 12px;
     color: var(--text-faint);
   }
   .public-share__author-shelves .shelf { margin-bottom: 28px; }
   .public-share__author-shelves .shelf:last-child { margin-bottom: 0; }
   @media (max-width: 820px) {
     #app-root.public-share-scroll-root > .public-share.library {
       padding: 22px 18px 0;
     }
     .public-share__author-layout {
       grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
       gap: 18px;
     }
   }

   /* Public share — hide auth chrome before module boot (public-share-pending) */
   html.public-share-pending #login-overlay,
   html.public-share-pending #account-view-stash,
   html.public-share-pending #user-menu,
   html.public-share-pending #header-messages-btn,
   html.public-share-pending #scrapbook-button,
   html.public-share-pending #header-actions-editor,
   html.public-share-pending #settings-panel {
     display: none !important;
   }

   /* Public share — hide auth/editor chrome; reader shell stays available */
   body.public-share-mode #login-overlay,
   body.public-share-mode #account-view-stash,
   body.public-share-mode #user-menu,
   body.public-share-mode #header-messages-btn,
   body.public-share-mode #scrapbook-button,
   body.public-share-mode #header-actions-editor,
   body.public-share-mode #settings-panel,
   body.public-share-mode #view-editor-host,
   body.public-share-mode #details-panel,
   body.public-share-mode #menu-editor-content,
   body.public-share-mode #menu-landing-content,
   body.public-share-mode #view-landing-host,
   body.public-share-mode #view-help-host {
     display: none !important;
   }


   .tiptap.ProseMirror.smart-editor {
    padding-top: 9px !important;
    margin-left: 45px !important;
  }

.plot-editor-mount .tiptap.ProseMirror.smart-editor {
  display: flex;
  flex-direction: column;
  gap: var(--plot-row-gap, 5px);
}


.tiptap.ProseMirror.smart-editor {
 
  min-height: calc(100vh - 162px);
}


.tiptap.ProseMirror.smart-editor:focus, .tiptap.ProseMirror.smart-editor:focus-visible, .tiptap.ProseMirror.smart-editor:focus-within {
  outline: none !important;
}


.fake-caret {
  display: inline-block;
  width: 0;
  height: 1em;
  margin-left: -1px;
  border-left: 1px solid var(--accent);
  vertical-align: text-bottom;
  pointer-events: none;
  animation: fake-caret-blink 1s steps(1) infinite;
}
@keyframes fake-caret-blink { 50% { opacity: 0; } }


/* PLOT drag widgete styling */
.plot-drag-spacer.plot-drag-spacer--drop.plot-drag-spacer--out-act.plot-drag-spacer--show-label.ProseMirror-widget {
  margin-left: 38px;
}


/* ============================================================
   Analysis applet (main view + details panel)
   ============================================================ */

.analysis-view {
  display: flex;
  flex-direction: column;

  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}

.analysis-view__head {
  flex: 0 0 auto;
}

.analysis-applet {
  display: flex;
  gap: 0;
  min-height: 0;
  flex: 1 1 auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius, 10px);
  overflow: hidden;
  background: var(--surface, var(--panel-bg, transparent));
}

.analysis-applet--page {
  min-height: 0;
}

.analysis-applet--panel {
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: 280px;
  height: 100%;
}

.analysis-chat {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.analysis-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hairline);
  padding: 7.5px 12px;
  flex: 0 0 auto;
}

.analysis-tabs__tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px 8px;
  cursor: pointer;
}

.analysis-tabs__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.chat-area-container {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-areas: "stack";
}

.chat-area-container > .chat-area-content {
  grid-area: stack;
  min-height: 0;
  height: 100%;
  display: none;
  flex-direction: column;
}

.chat-area-container[data-render-view="messaging"] > #chat-messaging-box,
.chat-area-container[data-render-view="messaging"] > #chat-messaging-box-panel {
  display: flex;
}

.chat-area-container[data-render-view="no-account"] > #chat-ui-message-box,
.chat-area-container[data-render-view="no-account"] > #chat-ui-message-box-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.chat-area-container[data-render-view="history"] > #chat-history-box-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.analysis-chat__composer {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--hairline);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface, var(--panel-bg, transparent));
}

.analysis-chat__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.analysis-chat__empty {
  color: var(--text-dim);
  font-size: 13px;
  margin: auto 0;
  text-align: center;
}

.analysis-chat__message {
  max-width: min(720px, 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analysis-chat__message--user {
  align-self: flex-end;
}

.analysis-chat__message--assistant {
  align-self: flex-start;
}

.analysis-chat__message-model {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.analysis-chat__message-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.analysis-chat__message-web {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.analysis-chat__message-body {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  word-break: break-word;
  font-size: 14px;
  line-height: 1.45;
}

.analysis-chat__message--user .analysis-chat__message-body {
  background: var(--accent-soft);
  border-color: transparent;
}

.analysis-chat__block + .analysis-chat__block {
  margin-top: 8px;
}

.analysis-chat__md {
  white-space: normal;
}

.analysis-chat__md > :first-child {
  margin-top: 0;
}

.analysis-chat__md > :last-child {
  margin-bottom: 0;
}

.analysis-chat__md p {
  margin: 0 0 0.65em;
}

.analysis-chat__md h1,
.analysis-chat__md h2,
.analysis-chat__md h3 {
  margin: 0.85em 0 0.4em;
  font-weight: 650;
  line-height: 1.25;
  color: var(--text);
}

.analysis-chat__md h1 { font-size: 1.2em; }
.analysis-chat__md h2 { font-size: 1.1em; }
.analysis-chat__md h3 { font-size: 1.05em; }

.analysis-chat__md ul,
.analysis-chat__md ol {
  margin: 0 0 0.65em;
  padding-left: 1.35em;
}

.analysis-chat__md li {
  margin: 0.2em 0;
}

.analysis-chat__md li + li {
  margin-top: 0.15em;
}

.analysis-chat__md strong {
  font-weight: 650;
}

.analysis-chat__md em {
  font-style: italic;
}

.analysis-chat__md a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.analysis-chat__md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.analysis-chat__md pre {
  margin: 0 0 0.65em;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.analysis-chat__md pre code {
  padding: 0;
  background: transparent;
  font-size: 0.85em;
}

.analysis-chat__md blockquote {
  margin: 0 0 0.65em;
  padding: 0.15em 0 0.15em 0.85em;
  border-left: 3px solid color-mix(in srgb, var(--text) 22%, transparent);
  color: var(--text-dim);
}

.analysis-chat__block--error,
.analysis-panel__error {
  margin: 0;
}

.analysis-chat__block--tool-call {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

.analysis-chat__block--tool-result {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

.analysis-chat__tool-result-summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-dim);
}

.analysis-chat__tool-result-summary::-webkit-details-marker {
  display: none;
}

.analysis-chat__tool-result-body {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-height: 12em;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 4px;
}

.analysis-chat__message-status {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.analysis-chat__streaming-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.analysis-chat__spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.analysis-chat__model-pills,
.analysis-chat__web-pills {
  gap: 4px;
}

.analysis-chat__model-pills .btn,
.analysis-chat__web-pills .btn {
  font-size: 12px;
  padding: 4px 10px;
}

.analysis-chat__composer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.analysis-tag-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tag-colour, var(--col-gray-200));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 18%, transparent);
}

.analysis-tag-swatch--neutral {
  background: color-mix(in srgb, var(--text) 18%, transparent);
}

.analysis-chat__options-pills {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

.analysis-tag-select {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}




/* Pill select — tinted with the active tag colour (Cursor mode-selector style). */
.analysis-tag-select__control {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  background-color: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 4px 24px 4px 12px;
  max-width: 160px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.analysis-tag-select__control--tinted {
  color: color-mix(in srgb, var(--tag-colour) 70%, var(--text));
  background-color: color-mix(in srgb, var(--tag-colour) 18%, transparent);
  border-color: color-mix(in srgb, var(--tag-colour) 45%, transparent);
}

.analysis-tag-select__control:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--text) 9%, transparent);
}

.analysis-tag-select__control--tinted:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--tag-colour) 28%, transparent);
}

.analysis-tag-select__control option {
  color: var(--text);
  background: var(--panel-bg, var(--surface));
  font-weight: 400;
}

.analysis-tag-select__control:disabled {
  opacity: 0.55;
  cursor: default;
}

.analysis-tag-select__control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.analysis-chat__input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.analysis-chat__input {
  flex: 1 1 auto;
  min-height: 52px;
  resize: vertical;
  max-height: 160px;
  padding: 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
}

.analysis-chat__no-account {
  max-width: 360px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.analysis-chat__no-account-title {
  font-size: 15px;
  font-weight: 600;
}

.analysis-chat__no-account-body {
  font-size: 13px;
  color: var(--text-dim);
}

.analysis-history {
  flex: 0 0 240px;
  width: 240px;
  border-left: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--text) 2.5%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.analysis-history--panel {
  flex: 1 1 auto;
  width: auto;
  border-left: none;
  background: transparent;
}

.analysis-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  flex: 0 0 auto;
}

.analysis-history__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.analysis-history__empty {
  padding: 12px;
  margin: 0;
}

.analysis-history__group {
  padding: 6px 0;
}

.analysis-history__group-head {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  text-align: left;
}

.analysis-history__group-head:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.analysis-history__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 4px;
}

.analysis-history__item {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  border-radius: 6px;
  color: var(--text);
  padding: 2px 4px 2px 6px;
}

.analysis-history__item:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.analysis-history__item.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}

.analysis-history__item-open {
  appearance: none;
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 6px 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analysis-history__item-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  opacity: 0.55;
}

.analysis-history__item:hover .analysis-history__item-delete,
.analysis-history__item:focus-within .analysis-history__item-delete {
  opacity: 1;
}

.analysis-proposal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.analysis-proposal--pending {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline-strong));
}

.analysis-proposal--rejected {
  opacity: 0.78;
}

.analysis-proposal__type {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.analysis-proposal__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.analysis-proposal__note-title {
  font-size: 13px;
  font-weight: 600;
}

.analysis-proposal__note-body {
  font-size: 13px;
  line-height: 1.45;
  max-height: 8.7em;
  overflow: hidden;
  white-space: pre-wrap;
  color: var(--text-dim);
}

.analysis-proposal__note-tags {
  margin-top: 2px;
}

.analysis-proposal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.analysis-proposal__terminal {
  font-size: 12px;
  font-style: italic;
  color: var(--text-dim);
  text-align: right;
}

.analysis-proposal__diff {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.analysis-proposal__diff-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.analysis-proposal__diff-field {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.analysis-proposal__diff-values {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}

.analysis-proposal__diff-old {
  color: var(--text-dim);
  text-decoration: line-through;
  opacity: 0.85;
  white-space: pre-wrap;
  word-break: break-word;
}

.analysis-proposal__diff-arrow {
  color: var(--text-dim);
  flex-shrink: 0;
}

.analysis-proposal__diff-new {
  color: var(--text);
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
}

.analysis-created-ref {
  appearance: none;
  border: 1px solid var(--hairline-strong);
  background: color-mix(in srgb, var(--col-green-200) 16%, transparent);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.analysis-created-ref:hover {
  background: color-mix(in srgb, var(--col-green-200) 26%, transparent);
}

.details-panel .analysis-applet--panel .analysis-tabs {
  padding-left: 0;
  padding-right: 0;
}

.details-panel .analysis-chat__messages {
  padding: 12px 0;
}

.details-panel .analysis-chat__composer {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 900px) {
  .analysis-applet--page {
    flex-direction: column;
    min-height: 0;
  }
  .analysis-history {
    flex: 0 0 auto;
    width: auto;
    border-left: none;
    border-top: 1px solid var(--hairline);
    max-height: 220px;
  }
}


/* editor button*/
button.btn.btn--primary open-editor-button {
  border: 1px solid #aed6b5;
  background: #e5fbee;
}