/* CSS Cog: sheet.css */
/* ================================================================
   Author:   Steven J. Cook
   Date:     2026-04-28
   Time:     20:55 UTC
   Model:    Claude Opus 4.7
   Chat:     Abyssal Engine Web App Development (Lexicon Block + Export Scrub)
   Revision: 1.1.0
   Changes:
     v1.1.0 - Lexicon Notebook block styles. The right-hand notes
              column is now a branded promo card (.note-col-lexicon)
              that links to shinra.cc/lexicon. Adds .lexicon-link
              (flex column wrapper, no underline), .lexicon-icon
              (rounded image with hover lift), and .lexicon-tagline
              (Cinzel display font matching the "Notes" h3 header,
              centered italic). Existing .note-col rules are
              untouched so the left column behaves identically to
              v1.0.x.
     v1.0.x - Existing two-column notes layout, sheet panels,
              editable values, collapsibles, inventory rows,
              level badge.
   ================================================================ */
.sheet-panel{background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-md);padding:1.5em;margin-bottom:1em;box-shadow:var(--shadow-low);}
.sheet-panel h3{border-bottom:1px solid var(--border-thin);padding-bottom:0.4em;margin-bottom:0.75em;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:0.3em 0;border-bottom:1px solid rgba(63,65,71,0.4);}.stat-row:last-child{border-bottom:none;}
.stat-label{color:var(--text-muted);}.stat-value{color:var(--text-primary);font-weight:700;}
.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em;}
@media(max-width:768px){.sheet-grid{grid-template-columns:1fr;}}
.editable-val{display:inline-flex;align-items:center;gap:0.3em;}
.editable-val .ev-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--border-thin);background:var(--bg-lighter);color:var(--text-primary);cursor:pointer;font-size:0.75em;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
.editable-val .ev-btn:hover{background:var(--accent-blue);border-color:var(--accent-blue);}
.editable-val .ev-num{font-family:var(--font-code);font-weight:700;min-width:2em;text-align:center;cursor:pointer;}
.editable-val .ev-num:hover{color:var(--accent-cyan);}
.ev-max{font-family:var(--font-code);font-weight:700;cursor:pointer;}.ev-max:hover{color:var(--accent-cyan);}
.ev-edit{cursor:pointer;color:var(--text-faint);margin-left:0.3em;}.ev-edit:hover{color:var(--accent-amber);}


.sheet-collapse{background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-sm);margin-bottom:0.5em;overflow:hidden;}
.sheet-collapse-header{padding:0.6em 1em;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.15s;gap:0.5em;}
.sheet-collapse-header:hover{background:var(--bg-hover);}
.sheet-collapse-header .cname{font-weight:700;color:var(--text-primary);flex:1;}
.sheet-collapse-body{max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
.sheet-collapse.open .sheet-collapse-body{max-height:500px;}
.sheet-collapse-inner{padding:0.5em 1em 0.75em;font-size:0.9em;color:var(--text-secondary);}

.notes-section{margin-top:1em;background:var(--bg-dark);border:1px solid var(--border-thin);border-radius:var(--radius-md);padding:1.5em;}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:1em;}@media(max-width:768px){.notes-grid{grid-template-columns:1fr;}}
.note-col{position:relative;}
.note-col .note-edit{position:absolute;top:0;right:0;cursor:pointer;color:var(--text-faint);font-size:0.9em;}.note-col .note-edit:hover{color:var(--accent-amber);}
.note-col textarea{width:100%;min-height:120px;background:var(--bg-darkest);border:1px solid var(--border-thin);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:0.95em;padding:0.5em;resize:vertical;}
.note-col .note-display{min-height:60px;color:var(--text-secondary);white-space:pre-wrap;word-wrap:break-word;}

/* Lexicon Notebook promo block (v1.1.0) */
.note-col-lexicon{display:flex;align-items:center;justify-content:center;}
.note-col-lexicon .lexicon-link{display:flex;flex-direction:column;align-items:center;gap:0.75em;text-decoration:none;color:inherit;width:100%;padding:0.5em;border-radius:var(--radius-md);transition:background 0.2s,transform 0.2s;}
.note-col-lexicon .lexicon-link:hover{background:rgba(110,95,168,0.1);text-decoration:none;}
.note-col-lexicon .lexicon-link:hover .lexicon-icon{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.55);}
.note-col-lexicon .lexicon-icon{width:128px;height:128px;border-radius:var(--radius-md);box-shadow:var(--shadow-med);transition:transform 0.2s,box-shadow 0.2s;display:block;}
.note-col-lexicon .lexicon-tagline{font-family:var(--font-display);font-size:0.85em;font-weight:600;letter-spacing:0.04em;color:var(--text-primary);text-align:center;line-height:1.5;}
.note-col-lexicon .lexicon-tagline em{font-style:italic;}
@media(max-width:768px){.note-col-lexicon .lexicon-icon{width:96px;height:96px;}}

.inv-item{display:flex;justify-content:space-between;align-items:center;padding:0.4em 0.5em;border-bottom:1px solid rgba(63,65,71,0.3);gap:0.5em;}
.inv-item:last-child{border-bottom:none;}
.inv-item .inv-actions{display:flex;gap:0.4em;}
.inv-item .inv-actions span{cursor:pointer;color:var(--text-faint);font-size:0.85em;}.inv-item .inv-actions span:hover{color:var(--accent-cyan);}
.inv-item-left{display:flex;flex-direction:column;gap:0.2em;flex:1;min-width:0;}
.inv-item-right{display:flex;align-items:center;gap:0.5em;flex-shrink:0;}

/* Level badge in sheet header */
.level-badge{display:inline-flex;align-items:center;padding:0.25em 0.75em;border-radius:var(--radius-sm);background:var(--bg-lighter);border:1px solid var(--border-thin);color:#fff;font-family:var(--font-display);font-size:0.85rem;font-weight:700;letter-spacing:0.06em;white-space:nowrap;}

#view-sheet h2#sheet-title{margin:0;line-height:1;}