/* Ghost Margins interface controls. Loaded after the legacy page overrides.
   Keep this layer scoped to controls within main; the masthead, cards, and
   reader/editor prose retain their existing styles. */

body {
    --ui-field: #fffdf9;
    --ui-ink: #29262b;
    --ui-border: #a79ca0;
    --ui-soft: #eee9e7;
    --ui-primary: #392d39;
    --ui-on-primary: #fffaf4;
    --ui-focus: #865b79;
    --ui-danger: #873f49;
}

body:is(.skin-burnish, .skin-autumn):not(.dark-mode) {
    --ui-field: #fff8ed; --ui-ink: #392719; --ui-border: #ad8969;
    --ui-soft: #eee0cd; --ui-primary: #624129; --ui-on-primary: #fff6e9;
    --ui-focus: #a56e3c; --ui-danger: #8a4142;
}
body:is(.skin-stormglass, .skin-blue):not(.dark-mode) {
    --ui-field: #f5f9fa; --ui-ink: #1e303b; --ui-border: #829ba9;
    --ui-soft: #e3ecf0; --ui-primary: #304c5b; --ui-on-primary: #f8fbfc;
    --ui-focus: #527e97; --ui-danger: #88494d;
}
body:is(.skin-fernwood, .skin-matcha):not(.dark-mode) {
    --ui-field: #f8faf3; --ui-ink: #293a2c; --ui-border: #91a08a;
    --ui-soft: #e8ede2; --ui-primary: #405a44; --ui-on-primary: #f8faf3;
    --ui-focus: #658269; --ui-danger: #8a4945;
}
body:is(.skin-night-bloom, .skin-plum, .skin-cotton-candy):not(.dark-mode) {
    --ui-field: #fff9fc; --ui-ink: #432d3a; --ui-border: #bb9baa;
    --ui-soft: #f0e3eb; --ui-primary: #713e57; --ui-on-primary: #fff8fb;
    --ui-focus: #a65d83; --ui-danger: #8b3e48;
}
body.dark-mode, body.skin-after-hours, body.skin-dark-academia {
    --ui-field: #302b32; --ui-ink: #f2eae6; --ui-border: #847884;
    --ui-soft: #38313a; --ui-primary: #dbc3d1; --ui-on-primary: #302431;
    --ui-focus: #e2b9cc; --ui-danger: #e5a2aa;
}
body.skin-after-hours {
    --ui-field: #26232c; --ui-ink: #f2ebe3; --ui-border: #716a77;
    --ui-soft: #34303b; --ui-primary: #d9bd91; --ui-on-primary: #282019;
}
body.skin-dark-academia {
    --ui-field: #f0e6d6; --ui-ink: #392a22; --ui-border: #9d856b;
    --ui-soft: #e1d3bd; --ui-primary: #68503c; --ui-on-primary: #fff4e4;
    --ui-focus: #b89b62; --ui-danger: #a04745;
}
body.skin-burnish.dark-mode {
    --ui-field: #30241e; --ui-ink: #f1e5d6; --ui-border: #896d58;
    --ui-soft: #3e3028; --ui-primary: #dfbc8a; --ui-on-primary: #2c211b;
    --ui-focus: #dfbc8a;
}
body:is(.skin-stormglass, .skin-blue).dark-mode {
    --ui-field: #22333d; --ui-ink: #edf5f7; --ui-border: #7694a5;
    --ui-soft: #2c414c; --ui-primary: #b5d0dd; --ui-on-primary: #20303a;
    --ui-focus: #b5d0dd;
}
body:is(.skin-fernwood, .skin-matcha).dark-mode {
    --ui-field: #26362a; --ui-ink: #eef5eb; --ui-border: #839a7e;
    --ui-soft: #344637; --ui-primary: #c0d4b7; --ui-on-primary: #273628;
    --ui-focus: #c0d4b7;
}
body:is(.skin-night-bloom, .skin-plum, .skin-cotton-candy).dark-mode {
    --ui-field: #382b37; --ui-ink: #fbebf2; --ui-border: #a17d94;
    --ui-soft: #4a3446; --ui-primary: #ebbed3; --ui-on-primary: #372435;
    --ui-focus: #ebbed3;
}

/* Text fields, search, dates, numbers and selects share one clear surface. */
/* Export dialogs live outside <main>, so they need the same field colors. */
body #crosspost-export-dialog :is(input, select, textarea),
body #crosspost-export-dialog :is(input, select, textarea):is(:focus, :active) {
    background: var(--ui-field) !important;
    color: var(--ui-ink) !important;
    -webkit-text-fill-color: var(--ui-ink) !important;
    caret-color: var(--ui-ink) !important;
    border-color: var(--ui-border) !important;
    color-scheme: light;
}
body.dark-mode #crosspost-export-dialog :is(input, select, textarea) { color-scheme: dark; }
body #crosspost-export-dialog :is(input, textarea)::placeholder {
    color: var(--ui-ink) !important; -webkit-text-fill-color: currentColor !important; opacity: .72;
}
body #crosspost-export-dialog :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--ui-focus) !important; outline-offset: 2px;
}
body #crosspost-export-dialog :is(input, textarea)::selection {
    background: var(--ui-primary); color: var(--ui-on-primary);
    -webkit-text-fill-color: var(--ui-on-primary);
}
body main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
    box-sizing: border-box !important;
    min-width: 0;
    min-height: 40px;
    padding: 9px 12px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    background-color: var(--ui-field) !important;
    color: var(--ui-ink) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 3%);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
/* Older theme rules combine IDs and !important. These harmless exclusions
   give the shared control colors enough specificity to win that cascade. */
body main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea):not(#theme-toggle):not(#logout-button) {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-field) !important;
    color: var(--ui-ink) !important;
    /* Legacy themes can set text-fill independently of color, hiding typed
       text against the shared field surface (especially Fernwood dark). */
    -webkit-text-fill-color: currentColor !important;
    caret-color: currentColor !important;
}
body main textarea { min-height: 90px; resize: vertical; }
body main :is(input, textarea):not(#theme-toggle):not(#logout-button)::placeholder {
    color: var(--ui-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: .72 !important;
}
body main select { padding-right: 32px !important; cursor: pointer; }
body main input[type="search"] { -webkit-appearance: none; appearance: none; }
body main input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
body main input[type="file"] { max-width: 100%; font-family: var(--font-ui); }
body main input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 12px; border: 1px solid var(--ui-border);
    border-radius: 7px; background: var(--ui-soft); color: var(--ui-ink);
    font: 600 .9rem var(--font-ui); cursor: pointer;
}

/* Buttons and button-like links keep existing widths and flex arrangements. */
body main :is(button, .button-link, a[role="button"], input[type="submit"], input[type="button"]) {
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-family: var(--font-ui) !important;
    font-size: .9rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: .005em;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease,
        color .16s ease, box-shadow .16s ease, transform .16s ease;
    cursor: pointer;
}
body main button:not(.author-library-card button, .author-social-summary button) {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-soft) !important;
    color: var(--ui-ink) !important;
}
body main button:not(#theme-toggle):not(#logout-button):not(#account-nav-link):not(.author-library-card button, .author-social-summary button) {
    border-color: var(--ui-action-border, var(--ui-border)) !important;
    background: var(--ui-action-bg, var(--ui-soft)) !important;
    color: var(--ui-action-ink, var(--ui-ink)) !important;
}
body main :is(button, .button-link, a[role="button"]):not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 2px 7px rgb(0 0 0 / 12%) !important;
    transform: translateY(-1px);
}
body main :is(button, .button-link):active { transform: translateY(0); }
body main :is(button, input, select, textarea, a, summary):focus-visible,
body main label:has(> input:focus-visible) {
    outline: 2px solid var(--ui-focus) !important;
    outline-offset: 2px !important;
}
body main :is(button, input, select, textarea):disabled,
body main :is(button, a)[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Coherent secondary and primary actions across otherwise separate pages. */
body main :is(.button-link, a[role="button"]) {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ui-soft) !important; border: 1px solid var(--ui-border) !important;
    color: var(--ui-ink) !important;
}
body main :is(.form-actions, .edit-work-actions, .chapter-actions, .dashboard-actions,
    .dashboard-work-controls, .browse-filter-actions, .browse-discovery-page,
    .catalogue-search-page, .settings, .published-social-actions,
    .request-form-actions) button:not([class*="tab"]) {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-soft) !important;
    color: var(--ui-ink) !important;
}
body main.browse-discovery-page button,
body main.catalogue-search-page button,
body main .settings button {
    border-color: var(--ui-border) !important;
    background-color: var(--ui-soft) !important;
    color: var(--ui-ink) !important;
}
body main :is(#fandom-search-button, #apply-filters,
    #save-reader-name, #save-favorite-tags, #save-exclusions,
    #publish-chapter, #publish-edit-chapter, #publish-preview-chapter,
    #publish-work-manager-button, #save-work-draft, #add-chapter-button,
    #insert-text-conversation-block, .primary-button, .start-reading-button) {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}
body main #browse-quick-search-form button,
body main #fandom-search-button, body main #apply-filters,
body main .home-search-form button,
body main #login-form button[type="submit"],
body main #register-form button[type="submit"] {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}
body main :is(#fandom-search-button, #apply-filters, #save-reader-name,
    #save-favorite-tags, #save-exclusions, #publish-chapter,
    #publish-edit-chapter, #publish-preview-chapter,
    #publish-work-manager-button, #save-work-draft, #add-chapter-button,
    #insert-text-conversation-block, .primary-button, .start-reading-button),
body main :is(#browse-quick-search-form, .home-search-form,
    #login-form, #register-form) button[type="submit"] {
    --ui-action-bg: var(--ui-primary);
    --ui-action-border: var(--ui-primary);
    --ui-action-ink: var(--ui-on-primary);
}
body main :is(#delete-account-button, #delete-edit-chapter-button,
    #report-work-button, .delete-work-button, .delete-chapter-button,
    .delete-work-chapter-button, .delete-button) {
    border-color: var(--ui-danger) !important;
    background: transparent !important;
    color: var(--ui-danger) !important;
}
body main :is(#delete-account-button, #delete-edit-chapter-button,
    #report-work-button, .delete-work-button, .delete-chapter-button,
    .delete-work-chapter-button, .delete-button) {
    --ui-action-bg: transparent;
    --ui-action-border: var(--ui-danger);
    --ui-action-ink: var(--ui-danger);
}

/* Tabs and selectable chips are controls, not part of the library-card art. */
body main :is(.my-library-tab, .author-content-tab, .request-view-tab,
    .theme-options button) {
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    background: var(--ui-soft) !important;
    color: var(--ui-ink) !important;
    text-decoration: none !important;
}
body main :is(.my-library-tab, .author-content-tab, .request-view-tab,
    .theme-options button).is-active,
body main .theme-options button[aria-pressed="true"] {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
}
body main button:is(.is-active, [aria-pressed="true"]),
body main .theme-options button.active {
    --ui-action-bg: var(--ui-primary);
    --ui-action-border: var(--ui-primary);
    --ui-action-ink: var(--ui-on-primary);
}
/* My Library and Settings have unusually specific inline !important rules. */
body main.my-library-page .my-library-tabs .my-library-tab,
body main .settings .theme-options button {
    border: 1px solid var(--ui-border) !important;
    border-radius: 8px !important;
    background: var(--ui-soft) !important;
    color: var(--ui-ink) !important;
}
body main.my-library-page .my-library-tabs .my-library-tab.is-active,
body main .settings .theme-options button:is(.is-active, .active, [aria-pressed="true"]) {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}
body main :is(.browse-filter-core, .advanced-filter-content) label:has(input:checked) {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}
body main .filters .browse-filter-core fieldset label:has(input:checked),
body main .filters .advanced-filter-content .quick-filter-options label:has(input:checked) {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-on-primary) !important;
}
body main .filters .browse-filter-core fieldset label,
body main .filters .advanced-filter-content .quick-filter-options label {
    font-family: var(--font-ui) !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
}
body main .filters .browse-warning-filter .quick-filter-options label:has(input:checked) {
    background: color-mix(in srgb, var(--ui-primary) 18%, transparent) !important;
    border: 0 !important;
    color: inherit !important;
}
body main :is(.browse-filter-core, .advanced-filter-content) label:has(input:focus-visible) {
    outline: 2px solid var(--ui-focus) !important; outline-offset: 2px !important;
}
body main :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--ui-primary);
}
body main :is(.chapter-toolbar, .scene-break-picker) button {
    border-color: var(--ui-border) !important;
    background: var(--ui-soft) !important;
    color: var(--ui-ink) !important;
}

/* Integrated search pairs keep their join; on phones they stack naturally. */
body main .home-search-form input { border-radius: 8px 0 0 8px !important; }
body main .home-search-form button { border-radius: 0 8px 8px 0 !important; }
@media (max-width: 700px) {
    body main .home-search-form :is(input, button) { border-radius: 8px !important; }
    body main :is(input, select, textarea) { max-width: 100%; }
    body main :is(.tag-input-row, .browse-quick-search form) input { flex: 1 1 auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    body main :is(button, .button-link, a[role="button"], input, select, textarea) {
        transition: none !important;
    }
    body main :is(button, .button-link, a[role="button"]):hover { transform: none; }
}

/* Social counts are text inside the vintage Library Card, not tab buttons. */
body main .author-social-summary button {
    padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; color: inherit !important;
    font: inherit !important; box-shadow: none !important; transform: none !important;
}

/* Browse shelves are plain catalogue links, not selectable tabs. */
body main.browse-discovery-page .browse-shelf-card .browse-link-list a.browse-discovery-filter {
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    font-family: var(--font-ui) !important;
    font-size: .92rem !important;
    font-weight: 550 !important;
}
body main.browse-discovery-page .browse-shelf-card .browse-link-list a.browse-discovery-filter:is(:hover, :focus-visible, .is-active) {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Utility type uses the same face as the header and form controls. The
   headings, work titles, Library Card, and chapter prose remain serif. */
body main.my-library-page :is(.my-library-tabs, .bookmark-tools,
    .bookmark-collection-filter-row, .bookmark-organize-row,
    .bookmark-collection-manager, .saved-library-actions,
    .read-later-actions, .dashboard-following-row, .saved-library-meta,
    .bookmark-private-note) {
    font-family: var(--font-ui) !important;
}
body main.my-library-page :is(button, .bookmark-read, .following-remove) {
    font-family: var(--font-ui) !important;
}

/* The old theme button rule paints follower/following counts as purple blocks.
   They are text links inside the Library Card. */
body main .author-library-card .author-social-summary button:not(#theme-toggle):not(#logout-button) {
    display: inline !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    box-shadow: none !important;
    transform: none !important;
}