/* 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}
/* v0.3.27: the .overall-score position override that lived here is gone --
   the storage score element now uses .storage-score-pill exclusively (see
   below), so it no longer inherits any .overall-score positioning at all. */

/* D003/M002 (v0.2.1) — Search & Filter / Scoring Methodology as native
   <details>/<summary> accordions. Collapsed by default (no `open`
   attribute in the markup), dark WristKeep styling on both desktop and
   mobile, one consistent chevron treatment, and no leftover empty body
   height when collapsed -- <details> handles all of that natively, with
   no JS required for the collapse behavior itself. Universal (not
   media-query-scoped) since D003 applies to desktop too. */
.wk-accordion{list-style:none}
.wk-accordion>summary{list-style:none;cursor:pointer}
.wk-accordion>summary::-webkit-details-marker{display:none}
.wk-accordion-trigger{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;margin:-16px -18px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c8a96b}
/* Same "›" chevron badge used by .wear-menu-arrow elsewhere in the app,
   so this reads as the same closed/open disclosure affordance as the
   rest of the site rather than a one-off arrow style. Closed = "›"
   pointing right (unrotated); open = rotated 90deg to point down. */
.wk-accordion-trigger::after{
  content:"›";
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:7px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1;
  font-weight:400;
  color:#c8a96b;
  border:1px solid rgba(199,164,95,.32);
  background:linear-gradient(180deg,rgba(199,164,95,.09),rgba(199,164,95,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transform:rotate(0deg);
  transition:transform .2s ease;
}
.wk-accordion[open]>.wk-accordion-trigger::after{transform:rotate(90deg)}
.wk-accordion-body{padding-top:16px}
/* The card's own min-height (132px, set back when this was a static,
   always-expanded panel) was fighting the collapsed <details> state,
   leaving a dead empty gap below the title row. Only apply it while
   actually open; let the collapsed card shrink to just the title row. */
html body #libraryView .wk-accordion:not([open]){min-height:0!important}
.wk-accordion .library-filter-head,.wk-accordion .weight-config-head{margin-top:0!important}

/* Watch Room score clipping on mobile: .watch-card uses a fixed
   aspect-ratio (1/1.08, near-square) with overflow:hidden at every
   width. As cards get narrower on a denser mobile grid, their height
   shrinks proportionally with width -- but the stacked footer content
   (title, reference/variant, metal/dial, size, score) doesn't shrink to
   match, so on a narrow card it overflows and gets clipped, cutting off
   part of the score digits. Relax the ratio on mobile so cards have
   enough vertical room for their content without relying on clipping. */
@media(max-width:640px){
  #roomView .watch-card{aspect-ratio:1/1.32!important}
}

/* Side-menu text was cramped/wrapping badly (e.g. "Log A Wear" across
   three lines) on narrow phones. The drawer itself was already widened
   in an earlier fix (250px -> up to 340px), but the menu-row icon is
   28px here (vs. the 21px base elsewhere), eating extra width unhelpful
   on the narrowest screens specifically -- trim it back down and tighten
   gaps a little further to give the label/description text maximum
   room at the width this actually gets tight. */
@media(max-width:400px){
  html body .topbar .topnav .wear-menu-icon{width:22px!important;height:22px!important}
  html body .topbar .topnav .wear-menu-icon svg{width:11px!important;height:11px!important}
  html body .topbar .topnav .wear-menu-icon-copy{gap:7px!important}
  html body .topbar .topnav .utility-nav.wear-menu-card{padding:5px 7px!important;gap:6px!important}
  html body .topbar .topnav .wear-menu-copy strong{font-size:10px!important;white-space:normal!important}
  html body .topbar .topnav .wear-menu-copy small{font-size:8px!important}
}

/* M010: hide the hamburger menu button while a full-screen Compare
   workflow is open -- it was sitting directly on top of the modal's
   own title text ("COMPARE MODE" rendering as "RE MODE" with the
   hamburger over the first few letters). #wearMode and
   #compareResultsMode share the .wear-mode class, so one rule covers
   both. (Log a Wear and Missed Wear use a different modal entirely,
   despite similar naming -- see the dedicated rule below; this comment
   used to incorrectly claim they shared this class too.) */
body:has(.wear-mode.open) #menuToggle{display:none!important;pointer-events:none!important}
/* QC Tool is embedded via an iframe; the outer app's hamburger was
   sitting fixed on top of the iframe's own header, overlapping its
   "QC Tool" title. Hide it while that view is active. */
body:has(#qcView.active) #menuToggle{display:none!important;pointer-events:none!important}
/* Same treatment for Log a Wear, Missed Wear, Add Watch, and Settings --
   named explicitly by ID rather than by a shared class, since these four
   don't share one class with each other (or with Compare), and several
   of them share the generic .modal class with other popups (like the
   weight editor) that should keep the hamburger visible. */
body:has(#logTodayWearModal.open) #menuToggle,
body:has(#logMissedWearPickModal.open) #menuToggle,
body:has(#watchModal.open) #menuToggle,
body:has(#watchRoomSetupModal.open) #menuToggle{display:none!important;pointer-events:none!important}

@media(max-width:760px){
  /* M006 — the Watch column was a fixed 205px regardless of viewport
     width, which (combined with table-layout:fixed) forced the whole
     Library table into horizontal scroll on narrow phones -- worse now
     that compact names carry more identity info in one string (e.g.
     "DATEJUST YG JUBILEE CHAMPAGNE BAG"). Existing ellipsis truncation
     on .watch-name-line/.watch-differentiators (see bundle.css) already
     handles names too long to fully display; this just gives Rank +
     Watch + the one active score column enough room to fit without
     forcing the table wider than the viewport. */
  html body #libraryTable .watch-cell{width:150px!important;max-width:150px!important}
  html body #libraryTable th:first-child,html body #libraryTable td:first-child{width:22px!important}

  /* M007 — Highest Rated mobile card. The previous mobile rule here
     targeted .dashboard-card-highest / .highest-rated-inline /
     .highest-rated-image / .highest-rated-name, none of which exist in
     the actual rendered markup (the real structure is .hr-feature with
     children .hr-rank / .hr-image / .hr-copy / .hr-score-plaque, laid
     out via CSS grid in bundle.css) -- so it silently did nothing. The
     real .hr-feature never had a mobile override at all: its desktop
     grid hard-floors at minmax(178px,...) + minmax(218px,...) columns,
     ~396px of minimum width before gap/padding, which a phone card
     can't satisfy -- hence the title/score content overflowing past the
     decorative inner border. Switch to a single stacked column instead
     of image-beside-text. */
  html body #dashboardView .highest-rated-panel .hr-feature{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas: "image" "rank" "copy" "score" !important;
    row-gap: 10px !important;
    column-gap: 0 !important;
    padding: 14px !important;
    height: auto !important;
  }
  html body #dashboardView .highest-rated-panel .hr-image{
    width: 100% !important;
    height: 190px !important;
    justify-self: stretch !important;
  }
  html body #dashboardView .highest-rated-panel .hr-rank{
    align-self: start !important;
  }
  html body #dashboardView .highest-rated-panel .hr-copy{
    align-self: start !important;
  }
  html body #dashboardView .highest-rated-panel .hr-name{
    font-size: 16px !important;
    white-space: normal !important;
  }
  html body #dashboardView .highest-rated-panel .hr-score-plaque{
    justify-self: start !important;
  }
  /* The desktop editorial frame (inner border + center divider line)
     assumes the two-column side-by-side layout -- the divider in
     particular would just be a stray vertical line down the middle of a
     now-stacked card, so drop both on mobile rather than try to make
     them track a variable stacked height. */
  html body #dashboardView .highest-rated-panel .hr-feature::before,
  html body #dashboardView .highest-rated-panel .hr-feature::after{
    display: none !important;
  }

  /* 005 — Rank + Watch + OVR visible */
  #libraryView #libraryTable.library-view-overall{width:100%!important;min-width:100%!important;table-layout:fixed!important}
  /* This was "width:auto" -- with table-layout:fixed, a <col> element's
     own width takes priority over any width set on the <td> cells
     inside it, so the separate .watch-cell{width:150px} fix elsewhere
     was being silently ignored here: "auto" let the column grow to fit
     the full (now-longer) compact watch name unconstrained, which is
     exactly what was pushing the medal/score columns off-screen. */
  #libraryView #libraryTable.library-view-overall col:nth-child(2){width:150px!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 — dead code removed (v0.3.10): this used to collapse the
     old floating account pill into a fixed-position 44px circle with a
     "♙" glyph, from before the account control was moved into the nav
     drawer as an ordinary row (v0.2.1). It kept firing at this
     breakpoint and silently overriding the account row's icon+label
     styling with an icon-only circle, unrelated to anything currently
     in the drawer. */

  /* 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:4px!important;padding:4px!important}
  .library-column-sets button{min-width:0!important;padding:12px 3px!important;font-size:9px!important;line-height:1!important;letter-spacing:.02em!important;text-transform:uppercase!important;font-weight:700!important;white-space:nowrap!important;border-radius:10px!important}

  /* D003/M002 accordion CSS moved to the top of this file (universal,
     not mobile-only) -- see the "always apply" section above. */
/* 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}

/* ============================================================
   Mobile side-menu -- isolated rebuild (v0.3.8)
   After repeatedly finding this drawer silently overridden by legacy
   rules (missing !important against an all-!important base rule, then
   a deliberate-but-unwanted horizontal-scroll override), this block is
   written to be unconditionally authoritative rather than to patch one
   more property: every rule uses the highest specificity tier found
   anywhere in bundle.css for this component (html body .topbar .topnav
   ...) with !important on every property that matters, and it's placed
   at the very end of the last-loaded stylesheet, so no earlier rule --
   found or not -- can out-rank it on specificity or source order.
   Decisions per user: descriptions dropped entirely on mobile (icon +
   title only), rows kept (not a grid), width capped at 224px -- same
   as desktop, revised down from an earlier 85vw/340px once it became
   visible that shrinking the window should never produce a *bigger*
   menu than full view.
   ============================================================ */
@media(max-width:900px){
  html body .topbar {
    width: 224px !important;
    max-width: 224px !important;
    padding: 68px 10px 16px !important;
  }
  html body .topbar .topnav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Icon + title only. No description line on mobile. */
  html body .topbar .topnav .wear-menu-copy small {
    display: none !important;
  }
  html body .topbar .topnav .utility-nav.wear-menu-card {
    padding: 9px 10px !important;
    min-height: 40px !important;
    gap: 8px !important;
  }
  html body .topbar .topnav .wear-menu-icon-copy {
    gap: 8px !important;
  }
  html body .topbar .topnav .wear-menu-icon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
  }
  html body .topbar .topnav .wear-menu-icon svg {
    width: 12px !important;
    height: 12px !important;
  }
  html body .topbar .topnav .wear-menu-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body .topbar .topnav .wear-menu-copy strong {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  html body .topbar .topnav .wear-menu-arrow {
    flex: 0 0 auto !important;
    font-size: 13px !important;
  }
  /* Download Backup / Restore Backup: plain text links, not icon rows */
  html body .topbar .topnav .utility-nav:not(.wear-menu-card) {
    padding: 9px 10px !important;
    font-size: 12px !important;
    min-height: auto !important;
    white-space: nowrap !important;
  }
}


/* ============================================================
   WristKeep v0.3.17 — canonical static Library table geometry
   Fixed column widths at every viewport; narrow screens scroll.
   ============================================================ */
html body #libraryView .table-shell{
  overflow-x:auto!important;
  overflow-y:visible!important;
}

html body #libraryView #libraryTable{
  table-layout:fixed!important;
  min-width:0!important;
  max-width:none!important;
  width:max-content!important;
  margin:0!important;
}

html body #libraryView #libraryTable.library-view-overall{
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
}
html body #libraryView #libraryTable.library-view-philosophy{
  width:820px!important;
  min-width:820px!important;
  max-width:820px!important;
}
html body #libraryView #libraryTable.library-view-wear{
  width:920px!important;
  min-width:920px!important;
  max-width:920px!important;
}
html body #libraryView #libraryTable.library-view-fidelity{
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
}

/* Exact colgroup widths. */
html body #libraryTable col.col-rank{width:60px!important}
html body #libraryTable col.col-watch{width:190px!important}
html body #libraryTable.library-view-overall col.col-medal{width:40px!important}
html body #libraryTable.library-view-overall col.col-overall{width:100px!important}
html body #libraryTable.library-view-philosophy col.col-score{width:95px!important}
html body #libraryTable.library-view-wear col.col-wear{width:95px!important}
html body #libraryTable.library-view-wear col.col-last-worn{width:100px!important}
html body #libraryTable.library-view-fidelity col.col-fidelity{width:140px!important}

/* Defeat legacy per-cell and viewport width overrides. */
html body #libraryTable th:nth-child(1),
html body #libraryTable td:nth-child(1){width:60px!important;min-width:60px!important;max-width:60px!important}
html body #libraryTable th:nth-child(2),
html body #libraryTable td:nth-child(2){width:190px!important;min-width:190px!important;max-width:190px!important}
html body #libraryTable.library-view-overall th:nth-child(3),
html body #libraryTable.library-view-overall td:nth-child(3){width:40px!important;min-width:40px!important;max-width:40px!important}
html body #libraryTable.library-view-overall th:nth-child(4),
html body #libraryTable.library-view-overall td:nth-child(4){width:100px!important;min-width:100px!important;max-width:100px!important}
html body #libraryTable.library-view-philosophy th:nth-child(n+3),
html body #libraryTable.library-view-philosophy td:nth-child(n+3){width:95px!important;min-width:95px!important;max-width:95px!important}
html body #libraryTable.library-view-wear th:nth-child(n+3):nth-child(-n+8),
html body #libraryTable.library-view-wear td:nth-child(n+3):nth-child(-n+8){width:95px!important;min-width:95px!important;max-width:95px!important}
html body #libraryTable.library-view-wear th:nth-child(9),
html body #libraryTable.library-view-wear td:nth-child(9){width:100px!important;min-width:100px!important;max-width:100px!important}
html body #libraryTable.library-view-fidelity th:nth-child(3),
html body #libraryTable.library-view-fidelity td:nth-child(3){width:140px!important;min-width:140px!important;max-width:140px!important}

/* Typography and watch-name truncation. */
html body #libraryTable .watch-cell{
  box-sizing:border-box!important;
  padding-left:5px!important;
  padding-right:5px!important;
  text-align:left!important;
  overflow:hidden!important;
}
html body #libraryTable .watch-name-line,
html body #libraryTable .watch-name-text{
  display:block!important;
  width:180px!important;
  max-width:180px!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:10px!important;
  line-height:1.2!important;
}
html body #libraryTable .watch-differentiators,
html body #libraryTable .watch-cell > span:last-child{
  display:block!important;
  width:180px!important;
  max-width:180px!important;
  min-width:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:9px!important;
  line-height:1.2!important;
}

/* Alignment: Watch remains left-aligned; all other table data centered. */
html body #libraryTable th,
html body #libraryTable td{text-align:center!important}
html body #libraryTable th:nth-child(2),
html body #libraryTable td:nth-child(2){text-align:left!important}
html body #libraryTable.library-view-overall th:nth-child(4),
html body #libraryTable.library-view-overall td:nth-child(4){text-align:center!important}
html body #libraryTable.library-view-fidelity th:nth-child(3),
html body #libraryTable.library-view-fidelity td:nth-child(3){padding-left:5px!important;padding-right:5px!important;text-align:center!important}

/* True header-label centering with independently positioned controls.
   No pseudo-element or invisible alignment spacers. */
html body #libraryTable th[data-sort]{position:relative!important;padding-left:5px!important;padding-right:5px!important}
html body #libraryTable th[data-sort]:not(:nth-child(2)) .library-th-content{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  gap:0!important;
}
html body #libraryTable th[data-sort] .library-th-content::before,
html body #libraryTable th[data-sort] .library-th-content::after,
html body #libraryTable .wear-header-label-spacer{
  content:none!important;
  display:none!important;
  width:0!important;
  min-width:0!important;
  flex:0 0 0!important;
}
html body #libraryTable .table-sort-arrow{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%) rotate(0deg)!important;
  margin:0!important;
}
html body #libraryTable th.sort-asc .table-sort-arrow{
  transform:translateY(-50%) rotate(180deg)!important;
}
html body #libraryTable th.sort-desc .table-sort-arrow{
  transform:translateY(-50%) rotate(0deg)!important;
}
html body #libraryTable .table-help-icon{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
}
html body #libraryTable .medal-column-head{padding:0!important}

/* =====================================================================
   WristKeep v0.3.18 — final Library WATCH alignment and 430px HR centering
   ===================================================================== */

/* WATCH is the only Library header that remains editorially left aligned. */
html body #libraryView #libraryTable thead th:nth-child(2){
  text-align:left!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .library-th-content{
  justify-content:flex-start!important;
  text-align:left!important;
  width:100%!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .compact-header-label{
  text-align:left!important;
}

/* Final narrow-mobile state: center the full Highest Rated content column.
   These rules intentionally override the older max-width:760px block in this
   stylesheet that forced rank/copy/score back to the start edge. */
@media (max-width:430px){
  html body #dashboardView .highest-rated-panel .hr-feature{
    justify-items:center!important;
  }
  html body #dashboardView .highest-rated-panel .hr-rank,
  html body #dashboardView .highest-rated-panel .hr-copy,
  html body #dashboardView .highest-rated-panel .hr-score-plaque{
    align-self:center!important;
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  html body #dashboardView .highest-rated-panel .hr-copy{
    align-items:center!important;
  }
  html body #dashboardView .highest-rated-panel .hr-name,
  html body #dashboardView .highest-rated-panel .hr-metal-dial,
  html body #dashboardView .highest-rated-panel .hr-details{
    text-align:center!important;
  }
  html body #dashboardView .highest-rated-panel .hr-score-plaque{
    align-items:center!important;
  }
}


/* =====================================================================
   WristKeep v0.3.22 — mobile Library + Missed Wear cleanup
   - Removes the obsolete 48px mobile Overall Rank rule entirely.
   - Makes WATCH visibly left-aligned through its inner header wrapper.
   - Rebuilds the Missed Wear date dialog as a genuinely compact,
     content-driven 360px mobile card.
   - Hides the global drawer toggle while the date workflow is open.
   ===================================================================== */

/* WATCH header: left aligned in every Library mode, including iOS Safari. */
html body #libraryView #libraryTable thead th:nth-child(2),
html body #libraryView #libraryTable thead th:nth-child(2) .library-th-content,
html body #libraryView #libraryTable thead th:nth-child(2) .compact-header-label{
  text-align:left!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .library-th-content{
  display:flex!important;
  justify-content:flex-start!important;
  align-items:center!important;
  width:100%!important;
  padding-left:0!important;
  margin-left:0!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .compact-header-label{
  display:block!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* Date workflow is a modal; the global drawer control must not sit over it. */
body:has(#logMissedWearDateModal.open) #menuToggle{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media (max-width:540px){
  html body #logMissedWearDateModal{
    display:none;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-y:auto!important;
    min-height:100dvh!important;
    height:100dvh!important;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
    box-sizing:border-box!important;
  }
  html body #logMissedWearDateModal.open{
    display:flex!important;
  }

  html body #logMissedWearDateModal > .missed-wear-date-card{
    display:block!important;
    flex:none!important;
    width:min(360px,calc(100vw - 24px))!important;
    min-width:0!important;
    max-width:360px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
    border-radius:16px!important;
  }

  html body #logMissedWearDateModal .modal-head{
    position:relative!important;
    display:flex!important;
    align-items:flex-start!important;
    min-height:0!important;
    padding:16px!important;
  }
  html body #logMissedWearDateModal .modal-head h2{
    font-size:clamp(24px,7vw,32px)!important;
    line-height:1.08!important;
  }

  html body #logMissedWearDateModal .missed-wear-watch-row{
    min-height:0!important;
    margin:12px!important;
    padding:10px!important;
  }

  html body #logMissedWearDateModal #logMissedWearDateForm{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  html body #logMissedWearDateModal .form-grid{
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:12px!important;
  }
  html body #logMissedWearDateModal .missed-wear-date-field{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }
  html body #logMissedWearDateModal #missedWearDate{
    display:block!important;
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    margin:0!important;
    padding:10px 12px!important;
    box-sizing:border-box!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html body #logMissedWearDateModal #missedWearStatus[hidden]{
    display:none!important;
  }
  html body #logMissedWearDateModal .modal-actions{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:12px!important;
    box-sizing:border-box!important;
  }
  html body #logMissedWearDateModal .modal-actions>div{
    display:flex!important;
    gap:10px!important;
    width:100%!important;
    order:1!important;
  }
  html body #logMissedWearDateModal .modal-actions>div button{
    flex:1 1 0!important;
  }
  html body #logMissedWearDateModal .modal-actions>span{
    order:2!important;
    width:100%!important;
    margin:10px 0 0!important;
  }
}

/* =====================================================================
   WristKeep v0.3.23 — canonical Library headers, compact tables,
   three-state storage scoring, compact Missed Wear date interface
   ===================================================================== */

/* Library headers: one honest inline sequence — TITLE, ARROW, INFO.
   No pseudo spacer, no absolute positioning, no compensating margins. */
html body #libraryView #libraryTable th[data-sort] .library-th-content::after{
  content:none!important;
  display:none!important;
}
html body #libraryView #libraryTable thead th .library-th-content{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0 auto!important;
  padding:0!important;
  gap:3px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
html body #libraryView #libraryTable thead th .compact-header-label,
html body #libraryView #libraryTable thead th .table-sort-arrow,
html body #libraryView #libraryTable thead th .table-help-icon{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  flex:0 0 auto!important;
}
html body #libraryView #libraryTable thead th:nth-child(2){
  text-align:left!important;
  padding-left:5px!important;
  padding-right:5px!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .library-th-content{
  justify-content:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .compact-header-label{
  margin:0!important;
  text-align:left!important;
}

/* Locked static Library geometry. */
html body #libraryView #libraryTable.library-view-overall{
  width:350px!important;
  min-width:350px!important;
}
html body #libraryView #libraryTable.library-view-overall col.col-rank{width:60px!important}
html body #libraryView #libraryTable.library-view-overall col.col-watch{width:190px!important}
html body #libraryView #libraryTable.library-view-overall col.col-medal{width:30px!important}
html body #libraryView #libraryTable.library-view-overall col.col-overall{width:70px!important}

html body #libraryView #libraryTable.library-view-philosophy{
  width:820px!important;
  min-width:820px!important;
}
html body #libraryView #libraryTable.library-view-philosophy col.col-rank{width:60px!important}
html body #libraryView #libraryTable.library-view-philosophy col.col-watch{width:190px!important}
html body #libraryView #libraryTable.library-view-philosophy col.col-score{width:95px!important}

html body #libraryView #libraryTable.library-view-wear{
  width:920px!important;
  min-width:920px!important;
}
html body #libraryView #libraryTable.library-view-wear col.col-rank{width:60px!important}
html body #libraryView #libraryTable.library-view-wear col.col-watch{width:190px!important}
html body #libraryView #libraryTable.library-view-wear col.col-wear{width:95px!important}
html body #libraryView #libraryTable.library-view-wear col.col-last-worn{width:100px!important}

html body #libraryView #libraryTable.library-view-fidelity{
  width:350px!important;
  min-width:350px!important;
}
html body #libraryView #libraryTable.library-view-fidelity col.col-rank{width:60px!important}
html body #libraryView #libraryTable.library-view-fidelity col.col-watch{width:190px!important}
html body #libraryView #libraryTable.library-view-fidelity col.col-fidelity{width:100px!important}

/* Watch text geometry retained. */
html body #libraryView #libraryTable .watch-cell{
  padding-left:5px!important;
  padding-right:5px!important;
  text-align:left!important;
}
html body #libraryView #libraryTable .watch-name-line{
  font-size:10px!important;
  line-height:1.2!important;
  text-align:left!important;
}
html body #libraryView #libraryTable .watch-name-text{
  display:block!important;
  width:180px!important;
  max-width:180px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
html body #libraryView #libraryTable .watch-differentiators{
  font-size:9px!important;
  line-height:1.2!important;
  text-align:left!important;
}

/* Canonical storage states:
   Full >=901, Compact 621–900, Smallest <=620.
   At the smallest state, scores and their reserved rail disappear. */
@media (max-width:620px){
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card{
    padding-bottom:0!important;
  }
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-card-footer,
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-meta,
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .overall-score{
    display:none!important;
  }
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-tile-photo,
  html body #roomView :is(#watchGrid,#watchBoxGrid,#drawerGrid,#windersGrid,#incomingGrid)
  .room-slot-filled .watch-image{
    margin-bottom:0!important;
    transform:none!important;
  }
}

/* Compact Missed Wear date dialog for iPhone. */
@media (max-width:540px){
  html body #logMissedWearDateModal{
    align-items:flex-start!important;
    justify-content:center!important;
    overflow-y:auto!important;
    padding-top:max(12px,env(safe-area-inset-top))!important;
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }
  html body #logMissedWearDateModal > .missed-wear-date-card{
    width:min(340px,calc(100vw - 24px))!important;
    max-width:340px!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;
    margin:0 auto!important;
    overflow-y:auto!important;
  }
  html body #logMissedWearDateModal .form-grid{
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:8px!important;
  }
  html body #logMissedWearDateModal .missed-wear-date-field{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
  }
  html body #logMissedWearDateModal .missed-wear-date-affordance{
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:1!important;
    color:#a79f95!important;
    font-size:13px!important;
    line-height:1!important;
    pointer-events:none!important;
  }
  html body #logMissedWearDateModal #missedWearDate{
    position:relative!important;
    z-index:2!important;
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:8px 12px!important;
    box-sizing:border-box!important;
    background:transparent!important;
  }
  html body #logMissedWearDateModal .missed-wear-date-field:has(#missedWearDate:valid) .missed-wear-date-affordance{
    display:none!important;
  }
  html body #logMissedWearDateModal .modal-actions{
    padding:8px!important;
  }
}



/* =====================================================================
   WristKeep v0.3.24 — authoritative Library geometry + clean date dialog
   ===================================================================== */

/* Rank is identical and left aligned in every Library mode. */
html body #libraryView #libraryTable col.col-rank{width:60px!important}
html body #libraryView #libraryTable thead th:nth-child(1),
html body #libraryView #libraryTable tbody td:nth-child(1){
  width:60px!important;
  min-width:60px!important;
  max-width:60px!important;
  box-sizing:border-box!important;
  text-align:left!important;
  padding-left:5px!important;
  padding-right:0!important;
}
html body #libraryView #libraryTable thead th:nth-child(1) .library-th-content{
  justify-content:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* WATCH remains left aligned with the same 5px inset as its rows. */
html body #libraryView #libraryTable thead th:nth-child(2),
html body #libraryView #libraryTable tbody td:nth-child(2){
  text-align:left!important;
  padding-left:5px!important;
  padding-right:5px!important;
}
html body #libraryView #libraryTable thead th:nth-child(2) .library-th-content{
  justify-content:flex-start!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* Compact locked tables. */
html body #libraryView #libraryTable.library-view-overall{
  width:344px!important;min-width:344px!important;max-width:344px!important;
}
html body #libraryView #libraryTable.library-view-overall col.col-rank{width:60px!important}
html body #libraryView #libraryTable.library-view-overall col.col-watch{width:190px!important}
html body #libraryView #libraryTable.library-view-overall col.col-medal{width:24px!important}
html body #libraryView #libraryTable.library-view-overall col.col-overall{width:70px!important}
html body #libraryView #libraryTable.library-view-overall th:nth-child(3),
html body #libraryView #libraryTable.library-view-overall td:nth-child(3){
  width:24px!important;min-width:24px!important;max-width:24px!important;padding:0!important;
}
html body #libraryView #libraryTable.library-view-overall th:nth-child(4),
html body #libraryView #libraryTable.library-view-overall td:nth-child(4){
  width:70px!important;min-width:70px!important;max-width:70px!important;
}

html body #libraryView #libraryTable.library-view-fidelity{
  width:344px!important;min-width:344px!important;max-width:344px!important;
}
html body #libraryView #libraryTable.library-view-fidelity col.col-rank{width:60px!important}
html body #libraryView #libraryTable.library-view-fidelity col.col-watch{width:190px!important}
html body #libraryView #libraryTable.library-view-fidelity col.col-fidelity{width:94px!important}
html body #libraryView #libraryTable.library-view-fidelity th:nth-child(3),
html body #libraryView #libraryTable.library-view-fidelity td:nth-child(3){
  width:94px!important;min-width:94px!important;max-width:94px!important;
}

/* Sort glyphs use their actual ▲/▼ text; never rotate in CSS. */
html body #libraryView #libraryTable .table-sort-arrow,
html body #libraryView #libraryTable th.sort-asc .table-sort-arrow,
html body #libraryView #libraryTable th.sort-desc .table-sort-arrow{
  transform:none!important;
}

/* Clean isolated Missed Wear date dialog. It intentionally does not use
   .modal-card or .missed-wear-date-card, so legacy modal patches cannot
   control its size or internal rows. */
html body #logMissedWearDateModal{
  display:none;
  position:fixed!important;
  inset:0!important;
  z-index:1000!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-y:auto!important;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.76)!important;
}
html body #logMissedWearDateModal.open{display:flex!important}
html body #logMissedWearDateModal .wk-missed-date-dialog{
  width:min(340px,calc(100vw - 24px))!important;
  max-width:340px!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  color:#f5f1ea!important;
  background:linear-gradient(180deg,#0d0c0b 0%,#12100e 100%)!important;
  border:1px solid rgba(194,151,72,.36)!important;
  border-radius:18px!important;
  box-shadow:0 22px 70px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.025)!important;
}
html body #logMissedWearDateModal .wk-missed-date-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:16px!important;
  border-bottom:1px solid rgba(194,151,72,.22)!important;
}
html body #logMissedWearDateModal .wk-missed-date-head .eyebrow{
  margin:0 0 6px!important;
}
html body #logMissedWearDateModal .wk-missed-date-head h2{
  margin:0!important;
  font-size:24px!important;
  line-height:1.12!important;
  letter-spacing:-.02em!important;
}
html body #logMissedWearDateModal .wk-missed-date-head .icon-button{
  flex:0 0 44px!important;
  width:44px!important;height:44px!important;
  min-width:44px!important;min-height:44px!important;
}
html body #logMissedWearDateModal .wk-missed-date-watch{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;
  margin:12px!important;
  padding:10px!important;
  min-height:88px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(194,151,72,.28)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.018)!important;
}
html body #logMissedWearDateModal .wk-missed-date-watch .missed-wear-thumb{
  width:72px!important;height:72px!important;min-width:72px!important;
  border-radius:12px!important;overflow:hidden!important;
}
html body #logMissedWearDateModal .wk-missed-date-watch strong{
  min-width:0!important;
  font-size:14px!important;
  line-height:1.2!important;
}
html body #logMissedWearDateModal .wk-missed-date-form{
  display:block!important;
  margin:0!important;
  padding:0 12px 12px!important;
}
html body #logMissedWearDateModal .wk-date-picker{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 20px!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
  cursor:pointer!important;
  color:#d8c6a1!important;
  background:linear-gradient(180deg,rgba(39,31,21,.88),rgba(21,18,14,.96))!important;
  border:1px solid rgba(204,159,74,.58)!important;
  border-radius:12px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 0 0 1px rgba(0,0,0,.45)!important;
}
html body #logMissedWearDateModal .wk-date-picker:focus-within{
  border-color:#d5ac5a!important;
  box-shadow:0 0 0 2px rgba(213,172,90,.18),inset 0 1px rgba(255,255,255,.04)!important;
}
html body #logMissedWearDateModal .wk-date-picker-text{
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  font-size:14px!important;
  line-height:1!important;
}
html body #logMissedWearDateModal .wk-date-picker-icon{
  color:#d5ac5a!important;
  font-size:16px!important;
  line-height:1!important;
  text-align:center!important;
}
html body #logMissedWearDateModal #missedWearDate{
  position:absolute!important;
  inset:0!important;
  width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;
  opacity:0!important;
  cursor:pointer!important;
}
html body #logMissedWearDateModal #missedWearStatus{
  margin:8px 0 0!important;
}
html body #logMissedWearDateModal .wk-missed-date-actions{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  margin-top:10px!important;
  padding-top:10px!important;
  border-top:1px solid rgba(194,151,72,.18)!important;
}
html body #logMissedWearDateModal .wk-missed-date-actions>div{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
html body #logMissedWearDateModal .wk-missed-date-actions button{
  width:100%!important;
  min-height:44px!important;
}
html body #logMissedWearDateModal .wk-missed-date-actions>span{
  color:#9f978d!important;
  font-size:12px!important;
  line-height:1.3!important;
}

body:has(#logMissedWearDateModal.open) #menuToggle{
  display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
}


/* =====================================================================
   WristKeep v0.3.25 — consolidated mobile interaction and modal system
   ===================================================================== */
/* Empty storage slots: exactly one shared centered plus. */
html body #roomView .storage-empty-plus{display:grid!important;place-items:center!important;position:absolute!important;inset:0!important;margin:auto!important;width:52px!important;height:52px!important;color:#d9a94a!important;font-size:38px!important;font-weight:500!important;line-height:1!important;text-shadow:0 0 18px rgba(214,165,66,.22)!important}
html body #roomView :is(.room-empty-slot,.drawer-empty-card,.incoming-empty-card){position:relative!important}

/* Scores are image overlays, never footer content.
   v0.3.27: dedicated .storage-score-pill component (Priority 2 from the
   post-v0.3.26 findings). Bottom-centered, compact, does not extend
   .overall-score in any way so it can't inherit that class's width,
   margin, display, or positioning from anywhere else in the app. */
html body #roomView .watch-tile-photo{position:relative!important}
html body #roomView .storage-score-pill{
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:absolute!important;left:50%!important;right:auto!important;top:auto!important;
  bottom:7px!important;transform:translateX(-50%)!important;
  width:26px!important;height:15px!important;min-width:26px!important;max-width:26px!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;
  border:1px solid rgba(218,173,83,.48)!important;border-radius:999px!important;
  background:rgba(9,9,9,.78)!important;color:#e2b85f!important;
  font-size:8.5px!important;font-weight:700!important;line-height:1!important;
  z-index:6!important;backdrop-filter:blur(5px)!important;
}
html body #roomView .watch-card-footer{padding-bottom:0!important}
@media(max-width:620px), (hover:none) and (pointer:coarse) and (max-height:600px){html body #roomView .storage-score-pill{display:none!important}}

/* Suppress iOS image callout only in draggable storage surfaces. */
html body #roomView [data-room-watch-id],html body #roomView [data-room-watch-id] img{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-user-drag:none!important}
body.pw-touch-drag-active{overscroll-behavior:none!important;cursor:grabbing!important}
.pw-touch-drag-ghost{position:fixed!important;z-index:100000!important;width:112px!important;pointer-events:none!important;transform:translate(-50%,-50%) scale(.92)!important;opacity:.88!important;filter:drop-shadow(0 14px 24px rgba(0,0,0,.65))!important}
.pw-touch-drag-ghost-hidden{visibility:hidden!important}
.pw-touch-drag-ghost .watch-card-footer,.pw-touch-drag-ghost .wear-pill{display:none!important}

/* Shared compact Watch Record shell. */
html body #watchModal>.modal-card{height:calc(100dvh - 20px)!important;max-height:calc(100dvh - 20px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
html body #watchModal .watch-record-hero{padding:15px 20px 13px!important;min-height:0!important}
html body #watchModal .record-title-block{display:grid!important;gap:5px!important}
html body #watchModal .record-title-block .eyebrow{margin:0!important}
html body #watchModal .modal-title-row{display:grid!important;gap:2px!important;align-items:start!important}
html body #watchModal .modal-title-row h2{font-size:clamp(25px,5vw,34px)!important;line-height:1.02!important;margin:0!important}
html body #watchModal #recordReference{display:block!important;font-size:clamp(14px,3.2vw,20px)!important;line-height:1.15!important;margin:0!important}
html body #watchModal .record-brand-line{font-size:12px!important;line-height:1.15!important;margin:0!important}
html body #watchModal .record-subtitle{font-size:10px!important;line-height:1.2!important;margin:2px 0 0!important}
html body #watchModal:not(.editing-watch) #modalTitle,html body #watchModal:not(.editing-watch) #recordReference,html body #watchModal:not(.editing-watch) #recordSubtitle{display:none!important}
html body #watchModal .record-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px!important;padding:0!important;overflow:visible!important}
html body #watchModal .record-tabs button{min-height:40px!important;height:40px!important;padding:0 7px!important;font-size:10px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body #watchModal .record-tabs button span{display:none!important}
html body #watchModal #watchForm{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
html body #watchModal .modal-pane{height:100%!important;max-height:none!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;padding:14px 18px 10px!important}
html body #watchModal .watch-record-actions{display:grid!important;grid-template-columns:1fr 1fr 1.35fr!important;gap:9px!important;padding:11px 18px!important;align-items:center!important}
html body #watchModal .watch-record-actions button{min-width:0!important;width:100%!important;height:46px!important;padding:0 10px!important}
html body #watchModal .watch-record-actions #saveStatus{grid-column:1/-1!important;text-align:center!important;font-size:10px!important;margin:0!important}

/* Fixed-shell Comparison results with one internal scrolling chamber.
   FIX (v0.3.27): every selector below is now scoped to #compareResultsMode.open.
   Previously the bare #compareResultsMode id rule set display:flex!important
   unconditionally under 700px, bypassing the .wear-mode/.wear-mode.open
   display:none/flex gating that controls every other overlay in the app.
   That meant a closed Compare Results overlay was forced visible purely by
   crossing the 700px breakpoint (root cause of the resize state-leakage bug).
   Requiring .open here means CSS can no longer open this overlay by itself --
   only JS adding the .open class can. */
@media(max-width:700px){
 html body #compareResultsMode.open{height:100dvh!important;max-height:100dvh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;padding:0!important}
 html body #compareResultsMode.open .wear-mode-head{flex:0 0 auto!important;padding:18px 16px 12px!important}
 html body #compareResultsMode.open .wear-mode-head h2{font-size:34px!important;line-height:1!important;margin:5px 0 7px!important}
 html body #compareResultsMode.open .wear-mode-head p:last-child{font-size:13px!important;line-height:1.3!important;margin:0!important}
 html body #compareResultsMode.open .compare-results-grid{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;padding-bottom:24px!important}
 html body #compareResultsMode.open .wear-mode-actions{position:static!important;flex:0 0 auto!important;transform:none!important;left:auto!important;right:auto!important;width:calc(100% - 20px)!important;margin:0 10px!important}
 body:has(#compareResultsMode.open){overflow:hidden!important}
}

/* Nine-metal dashboard system. */
html body .metals-breakdown-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 14px!important}
html body .metal-breakdown-row{display:grid!important;grid-template-columns:14px 1fr auto!important;align-items:center!important;gap:7px!important;min-width:0!important}
html body .metal-breakdown-row b{font-size:12px!important;white-space:nowrap!important}
html body .metal-breakdown-row strong{font-size:12px!important}
html body .metal-rose i,html body .metals-bar-segment.metal-rose{background:#b9786b!important}
html body .metal-titanium i,html body .metals-bar-segment.metal-titanium{background:#64696c!important}
html body .metal-two-tone i,html body .metals-bar-segment.metal-two-tone{background:linear-gradient(90deg,#d6aa4b 0 50%,#aaa 50%)!important}
html body .metal-ceramic i,html body .metals-bar-segment.metal-ceramic{background:#252525!important}
html body .metal-other i,html body .metals-bar-segment.metal-other{background:#8a725c!important}


/* =====================================================================
   WristKeep v0.3.26 — authoritative cleanup
   ===================================================================== */
html body #libraryView #libraryTable .library-medal{
  width:16px!important;height:16px!important;
  min-width:16px!important;min-height:16px!important;
  max-width:16px!important;max-height:16px!important;
  flex:0 0 16px!important;transform:none!important;transition:none!important;
  filter:none!important;box-shadow:none!important;cursor:default!important;
}

html body #dashboardView .dashboard-section-title{
  margin:0!important;
  font-family:inherit!important;font-size:9.5px!important;font-weight:700!important;line-height:1.3!important;
  letter-spacing:.1em!important;text-transform:uppercase!important;color:#c8a96b!important;
}

html body #dashboardView .wotm-winner{
  display:grid!important;
  grid-template-columns:clamp(82px,22vw,140px) minmax(0,1fr)!important;
  min-width:0!important;overflow:hidden!important;
}
html body #dashboardView .wotm-winner-image{
  width:100%!important;max-width:140px!important;height:auto!important;
  aspect-ratio:1/1!important;min-width:0!important;overflow:hidden!important;
}
html body #dashboardView .wotm-winner-copy{min-width:0!important;overflow:hidden!important}
html body #dashboardView .wotm-winner-image .watch-tile-photo,
html body #dashboardView .wotm-winner-image .watch-tile-photo img{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  /* FIX (v0.3.27): this was object-fit:cover, which crops/zooms the photo --
     the same regression documented at the top of this file for #roomView.
     Watch photos must always use contain so the full image is visible. */
  object-fit:contain!important;object-position:center!important;transform:none!important;
}