/* Only what differs from the extension's sidebar.css, which stays an unedited copy. */
/* Scrolling to something leaves it clear of the fixed bars. */
html{scroll-padding:76px 0 84px}
header,footer{padding-left:max(16px,calc((100% - 728px)/2),env(safe-area-inset-left));padding-right:max(16px,calc((100% - 728px)/2),env(safe-area-inset-right))}
header{padding-top:max(12px,env(safe-area-inset-top));backdrop-filter:blur(8px)}
footer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

.header-actions{grid-template-columns:1fr auto 1fr}
#batch{justify-self:start}
.brand{grid-column:2}
.header-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.header-icon{flex:none}
.header-labeled{display:flex;align-items:center;gap:6px;width:auto;padding:0 10px;white-space:nowrap;font-size:var(--ff-text-button)}
.header-labeled>[id$=icon]{display:block;height:20px}
.brand{display:flex;align-items:center;gap:8px;min-width:0;color:inherit;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.brand img{display:block;width:28px;height:28px}
.pill{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:999px;background:transparent;color:var(--ff-muted);font-size:13px;font-weight:400}
.pill:hover{background:transparent;color:var(--ff-text);border-color:var(--ff-muted)}
.pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pill .sun,:root[data-theme="dark"] .pill .moon{display:none}
:root[data-theme="dark"] .pill .sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pill .moon{display:none}
  :root:not([data-theme="light"]) .pill .sun{display:block}
}

#empty:not([hidden]){height:calc(100dvh - 61px - 16px - 64px);min-height:280px}
.empty-card{width:100%}
.empty-local{flex-wrap:wrap;padding:0 16px;bottom:max(18px,env(safe-area-inset-bottom))}
.empty-local a{color:inherit}

#settings-dialog{height:100dvh}
.settings-head,.settings-body{padding-left:max(16px,calc((100% - 728px)/2),env(safe-area-inset-left));padding-right:max(16px,calc((100% - 728px)/2),env(safe-area-inset-right))}
.settings-head{padding-top:max(12px,env(safe-area-inset-top))}
.settings-body{padding-bottom:max(16px,env(safe-area-inset-bottom))}
.support-link{text-decoration:none}
.support-link span{display:flex}
.narrow-only{display:none}
.settings-privacy{align-self:center;margin-top:auto;padding-top:28px;color:var(--ff-subtle);font-size:var(--ff-text-sm)}

@media (max-width:560px){
  .brand span,.pill{display:none}
  .narrow-only{display:flex}
  /* The notice below can take two lines here. */
  #empty:not([hidden]){height:calc(100dvh - 61px - 16px - 88px)}
}

/* A long press on the collage is for dragging, not for selecting it or opening the image menu. */
#preview-stage,#crop-stage,header,footer{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Touch has no hover, so the buttons on each strip stay visible and the handles are easier to catch. */
@media (hover:none){
  .preview-region :is(.delete-part,.move-part):not(:disabled){opacity:1;pointer-events:auto}
  #part-hint{display:none!important}
  /* A finger leaves :hover stuck on the last strip it touched. */
  .preview-part:is(:hover,.highlighted):not(:focus-visible){background:transparent;box-shadow:none}
}
@media (pointer:coarse){
  .delete-part,.move-part{width:28px;height:28px}
  .delete-part:after,.move-part:after{content:"";position:absolute;inset:-8px}
  #crop-handle,#crop-bottom-handle{height:40px}
  #crop-handle{top:-20px}
  #crop-bottom-handle{bottom:-20px}
  #crop-handle span,#crop-bottom-handle span{top:17px}
  .side-edge{width:32px;margin-left:-16px}
  .side-edge:before{left:15px}
  /* These take focus when their dialog opens; a ring there only marks keyboard use. */
  #crop-handle:focus-visible,#crop-bottom-handle:focus-visible,#close-settings:focus-visible{outline:0}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}