/* css style sheets for https://apolskiy.github.io */
*{
	margin: 0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 300;
}

/* The universal selector above also matches <strong> and <b>, and an author
   rule outranks the browser default of font-weight: bolder - so every emphasis
   on the page was silently rendering at 300, lighter than the surrounding text.
   Restore it: the bold lead-in on each list item and table row is what makes
   these panels scannable instead of a wall of prose. */
strong,
b {
  font-weight: 600;
}

body{
  background-color: #ffffff;
}

.menu ul{
  list-style: none;
  padding: 0;
  margin: 10px auto;        /* auto left/right centers the shrink-wrapped menu */
  width: fit-content;       /* only as wide as the tabs; grows as items are added */
  display: flex;            /* Arrange tabs horizontally */
  align-items: center;
  justify-content: center;  /* Center the tabs horizontally */
}

.item {
  padding: 10px 10px;
  cursor: pointer;
  border-radius: 15px/25px;
  /* border-left: 1px ridge forestgreen; */
  border-top: 1px ridge forestgreen;
  /* border-right: 2px ridge forestgreen; */
  background-color: #ffffff;
  border-bottom: none;
  margin-right: 2px;
  text-decoration: none;
  text-transform: uppercase;

}

.item:hover {
  background-color: darkgray;
  text-decoration: underline;
}

.item.active {

  cursor: pointer;
  border-radius: 15px/25px;
  background-color: black;
  /*border-left: 1px ridge black;*/
  border-top: 1px ridge black;
  /*border-right: 2px ridge black; */
  color:whitesmoke;
  text-decoration: none;
  text-transform: uppercase;
}

.item.active:hover {
  text-decoration:none;
}


.tab-content {
  display: none; /* Hidden by default */
  padding: 20px 10px;
}

.tab-content.active {
  display: block; /* Shown when active */
}

/* Permanent profile header: always visible above the tab menu */
#profile-header {
  max-width: 900px;
  margin: 10px auto;
  padding: 0 10px;
}

/* Close the biography block so the first section heading below it starts
   somewhere, rather than the two running together as one column of prose. */
#profile-header table.layout + table.layout {
  margin-top: 14px;
}

/* Space the two biography paragraphs apart */
#profile-header p + p {
  margin-top: 10px;
}

/* Invisible layout tables: section content without any visible borders/background */
table.layout {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 10px auto;
  border: none;
  background: none;
}

table.layout th,
table.layout td {
  padding: 0;
  text-align: left;
  vertical-align: top;
  border: none;
  background: none;
}

/* GitHub Actions status badge */
img.ci-badge {
  height: 20px;
  vertical-align: middle;
}

/* Profile photo cell, sits to the left of the name/description.
   Scoped under #profile-header so it beats the generic "table.layout td { padding: 0 }"
   rule and actually keeps space between the image and the text. */
#profile-header table.layout td {
  padding: 6px 10px;
  vertical-align: middle; /* center the text vertically against the photo */
}

#profile-header td.profile-photo-cell {
  width: 140px;
  padding-right: 24px;
  white-space: nowrap;
  vertical-align: top;
}

img.profile-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Technical Skills Matrix table (scoped so it never affects layout tables) */
.tab-content table.skills-matrix {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin: 10px auto;
  border: 2px solid #2f4f4f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  font-size: 1.05rem;
}

.tab-content table.skills-matrix th,
.tab-content table.skills-matrix td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #cccccc;
}

/* Emphasize the category (left) column */
.tab-content table.skills-matrix tbody td:first-child {
  font-weight: 600;
}

/* Darker background for the column headers */
.tab-content table.skills-matrix thead th {
  background-color: #2f4f4f;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
}

/* Alternating (zebra) row backgrounds */
.tab-content table.skills-matrix tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.tab-content table.skills-matrix tbody tr:nth-child(even) {
  background-color: #e4ece4;
}

/* Selected Engineering Outcomes table on the Home tab. Shares the Skills Matrix
   palette so the two read as one page rather than two designs. Both tables
   carry an aria-label, which is what lets automation address each one by
   accessible name now that the Home panel holds more than one table. */
.tab-content p.outcomes-intro {
  max-width: 900px;
  margin: 18px auto 8px;
  font-style: italic;
  color: #555555;
}

.tab-content table.outcomes-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 10px;
  border: 2px solid #2f4f4f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  font-size: 1rem;
}

.tab-content table.outcomes-table th,
.tab-content table.outcomes-table td {
  padding: 20px 20px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #cccccc;
  line-height: 1.6;
}

/* Let each outcome breathe: the bold claim needs separation from the sentence
   that supports it, or the row reads as one run-on block again.
   Scoped to the leading <strong> only. Applying it to every <strong> in the
   cell turned mid-sentence emphasis into a block and split the sentence around
   it, which is a layout bug that only appears once a row uses emphasis in
   prose. */
.tab-content table.outcomes-table tbody td:first-child > strong:first-child {
  display: block;
  margin-bottom: 6px;
}

.tab-content table.outcomes-table thead th {
  background-color: #2f4f4f;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
}

/* Outcome prose takes the width; the evidence column stays a narrow gutter */
.tab-content table.outcomes-table thead th:first-child {
  width: 74%;
}

.tab-content table.outcomes-table tbody td:last-child {
  white-space: nowrap;
  font-size: 0.95rem;
}

/* Cross references into the project tabs. Styled to read as interactive
   without borrowing the anchor palette, since these navigate within the page
   rather than out to a repository. */
.tab-jump {
  display: block;
  margin-bottom: 10px;
  color: #2f4f4f;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dotted #2f4f4f;
  width: fit-content;
}

.tab-jump:last-child {
  margin-bottom: 0;
}

/* Same red the site uses for anchor hover, so hover feedback is one language
   across the page. The dotted underline is what distinguishes an in-page jump
   from a link that leaves the site. */
.tab-jump:hover,
.tab-jump:focus-visible {
  color: #ff0000;
  border-bottom-color: #ff0000;
  outline: none;
}

/* Measured-impact callout above the outcomes table. Two rows, one column: the
   headline numbers a reader should leave with even if they read nothing else. */
.tab-content table.impact-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 20px;
  border: 2px solid #2f4f4f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.tab-content table.impact-table thead th {
  background-color: #2f4f4f;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  padding: 12px 16px;
  letter-spacing: 0.06em;
}

.tab-content table.impact-table tbody td {
  padding: 16px 20px;
  border: 1px solid #cccccc;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.tab-content table.impact-table tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.tab-content table.impact-table tbody tr:nth-child(even) {
  background-color: #e4ece4;
}

.tab-content table.impact-table tbody tr:hover {
  color: #8b0000;
}

.tab-content table.outcomes-table tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.tab-content table.outcomes-table tbody tr:nth-child(even) {
  background-color: #e4ece4;
}

/* Per-project tables (same color scheme as the Skills Matrix) */
.tab-content table.project-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 900px;
  margin: 10px auto 24px auto;
}

.tab-content table.project-table th,
.tab-content table.project-table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #cccccc;
}

/* Project title row: darker header, matching the Skills Matrix */
.tab-content table.project-table thead th {
  background-color: #2f4f4f;
  color: #ffffff;
  text-transform: uppercase;
}

/* Left "title" column emphasis */
.tab-content table.project-table tbody td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

/* Alternating (zebra) row backgrounds, matching the Skills Matrix */
.tab-content table.project-table tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.tab-content table.project-table tbody tr:nth-child(even) {
  background-color: #e4ece4;
}

/* Change row text color on hover (reverts to initial on mouse out) */
.tab-content table.skills-matrix tbody tr:hover,
.tab-content table.project-table tbody tr:hover,
.tab-content table.outcomes-table tbody tr:hover {
  color: #8b0000;
}

/* Restore list indentation inside table cells so bullets and numbers clear the
   borders (the global "* { padding: 0 }" reset otherwise pushes markers onto
   the border). Ordered lists need a wider inset than bullets because the
   marker is a number plus a period rather than a single glyph. */
.tab-content td ul {
  margin: 4px 0;
  padding-left: 22px;
}

.tab-content td ol {
  margin: 4px 0;
  padding-left: 26px;
}

.tab-content td li {
  margin-bottom: 4px;
}

/* Give each numbered emulator room to breathe from the next one */
.tab-content td ol > li {
  margin-bottom: 10px;
}

/* Section headings inside a tab panel.
   Each one opens a distinct block of content, so it is treated as a section
   header rather than a caption: a rule above it, generous space, and small
   uppercase letterforms. Without the rule the Skills Matrix read as a
   continuation of the biography paragraph immediately above it.
   The heading text itself is unchanged - the suite asserts on it. */
.tab-content h3 {
  max-width: 900px;
  margin: 40px auto 16px;
  padding-top: 24px;
  border-top: 3px solid #2f4f4f;
  color: #2f4f4f;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* The panel already carries 20px of its own top padding, so the first heading
   needs less margin to sit the same distance below what precedes it as the
   later headings do. */
.tab-content h3:first-child {
  margin-top: 20px;
}

/* The intro line belongs to the table below it, not to the gap above it */
.tab-content h3 + p.outcomes-intro {
  margin-top: 0;
}

.tab-content table.project-table thead th {
  text-align: center;
}

/* Change link text color to red on hover (reverts to initial on mouse out) */
.tab-content a:hover,
#profile-header a:hover,
#site-footer a:hover,
.doc-page a:hover {
  color: #ff0000;
}

/* ============================================================
   Standalone document pages (case-study.html). Scoped to
   .doc-page so nothing here can reach the tabbed index page.
   ============================================================ */
.doc-page {
  max-width: 900px;
  margin: 24px auto 10px;
  padding: 0 16px;
  box-sizing: border-box;
  line-height: 1.6;
}

.doc-page h1 {
  color: #2f4f4f;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.doc-page h2 {
  color: #2f4f4f;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 30px 0 10px;
  padding-top: 18px;
  border-top: 3px solid #2f4f4f;
}

.doc-page p {
  margin-bottom: 12px;
}

.doc-page p.doc-lede {
  font-style: italic;
  color: #555555;
  margin-bottom: 20px;
}

.doc-page p.doc-back {
  font-size: 0.95rem;
}

.doc-page ul.doc-list {
  margin: 0 0 14px;
  padding-left: 22px;
}

.doc-page ul.doc-list li {
  margin-bottom: 10px;
}

.doc-page table.doc-table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  border: 2px solid #2f4f4f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}

.doc-page table.doc-table th,
.doc-page table.doc-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #cccccc;
  overflow-wrap: anywhere;
}

.doc-page table.doc-table thead th {
  background-color: #2f4f4f;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
}

.doc-page table.doc-table tbody td:first-child {
  font-weight: 600;
  width: 30%;
}

.doc-page table.doc-table tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

.doc-page table.doc-table tbody tr:nth-child(even) {
  background-color: #e4ece4;
}

.doc-page table.doc-table tbody tr:hover {
  color: #8b0000;
}

@media (max-width: 600px) {
  .doc-page table.doc-table thead {
    display: none;
  }

  .doc-page table.doc-table tbody,
  .doc-page table.doc-table tr,
  .doc-page table.doc-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .doc-page table.doc-table tbody td:first-child {
    width: 100%;
    background-color: #dfe7df;
    border-bottom: none;
  }
}

/* Copyright footer */
#site-footer {
  width: fit-content;       /* shrink to the copyright text so the divider matches its width */
  margin: 30px auto 12px auto;
  padding: 8px 4px;
  border-top: 1px solid #cccccc;
  text-align: center;
  font-size: 14px;
  color: #555555;
}

/* ============================================================
   MOBILE / RESPONSIVE LAYOUT
   Applies on phones (and narrow windows); desktop is unaffected.
   ============================================================ */
@media (max-width: 600px) {

  /* Tab menu: let the tabs wrap to multiple lines instead of overflowing,
     and enlarge them for touch */
  .menu ul {
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
    padding: 0 6px;
  }

  .item {
    padding: 12px 14px;
    margin: 3px;
    font-size: 16px;
  }

  /* Constrain everything to the viewport width */
  #profile-header,
  .menu-content-container {
    max-width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* Profile header: stack the photo above the text, centered.
     box-sizing is required here: these cells keep the scoped 10px horizontal
     padding from "#profile-header table.layout td", so without it the 100%
     width and that padding add up and push the page 8px past the viewport. */
  #profile-header table.layout,
  #profile-header table.layout tbody,
  #profile-header table.layout tr,
  #profile-header table.layout td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  #profile-header td.profile-photo-cell {
    width: auto;
    padding: 0 0 12px 0;
    white-space: normal;
    text-align: center;
  }

  #profile-header table.layout td {
    text-align: center;
    vertical-align: top;
  }

  img.profile-photo {
    margin: 0 auto;
  }

  /* Data tables: stack each row's cells vertically so nothing is cramped.
     max-width caps the table at the container even though a <table> box is
     otherwise free to grow to its content's minimum width. */
  .tab-content table.skills-matrix,
  .tab-content table.project-table {
    width: 100%;
    max-width: 100%;
  }

  .tab-content table.skills-matrix tbody,
  .tab-content table.project-table tbody,
  .tab-content table.outcomes-table tbody,
  .tab-content table.skills-matrix tr,
  .tab-content table.project-table tr,
  .tab-content table.outcomes-table tr,
  .tab-content table.skills-matrix tbody td,
  .tab-content table.project-table tbody td,
  .tab-content table.outcomes-table tbody td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* The narrow "Evidence" gutter cannot stay nowrap once cells are stacked */
  .tab-content table.outcomes-table tbody td:last-child {
    white-space: normal;
  }

  /* Redundant column headers add nothing to a stacked layout */
  .tab-content table.outcomes-table thead {
    display: none;
  }

  /* Long unbreakable tokens - source filenames such as
     "custom_header_response_to_http_request.py" and repository paths - would
     otherwise set the table's minimum content width and push the whole page
     wider than the phone viewport. "anywhere" is required rather than
     "break-word": only "anywhere" reduces the intrinsic min-content size that
     the table is sized from. */
  .tab-content table.skills-matrix tbody td,
  .tab-content table.project-table tbody td,
  .tab-content table.project-table thead th,
  .tab-content table.outcomes-table tbody td {
    overflow-wrap: anywhere;
  }

  /* Project title row stays as a full-width banner */
  .tab-content table.project-table thead th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* The redundant "Area / Core Technologies" column headers add nothing once
     rows are stacked, so hide them on phones */
  .tab-content table.skills-matrix thead {
    display: none;
  }

  /* Make the left "label" cell read as a sub-heading above its content */
  .tab-content table.skills-matrix tbody td:first-child,
  .tab-content table.project-table tbody td:first-child {
    font-weight: 700;
    white-space: normal;
    background-color: #dfe7df;
    border-bottom: none;
  }
}