/* drawer feature styles (loaded after app.css). */

/* ---------- Header: icon prev / next ---------- */
.drawer-nav .btn { width: 36px; min-height: 36px; padding: 0; }
.drawer-nav .btn i { font-size: 17px; }

/* ---------- Actions: primary pair, then a quiet tool row ---------- */
.drawer .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drawer-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.drawer-tools .btn {
  flex-direction: column; gap: 6px; min-height: 68px; padding: 10px 6px;
  font-size: 12.5px; line-height: 1.2; white-space: normal; text-align: center;
}
.drawer-tools .btn i { font-size: 20px; color: var(--graphite); transition: color var(--t); }
.drawer-tools .btn[aria-pressed="true"] { background: var(--ash-2); }
.drawer-tools .btn[aria-pressed="true"] i { color: var(--accent); }

/* ---------- Similar available units ---------- */
.similar { display: grid; gap: 12px; }
.similar-head { display: grid; gap: 2px; }
.similar-head h4 { font-size: 17px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.3; color: var(--carbon); }
.similar-head .fine { margin: 0; }
.similar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sim-card {
  display: grid; align-content: start; gap: 1px; min-width: 0; padding: 12px 12px 13px;
  border-radius: var(--r-card); background: var(--ash); color: var(--graphite); text-decoration: none;
  transition: background-color var(--t);
}
.sim-card:hover { background: var(--ash-2); }
.sim-card b { margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--carbon); letter-spacing: -0.005em; }
.sim-card span { overflow: hidden; font-size: 13px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums lining-nums; }
.sim-card .sim-price { color: var(--carbon); }
.sim-card .sim-delta { margin-top: 4px; font-size: 12px; color: var(--fog); }
.similar-empty { margin: 0; font-size: 14px; color: var(--pewter); }
.similar-empty .link { font-size: 14px; color: var(--carbon); box-shadow: inset 0 -1px 0 currentColor; }

@media (max-width: 400px) {
  .drawer-body { padding-left: 16px; padding-right: 16px; }
  .drawer .tabs button { padding: 0 4px; font-size: 12px; white-space: nowrap; }
  .sim-card { padding: 10px 10px 11px; }
  .sim-card b { font-size: 14px; }
  .sim-card span { font-size: 12.5px; }
}

/* ---------- Scrim fades in whenever it appears (with or without view transitions) ---------- */
.scrim:not([hidden]) { animation: unit-scrim-in .4s ease both; }
@keyframes unit-scrim-in { from { opacity: 0; } }

/* ---------- View transitions ----------
   js/views/drawer.js sets :root[data-unit-vt] to "open", "next" or "prev" for the life of
   one transition. The page never cross-fades: the root swaps to the live new state at once
   (so the scrim's own fade above plays inside it) and only the panel is animated, always
   above the root. Browsers without the API, or with reduced motion, skip all of this. */
:root[data-unit-vt]::view-transition-old(root),
:root[data-unit-vt]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Opening: the panel slides in over the fading scrim */
:root[data-unit-vt="open"] .drawer { view-transition-name: unit-drawer; transition: none; }
:root[data-unit-vt="open"]::view-transition-group(unit-drawer) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
:root[data-unit-vt="open"]::view-transition-old(unit-drawer) { animation: none; opacity: 0; }
:root[data-unit-vt="open"]::view-transition-new(unit-drawer) { animation: none; opacity: 1; mix-blend-mode: normal; }

/* Switching units: the body slides a little in the direction of travel, the header holds */
:root[data-unit-vt="next"] .drawer,
:root[data-unit-vt="prev"] .drawer { view-transition-name: unit-drawer; }
:root[data-unit-vt="next"] .drawer-head,
:root[data-unit-vt="prev"] .drawer-head { view-transition-name: unit-drawer-head; }
:root[data-unit-vt="next"]::view-transition-group(unit-drawer),
:root[data-unit-vt="prev"]::view-transition-group(unit-drawer) { background: var(--canvas); }
:root[data-unit-vt="next"]::view-transition-image-pair(unit-drawer),
:root[data-unit-vt="prev"]::view-transition-image-pair(unit-drawer) { overflow: clip; }
:root[data-unit-vt="next"]::view-transition-old(unit-drawer),
:root[data-unit-vt="prev"]::view-transition-old(unit-drawer),
:root[data-unit-vt="next"]::view-transition-new(unit-drawer),
:root[data-unit-vt="prev"]::view-transition-new(unit-drawer) { mix-blend-mode: normal; }
:root[data-unit-vt="next"]::view-transition-old(unit-drawer) { animation: .2s cubic-bezier(.4, 0, 1, 1) both unit-vt-out-start; }
:root[data-unit-vt="next"]::view-transition-new(unit-drawer) { animation: .36s cubic-bezier(.2, .7, .1, 1) .05s both unit-vt-in-end; }
:root[data-unit-vt="prev"]::view-transition-old(unit-drawer) { animation: .2s cubic-bezier(.4, 0, 1, 1) both unit-vt-out-end; }
:root[data-unit-vt="prev"]::view-transition-new(unit-drawer) { animation: .36s cubic-bezier(.2, .7, .1, 1) .05s both unit-vt-in-start; }
:root[data-unit-vt]::view-transition-group(unit-drawer-head) { animation-duration: .25s; }

@keyframes unit-vt-out-start { to { opacity: 0; transform: translateX(-18px); } }
@keyframes unit-vt-out-end { to { opacity: 0; transform: translateX(18px); } }
@keyframes unit-vt-in-end { from { opacity: 0; transform: translateX(18px); } }
@keyframes unit-vt-in-start { from { opacity: 0; transform: translateX(-18px); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-unit-vt]::view-transition-group(*),
  :root[data-unit-vt]::view-transition-old(*),
  :root[data-unit-vt]::view-transition-new(*) { animation: none !important; }
}