/*
  Saman Javidnia — portfolio
  Direction: electronics datasheet. A front page with the name set large,
  then ruled tables and spec sheets.

  Grid: 12 columns. Section labels sit in a left rail (cols 1–3); headings and
  content run in cols 4–12. Every vertical gap comes from the spacing scale in
  tokens.css: 96px between sections on desktop, 64px on phones; 48px between a
  heading and its content; 24px inside panels.
*/

/* ---------- Viewport-dependent layout tokens ---------- */
:root {
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --section-pad: var(--space-16);
  --grid-gap: var(--space-6);
}
@media (min-width: 768px) {
  :root {
    --gutter-l: max(32px, env(safe-area-inset-left, 0px));
    --gutter-r: max(32px, env(safe-area-inset-right, 0px));
    --section-pad: var(--space-20);
    --grid-gap: var(--space-8);
  }
}
@media (min-width: 1280px) {
  :root {
    --gutter-l: max(48px, env(safe-area-inset-left, 0px));
    --gutter-r: max(48px, env(safe-area-inset-right, 0px));
    --section-pad: var(--space-24);
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-6);
  scrollbar-color: var(--color-rule-strong) var(--color-bg);
  accent-color: var(--color-accent);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  caret-color: var(--color-accent);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: var(--weight-semibold); text-wrap: balance; }
p { text-wrap: pretty; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-hover); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
main:focus { outline: none; }

::selection { background: var(--color-selection); color: var(--color-text); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap-max) + 96px);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

.muted { color: var(--color-muted); }

/* Mono is for data only: labels, dates, tags, coordinates, status. */
.data,
.section-label,
.table-title,
.spec dt,
.sheet-spec dt,
.skill-table dt,
.timeline-date,
.tags li,
.status-line,
.coords,
.sheet-status {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.section-label,
.table-title,
.spec dt,
.sheet-spec dt,
.skill-table dt {
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-faint);
}

.data { font-size: var(--step--1); color: var(--color-muted); white-space: nowrap; }

/* Placeholder: a quiet, dashed "slot" in mono. Still literally [TODO: …],
   so it stays easy to find, but it no longer shouts over real content. */
.todo {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  color: var(--color-todo);
  border: 1px dashed var(--color-todo-line);
  border-radius: var(--radius);
  padding: 0.125rem var(--space-2);
  white-space: nowrap;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--gutter-l);
  top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:hover { transform: translateY(0); color: var(--color-on-accent); background: var(--color-accent); }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--color-rule); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--space-16);
  position: relative;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-decoration: none;
}
.wordmark:hover { color: var(--color-text); }
.mark { flex: none; color: var(--color-text); --mark-dot: var(--color-accent); }

.header-controls { display: flex; align-items: center; gap: var(--space-2); }

.site-nav ul { display: flex; gap: var(--space-1); }
.site-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--space-3);
  font-size: var(--step--05);
  font-weight: var(--weight-medium);
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--color-text); background: var(--color-surface-hover); }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.icon-button:hover { background: var(--color-surface-hover); border-color: var(--color-muted); }
.icon-button:active { transform: scale(0.96); }

/* Theme icon shows the theme you'll switch TO. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }
}

.menu-button { display: none; }
.menu-button .menu-close { display: none; }
.menu-button[aria-expanded="true"] .menu-open { display: none; }
.menu-button[aria-expanded="true"] .menu-close { display: inline; }

/* Phone nav: disclosure menu when JS runs; plain wrapping links otherwise. */
@media (max-width: 719px) {
  .js .menu-button { display: inline-grid; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    padding: var(--space-2) var(--gutter-r) var(--space-4) var(--gutter-l);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-rule-strong);
    box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.45);
  }
  .js .site-nav:not(.is-open) { display: none; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav li + li { border-top: 1px solid var(--color-rule); }
  .js .site-nav a { padding-inline: var(--space-1); font-size: var(--step-0); color: var(--color-text); border-radius: 0; }

  html:not(.js) .header-inner { flex-wrap: wrap; padding-block: var(--space-2); }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }
}

/* ---------- Buttons ---------- */

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-12);
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.button:active { transform: translateY(1px); }

.button-primary { background: var(--color-accent); color: var(--color-on-accent); }
.button-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }

.button-secondary { color: var(--color-text); border-color: var(--color-rule-strong); }
.button-secondary:hover { color: var(--color-text); background: var(--color-surface-hover); border-color: var(--color-muted); }

.text-button {
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--step--05);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.text-button:hover { background: var(--color-surface-hover); border-color: var(--color-muted); }
.text-button[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }

/* ---------- Status dot (shared) ---------- */

.status-dot {
  display: inline-block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-signal) 18%, transparent);
}

/* ---------- Hero ---------- */

.hero { padding-block: var(--space-10) var(--section-pad); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-bottom: var(--space-12);
  font-size: var(--step--1);
  color: var(--color-muted);
}
.status-line { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.coords { color: var(--color-faint); letter-spacing: 0.02em; }

.hero-title-row { display: grid; gap: var(--space-5); }

.hero-name {
  font-size: clamp(3.5rem, 12.5vw + 0.25rem, var(--step-6));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere; /* only under extreme zoom or text spacing */
}
.hero-name span { display: block; }

.hero-role {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-muted);
  max-width: 24ch;
}

.hero-body {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-rule-strong);
}

.hero-copy { display: grid; gap: var(--space-8); align-content: start; }
.hero-intro {
  max-width: 40ch;
  font-size: var(--step-05);
  line-height: var(--leading-body);
  color: var(--color-text);
}

/* Spec readout: label / value rows on hairlines. */
.spec { display: grid; min-width: 0; }
.spec > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-rule);
}
.spec > div:first-child { padding-top: 0; }
.spec > div:last-child { border-bottom: 0; padding-bottom: 0; }
.spec dd { font-size: var(--step--05); line-height: var(--leading-snug); min-width: 0; }

.hero-spec {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--space-12); }
  .hero-title-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }
  .hero-name { grid-column: 1 / span 8; }
  .hero-role { grid-column: 9 / span 4; padding-bottom: var(--space-3); }
  .hero-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .hero-copy { grid-column: 1 / span 6; }
  .hero-spec { grid-column: 9 / span 4; }
}

/* ---------- Sections ---------- */

.section {
  border-top: 1px solid var(--color-rule);
  padding-block: var(--section-pad);
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.section-label { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); }
.section-label::before {
  content: "";
  width: var(--space-4);
  height: 1px;
  background: var(--color-rule-strong);
}

.section-body { display: grid; gap: var(--space-12); min-width: 0; align-content: start; }

.section-title {
  max-width: 22ch;
  font-size: clamp(var(--step-3), 2.2vw + 1.2rem, var(--step-4));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
}

@media (min-width: 1024px) {
  .section-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .section-label {
    grid-column: 1 / span 3;
    align-self: start;
    position: sticky;
    top: var(--space-8);
    /* align label with the cap height of the heading's first line */
    padding-top: 0.9rem;
  }
  .section-body { grid-column: 4 / span 9; }
}

/* ---------- About ---------- */

.prose {
  display: grid;
  gap: var(--space-4);
  max-width: var(--measure);
  font-size: var(--step-05);
  color: var(--color-muted);
}
.prose p:first-child { color: var(--color-text); }

.about-columns { display: grid; gap: var(--space-12); }
@media (min-width: 768px) {
  .about-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
}

.table-title { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-rule-strong); }

.timeline > li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
.timeline-date { font-size: var(--step--05); color: var(--color-muted); line-height: var(--leading-snug); }
.timeline-title { font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.timeline-meta { padding-top: var(--space-1); font-size: var(--step--05); color: var(--color-muted); line-height: var(--leading-snug); }

/* ---------- Projects: spec sheets ---------- */

.sheets { display: grid; gap: var(--space-4); }

.sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}
.sheet:hover { border-color: var(--color-rule-strong); }

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
}
.sheet-title {
  font-size: var(--step-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.sheet-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-signal);
}
.sheet-status .status-dot { box-shadow: none; }

.sheet-desc { max-width: var(--measure); color: var(--color-muted); }

.sheet-spec { display: grid; border-top: 1px solid var(--color-rule); }
.sheet-spec > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  padding-top: var(--space-3);
}
.sheet-spec dd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--step--05); min-width: 0; }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags li {
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  padding: 0.125rem var(--space-2);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius);
}

/* Linked sheet: whole card is the hit area; accent edge + arrow on hover. */
.sheet-link { color: inherit; text-decoration: none; }
.sheet-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sheet:has(.sheet-link):hover,
.sheet:has(.sheet-link:focus-visible) { border-color: var(--color-accent); background: var(--color-surface-hover); }
.sheet:has(.sheet-link:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sheet-link:focus-visible { outline: none; }

@media (min-width: 768px) {
  .sheet {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    grid-template-areas: "head head" "desc spec";
    column-gap: var(--space-10);
    padding: var(--space-8);
  }
  .sheet-head { grid-area: head; }
  .sheet-desc { grid-area: desc; }
  .sheet-spec { grid-area: spec; border-top: 0; border-left: 1px solid var(--color-rule); padding-left: var(--space-6); align-content: start; }
  .sheet-spec > div:first-child { padding-top: 0; }
}

/* ---------- Skills ---------- */

.skill-table { border-top: 1px solid var(--color-rule-strong); }
.skill-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-rule);
}
.skill-table dt { padding-top: 0.15rem; }
.skill-table ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.skill-table li { line-height: var(--leading-snug); }

@media (min-width: 640px) {
  .skill-table > div { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-6); }
}

/* ---------- Resume ---------- */

.resume-body { gap: var(--space-8); justify-items: start; }

/* ---------- Contact ---------- */

.contact-body { gap: var(--space-8); }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.email-link {
  font-size: clamp(var(--step-1), 1.4vw + 0.9rem, var(--step-2));
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}
.copy-status { font-family: var(--font-mono); font-size: var(--step--1); color: var(--color-signal); }
.contact-list { max-width: 36rem; border-top: 1px solid var(--color-rule); padding-top: var(--space-3); }

/* Standalone links in spec tables: at least 24px tall for touch. */
.spec dd > a { display: inline-block; padding-block: 0.1875rem; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--color-rule); background: var(--color-surface); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-8);
  font-size: var(--step--05);
  color: var(--color-muted);
}
.footer-sign { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); font-weight: var(--weight-medium); }
.footer-year { color: var(--color-faint); font-family: var(--font-mono); font-size: var(--step--1); font-weight: var(--weight-regular); }
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.back-to-top { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); }

/* ---------- Motion ---------- */

/* Sections fade up once as they scroll in (JS marks only below-fold ones). */
.reveal.is-pending { opacity: 0.001; transform: translateY(var(--space-3)); }
.reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

/* Theme / contrast switch: colors cross-fade for 200ms, then the class drops. */
.theme-switching,
.theme-switching * {
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), fill var(--duration) var(--ease-out) !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .reveal.is-pending { opacity: 1; transform: none; }
  .button:active, .icon-button:active { transform: none; }
}

/* Forced colors (Windows High Contrast): keep borders and focus visible. */
@media (forced-colors: active) {
  .button, .icon-button, .text-button, .tags li, .todo, .sheet, .hero-spec { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
  .status-dot { background: CanvasText; forced-color-adjust: none; }
  .mark { --mark-dot: CanvasText; }
}