/* -----------------------------------------------------------------------
   GSePC certificate generator — presentation layer.
   Namespaced .gsxc-*. Uses the site design tokens only; no colours,
   families or spacing values are hard-coded here.
   Source of record: wp-content/uploads/gsepc/certificate/
   ----------------------------------------------------------------------- */

.gsxc{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--gutter) var(--space-9);
}

/* ---- two-column: controls beside the preview, stacked on small screens ---- */
.gsxc__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-6);
  align-items:start;
}
@media (min-width:900px){
  .gsxc__grid{grid-template-columns:minmax(300px,7fr) minmax(0,11fr);gap:var(--space-7);}
}

/* ---- control panel ---- */
.gsxc__panel{
  background:var(--surface-card);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  padding:var(--space-5);
  width:100%;
  max-width:100%;
}
@media (min-width:900px){
  .gsxc__panel{position:sticky;top:var(--space-5);}
}

.gsxc__label{
  display:block;
  font-family:var(--role-overline-font);
  font-weight:var(--role-overline-weight);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  font-size:var(--text-label);
  color:var(--text-strong);
  margin:0 0 var(--space-2);
}

.gsxc__input,
.gsxc__textarea{
  width:100%;
  max-width:100%;
  display:block;
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--gsepc-white);
  border:var(--border-width-strong) solid var(--border-default);
  border-radius:var(--radius-sm);
  padding:12px 14px;
}
.gsxc__input{font-size:1.125rem;min-height:var(--control-height);}
.gsxc__textarea{font-size:var(--text-body-md);line-height:var(--leading-snug);resize:vertical;}
.gsxc__input:hover,
.gsxc__textarea:hover{border-color:var(--border-strong);}

.gsxc__meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  justify-content:space-between;
  align-items:baseline;
  margin:var(--space-2) 0 0;
}
.gsxc__hint{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--text-body-sm);
  line-height:var(--leading-snug);
  color:var(--text-muted);
  flex:1 1 16ch;
}
.gsxc__counter{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--text-caption);
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}

/* ---- actions ---- */
.gsxc__actions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin:var(--space-5) 0 0;
}
.gsxc__actions .gsepc-btn{flex:1 1 auto;}
.gsxc__actions .gsepc-btn[disabled]{opacity:.5;cursor:not-allowed;}

.gsxc__status{
  margin:var(--space-3) 0 0;
  min-height:1.4em;
  font-family:var(--font-ui);
  font-size:var(--text-body-sm);
  line-height:var(--leading-snug);
  color:var(--text-muted);
}
.gsxc__status--error{color:var(--status-error);font-weight:600;}
.gsxc__status--ok{color:var(--status-success);font-weight:600;}

/* ---- preview ---- */
.gsxc__previewwrap{margin:0;width:100%;max-width:100%;}
.gsxc__previewlabel{
  font-family:var(--role-overline-font);
  font-weight:var(--role-overline-weight);
  letter-spacing:var(--role-overline-tracking);
  text-transform:uppercase;
  font-size:var(--text-label);
  color:var(--text-muted);
  margin:0 0 var(--space-2);
}
.gsxc__paper{
  background:var(--gsepc-white);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  padding:10px;
  width:100%;
  max-width:100%;
}
.gsxc__canvas{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:2px;
}

/* ---- roster / bulk ---- */
.gsxc__bulk{
  margin:var(--space-7) 0 0;
  background:var(--surface-raised);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:0;
  width:100%;
  max-width:100%;
}
.gsxc__bulksum{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:var(--space-2);
  cursor:pointer;
  list-style:none;
  padding:var(--space-4) var(--space-5);
  font-family:var(--font-ui);
  font-weight:700;
  font-size:var(--text-body-md);
  color:var(--text-brand);
}
.gsxc__bulksum::-webkit-details-marker{display:none;}
.gsxc__mark{
  flex:none;
  width:1em;
  font-family:var(--font-ui);
  transition:transform var(--duration-fast) var(--ease-out);
}
.gsxc__bulk[open] .gsxc__mark{transform:rotate(90deg);}
.gsxc__bulkbody{padding:0 var(--space-5) var(--space-5);}
.gsxc__bulkbody > p{
  font-family:var(--font-ui);
  font-size:var(--text-body-sm);
  line-height:var(--leading-snug);
  color:var(--text-muted);
  margin:0 0 var(--space-4);
}

/* ---- misc ---- */
.gsxc__note{
  margin:var(--space-6) 0 0;
  font-family:var(--font-ui);
  font-size:var(--text-body-sm);
  line-height:var(--leading-body);
  color:var(--text-muted);
}
.gsxc__note ul{margin:0;padding-left:1.15em;}
.gsxc__note li{margin-bottom:var(--space-2);}

.gsxc-vh{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  .gsxc *{transition:none!important;}
}