/* =========================================================================
   Pages, and the card screens the ported QR module brings with it.

   WHY THIS FILE EXISTS. The QR module was copied across from the business
   install on 24 August 2026, and its card screens reference classes that lived
   in that platform's own stylesheet rather than in the module. The personal
   fork had .cardqr, .metatable, .btnrow and .qrfoot already, and nothing else,
   so an editor rendered as an unstyled stack of everything. These are those
   missing pieces, written against this line's tokens rather than copied, so
   they follow the theme and dark mode like everything else here.

   TOKENS ONLY. No raw colour anywhere below.
   ========================================================================= */

/* ------------------------------------------------- the editor, two columns */
/*
   The page as a visitor will see it on the left, everything about it on the
   right. Below 860px the preview goes on top rather than shrinking, because a
   phone-shaped preview squeezed into half a phone is worse than useless.
*/
.cardtop{
  display:grid;
  grid-template-columns:minmax(260px,320px) 1fr;
  gap:var(--s5);
  align-items:start;
  margin:0 0 var(--s5);
}
@media (max-width:860px){
  .cardtop{grid-template-columns:1fr;}
}

.cardphone{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.cardphone iframe{
  display:block;width:100%;height:600px;border:0;background:var(--surface);
}
@media (max-width:860px){
  .cardphone iframe{height:460px;}
}

.cardside{display:flex;flex-direction:column;gap:var(--s4);}
.cardside .cardqr{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s4);
  display:grid;place-items:center;
}
.cardside .cardqr svg{display:block;max-width:100%;height:auto;}

/* ------------------------------------------------------- uploaded pictures */

.picstrip{
  display:flex;gap:var(--s3);overflow-x:auto;
  padding:0 0 var(--s2);margin:0 0 var(--s4);
}
.picstrip figure{
  margin:0;flex:0 0 auto;width:96px;text-align:center;
}
.picstrip img{
  width:96px;height:96px;object-fit:cover;
  border-radius:var(--r);background:var(--sunken);
  border:1px solid var(--line);display:block;
}
.picstrip figcaption{
  margin-top:5px;font-size:11.5px;color:var(--ink-3);
  overflow-wrap:anywhere;line-height:1.3;
}

/* ------------------------------------------------------------- the tiles */

.cardgrid{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  margin:0 0 var(--s5);
}

/* The whole tile is the link. A tile that only responds on its name makes
   people click three times to find the hit area. */
.cardtile{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  text-align:center;text-decoration:none;color:inherit;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5) var(--s4);
  box-shadow:var(--shadow);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cardtile:hover{
  border-color:var(--line-strong);
  box-shadow:var(--shadow-lift);
  transform:translateY(-1px);
}

.cardface{
  width:76px;height:76px;border-radius:50%;
  overflow:hidden;background:var(--sunken);
  display:grid;place-items:center;flex:0 0 auto;
}
.cardface img{width:100%;height:100%;object-fit:cover;display:block;}

.cardinit{
  font-size:26px;font-weight:700;letter-spacing:.02em;
  color:var(--brand);line-height:1;
}
@media (prefers-color-scheme:dark){
  .cardinit{color:var(--brand-hi);}
}
:root[data-theme="dark"] .cardinit{color:var(--brand-hi);}

.cardwho{display:flex;flex-direction:column;gap:3px;min-width:0;width:100%;}
.cardwho b{font-size:15px;font-weight:650;color:var(--ink);overflow-wrap:anywhere;}
.cardwho .det{font-size:12.5px;color:var(--ink-3);overflow-wrap:anywhere;}
.cardwho .qrfoot{margin-top:var(--s2);}