/*
 * tomeComponents.css
 * Shared UI component classes for the "Tome" aesthetic:
 *   - Deckle parchment panels (.tome-parchment-card, .tome-parchment-sheet)
 *   - Flat stitched leather buttons (.tome-button-leather, .button-leather)
 *   - Antique text navigation links (.tome-back-link, .tome-back-arrow)
 *   - Decorative flourishes (.tome-flourish)
 *
 * Uses design tokens and colours from tomeTheme.css.
 * All vector borders use /css/parchment-border.svg (sandboxed SVG).
 */

/* ==========================================================================
   1. Deckle Parchment Panels
   ========================================================================== */

/* Compact parchment card (16px deckle border)
   Best suited for: Sign-in / auth cards, modal dialogs, popup overlays, small tool panels. */
.tome-parchment-card {
    position: relative;
    padding: 24px 20px 20px;
    border: 16px solid transparent;
    border-image-source: var(--tome-parchment-picture);
    border-image-slice: 44 fill;
    border-image-width: 16px;
    border-image-repeat: round;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: drop-shadow(0 8px 24px rgba(26, 16, 7, 0.38));
    color: var(--tome-ink-colour);
    outline: 1px solid rgba(195, 165, 110, 0.38); /* Inner gold rule */
    outline-offset: -10px;
}

/* Wide parchment sheet (24px deckle border)
   Best suited for: Legal reading pages, full-width document views, campaign journals. */
.tome-parchment-sheet {
    position: relative;
    padding: 36px 44px 40px;
    border: 24px solid transparent;
    border-image-source: var(--tome-parchment-picture);
    border-image-slice: 44 fill;
    border-image-width: 24px;
    border-image-repeat: round;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    filter: drop-shadow(0 8px 30px rgba(26, 16, 7, 0.40));
    color: var(--tome-ink-colour);
    outline: 1px solid rgba(195, 165, 110, 0.35); /* Inner gold rule */
    outline-offset: -14px;
}

/* On mobile phones, remove border-image and heavy filters to maximise reading width */
@media (max-width: 600px) {
    .tome-parchment-card,
    .tome-parchment-sheet {
        border-width: 0;
        filter: none;
        outline: none;
        border-image-source: none;
    }
}

/* ==========================================================================
   2. Flat Stitched Leather Buttons
   ========================================================================== */

/* Flat dark brown leather with inset dashed waxed thread border and optical centering */
.tome-button-leather,
.button-leather,
.button.button-leather {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px 8px; /* Balanced optical center for Duality font */
    border: 1px solid var(--tome-leather-dark-colour);
    border-radius: 4px;
    background-color: var(--tome-leather-colour);
    color: var(--tome-on-leather-colour) !important;
    font-family: "Duality", Georgia, serif;
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(45, 30, 15, 0.25);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

/* Stitched waxed-thread inner perimeter */
.tome-button-leather::after,
.button-leather::after,
.button.button-leather::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(228, 202, 148, 0.65);
    border-radius: 2px;
    pointer-events: none;
}

/* Leather button hover: warm burnished highlight */
.tome-button-leather:hover,
.button-leather:hover,
.button.button-leather:hover {
    background-color: var(--tome-leather-hover-colour);
    color: var(--tome-on-leather-colour) !important;
    box-shadow: 0 3px 6px rgba(45, 30, 15, 0.35);
    text-decoration: none !important;
}

/* Leather button active / pressed: sunken tactile shadow */
.tome-button-leather:active,
.button-leather:active,
.button.button-leather:active {
    background-color: var(--tome-leather-dark-colour);
    box-shadow: 0 1px 2px rgba(45, 30, 15, 0.20);
    transform: translateY(1px);
    text-decoration: none !important;
}

/* Leather button disabled */
.tome-button-leather:disabled,
.button-leather:disabled,
.button.button-leather:disabled {
    opacity: 0.6;
    cursor: wait;
    box-shadow: none;
    transform: none;
}

/* Red-ink keyboard focus outline (WCAG 2.4.7) */
.tome-button-leather:focus-visible,
.button-leather:focus-visible,
.button.button-leather:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 3px;
}

/* Ensure child text nodes and spans never get underlined */
.tome-button-leather *,
.button-leather *,
.button.button-leather * {
    text-decoration: none !important;
}

/* Secondary companion button: light parchment stitched with primary brown thread (twin opposite of leather) */
.tome-button-secondary,
.button-secondary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px 7px;
    border: 1px solid var(--tome-ornament-colour);
    border-radius: 4px;
    background-color: var(--tome-parchment-light-colour);
    color: var(--tome-ink-colour);
    font-family: "Duality", Georgia, serif;
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 3px rgba(60, 40, 10, 0.10);
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

/* Dashed primary brown stitch effect (companion to primary leather button's light stitch) */
.tome-button-secondary::after,
.button-secondary::after {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px dashed var(--tome-leather-colour);
    border-radius: 2px;
    pointer-events: none;
}

.tome-button-secondary:hover,
.button-secondary:hover {
    background-color: var(--tome-highlight-colour);
    border-color: var(--tome-brown-colour);
    text-decoration: none !important;
}

.tome-button-secondary:active,
.button-secondary:active {
    transform: translateY(1px);
    box-shadow: 0 1px 1px rgba(60, 40, 10, 0.10);
    text-decoration: none !important;
}

.tome-button-secondary:focus-visible,
.button-secondary:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 3px;
}

/* Ensure child text nodes and spans never get underlined */
.tome-button-secondary *,
.button-secondary * {
    text-decoration: none !important;
}

/* ==========================================================================
   Small Action Buttons: Default System Font for Crystal-Clear Readability
   ========================================================================== */

/* Small / compact action buttons across cards, tables, toolbars, and the game table
   switch to the system UI font to avoid the illegibility of decorative font at small sizes */
.button-small,
.button-sm,
.tome-small,
.tome-controls .button,
.tome-controls button,
html[data-mode="game"] .button:not(.button-icon-only),
html[data-mode="game"] button:not(.button-icon-only),
html[data-mode="notes"] .button:not(.button-icon-only),
html[data-mode="notes"] button:not(.button-icon-only),
.game-top .button,
.game-top button,
.game-top-row .button,
.game-bar .button,
.game-bar-exit .button,
.game-bar-session .button,
.notes-panel-toggles .button,
.notes-report-button,
.notes-sidebar .button,
.notes-plus-button,
.notes-menu-button,
.board-workspace .button,
.board-workspace button,
.board-maps-buttons .button,
.board-maps-new,
.board-maps-button,
.board-grid-tools .button,
.board-toolbar .button,
.board-zoom-button,
.board-ruler-button,
.dice-tray .button,
.dice-tray-who-button,
.dice-tray-icon,
.dice-tray-send,
.token-buttons .button,
.token-sidebar .button,
.token-layer-button,
.token-settings-panel .button,
.token-click-menu-button,
.token-settings-dialog-close,
.scenery .button,
.scenery button,
.scenery-new,
.scenery-toolbar .button,
.colour-picker .button,
.treasury .button,
.treasury button,
.treasury-viewing .button,
.character-sheet .button,
.creature-sheet .button,
.character-roster .button,
.managed-user .button,
.report-post-actions .button,
.report-resolve-form .button,
.campaign-card-actions .button,
.campaign-member .button,
.game-clock .button,
.game-clock-quick .button {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 0.85rem;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: normal;
}

/* Small / compact action buttons: omit stitching as the interior area is too compact */
.button-small::after,
.button-sm::after,
.tome-small::after,
.tome-controls .button::after,
.tome-controls button::after,
html[data-mode="game"] .button:not(.button-icon-only)::after,
html[data-mode="game"] button:not(.button-icon-only)::after,
html[data-mode="notes"] .button:not(.button-icon-only)::after,
html[data-mode="notes"] button:not(.button-icon-only)::after,
.game-top .button::after,
.game-top button::after,
.game-top-row .button::after,
.game-bar .button::after,
.game-bar-exit .button::after,
.game-bar-session .button::after,
.notes-panel-toggles .button::after,
.notes-report-button::after,
.notes-sidebar .button::after,
.notes-plus-button::after,
.notes-menu-button::after,
.board-workspace .button::after,
.board-workspace button::after,
.board-maps-buttons .button::after,
.board-maps-new::after,
.board-maps-button::after,
.board-grid-tools .button::after,
.board-toolbar .button::after,
.board-zoom-button::after,
.board-ruler-button::after,
.dice-tray .button::after,
.dice-tray-who-button::after,
.dice-tray-icon::after,
.dice-tray-send::after,
.token-buttons .button::after,
.token-sidebar .button::after,
.token-layer-button::after,
.token-settings-panel .button::after,
.token-click-menu-button::after,
.token-settings-dialog-close::after,
.scenery .button::after,
.scenery button::after,
.scenery-new::after,
.scenery-toolbar .button::after,
.colour-picker .button::after,
.treasury .button::after,
.treasury button::after,
.treasury-viewing .button::after,
.character-sheet .button::after,
.creature-sheet .button::after,
.character-roster .button::after,
.managed-user .button::after,
.report-post-actions .button::after,
.report-resolve-form .button::after,
.campaign-card-actions .button::after,
.campaign-member .button::after,
.forum-owner-bar .button::after,
.forum-view-switch .button::after,
.forum-owner-action .button::after,
.forum-post .button::after,
.token-pop-up-handle .button::after,
.game-clock-quick .button::after,
.game-clock-change::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   Icon-Only Action Buttons & Medieval Vector Icons
   ========================================================================== */

.tome-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    pointer-events: none;
}

/* Large stitched icon buttons (e.g. campaign notes and edit quill) */
.button-icon-only {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
}

/* ==========================================================================
   3. Antique Text Navigation Links
   ========================================================================== */

/* Antique back link: clean brown ink in Duality font with subtle lift and no underline */
.tome-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--tome-brown-colour) !important;
    font-family: "Duality", Georgia, serif;
    font-size: 1.35rem;
    font-weight: normal;
    letter-spacing: -0.013em;
    word-spacing: 0.163em;
    line-height: 1;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.tome-back-link:hover {
    color: var(--tome-ink-colour) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.tome-back-link:active {
    color: var(--tome-ink-colour) !important;
    text-decoration: none !important;
    transform: translateY(1px);
}

.tome-back-link:focus-visible {
    outline: 2px solid var(--tome-red-ink-colour);
    outline-offset: 4px;
    border-radius: 2px;
    text-decoration: none !important;
}

/* Arrow symbol using Duality/serif font */
.tome-back-arrow {
    font-family: "Duality", Georgia, serif;
    font-size: inherit;
    line-height: 1;
}

/* Strict underline prevention on all descendant elements */
.tome-back-link,
.tome-back-link *,
.tome-back-link:hover *,
.tome-back-link:active *,
.tome-back-link:focus-visible * {
    text-decoration: none !important;
}

/* ==========================================================================
   4. Flourishes and Ornaments
   ========================================================================== */

/* The ✦ flourish under titles and headings (aria-hidden in markup) */
.tome-flourish {
    margin: 4px 0 16px;
    color: var(--tome-ornament-colour);
    text-align: center;
    user-select: none;
}