/* CSS Cog: responsive.css */
@media(max-width:900px){
  .container{padding:0 15px;}
  #tracker-content{grid-template-columns:1fr;max-height:none;}
  .tracker-bestiary{max-height:40vh;}
  .bestiary-list{max-height:25vh;}
  #header{padding:0 15px;flex-wrap:wrap;gap:0.5em;}
  #header h1{font-size:1.1em;}
  .header-actions{flex-wrap:wrap;gap:0.3em;}
  .attr-grid{grid-template-columns:repeat(2,1fr)!important;gap:0.5em;}
  .defense-row{flex-direction:row;gap:0.5em;}
  .level-grid{grid-template-columns:repeat(5,1fr);}
  #dice-panel{width:340px;}
  .buy-tabs{flex-wrap:wrap;}
  .modal-box{max-width:95%;padding:1.2em 1.5em;}
  .inflict-modal{max-width:95%;}
}

/* ============================================================
   RESPONSIVE: Mobile (max-width 600px)
   ============================================================ */
@media(max-width:600px){
  body{font-size:15px;}
  .container{padding:0 10px;}
  #header{padding:0 10px;}
  #header h1{font-size:0.95em;letter-spacing:0.06em;}
  .header-actions .btn-sm{padding:0.3em 0.5em;font-size:0.65em;}
  .user-bar{gap:0.4em;font-size:0.65em;}
  .user-bar img{width:22px;height:22px;}

  /* Sheet header */
  #view-sheet > div:first-child{flex-wrap:wrap;gap:0.5em;}
  #view-sheet h2#sheet-title{font-size:1.2em;}
  .level-badge{font-size:0.7rem;padding:0.2em 0.5em;}

  /* Panels */
  .sheet-panel{padding:1em;margin-bottom:0.75em;}
  .sheet-panel h3{font-size:0.95em;}
  .stat-row{font-size:0.9em;padding:0.25em 0;}
  .stat-label{font-size:0.85em;}

  /* Attributes */
  .attr-grid{grid-template-columns:repeat(2,1fr)!important;gap:0.4em;}
  .attr-box{padding:0.5em;}
  .attr-die{font-size:1.3em;}

  /* Defense */
  .defense-row{gap:0.4em;}
  .def-box{padding:0.4em;}
  .def-box .def-value{font-size:1.3em;}

  /* Vitals buttons */
  .btn-vital-action{font-size:0.55em;padding:0.1em 0.3em;}
  .ev-btn{padding:0.15em 0.3em;font-size:0.85em;}

  /* Equipment */
  .wpn-rolls{flex-wrap:wrap;gap:0.4em;}
  .wpn-roll-btn{font-size:0.75em;padding:0.25em 0.5em;}
  .btn-unequip{font-size:0.6em;}

  /* Inventory */
  .inv-item{flex-wrap:wrap;gap:0.3em;padding:0.35em 0.4em;}
  .inv-item-left{min-width:100%;}
  .inv-item-right{width:100%;justify-content:space-between;}
  .inv-qty{font-size:0.75em;}
  .btn-use-item{font-size:0.6em;}
  .inv-gadget-tag{font-size:0.6em;}

  /* Bonds */
  .bond-card{flex-wrap:wrap;}
  .bond-emotion-label{font-size:0.7em;padding:0.1em 0.2em;}
  .bond-strength{font-size:1.1em;width:1.8em;height:1.8em;line-height:1.8em;}

  /* Skills/Spells */
  .sheet-collapse-header{font-size:0.9em;}
  .cost-btn{font-size:0.65em;}
  .spell-cast-btn{font-size:0.65em;}

  /* Notes */
  .notes-section{padding:1em;}

  /* Dice panel: full width on mobile */
  #dice-panel{width:100%;right:-100%;}
  #dice-panel.open{right:0;}
  #dice-toggle{right:12px;bottom:12px;width:44px;height:44px;font-size:1.1em;}
  .dice-btn{width:44px;height:44px;}
  .dice-tray{gap:0.35em;padding:0.5em;}
  .dice-close{font-size:1.5em;padding:0.3em;opacity:1;}
  .dice-clear{font-size:1.1em;padding:0.3em;opacity:1;}

  /* Modals */
  .modal-box{max-width:98%;padding:1em;margin:0.5em;}
  .inflict-modal{max-width:98%;padding:1em;}
  .inflict-grid{grid-template-columns:repeat(2,1fr);gap:0.3em;}

  /* Wizard */
  .profile-cards{flex-direction:column;}
  .profile-card{min-width:auto;}
  .pick-list{max-height:250px;}
  .level-grid{grid-template-columns:repeat(5,1fr);gap:0.25em;}
  .level-grid-btn{padding:0.3em;font-size:0.75em;}
  .build-progress-label{font-size:0.7em;}
  .wizard-nav{flex-wrap:wrap;gap:0.3em;}

  /* Buy modal */
  .buy-tabs{gap:0.2em;}
  .buy-tab{font-size:0.6em;padding:0.25em 0.5em;}
  .buy-list{max-height:250px;}
  .buy-item{padding:0.4em 0.5em;}
  .buy-item-name{font-size:0.9em;}

  /* Character cards */
  .char-grid{grid-template-columns:1fr;}
}

/* ============================================================
   RESPONSIVE: Small Mobile (max-width 380px)
   ============================================================ */
@media(max-width:380px){
  #header h1{font-size:0.85em;}
  .header-actions .btn-sm{font-size:0.6em;}
  .attr-grid{grid-template-columns:1fr 1fr!important;}
  .level-grid{grid-template-columns:repeat(5,1fr);}
  .stat-row{font-size:0.85em;}
  .bond-emotion-label{font-size:0.65em;}
}
/* ================================================================
   TOUCH FIXES
   Author:   Steven J. Cook
   Date:     2026-04-05
   Revision: 1.0.0
   Purpose:  Fix touch targets, hover stickiness, and interaction
             for iPad and Surface Go v2 (pointer: coarse devices).
   Install:  Append this entire block to the bottom of style.css,
             BELOW the existing responsive media queries.
   ================================================================ */
 
/* ================================================================
   GLOBAL: Kill 300ms tap delay, prevent double-tap zoom
   on all interactive elements. This is the single biggest
   touch-responsiveness win.
   ================================================================ */
button, .btn, a, select, input, textarea,
.ev-btn, .dice-btn, .sheet-collapse-header, .charlist-collapse-header,
.step-header, .char-card, .profile-card, .pick-item, .roll-icon,
.cost-btn, .spell-cast-btn, .btn-inflict, .btn-inflict-plus,
.wpn-roll-btn, .bond-emotion-label, .inv-actions span,
.status-x, .custom-mod-x, .inflict-btn, .buy-tab, .btn-buy-item,
.dice-close, .dice-clear, .note-edit, .inv-qty-btn,
.skill-action-btn, .btn-vital-action, .btn-bond-invoke,
.btn-unequip, .btn-use-item, .inv-act-equip, .inv-act-sell,
#dice-toggle, .tracker-section-header, .tracker-entry,
.bestiary-entry, .btn-bestiary-sheet, .btn-undo,
.spell-heal-btn, .spell-dmg-btn, .btn-quirk-action,
.btn-ip-restore, .btn-fp-reroll, .bond-card .bond-del,
.modal-check-label, .ev-num, .ev-max, .ev-edit {
    touch-action: manipulation;
}
 
/* ================================================================
   TOUCH TARGETS: Minimum 44px hit area on coarse pointers.
   Apple HIG and WCAG 2.5.8 both specify 44px. Fingers are fat.
   ================================================================ */
@media (pointer: coarse) {
 
    /* --- Vitals +/- buttons --- */
    .editable-val .ev-btn {
        width: 36px;
        height: 36px;
        font-size: 1em;
        min-width: 36px;
    }
 
    /* Clickable current value (the number between +/-) */
    .editable-val .ev-num {
        min-width: 2.5em;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
 
    /* Clickable max value */
    .ev-max {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
 
    /* Edit pen icon next to vitals */
    .ev-edit {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
 
    /* --- Status effect remove buttons --- */
    .status-x {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        min-height: 28px;
        font-size: 1.3em;
        padding: 0 4px;
    }
 
    /* Custom modifier remove */
    .custom-mod-x {
        width: 24px;
        height: 24px;
        font-size: 1em;
    }
 
    /* --- Inventory icons (equip, edit, sell, remove) --- */
    .inv-actions span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        font-size: 1.1em;
    }
 
    /* Inventory quantity +/- */
    .inv-qty-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        font-size: 1.1em;
    }
 
    /* --- Bond controls --- */
    .bond-emotion-label {
        padding: 0.35em 0.5em;
        font-size: 0.8em;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
 
    .bond-card .bond-del {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .btn-bond-invoke {
        min-width: 36px;
        min-height: 36px;
    }
 
    /* --- Skill/spell action buttons --- */
    .skill-action-btn {
        min-height: 32px;
        padding: 0.25em 0.5em;
        font-size: 0.7em;
    }
 
    .roll-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
    }
 
    .cost-btn, .spell-cast-btn {
        min-height: 34px;
        padding: 0.3em 0.5em;
    }
 
    .wpn-roll-btn {
        min-height: 36px;
        padding: 0.35em 0.6em;
    }
 
    /* --- Vital action buttons (Heal, Dmg, Recover, Level Up, Reroll) --- */
    .btn-vital-action {
        min-height: 34px;
        padding: 0.25em 0.5em;
    }
 
    .btn-ip-restore {
        width: 32px;
        height: 32px;
    }
 
    /* --- Dice panel controls --- */
    .dice-close, .dice-clear {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    /* Dice history action buttons (heal, damage, undo) */
    .spell-heal-btn, .spell-dmg-btn {
        min-height: 36px;
        padding: 0.35em 0.7em;
    }
 
    .btn-undo {
        min-height: 32px;
        padding: 0.2em 0.5em;
    }
 
    /* --- Notes edit icon --- */
    .note-col .note-edit {
        min-width: 40px;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    /* --- Modal buttons --- */
    .inflict-btn {
        min-height: 40px;
        padding: 0.4em 0.6em;
    }
 
    .btn-buy-item {
        min-height: 36px;
        padding: 0.3em 0.6em;
    }
 
    .buy-tab {
        min-height: 36px;
        padding: 0.35em 0.7em;
    }
 
    .btn-unequip {
        min-height: 34px;
        padding: 0.25em 0.5em;
    }
 
    .btn-use-item {
        min-height: 34px;
        padding: 0.25em 0.5em;
    }
 
    /* --- Form inputs need bigger hit area on touch --- */
    .form-input, .form-select {
        min-height: 44px;
        padding: 0.65em 0.8em;
    }
 
    /* --- Collapsible headers need more padding for fat fingers --- */
    .sheet-collapse-header {
        padding: 0.8em 1em;
        min-height: 48px;
    }
 
    .charlist-collapse-header {
        padding: 0.8em 1em;
        min-height: 48px;
    }
 
    /* --- Tag remove buttons --- */
    .tag .remove {
        min-width: 28px;
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
 
    /* --- Quirk action buttons --- */
    .btn-quirk-action {
        min-height: 36px;
        padding: 0.35em 0.7em;
    }
 
    /* --- Tracker entries (GM initiative tracker) --- */
    .tracker-entry {
        padding: 0.6em 0.75em;
        min-height: 48px;
    }
 
    .bestiary-entry {
        padding: 0.5em 0.6em;
        min-height: 44px;
    }
 
    .btn-bestiary-sheet {
        min-height: 32px;
        padding: 0.3em 0.5em;
    }
 
    .tracker-grip {
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    /* --- IP use modal items --- */
    .ip-use-item button {
        min-height: 36px;
    }
 
    /* --- Wizard dots --- */
    .wizard-progress .dot {
        width: 16px;
        height: 16px;
    }
 
    .wizard-progress .dot.clickable-dot:hover {
        transform: none;
    }
}
 
 
/* ================================================================
   HOVER STICKINESS FIX:
   On touch devices, :hover fires on tap and stays applied until
   the user taps something else. This makes cards look "stuck" in
   a highlighted state. We neutralize the hover effects when no
   real pointing device is present.
   ================================================================ */
@media (hover: none) {
 
    /* Character cards: remove sticky highlight */
    .char-card:hover {
        box-shadow: var(--shadow-low);
        border-color: var(--border-thin);
        transform: none;
    }
 
    /* Collapsible headers: remove sticky background */
    .sheet-collapse-header:hover { background: transparent; }
    .charlist-collapse-header:hover { background: transparent; }
    .tracker-section-header:hover { background: var(--bg-light); }
 
    /* Wizard pick list items */
    .pick-item:hover { background: transparent; }
 
    /* Wizard profile cards */
    .profile-card:hover { border-color: var(--border-thin); }
 
    /* Dice buttons: remove the scale+shadow that gets stuck */
    .dice-btn:hover {
        background: var(--bg-light);
        border-color: var(--border-thin);
        transform: none;
        box-shadow: none;
    }
 
    /* Dice toggle FAB */
    #dice-toggle:hover { transform: none; }
 
    /* Inflict buttons */
    .inflict-btn:hover {
        background: rgba(107,142,35,0.12);
        color: #a3be8c;
        border-color: rgba(107,142,35,0.35);
    }
    .inflict-btn.inflict-boost:hover {
        background: rgba(88,166,242,0.12);
        color: #88a6f2;
        border-color: rgba(88,166,242,0.35);
    }
 
    /* Bestiary entries in tracker */
    .bestiary-entry:hover {
        border-color: var(--border-thin);
        background: transparent;
    }
 
    /* Tracker entries */
    .tracker-entry:hover {
        border-color: var(--border-thin);
    }
 
    /* Bond emotion labels */
    .bond-emotion-label:hover { background: transparent; }
 
    /* Wizard dots */
    .wizard-progress .dot.clickable-dot:hover {
        transform: none;
        box-shadow: none;
    }
}
 
 
/* ================================================================
   ACTIVE STATES FOR TOUCH:
   Replace hover feedback with instant :active feedback so users
   see a response the moment their finger touches down.
   ================================================================ */
@media (pointer: coarse) {
 
    .char-card:active {
        box-shadow: var(--shadow-med);
        border-color: var(--accent-blue);
    }
 
    .sheet-collapse-header:active { background: var(--bg-hover); }
    .charlist-collapse-header:active { background: rgba(88,101,242,0.06); }
    .tracker-section-header:active { background: var(--bg-lighter); }
 
    .pick-item:active { background: var(--bg-hover); }
    .profile-card:active { border-color: var(--accent-blue); }
 
    .dice-btn:active {
        transform: scale(0.93);
        background: var(--bg-lighter);
        border-color: var(--accent-amber);
    }
 
    #dice-toggle:active { transform: scale(0.93); }
 
    .btn:active { opacity: 0.85; }
    .inflict-btn:active { background: rgba(107,142,35,0.3); }
 
    .bestiary-entry:active {
        border-color: var(--accent-blue);
        background: rgba(88,101,242,0.06);
    }
 
    .tracker-entry:active {
        border-color: var(--text-faint);
    }
 
    .bond-emotion-label:active { background: var(--bg-hover); }
 
    /* Visual indicator that a collapsible is open (replaces hover) */
    .sheet-collapse.open > .sheet-collapse-header {
        background: rgba(88,101,242,0.04);
    }
 
    .charlist-collapse.open > .charlist-collapse-header {
        background: rgba(88,101,242,0.04);
    }
}
 
 
/* ================================================================
   SCROLLABLE AREAS: Momentum scrolling on iOS/iPadOS
   ================================================================ */
.pick-list, .buy-list, .dice-history, .inflict-grid,
.inflict-modal, .modal-box, .tracker-list, .bestiary-list {
    -webkit-overflow-scrolling: touch;
}
 
 
/* ================================================================
   MODAL OVERLAY: Prevent accidental dismiss on touch-drag.
   The JS in touch.js handles the logic. This just ensures the
   overlay doesn't intercept pointer events prematurely.
   ================================================================ */
.modal-overlay > *, .inflict-modal-overlay > *,
.sheet-modal-overlay > * {
    /* Child elements block pointer events from reaching the overlay
       during a drag that starts inside and slides outside */
    touch-action: pan-y;
}

/* ================================================================
   LANDING PAGE / HOME VIEW
   Phase 1 - Production Migration
   Author: Steven J. Cook
   Date: 2026-04-07
   ================================================================ */