/* Chrono 24 · Layout polish for narrow and mid widths (both themes).
   The welcome options follow the space they actually get (container query), so they never squash
   into one-word-per-line columns when the Brand kit is open beside them. */
#empty{container-type:inline-size}
#empty .welcome-options span{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;line-height:1}
#empty .welcome-options button{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
#empty .welcome-options b{line-height:1.25}
@container (max-width:680px){
  #empty .welcome-options{grid-template-columns:1fr;gap:10px;margin:22px 0 10px}
  #empty .welcome-options button{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center;padding:16px 18px;text-align:left}
  #empty .welcome-options span{grid-row:1/3;width:48px;height:48px;font-size:22px;border-radius:12px}
  #empty .welcome-options b{grid-column:2;font-size:16px;align-self:end}
  #empty .welcome-options small{grid-column:2;align-self:start}
}
@container (max-width:420px){
  #empty h2{font-size:30px;line-height:1.1}
}
/* the brand-kit and project links sit side by side when there is room, stacked when not */
#empty .welcome-project,.welcome-brand{min-height:44px;border-radius:10px;padding:10px 16px}
@media (prefers-reduced-motion:reduce){#empty .welcome-options button{transition:none}}
#empty .guided-start{justify-content:flex-start}