/* ==========================================================================
   PRINT

   This site will get printed and saved as PDF by people who are deciding
   whether to interview him, so it gets designed rather than left to chance.

   The screen design is a dark instrument panel; on paper that is a waste of
   toner and unreadable at small sizes. Print gets its own treatment: ink on
   white, chrome removed, URLs made visible, and page breaks placed so no
   entry is split across a fold.
   ========================================================================== */

@page {
  margin: 16mm 14mm;
}

/* Force the light palette regardless of the on-screen theme. Tokens are
   redefined rather than components restyled, so everything follows. */
:root,
:root[data-theme='dark'],
:root[data-theme='light'] {
  --bg:          #ffffff;
  --bg-sunk:     #ffffff;
  --bg-raised:   #ffffff;
  --surface:     #ffffff;
  --surface-2:   #ffffff;

  --ink:         #000000;
  --ink-2:       #1a1a1a;
  --ink-3:       #3d3d3d;
  --ink-4:       #555555;

  --line:        #cccccc;
  --line-2:      #999999;
  --line-strong: #666666;

  --copper:      #7a4708;
  --copper-hi:   #7a4708;
  --copper-lo:   #b08a55;
  --copper-wash: transparent;

  --signal:      #0a5460;
  --rail:        0px;
  --section-y:   14mm;
}

html, body {
  background: #fff !important;
  color: #000 !important;
  font-size: 10.5pt;
}

body { overflow: visible; }

/* ---- strip the interface ------------------------------------------------ */

.rail,
.topbar,
.menu,
.cursor,
.grain,
.cmdk,
.cmdk-trigger,
.toast,
.webring,
.intro__field,
.intro__veil,
.plate,
.contact__bg,
.build__scan,
.roll__chev,
.scroll-progress,
.skip-link             { display: none !important; }

.main, .foot { padding-left: 0 !important; }

/* The roll is expandable on screen; on paper every row is already open
   (enhance.js), so it just needs to read as a flat list of short entries. */
.roll__sum {
  display: block !important;
  padding: 2mm 0 1mm !important;
  background: none !important;
}

.roll__when { display: block; color: #3d3d3d; }
.roll__org  { font-weight: 600; }
.roll__role { color: #1a1a1a; }
.roll__org::after { content: ' — '; }

.roll__body { padding: 0 0 2mm !important; }
.roll__d::before { display: none !important; }
.roll__item { break-inside: avoid; page-break-inside: avoid; }

/* Education plates print as two stacked blocks, not cards. */
.creds { display: block !important; }

.cred {
  border: none !important;
  border-top: 1pt solid #999 !important;
  border-radius: 0 !important;
  padding: 2mm 0 3mm !important;
  background: none !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.cred::before { display: none !important; }
.cred__mark { width: 9mm; height: 9mm; }
.cred__school { font-size: 12pt !important; }

.rec-sub { margin-bottom: 3mm !important; }
.rec-sub__rule { background: #999 !important; }
.rec-group + .rec-group { margin-top: 7mm !important; }

/* ---- layout ------------------------------------------------------------- */

.shell { max-width: none; padding-inline: 0; }

.intro {
  min-height: 0 !important;
  padding: 0 0 8mm !important;
  border-bottom: 1.5pt solid #000;
}

.intro__inner { padding-left: 0 !important; }

.intro__name { font-size: 32pt !important; }

.intro__list li, .lede { font-size: 11pt !important; color: #1a1a1a !important; max-width: none; }

.section { padding-block: 8mm !important; }
.section + .section::before { display: none; }

.h1 { font-size: 18pt !important; }
.h2 { font-size: 14pt !important; }
.h3 { font-size: 12pt !important; }

.section-title-row,
.contact__grid,
.board { display: block !important; }

.board .bus { margin-bottom: 5mm; }

/* ---- keep things whole across page breaks ------------------------------- */

.tl,
.build,
.bus,
.pin            { break-inside: avoid; page-break-inside: avoid; }

.section-head   { break-after: avoid; page-break-after: avoid; }
h1, h2, h3      { break-after: avoid; page-break-after: avoid; }

/* ---- imagery ------------------------------------------------------------ */

/* Canvases render blank or near-black on paper; the sprite is a background
   image that most browsers drop from print anyway. Replace the whole frame
   with a labelled placeholder rather than printing an empty box. */
.build__art { display: none !important; }

.build { display: block !important; }

.tl__figure { max-width: 90mm; }
.tl__figure-frame { border: 1pt solid #999; }

.org-logo {
  filter: grayscale(1) contrast(1.3);
  border: 1pt solid #ddd;
}

img { max-width: 100% !important; }

/* ---- make links usable on paper ----------------------------------------- */

a { color: #000 !important; text-decoration: none !important; box-shadow: none !important; }

/* Print the destination of external links, since a printed link is
   otherwise a dead end. Internal anchors are skipped: "#projects" on paper
   is noise. */
.build__links a[href^='http']::after,
.builds__more a[href^='http']::after,
.pin__link[href^='http']::after {
  content: ' (' attr(href) ')';
  font-family: var(--font-mono);
  font-size: 8pt;
  color: #444;
  word-break: break-all;
}

.pin__link[href^='mailto']::after {
  content: '';
}

.pin__copy, .pin__ext, .btn__arrow { display: none !important; }

.pins { border-top: 1pt solid #999; }
.pin { border-color: #ccc !important; }

/* The CTA buttons are dead controls on paper. */
.intro__links, .btn { display: none !important; }

/* ---- footer ------------------------------------------------------------- */

.foot {
  border-top: 1pt solid #000;
  background: none !important;
  padding-top: 4mm;
}

.foot__inner { display: block !important; text-align: left; }

/* A printed page loses the URL bar, so state where this came from. */
.foot::after {
  content: 'sulaimanq.com  ·  s6qazi@uwaterloo.ca  ·  github.com/sulaimwn';
  display: block;
  margin-top: 3mm;
  font-family: var(--font-mono);
  font-size: 8.5pt;
  color: #333;
}

/* ---- no motion on paper ------------------------------------------------- */

*, *::before, *::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Reveal-on-scroll must never leave content invisible in print. */
.js [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* Chips are a screen affordance; on paper they are just words. */
.chip-link {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 600;
}
.chip-link img { display: none !important; }
.intro { min-height: 0 !important; padding-block: 0 0 8mm !important; }
.intro__top { border-bottom: 1pt solid #000; }