/* ============================================================
   cheatsheet_ref.css - Player + GM Cheatsheet Card Grid
   Author:   Steven J. Cook
   Date:     2026-05-04
   Time:     03:48 UTC
   Model:    Claude Opus 4.7
   Project:  Abyssal Engine Local Clone
   Chat:     Abyssal Engine Deploy Debug + DEV Theme
   Revision: 1.0.4

   v1.0.4 (DEV): Fixed page divider not breaking the grid row.
     The .gcr-page-divider rule had grid-column: 1 / -1 so its
     "Page N" header spanned the full row in the GM cog. The
     same selector was never extended to .pcr- or .pgr-, so on
     the Player Cheatsheet and Player\'s Guide cogs the page
     divider was rendering as a normal grid cell wedged between
     cards instead of forcing a new row. Extended the selector
     to the full triplet so all three card-grid cogs lay out
     their page sections correctly.

   v1.0.3 (DEV): Extended every .pcr- / .gcr- selector with a
     matching .pgr- variant so the new Player's Guide cog
     (player_guide_ref.js) can share the same card-grid
     styling without code duplication. Three sibling cogs,
     one stylesheet.

   v1.0.2 (DEV): Added .pcr-card-icon img / .pcr-detail-icon img
     and matching .gcr- selectors with width/height/object-fit
     so custom <img> icons (e.g. Kitchen_Knife_ICON.png on the
     Harvesting card) render at the correct size inside the
     icon containers. Mirrors the sizing rules in
     newplayer_ref.css for the Crossed Swords icon.

   v1.0.1 (DEV): Renamed delivery target from
     webapps/development/abyssal-engine/css/cheatsheet_ref.css
   to
     localpatches/abyssal-engine__css__cheatsheet_ref.css
   so deployLocal step 5 actually copies it into the running
   webapp/ tree. The webapps/development tree is for files that
   get captured into devpatches; never deployed directly.

   Shared styling for both the Player Cheatsheet
   (player_cheatsheet_ref.js) and GM Cheatsheet
   (gm_cheatsheet_ref.js) card-grid views. Mirrors the visual
   language of newplayer_ref.css with two prefixes (.pcr- for
   player, .gcr- for GM) so the views can live side by side
   without collision.
   ============================================================ */

.pcr-wrapper, .gcr-wrapper, .pgr-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1em 1.5em 3em;
    color: var(--text-default, #dcddde);
}

.pcr-header, .gcr-header, .pgr-header {
    text-align: center;
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--border-thin, rgba(255,255,255,0.08));
}

.pcr-header h2, .gcr-header h2, .pgr-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    margin: 0 0 0.4em;
    color: var(--accent-amber, #c9aa71);
    letter-spacing: 0.04em;
}

.pcr-subtitle, .gcr-subtitle, .pgr-subtitle {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05em;
    color: var(--text-muted, #b9bbbe);
    font-style: italic;
    margin: 0 0 1em;
}

.pcr-search-wrap, .gcr-search-wrap, .pgr-search-wrap {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.pcr-search-icon, .gcr-search-icon, .pgr-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint, #72767d);
    pointer-events: none;
    font-size: 0.95em;
}

.pcr-search, .gcr-search, .pgr-search {
    width: 100%;
    padding: 10px 14px 10px 40px;
    background: var(--bg-input, #1e1f22);
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    border-radius: 6px;
    color: var(--text-default, #dcddde);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pcr-search::placeholder, .gcr-search::placeholder, .pgr-search::placeholder {
    color: var(--text-faint, #72767d);
    font-style: italic;
}

.pcr-search:focus, .gcr-search:focus, .pgr-search:focus {
    outline: none;
    border-color: var(--accent-amber, #c9aa71);
    box-shadow: 0 0 0 2px rgba(201, 170, 113, 0.15);
}

.pcr-card-grid, .gcr-card-grid, .pgr-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1em;
    margin-top: 1em;
}

.pcr-card, .gcr-card, .pgr-card {
    display: flex;
    align-items: center;
    gap: 0.85em;
    padding: 1em 1.1em;
    background: var(--bg-card, #2b2d31);
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.pcr-card:hover, .gcr-card:hover, .pgr-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-amber, #c9aa71);
    background: var(--bg-card-hover, #313338);
}

.pcr-card-icon, .gcr-card-icon, .pgr-card-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(201, 170, 113, 0.1);
    color: var(--accent-amber, #c9aa71);
    font-size: 1.2em;
}

.pcr-card-icon img, .gcr-card-icon img, .pgr-card-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.pcr-card-body, .gcr-card-body, .pgr-card-body {
    flex: 1;
    min-width: 0;
}

.pcr-card-title, .gcr-card-title, .pgr-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 0.25em;
    color: var(--text-bright, #f2f3f5);
    letter-spacing: 0.02em;
}

.pcr-card-tagline, .gcr-card-tagline, .pgr-card-tagline {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.9em;
    color: var(--text-muted, #b9bbbe);
    margin: 0;
    line-height: 1.35;
}

.pcr-card-arrow, .gcr-card-arrow, .pgr-card-arrow {
    color: var(--text-faint, #72767d);
    font-size: 0.85em;
    flex-shrink: 0;
}

.pcr-page-divider, .gcr-page-divider, .pgr-page-divider {
    grid-column: 1 / -1;
    text-align: center;
    margin: 1.5em 0 0.5em;
    padding: 0.6em 1em;
    background: rgba(201, 170, 113, 0.08);
    border-left: 3px solid var(--accent-amber, #c9aa71);
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: var(--accent-amber, #c9aa71);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pcr-modal-overlay, .gcr-modal-overlay, .pgr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em 1em;
    overflow-y: auto;
}

.pcr-modal, .gcr-modal, .pgr-modal {
    background: var(--bg-modal, #2b2d31);
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    border-radius: 10px;
    max-width: 920px;
    width: 100%;
    max-height: calc(100vh - 4em);
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.pcr-modal-header, .gcr-modal-header, .pgr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1em 1.5em;
    border-bottom: 1px solid var(--border-thin, rgba(255,255,255,0.08));
}

.pcr-modal-title-wrap, .gcr-modal-title-wrap, .pgr-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.7em;
    flex: 1;
    min-width: 0;
}

.pcr-detail-icon, .gcr-detail-icon, .pgr-detail-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(201, 170, 113, 0.12);
    color: var(--accent-amber, #c9aa71);
    font-size: 1.1em;
    flex-shrink: 0;
}

.pcr-detail-icon img, .gcr-detail-icon img, .pgr-detail-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.pcr-modal-header h2, .gcr-modal-header h2, .pgr-modal-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.3em;
    margin: 0;
    color: var(--text-bright, #f2f3f5);
}

.pcr-modal-close, .gcr-modal-close, .pgr-modal-close {
    background: transparent;
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    color: var(--text-muted, #b9bbbe);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.pcr-modal-close:hover, .gcr-modal-close:hover, .pgr-modal-close:hover {
    border-color: var(--accent-red, #cc3340);
    color: var(--accent-red, #cc3340);
}

.pcr-modal-body, .gcr-modal-body, .pgr-modal-body {
    padding: 1.5em;
    overflow-y: auto;
    font-family: 'EB Garamond', Georgia, serif;
    line-height: 1.55;
    color: var(--text-default, #dcddde);
    flex: 1;
}

body.pcr-modal-open, body.gcr-modal-open, body.pgr-modal-open {
    overflow: hidden;
}

.pcr-detail-content p, .gcr-detail-content p, .pgr-detail-content p {
    margin: 0 0 0.85em;
}

.pcr-detail-content h3, .gcr-detail-content h3, .pgr-detail-content h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.1em;
    color: var(--accent-amber, #c9aa71);
    margin: 1.2em 0 0.5em;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(201, 170, 113, 0.2);
    padding-bottom: 0.25em;
}

.pcr-detail-content h3:first-child, .gcr-detail-content h3:first-child, .pgr-detail-content h3:first-child {
    margin-top: 0;
}

.pcr-detail-content h4, .gcr-detail-content h4, .pgr-detail-content h4 {
    font-family: 'Cinzel', serif;
    font-size: 0.95em;
    color: var(--text-bright, #f2f3f5);
    margin: 1em 0 0.4em;
    letter-spacing: 0.02em;
}

.pcr-detail-content ul, .gcr-detail-content ul, .pcr-detail-content ol, .gcr-detail-content ol, .pgr-detail-content ul, .pgr-detail-content ol {
    margin: 0 0 0.85em;
    padding-left: 1.5em;
}

.pcr-detail-content li, .gcr-detail-content li, .pgr-detail-content li {
    margin-bottom: 0.4em;
}

.pcr-detail-content table, .gcr-detail-content table, .pgr-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0 1em;
    font-size: 0.95em;
    background: var(--bg-input, #1e1f22);
    border-radius: 6px;
    overflow: hidden;
}

.pcr-detail-content th, .gcr-detail-content th, .pgr-detail-content th {
    background: rgba(201, 170, 113, 0.12);
    color: var(--accent-amber, #c9aa71);
    padding: 0.5em 0.85em;
    text-align: left;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(201, 170, 113, 0.2);
}

.pcr-detail-content td, .gcr-detail-content td, .pgr-detail-content td {
    padding: 0.5em 0.85em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: top;
}

.pcr-detail-content tr:last-child td, .gcr-detail-content tr:last-child td, .pgr-detail-content tr:last-child td {
    border-bottom: none;
}

.pcr-detail-content code, .gcr-detail-content code, .pgr-detail-content code {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--accent-amber, #c9aa71);
}

.pcr-detail-content em, .gcr-detail-content em, .pgr-detail-content em {
    color: var(--text-muted, #b9bbbe);
}

.pcr-attr-pill, .gcr-attr-pill, .pgr-attr-pill {
    display: inline-block;
    background: rgba(88, 165, 224, 0.15);
    color: #5ea2db;
    padding: 0.1em 0.5em;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    border: 1px solid rgba(88, 165, 224, 0.3);
}

.pcr-tag, .gcr-tag, .pgr-tag {
    display: inline-block;
    background: rgba(201, 170, 113, 0.12);
    color: var(--accent-amber, #c9aa71);
    padding: 0.1em 0.55em;
    border-radius: 3px;
    font-family: 'Cinzel', serif;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    margin: 0 0.2em 0.2em 0;
    border: 1px solid rgba(201, 170, 113, 0.25);
}

.pcr-note, .gcr-note, .pgr-note {
    font-size: 0.85em;
    color: var(--text-faint, #8e9297);
    font-style: italic;
    margin-top: 0.4em;
}

.pcr-chip-grid, .gcr-chip-grid, .pgr-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4em;
    margin: 0.5em 0;
}

.pcr-chip, .gcr-chip, .pgr-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    border-radius: 4px;
    padding: 0.4em 0.6em;
    font-size: 0.9em;
    text-align: center;
}

.pcr-roll-bar, .gcr-roll-bar, .pgr-roll-bar {
    display: flex;
    gap: 0.5em;
    align-items: center;
    margin: 0.5em 0;
    flex-wrap: wrap;
}

.pcr-roll-btn, .gcr-roll-btn, .pgr-roll-btn {
    background: var(--accent-amber, #c9aa71);
    color: #1e1f22;
    border: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.9em;
    letter-spacing: 0.03em;
    transition: background 0.15s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.pcr-roll-btn:hover, .gcr-roll-btn:hover, .pgr-roll-btn:hover {
    background: #d4b97e;
    transform: translateY(-1px);
}

.pcr-roll-btn:active, .gcr-roll-btn:active, .pgr-roll-btn:active {
    transform: scale(0.97);
}

.pcr-roll-btn-clear, .gcr-roll-btn-clear, .pgr-roll-btn-clear {
    background: transparent;
    color: var(--text-muted, #b9bbbe);
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    padding: 0.5em 0.85em;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    letter-spacing: 0.03em;
    transition: all 0.15s;
}

.pcr-roll-btn-clear:hover, .gcr-roll-btn-clear:hover, .pgr-roll-btn-clear:hover {
    color: var(--text-bright, #f2f3f5);
    border-color: var(--accent-amber, #c9aa71);
}

.pcr-roll-result, .gcr-roll-result, .pgr-roll-result {
    font-family: 'Cinzel', serif;
    font-size: 0.85em;
    color: var(--accent-amber, #c9aa71);
    margin-left: 0.3em;
    min-width: 0;
}

.pcr-rollable tbody tr, .gcr-rollable tbody tr, .pgr-rollable tbody tr {
    transition: opacity 0.25s, background 0.25s;
}

.pcr-rollable.has-roll tbody tr:not(.rolled), .gcr-rollable.has-roll tbody tr:not(.rolled), .pgr-rollable.has-roll tbody tr:not(.rolled) {
    opacity: 0.32;
}

.pcr-rollable tr.rolled, .gcr-rollable tr.rolled, .pgr-rollable tr.rolled {
    background: rgba(201, 170, 113, 0.18) !important;
    box-shadow: inset 4px 0 0 var(--accent-amber, #c9aa71);
}

.pcr-rollable tr.rolled td, .gcr-rollable tr.rolled td, .pgr-rollable tr.rolled td {
    color: var(--text-bright, #f2f3f5);
}

.pcr-compound-gen, .gcr-compound-gen, .pgr-compound-gen {
    background: var(--bg-input, #1e1f22);
    border: 1px solid var(--border-thin, rgba(255,255,255,0.08));
    border-radius: 6px;
    padding: 0.85em;
    margin: 0.6em 0;
}

.pcr-compound-gen h4, .gcr-compound-gen h4, .pgr-compound-gen h4 {
    margin-top: 0;
    color: var(--accent-amber, #c9aa71);
}

.pcr-compound-output, .gcr-compound-output, .pgr-compound-output {
    margin-top: 0.5em;
    padding: 0.6em 0.85em;
    background: rgba(201, 170, 113, 0.06);
    border-left: 3px solid var(--accent-amber, #c9aa71);
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--text-bright, #f2f3f5);
    min-height: 1.5em;
}

.pcr-compound-output.empty, .gcr-compound-output.empty, .pgr-compound-output.empty {
    color: var(--text-faint, #72767d);
    font-style: italic;
}

@media screen and (max-width: 700px) {
    .pcr-card-grid, .gcr-card-grid, .pgr-card-grid {
        grid-template-columns: 1fr;
    }
    .pcr-modal, .gcr-modal, .pgr-modal {
        max-height: 100vh;
        border-radius: 0;
    }
    .pcr-modal-overlay, .gcr-modal-overlay, .pgr-modal-overlay {
        padding: 0;
    }
}