/* Page styles for demo.html.

   Everything here is built from the shared tokens in styles.css: the same glass
   plates, hairlines, radius and type as the rest of the site. Nothing new is
   invented, because a page that introduces its own look is the fastest way to
   make a site feel assembled rather than designed.

   The two doors are deliberately EQUAL. Most demos push the storefront and
   treat the admin as an afterthought, which is backwards for this product: the
   buyer is a shop owner, and the back office is where they will spend their
   life. Neither card is styled as the primary. */

.doors{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,26px);
  align-items:stretch;
}
.door{
  display:flex; flex-direction:column;
  background:var(--frost-tint);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-md);
  padding:clamp(26px,3vw,34px);
}
/* The mark, not a tile. A 40px rounded square holding an icon above a heading
   is the most-generated component on the web; a plain glyph at the reading
   size of the heading says the same thing and costs no vertical space. */
.door-ico{ display:block; color:var(--fog); margin-bottom:14px; }
.door-ico svg{ width:26px; height:26px; }

.door h2{
  margin:0 0 10px;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.4rem,1.1rem + 1vw,1.8rem); line-height:1.15;
}
.door > p{ margin:0 0 20px; color:var(--mist); line-height:1.6; }

/* The credentials. Set in the mono face because that is what they are - things
   to be copied exactly - and boxed so the eye finds them without hunting. */
.door-creds{
  margin:22px 0 0; padding:14px 16px;
  background:var(--frost-wash);
  border-radius:var(--r-badge);
  box-shadow:inset 0 0 0 1px var(--hair);
  display:grid; gap:8px;
}
.door-creds p{ margin:0; display:flex; align-items:baseline; gap:12px; }
.door-creds span{
  flex:0 0 5.5em;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fog);
}
.door-creds code{
  font-family:var(--mono); font-size:.88rem; color:var(--ice);
  overflow-wrap:anywhere;
}

/* Pinned to the bottom edge so both buttons line up whatever length the copy
   above them runs to.

   The two sibling rules that used to sit here set an explicit margin-top and
   therefore BEAT the auto, which is what made the buttons sit 92px apart -
   measured, not guessed. The breathing room is given by the element ABOVE
   instead, where nothing has to fight the auto margin for it. */
.door-go{ margin-top:auto; width:100%; justify-content:center; }
.door > p{ margin:0 0 14px; color:var(--mist); }

/* Hollow circle markers - the owner's call, and the browser draws them. */
.door-list{
  list-style:circle; margin:0 0 26px; padding-left:20px;
  display:grid; gap:9px;
}
.door-list li{ color:var(--fog); font-size:.92rem; line-height:1.5; padding-left:2px; }
.door-list li::marker{ color:var(--hair-strong); }
.door-creds{ margin-bottom:22px; }

/* This page has no sections of its own, so it states its own bottom gap
   rather than inheriting the rhythm rule. */
main.wrap{ padding-bottom:clamp(72px,10vw,120px); }

@media (max-width:760px){
  .doors{ grid-template-columns:1fr; }
}