/* =========================================================
   Student ID Generator — tool-specific styles.
   Layered on /tools/_shared/tool.css.
   ---------------------------------------------------------
   CR80 card: 3.375in x 2.125in. Two layouts:
     - landscape: 2 cols x 4 rows = 8 cards per Letter page
     - portrait (lanyard badge): 3 cols x 2 rows = 6 per page
   Cards sit flush with no gap so adjacent cards share a cut
   line; cut tick marks are drawn around the grid at every row
   and column boundary, and each card carries a hairline edge.
   ========================================================= */

.widget-card { max-width: 1040px; }

/* ---------- Form fields ---------- */
.sid-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.sid-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .sid-row { grid-template-columns: 1.4fr 1fr; }
}
.sid-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sid-field > label,
.sid-field-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}
.sid-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-subtle);
  margin-left: 6px;
}
.sid-field input[type="text"],
.sid-field textarea {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: var(--transition-colors);
  font-family: var(--font-sans);
}
.sid-field textarea {
  min-height: 150px;
  line-height: 1.5;
  resize: vertical;
}
.sid-field input:focus,
.sid-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.sid-hint {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 2px 0 0;
  line-height: 1.4;
}
.sid-hint code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* ---------- Segmented controls ---------- */
.sid-segments {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  gap: 2px;
}
.sid-segment {
  position: relative;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: calc(var(--radius) - 4px);
  transition: var(--transition-colors);
  white-space: nowrap;
}
.sid-segment input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.sid-segment:hover { color: var(--text); }
.sid-segment:has(input:checked) {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ---------- Action buttons ---------- */
.sid-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.sid-actions-row .btn { min-height: 44px; }
.sid-actions-row #btn-build { margin-left: auto; }

@media (max-width: 480px) {
  .sid-actions-row #btn-build { margin-left: 0; width: 100%; }
}

/* ---------- Preview ---------- */
.sid-preview {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}
.sid-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.sid-preview .section-eyebrow { margin-bottom: 0; }
.sid-preview-count {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.sid-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 0 var(--space-4);
  background: var(--accent-soft-bg);
  color: var(--accent-soft-fg);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.5;
}
.sid-privacy-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.sid-privacy-note strong { color: var(--accent-soft-fg); }

.sid-preview-scroll {
  padding: var(--space-5);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-x: auto;
}

/* The printable sheet. Each .sid-sheet is one US Letter page. */
.sid-sheet {
  width: 7.7in;
  /* Room above and below the grid for the cut ticks. */
  padding: 0.2in 0;
  background: #FFFFFF;
  position: relative;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

/* The card grid inside the sheet. No gap between cards: adjacent cards
   share a cut line and the trimmer only has to make one pass between
   each pair. */
.sid-grid {
  display: grid;
  gap: 0;
  margin: 0 auto;
  position: relative;
}
.sid-sheet[data-layout="landscape"] .sid-grid {
  grid-template-columns: repeat(2, 3.375in);
  grid-template-rows: repeat(4, 2.125in);
  width: 6.75in;
}
.sid-sheet[data-layout="portrait"] .sid-grid {
  grid-template-columns: repeat(3, 2.125in);
  grid-template-rows: repeat(2, 3.375in);
  width: 6.375in;
}

/* On narrow screens the full-size sheet overflows; let the scroll
   container handle it horizontally rather than scaling, so the cards
   stay at their real print size and nothing lies about geometry. */

/* =========================================================
   The CR80 card.
   Fixed CR80 geometry (3.375in x 2.125in), always a white
   paper surface regardless of app theme. container-type lets
   typography scale with the card's own width via cqi units so
   the same rules render both the on-screen preview and the
   printed sheet correctly.

   Hardcoded hex is deliberate here: the card is paper and must
   look the same in light and dark theme, so it does not use the
   theme tokens. Its palette is neutral (slate header, white text,
   periwinkle accent rule) and does not borrow the marketing
   brand's navy/sage.
   ========================================================= */
.sid-card {
  width: 3.375in;
  height: 2.125in;
  background: #FFFFFF;
  color: #1A1A1A;
  font-family: var(--font-sans);
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  /* Hairline edge to follow with scissors. */
  box-shadow: inset 0 0 0 0.5px #C4C4C4;
  box-sizing: border-box;
}
.sid-sheet[data-layout="portrait"] .sid-card {
  width: 2.125in;
  height: 3.375in;
}

/* Cut ticks: short lines just outside the grid at every row and
   column boundary, so a paper cutter has a mark at both ends of each
   cut. They are children of .sid-grid, not of the card, because the
   card clips its overflow. Positions are set inline by student-id.js. */
.sid-tick {
  position: absolute;
  background: #888;
  pointer-events: none;
}
.sid-tick-v { width: 1px; height: 0.1in; margin-left: -0.5px; }
.sid-tick-h { height: 1px; width: 0.1in; margin-top: -0.5px; }
.sid-tick-top    { top: -0.14in; }
.sid-tick-bottom { bottom: -0.14in; }
.sid-tick-left   { left: -0.14in; }
.sid-tick-right  { right: -0.14in; }

/* ---------- Card frame & header ---------- */
.sid-card-inner {
  position: absolute;
  inset: 0;
  padding: 0;
  display: grid;
  box-sizing: border-box;
}
.sid-sheet[data-layout="landscape"] .sid-card-inner {
  grid-template-columns: 30% 1fr auto;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header"
    "photo  body   code";
}
.sid-sheet[data-layout="landscape"] .sid-card-inner.has-no-code {
  grid-template-columns: 30% 1fr;
  grid-template-areas:
    "header header"
    "photo  body";
}
.sid-sheet[data-layout="portrait"] .sid-card-inner {
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "photo"
    "body"
    "code";
}

.sid-card-header {
  grid-area: header;
  background: #2A2630;
  color: #FFFFFF;
  border-bottom: 0.6cqi solid #5C63CC;
  padding: 3cqi 4cqi;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqi;
  min-height: 0;
}
.sid-sheet[data-layout="portrait"] .sid-card-header {
  padding: 4cqi 5cqi;
  flex-direction: column;
  align-items: center;
  gap: 1cqi;
  text-align: center;
}
.sid-card-org {
  font-size: 3.4cqi;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sid-sheet[data-layout="portrait"] .sid-card-org {
  font-size: 4.8cqi;
}
.sid-card-term {
  font-size: 2.4cqi;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #C9CCF5;
  margin: 0;
  text-transform: uppercase;
  flex-shrink: 0;
}
.sid-sheet[data-layout="portrait"] .sid-card-term {
  font-size: 3.4cqi;
}

/* ---------- Photo frame ---------- */
.sid-photo {
  grid-area: photo;
  padding: 3cqi 0 3cqi 4cqi;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.sid-sheet[data-layout="portrait"] .sid-photo {
  padding: 4cqi 5cqi 2cqi;
  justify-content: center;
}

.sid-photo-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 100%;
  background: #F3F3F0;
  border: 1px solid #B5B2AC;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sid-sheet[data-layout="portrait"] .sid-photo-frame {
  width: 60%;
  aspect-ratio: 3 / 4;
  max-width: 60%;
}
.sid-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sid-photo-frame-empty {
  color: #B5B2AC;
  font-size: 2.4cqi;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The per-card "Add photo" button sits on the frame on screen; it is
   hidden in print so the frame prints clean. */
.sid-photo-btn {
  position: absolute;
  bottom: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1;
  z-index: 2;
}
.sid-photo-btn svg {
  width: 11px;
  height: 11px;
}
.sid-photo-btn:hover {
  background: var(--accent-hover);
}
.sid-photo-btn-clear {
  background: var(--danger);
  color: var(--accent-fg);
}
.sid-photo-btn-clear:hover {
  background: var(--danger);
  filter: brightness(0.92);
}
.sid-photo-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ---------- Card body (name/grade/id) ---------- */
.sid-card-body {
  grid-area: body;
  padding: 2.5cqi 4cqi 3cqi 4cqi;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.sid-sheet[data-layout="portrait"] .sid-card-body {
  padding: 1cqi 5cqi 1cqi;
  text-align: center;
  align-items: center;
}
.sid-card-eyebrow {
  font-size: 1.9cqi;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #666;
  text-transform: uppercase;
  margin: 0;
}
.sid-sheet[data-layout="portrait"] .sid-card-eyebrow {
  font-size: 2.6cqi;
}
.sid-card-name {
  font-size: 4.6cqi;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #2A2630;
  margin: 0.4cqi 0 0.6cqi;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.sid-sheet[data-layout="portrait"] .sid-card-name {
  font-size: 5.4cqi;
}
.sid-card-grade {
  font-size: 2.4cqi;
  font-weight: 500;
  color: #333;
  margin: 0;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sid-sheet[data-layout="portrait"] .sid-card-grade {
  font-size: 3.2cqi;
}
.sid-card-idno {
  font-size: 2.2cqi;
  font-weight: 600;
  color: #4A51B4;
  margin: 1cqi 0 0;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.sid-sheet[data-layout="portrait"] .sid-card-idno {
  font-size: 3cqi;
  margin: 1.4cqi 0 0;
}

.sid-card-code {
  grid-area: code;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2cqi 4cqi 2cqi 0;
}
.sid-sheet[data-layout="portrait"] .sid-card-code {
  padding: 0 5cqi 3cqi;
}
.sid-card-code svg {
  display: block;
  width: 15cqi;
  height: 15cqi;
  max-width: 100%;
}
.sid-sheet[data-layout="portrait"] .sid-card-code svg {
  width: 22cqi;
  height: 22cqi;
}

/* ---------- Print row (credit toggle + print button) ---------- */
.sid-print-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.sid-credit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.sid-credit-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sid-print-row .btn {
  font-size: 16px;
  min-height: 52px;
  padding: 0 24px;
}

/* Per-sheet print credit (shared .print-credit, tightened so it fits
   under the grid: landscape is 0.4in padding + 8.5in grid + ~0.45in
   credit = ~9.35in of the 10.2in printable height). The top margin
   clears the bottom cut ticks, which reach 0.14in below the grid. */
.sid-sheet .print-credit {
  margin: 0.2in 0.5in 0;
  padding-top: 6px;
  font-size: 9px;
}
.sid-sheet .print-credit[hidden] { display: none; }

/* =========================================================
   Print
   ========================================================= */
@media print {
  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
  }
  .tool-header,
  .tool-footer,
  .widget-header,
  .sid-fields,
  .sid-preview-head,
  .sid-privacy-note,
  .sid-print-row,
  .article,
  .attenda-inline,
  .pack-inline,
  .skip-link { display: none !important; }

  main,
  .widget-wrap {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
  .widget-card {
    width: 100% !important;
    max-width: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: #FFFFFF !important;
  }
  .sid-preview {
    border-top: none !important;
    padding-top: 0 !important;
  }
  .sid-preview-scroll {
    background: #FFFFFF !important;
    border: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .sid-sheet {
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
  }
  .sid-sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  .sid-grid {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .sid-card {
    page-break-inside: avoid;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .sid-card-header {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .sid-tick {
    background: #000000 !important;
  }
  .sid-photo-btn,
  .sid-photo-input { display: none !important; }

  .sid-sheet .print-credit[hidden] { display: none !important; }

  @page { size: letter portrait; margin: 0.4in; }
}