/* ---------- Student ID card (Round 10: UX redesign, "pass card" layout) ----------
     Shared look for the signup live-preview and the account panel's real card — see
     js/id-card.js for the markup this styles. Landscape "ID pass" layout (dark header band,
     photo + barcode column, wordmark + labeled fields, faint corner brand watermark) — colors
     are REKoN's own (var(--black)/var(--yellow)), not copied from any reference. */
  .student-card{
    position:relative; overflow:hidden; border-radius:20px; background:var(--card);
    border:1px solid var(--line); box-shadow:0 14px 30px -14px rgba(18,18,18,0.3); isolation:isolate;
  }
  .student-card-header{
    background:var(--black); color:#fff; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .student-card-header-badge{width:20px; height:20px; display:block; color:var(--yellow); flex:none;}
  .student-card-header-badge svg{width:100%; height:100%;}
  .student-card-header-text{font-size:var(--fs-2xs); font-weight:600; color:rgba(255,255,255,0.8); letter-spacing:0.02em;}
  .student-card-body{position:relative; padding:14px 16px 12px; z-index:1;}
  .student-card-body::after{content:""; display:table; clear:both;}
  .student-card-idnum{font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.06em; color:var(--muted); font-family:'Courier New', monospace; margin-bottom:10px;}
  .student-card-photo-col{float:left; width:74px; margin-right:14px;}
  .student-card-photo{
    width:74px; height:92px; border-radius:8px; background:var(--paper); border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--muted); overflow:hidden; position:relative;
    transition:transform 150ms var(--ease-pop);
  }
  .student-card-photo img{width:100%; height:100%; object-fit:cover;}
  .student-card-photo-interactive{cursor:pointer;}
  .student-card-photo-interactive:active{ transform:scale(0.94); }
  .student-card-photo-add{
    position:absolute; right:-4px; bottom:-4px; width:20px; height:20px; border-radius:50%; background:var(--black); color:var(--yellow);
    display:flex; align-items:center; justify-content:center; border:2px solid var(--card); transition:transform 150ms var(--ease-pop);
  }
  .student-card-photo-add svg{margin:0;}
  .student-card-barcode{
    margin-top:8px; height:20px; border-radius:2px;
    background:repeating-linear-gradient(90deg, var(--black) 0 2px, transparent 2px 3px, var(--black) 3px 4px, transparent 4px 7px, var(--black) 7px 8px, transparent 8px 11px);
    opacity:0.85;
  }
  .student-card-info-col{overflow:hidden;}
  .student-card-wordmark{font-size:var(--fs-xl); font-weight:800; letter-spacing:0.01em; color:var(--ink); line-height:1.1;}
  .student-card-wordmark-sub{display:block; font-size:var(--fs-2xs); font-weight:500; color:var(--muted); margin-top:3px; letter-spacing:0.01em;}
  .student-card-fields-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:14px;}
  .student-card-fields-grid > div{min-width:0;}
  .student-card-field-span2{grid-column:1 / -1;}
  .student-card-field-label{font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.05em; color:var(--muted); text-transform:uppercase;}
  .student-card-field-value{font-size:var(--fs-base); font-weight:800; color:var(--ink); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .student-card-field-value-sm{font-size:var(--fs-xs); font-weight:700;}
  .student-card-footnote{clear:both; font-size:var(--fs-2xs); font-style:italic; color:var(--muted); margin-top:14px; padding-top:10px; border-top:1px dashed var(--line); line-height:1.5;}
  .student-card-watermark{
    position:absolute; right:-22px; bottom:-22px; width:130px; height:130px; color:var(--yellow); opacity:0.16; z-index:0; pointer-events:none;
  }
  .student-card-watermark svg{width:100%; height:100%;}

  @media (min-width:420px){
    .student-card-photo-col, .student-card-photo{width:88px;}
    .student-card-photo{height:108px;}
  }

  /* Used on screen-signup: sits above the form fields it mirrors, so filling the form in
     visibly fills in the card above it. */
  .signup-card-preview{margin-top:26px;}