/* ==========================================================================
   Resume page (js/resume.js). Sits on the Work page's Gouache paper (.gw):
   a centered reading column like snehasundar.com/resume, roles with their
   dates on the right, justified bullets, painted section titles.
   Printing (Download PDF without a PDF link) drops the buttons and paper.
   ========================================================================== */

/* Buttons are scoped as .gw.rs .rs-btn to win over the Work page's generic .gw button reset. */
.rs { --measure: 760px; }
.rs-top { display: flex; align-items: center; gap: 18px; max-width: var(--measure); margin: 0 auto 8px; }
/* Ends at the column's right edge. The light/dark switch sits in the page corner (css/site.css), so
   the row only needs to stop short of it once the column is as wide as the page (query below). */
.rs-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.gw.rs .rs-btn-main { margin-right: 10px; }
.gw.rs .rs-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px;
  border: 1.5px solid color-mix(in oklch, var(--ink) 20%, transparent); border-radius: 99px;
  background: none; color: var(--ink); font: 600 14px/1 var(--label); text-decoration: none; cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.gw.rs .rs-btn:hover, .gw.rs .rs-btn:focus-visible { border-color: var(--rust); color: var(--rust); }
.gw.rs .rs-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gw.rs .rs-btn-main { position: relative; isolation: isolate; border-color: transparent; }
.gw.rs .rs-btn-main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; filter: url(#gw-brush);
  background: var(--stroke-texture), color-mix(in oklch, oklch(76% 0.11 48) 62%, var(--earth));
}
.gw.rs .rs-btn-main, .gw.rs .rs-btn-main:hover { color: #2a2620; }
/* Socials: icon only, no frame. */
.gw.rs .rs-icon { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; transition: color 160ms, scale calc(160ms * var(--dur)) var(--ease); }
.gw.rs .rs-icon:hover, .gw.rs .rs-icon:focus-visible { color: var(--rust); scale: 1.08; }
.gw.rs .rs-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.rs-page { max-width: var(--measure); margin: 0 auto; padding: clamp(28px, 5cqw, 56px) 0 96px; font-size: 17px; line-height: 1.7; }
.rs-head { margin-bottom: 8px; }
.rs-head h1 { margin: 0; font-size: clamp(36px, 5cqw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--rust); }
.rs-head p { margin: 8px 0 0; color: var(--ink-2); font-size: 18px; }
.rs-print-only { display: none; }

.rs-sec { margin-top: clamp(40px, 6cqw, 64px); }
/* Hierarchy by size, not weight or underline: large light section titles, roles at body size in light weight. */
.rs-sec h2 { margin: 0 0 20px; font-size: clamp(28px, 3.4cqw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; color: var(--rust); }
.rs-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.rs-row h3 { margin: 0; font-size: 19px; font-weight: 300; }
.rs-dates { color: var(--ink-2); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-job + .rs-job { margin-top: 32px; }
.rs-job ul { margin: 12px 0 0; padding-left: 1.2em; }
.rs-job li { margin-bottom: 0.45em; }
.rs-job li::marker { color: var(--rust); }
.rs-edu span { color: var(--ink-2); }
.rs blockquote { margin: 0; }
.rs blockquote p { margin: 0; font-style: italic; }
.rs blockquote cite { display: block; margin-top: 8px; color: var(--ink-2); font-style: normal; font-weight: 300; }
.rs blockquote cite::before { content: "– "; }
.rs-plain { margin: 0; padding: 0; list-style: none; }
.rs-plain li { margin-bottom: 0.3em; }
@container stage (min-width: 700px) { .rs-job li, .rs blockquote p { text-align: justify; hyphens: auto; } }
@container stage (max-width: 700px) { .rs-top { flex-wrap: wrap; } }
/* Column as wide as the page: keep the actions clear of the corner switch. */
@container stage (max-width: 1000px) { .rs-actions { margin-right: 48px; } }

/* Saved as PDF: black on white, no buttons or switch, the contact line shown under the name. */
@media print {
  @page { margin: 16mm 18mm; }
  html, body { height: auto; background: #fff; }
  .stage, .stage > .concept-root, .gw { position: static !important; overflow: visible !important; height: auto; }
  .gw.rs { --paper: #fff; --ink: #1d1b18; --ink-2: #55504a; --rust: #7a3b26; padding: 0; background: #fff; }
  .rs-top, .theme-btn, .toast { display: none !important; }
  .rs-page { max-width: none; padding: 0; font-size: 11pt; line-height: 1.5; }
  .rs-print-only { display: block; }
  .rs-sec { margin-top: 18pt; break-inside: auto; }
  .rs-sec h2 { break-after: avoid; }
  .rs blockquote { break-inside: avoid; }
  .rs-job { break-inside: avoid; }
  .rs-job li, .rs blockquote p { text-align: justify; hyphens: auto; }
}