
/* WristKeep v0.1.2 — consolidated mobile beta hardening + desktop crop hotfix */
:root{--wk-mobile-header-h:58px}

/* 002 — preserve watch image ratio and reveal scores.
   HOTFIX (v0.1.2): moved out of the max-width:760px block below. The
   underlying crop bug lives in css/bundle.css line ~6823
   (#roomView .room-slot-filled .watch-tile-photo img { object-fit:cover;
   transform:scale(.92) }), which is NOT media-query-scoped -- it applies
   at every viewport width, including desktop, across Watch Box, Drawer,
   and Winders. Scoping this fix to mobile-only in v0.1.1 left desktop
   still cropping. Same specificity as the bundle.css rule (1 id, 2
   classes, 1 element), so cascade order alone is enough to win since
   this stylesheet loads after bundle.css -- no !important escalation
   needed beyond what bundle.css already uses. */
#roomView .room-slot-filled .watch-card,#roomView .room-slot-filled .watch-image,#roomView .room-slot-filled .watch-tile-photo{min-height:0!important;overflow:visible!important}
#roomView .room-slot-filled .watch-tile-photo img,#roomView .watch-image img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;transform:none!important}
#roomView .room-slot-filled .watch-card-footer{display:flex!important;position:absolute!important;left:0!important;right:0!important;bottom:1px!important;z-index:8!important;justify-content:center!important;overflow:visible!important;pointer-events:none!important}
#roomView .room-slot-filled .overall-score{display:block!important;position:relative!important;inset:auto!important;margin:0!important;line-height:1!important;z-index:9!important}

@media(max-width:760px){
  /* 004 — highest rated mobile card */
  #dashboardCards .dashboard-card-highest{overflow:hidden!important;height:auto!important;min-height:330px!important;padding-bottom:20px!important}
  #dashboardCards .dashboard-card-highest>strong{height:auto!important;display:block!important}
  #dashboardCards .dashboard-card-highest .highest-rated-inline{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;min-height:0!important;width:100%!important;overflow:hidden!important}
  #dashboardCards .dashboard-card-highest .highest-rated-image{grid-row:1;width:min(100%,280px)!important;height:210px!important;justify-self:center!important}
  #dashboardCards .dashboard-card-highest .highest-rated-image img{max-width:100%!important;max-height:100%!important;object-fit:contain!important}
  #dashboardCards .dashboard-card-highest .highest-rated-name{grid-row:2;overflow:visible!important;text-overflow:clip!important}
  #dashboardCards .dashboard-card-highest .score-heat{grid-row:3;justify-self:start!important}
  #dashboardCards .dashboard-card-highest>span{position:static!important;margin-top:10px!important}

  /* 005 — Rank + Watch + OVR visible */
  #libraryView #libraryTable.library-view-overall{width:100%!important;min-width:100%!important;table-layout:fixed!important}
  #libraryView #libraryTable.library-view-overall col:nth-child(1){width:48px!important}
  #libraryView #libraryTable.library-view-overall col:nth-child(2){width:auto!important}
  #libraryView #libraryTable.library-view-overall col:nth-child(3){width:38px!important}
  #libraryView #libraryTable.library-view-overall col:nth-child(4){width:64px!important}
  #libraryView #libraryTable.library-view-overall th,#libraryView #libraryTable.library-view-overall td{padding-left:8px!important;padding-right:8px!important}
  #libraryView #libraryTable.library-view-overall .watch-differentiators{white-space:normal!important;overflow-wrap:anywhere!important;font-size:10px!important}
  #libraryView #libraryTable.library-view-overall .watch-name-line{white-space:normal!important}
  #libraryView #libraryTable.library-view-overall .overall-cell{text-align:right!important}
  #libraryView #libraryTable.library-view-overall .medal-column{padding-left:0!important;padding-right:0!important}

  /* 006 — compare AI analysis readable */
  .wear-mode.results-mode .compare-ai-analysis,.wear-mode.results-mode [class*="ai-analysis"],.wear-mode.results-mode .ai-analysis-panel{height:auto!important;min-height:220px!important;max-height:62vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}

  /* 007/011 — compact account icon */
  .wk-account-menu{top:calc(env(safe-area-inset-top,0px) + 8px)!important;right:10px!important}
  .wk-account-button{width:44px!important;height:44px!important;max-width:none!important;padding:0!important;border-radius:50%!important;font-size:0!important;display:grid!important;place-items:center!important}
  .wk-account-button::before{content:"♙";font-size:23px;line-height:1;color:#e5c77e}

  /* 009/013 — hamburger owns reserved header space, never overlays modals */
  .menu-toggle{position:fixed!important;left:10px!important;top:calc(env(safe-area-inset-top,0px) + 8px)!important;width:44px!important;height:44px!important;z-index:8500!important;margin:0!important;transform:none!important}
  .modal.open~.menu-toggle,.modal[aria-hidden="false"]~.menu-toggle{display:none!important}
  body:has(.modal.open) .menu-toggle,body:has(.modal[aria-hidden="false"]) .menu-toggle{display:none!important}
  .topbar{padding-left:64px!important;padding-right:64px!important}

  /* 012 — settings is a true internal-scroll modal */
  #watchRoomSetupModal{overflow:hidden!important;overscroll-behavior:none!important}
  #watchRoomSetupModal .watch-room-setup-card{height:min(92dvh,900px)!important;max-height:92dvh!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important}
  #watchRoomSetupModal .modal-head{position:relative!important;z-index:3!important}
  #watchRoomSetupModal .setup-room-body{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
  #watchRoomSetupModal .setup-room-actions{position:relative!important;z-index:3!important;margin:0!important}

  /* 016 — AI chooser: fixed shell, internal question scroll */
  #aiExportModal{overflow:hidden!important;overscroll-behavior:none!important}
  #aiExportModal .collection-ai-modal-card{height:min(92dvh,900px)!important;max-height:92dvh!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important}
  #aiExportModal .modal-head,#aiExportModal .collection-ai-actions{position:relative!important;z-index:3!important;background:inherit!important}
  #aiExportModal .collection-ai-body,#aiExportModal .collection-ai-ready{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;padding-bottom:24px!important}

  /* 007 — compact library category tabs on one line */
  .library-column-sets{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;padding:4px!important}
  .library-column-sets button{min-width:0!important;padding:12px 4px!important;font-size:11px!important;line-height:1!important;letter-spacing:.06em!important;text-transform:uppercase!important;font-weight:700!important;white-space:nowrap!important;border-radius:10px!important}

  /* 008 — collapsible utility cards */
  .library-control-card.wk-collapsible>.wk-collapse-body[hidden]{display:none!important}
  .library-control-card.wk-collapsible{padding:0!important;overflow:hidden!important}
  .wk-collapse-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border:0;background:transparent;color:inherit;text-align:left}
  .wk-collapse-trigger::after{content:"⌄";font-size:24px;color:#c8a96b;transform:rotate(-90deg);transition:transform .2s ease}
  .wk-collapsible.is-open .wk-collapse-trigger::after{transform:rotate(0)}
  .wk-collapse-body{padding:0 20px 20px}

  /* 017 — dashboard section titles share Collection Size style */
  .dashboard-panel-heading h2,#dashboardCards .dashboard-card-highest>span:first-child,.dashboard-card-highest .dashboard-card-label{font-family:inherit!important;font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#c8a96b!important;line-height:1.2!important}

  /* mobile popup close target */
  .wk-tooltip-close{display:grid!important;place-items:center!important;position:absolute!important;top:8px!important;right:8px!important;width:36px!important;height:36px!important;border-radius:50%!important;border:1px solid rgba(200,169,107,.35)!important;background:#191817!important;color:#eee!important;font-size:22px!important;z-index:4!important}
  #helpPopover,.dashboard-info-portal-tooltip{padding-top:48px!important}
}
@media(min-width:761px){.wk-tooltip-close{display:none!important}}

body.wk-modal-scroll-lock{overflow:hidden!important;touch-action:none} body.wk-touch-dragging{overflow:hidden!important;touch-action:none!important;user-select:none!important}
