/* Alpha 7.9.15 TEST34 — phone-only encyclopedia/read-only mode, visual refresh. */
.mobilePocketHome{display:none}
@media(max-width:720px), (max-height:520px) and (pointer:coarse){
  html,body{min-height:100%;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;background:#070a0f!important}
  body.mobilePocketMode{padding:0!important;overscroll-behavior-y:auto!important}
  body.mobilePocketMode #editorApp{display:none!important}
  body.mobilePocketMode #homeScreen{display:block!important;min-height:100dvh!important;padding:0 0 calc(74px + env(safe-area-inset-bottom))!important;background:radial-gradient(circle at 50% -6%,#202a3a 0,#101720 38%,#070a0f 78%)!important;overflow:visible!important}
  body.mobilePocketMode #homeScreen>.referenceHome{display:none!important}
  .mobilePocketHome{display:block;min-height:100dvh;color:#edf0f4;padding:max(12px,env(safe-area-inset-top)) 14px 28px}

  .mobilePocketHeader{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 2px 13px;border-bottom:1px solid rgba(213,170,96,.16)}
  .mobilePocketHeader img{width:44px;height:44px;border-radius:12px;box-shadow:0 8px 22px #0008,0 0 0 1px rgba(213,170,96,.16)}
  .mobilePocketHeader h1{margin:2px 0 2px;font:700 17px/1.08 Georgia,serif;color:#f7f3ea;letter-spacing:.015em}
  .mobilePocketHeader p{margin:0;color:#8f9aaa;font-size:9.5px;line-height:1.35}
  .mobilePocketEyebrow{display:block;color:#d5aa60;font-size:7.5px;font-weight:850;letter-spacing:.16em}
  .mobilePocketBuild{align-self:start;margin-top:1px;padding:4px 7px;border:1px solid rgba(213,170,96,.32);border-radius:999px;color:#ddb66d;background:rgba(213,170,96,.055);font-size:7.5px;font-weight:900;letter-spacing:.08em}

  .mobilePocketMain{display:grid;gap:12px;padding:14px 0 6px}
  .mobilePocketHero{position:relative;padding:16px 16px 17px;border:1px solid #303b4a;border-radius:18px;background:linear-gradient(145deg,rgba(26,35,48,.96),rgba(13,19,28,.96));box-shadow:0 14px 34px #0005,inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden}
  .mobilePocketHero:after{content:"";position:absolute;width:170px;height:170px;right:-86px;top:-90px;border-radius:50%;background:radial-gradient(circle,rgba(213,170,96,.11),transparent 68%);pointer-events:none}
  .mobilePocketHero>span{color:#d5aa60;font-size:8px;font-weight:850;letter-spacing:.17em}
  .mobilePocketHero h2{margin:6px 0 7px;max-width:650px;font:700 clamp(21px,6.6vw,29px)/1.06 Georgia,serif;color:#fff9ed;letter-spacing:.005em}
  .mobilePocketHero p{margin:0;max-width:720px;color:#a4aeba;font-size:12px;line-height:1.48}

  .mobilePocketGrid{display:grid;gap:9px}
  .mobilePocketCard{appearance:none;width:100%;min-height:78px;padding:11px 12px;border:1px solid #303946;border-radius:16px;background:linear-gradient(145deg,#151c26,#0d131b);color:#edf0f4;display:grid;grid-template-columns:54px minmax(0,1fr) 20px;align-items:center;gap:11px;text-align:left;box-shadow:0 7px 20px #0003,inset 0 1px 0 rgba(255,255,255,.02);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .mobilePocketCard:active{transform:scale(.994);border-color:#876d3d;background:#191e26}
  .mobilePocketCard.primary{border-color:#705a34;background:linear-gradient(145deg,#201c16,#10161e);box-shadow:0 8px 22px #0004,inset 0 1px 0 rgba(213,170,96,.04)}
  .mobilePocketIcon{width:54px;height:54px;display:grid;place-items:center;padding:10px;border:1px solid rgba(213,170,96,.32);border-radius:15px;background:linear-gradient(145deg,#171d27,#0b0f15);color:#d5aa60;box-shadow:0 5px 13px #0007,inset 0 1px 0 rgba(255,255,255,.035);overflow:hidden}
  .mobilePocketIcon svg{width:30px;height:30px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobilePocketIconArt{padding:4px}
  .mobilePocketIconArt picture,.mobilePocketIconArt img{display:block;width:100%;height:100%}
  .mobilePocketIconArt img{object-fit:contain;object-position:center;border-radius:10px}
  .mobilePocketCard b{display:block;margin-bottom:4px;font:700 17px/1.1 Georgia,serif;color:#f5f1e8;letter-spacing:.005em}
  .mobilePocketCard small{display:block;color:#949eac;font-size:11px;line-height:1.34}
  .mobilePocketArrow{color:#d5aa60;font-size:27px;line-height:1;text-align:right;opacity:.92}

  .mobilePocketNotice{display:grid;gap:4px;padding:12px 13px;border:1px solid #2f3b47;border-radius:14px;background:linear-gradient(145deg,#0d131b,#0a0f15);color:#96a1b0;font-size:10.5px;line-height:1.4}
  .mobilePocketNotice b{color:#d9e0e8;font-size:11.5px}

  .mobilePocketNav{position:fixed;left:0;right:0;bottom:0;z-index:240;height:calc(68px + env(safe-area-inset-bottom));padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(213,170,96,.14);background:rgba(8,12,18,.96);backdrop-filter:blur(18px);box-shadow:0 -10px 28px #0008}
  .mobilePocketNav button{appearance:none;border:0;background:transparent;color:#7c8796;display:grid;place-items:center;align-content:center;gap:3px;min-width:0;border-radius:12px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .mobilePocketNav button>span{width:30px;height:30px;display:grid;place-items:center;line-height:0;color:inherit;border:1px solid transparent;border-radius:9px}
  .mobilePocketNav button>span svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .mobilePocketNav button>span.navPocketArt{padding:2px}
  .mobilePocketNav .navPocketArt picture,.mobilePocketNav .navPocketArt img{display:block;width:100%;height:100%}
  .mobilePocketNav .navPocketArt img{object-fit:contain;border-radius:6px;filter:saturate(.74) brightness(.9)}
  .mobilePocketNav button>small{font-size:8.5px;line-height:1;color:inherit;white-space:nowrap}
  .mobilePocketNav button.active{color:#dfb76d;background:rgba(213,170,96,.055)}
  .mobilePocketNav button.active>span{border-color:rgba(213,170,96,.28);background:linear-gradient(145deg,#191b1e,#11161d);box-shadow:0 4px 11px #0006}
  .mobilePocketNav button.active .navPocketArt img{filter:none}

  /* Encyclopedia becomes a phone-first, read-only full-screen surface. */
  body.mobilePocketMode #catalogModal,body.mobilePocketMode #libraryModal,body.mobilePocketMode #settingsModal,body.mobilePocketMode #cigarDetailModal,body.mobilePocketMode #aboutModal{padding:0 0 calc(68px + env(safe-area-inset-bottom))!important;align-items:stretch!important;background:#080b10!important;z-index:210!important}
  body.mobilePocketMode #catalogModal>.modalCard,body.mobilePocketMode #libraryModal>.modalCard,body.mobilePocketMode #settingsModal>.modalCard,body.mobilePocketMode #cigarDetailModal>.modalCard,body.mobilePocketMode #aboutModal>.modalCard{width:100%!important;max-width:none!important;height:calc(100dvh - 68px - env(safe-area-inset-bottom))!important;max-height:none!important;border:0!important;border-radius:0!important;padding:12px 13px 18px!important;box-shadow:none!important;background:linear-gradient(180deg,#0d131b 0,#090d13 100%)!important}
  body.mobilePocketMode .modalHeader{top:-12px!important;padding:10px 0 11px!important;background:linear-gradient(180deg,#0d131b 85%,rgba(13,19,27,0))!important;backdrop-filter:blur(12px)}
  body.mobilePocketMode .modalHeader h2{font-size:19px!important;letter-spacing:.005em}
  body.mobilePocketMode .modalHeader .btn{min-height:38px;padding:8px 10px!important}
  body.mobilePocketMode .control{min-height:42px;font-size:13px!important}
  body.mobilePocketMode #catalogModal #addCigar,
  body.mobilePocketMode #catalogModal .catalogDataMenu,
  body.mobilePocketMode #catalogModal [data-cigar-action="load"],
  body.mobilePocketMode #catalogModal [data-cigar-action="edit"],
  body.mobilePocketMode #catalogModal [data-cigar-action="delete"],
  body.mobilePocketMode #cigarDetailModal #detailLoad,
  body.mobilePocketMode #libraryModal #selectAllPrint,
  body.mobilePocketMode #libraryModal #clearPrintSelection,
  body.mobilePocketMode #libraryModal #deleteAllLibrary,
  body.mobilePocketMode #libraryModal #openPrintPreview,
  body.mobilePocketMode #libraryModal #printSelectionCount,
  body.mobilePocketMode #libraryModal .printPick,
  body.mobilePocketMode #libraryModal [data-library-action]{display:none!important}
  body.mobilePocketMode #libraryModal .modalHeader+ p.sub{display:none!important}
  body.mobilePocketMode #libraryModal .library{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.mobilePocketMode #libraryModal .saved{padding:8px}
  body.mobilePocketMode #libraryModal .saved .mini{margin-bottom:7px}
  body.mobilePocketMode #catalogModal .cigarActions{grid-template-columns:1fr auto!important}
  body.mobilePocketMode #catalogModal .cigarActions [data-cigar-action="details"]{min-height:42px}
  body.mobilePocketMode #catalogModal .cigarActions [data-cigar-action="favorite"]{min-width:52px}
  body.mobilePocketMode #settingsModal .settingsPanel:first-child{display:none!important}
  body.mobilePocketMode #settingsModal .settingsGrid{grid-template-columns:1fr!important}
  body.mobilePocketMode #settingsModal .settingsPanel.settingsWide:has(#printCalibrationTitle){display:none!important}
  body.mobilePocketMode #a4Modal,body.mobilePocketMode #cigarEditModal{display:none!important}
}
@media(max-width:370px){
  body.mobilePocketMode #libraryModal .library{grid-template-columns:1fr}
  .mobilePocketHeader{grid-template-columns:42px minmax(0,1fr)}
  .mobilePocketHeader img{width:42px;height:42px}
  .mobilePocketBuild{display:none}
  .mobilePocketCard{grid-template-columns:50px minmax(0,1fr) 18px;padding-inline:10px}
  .mobilePocketIcon{width:50px;height:50px}
}