/* projects.css — Projects list, project detail view, exit page. */

/* ===== PROJECTS PAGE ===== */
.page-title {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid #808080;
}

/* Stylized image header (32px tall, varying width). Replaces the text title
   once it loads; the text title is the fallback when the art is missing. */
.page-title-img {
  height: 32px;
  width: auto;
  display: block;
  image-rendering: pixelated;
  margin-bottom: 8px;
}
.page-title-img.loaded + .page-title { display: none; }

.category-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cat-tab {
  padding: 3px 8px;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  cursor: pointer;
  font-family: regular;
  font-size: var(--font-body);
}

.cat-tab:active, .cat-tab.active {
  border-color: #404040 #dfdfdf #dfdfdf #404040;
  background: #a0a0a0;
}

.projects-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.projects-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.projects-control label {
  font-size: var(--font-body);
  color: #808080;
  white-space: nowrap;
}

.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-display {
  font-family: regular;
  font-size: var(--font-body);
  background: #fff;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  padding: 2px 14px 2px 4px;
  cursor: pointer;
  color: #000;
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.select-display::after {
  content: '▼';
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 6px;
  color: #000;
  pointer-events: none;
}

.select-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #000;
  z-index: 800;
  max-height: 150px;
  overflow-y: auto;
}

.select-dropdown.open {
  display: block;
}

.select-option {
  font-family: regular;
  font-size: var(--font-body);
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  color: #000;
}

.select-option:hover {
  background: #000080;
  color: #fff;
}

.select-option.selected {
  background: #e0e0ff;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  min-height: 100px;
}

.projects-grid .project-tile {
  min-width: 0;
  overflow: hidden;
}

.project-tile {
  cursor: default;
}

.project-tile .panel-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-tile .project-tags {
  color: #808080;
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
}

.project-tile .project-tags .tag {
  text-decoration: underline;
}

.project-tile .project-date {
  font-size: var(--font-body);
  color: #808080;
}

.project-tile .project-desc {
  font-size: var(--font-body);
  color: #404040;
  min-height: calc(var(--font-body) * 1.3 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.project-tile .project-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-tile .project-status {
  color: #808080;
  text-transform: uppercase;
}

.project-tile .project-details-link {
  color: #000080;
  text-decoration: underline;
  cursor: pointer;
}

.project-tile .project-details-link:hover {
  color: #4040c0;
}

/* Segmented progress bar with percentage to the right */
.progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.progress-bar-segmented {
  height: 12px;
  flex: 1;
  background: #fff;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  overflow: hidden;
  display: flex;
  gap: 1px;
  padding: 0px 1px;
}

.progress-segment {
  width: 6px;
  flex-shrink: 0;
  height: calc(100% + 2px);
  margin-top: -1px;
  background: #000080;
}

.progress-percent {
  color: #808080;
  white-space: nowrap;
}

/* Project detail */
.project-detail { max-width: 100%; }

.project-detail .back-link {
  display: inline-block;
  color: #000080;
  text-decoration: underline;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: var(--font-body);
}

.project-detail h1 {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 4px;
}

.project-infobox {
  float: right;
  width: 180px;
  margin: 0 0 8px 12px;
  background: #e8e8e8;
  border: 2px solid;
  border-color: #dfdfdf #404040 #404040 #dfdfdf;
  padding: 8px;
  font-size: var(--font-body);
}

.project-infobox h3 {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin-bottom: 4px;
  border-bottom: 1px solid #808080;
  padding-bottom: 2px;
}

.project-infobox .info-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px dotted #c0c0c0;
}

.project-infobox .info-label {  }

.project-content {
  font-size: var(--font-body);
}

.project-content h2 {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  margin: 12px 0 4px;
  border-bottom: 1px solid #808080;
  padding-bottom: 2px;
}

.project-content p { margin-bottom: 8px; }

/* Project detail (from proj/ JSON) */
.proj-header { margin-bottom: 8px; }
.proj-header h1 { font-family: heading; font-size: var(--font-heading); color: #000080; margin-bottom: 2px; }
.proj-tagline { font-size: var(--font-body); color: #808080; margin-bottom: 6px; }
.proj-meta { font-size: var(--font-body); color: #404040; margin-bottom: 6px; display: flex; gap: 12px; flex-wrap: wrap; }
.proj-meta .label { color: #000080; }
/* Categories: plain dot-separated text (no boxes). */
.proj-categories { margin-bottom: 6px; font-size: var(--font-body); }
.proj-cat-tag { color: #5a6a92; }
.proj-cat-tag:not(:last-child)::after { content: '·'; color: #c2c2cc; margin: 0 5px; }

/* Status: a small coloured dot + label (no box). */
.proj-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 2px 0 0;
  vertical-align: middle;
}
.proj-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.proj-status-badge.active    { color: #1a8a1a; }
.proj-status-badge.completed { color: #2a4b8d; }
.proj-status-badge.paused    { color: #a07000; }
.proj-status-badge.archived  { color: #808080; }
.proj-body { font-size: var(--font-body); margin-bottom: 8px; }
.proj-body p { margin-bottom: 8px; }
.proj-embed-img { width: 128px; margin-bottom: 6px; border: 2px solid; border-color: #808080 #dfdfdf #dfdfdf #808080; cursor: pointer; }
.proj-embed-img.left { float: left; margin-right: 8px; }
.proj-embed-img.right { float: right; margin-left: 8px; }
.proj-embed-img img { width: 100%; display: block; }
.proj-embed-img .caption { font-size: var(--font-body); color: #808080; padding: 2px 4px; background: #e8e8e8; text-align: center; }
.proj-segment { margin-bottom: 10px; clear: both; }
.proj-segment h2 { font-family: heading; font-size: var(--font-heading); color: #000080; margin-bottom: 4px; border-bottom: 1px solid #808080; padding-bottom: 2px; }
.proj-segment-content { font-size: var(--font-body); }
.proj-segment-content p { margin-bottom: 8px; }
.proj-gallery { clear: both; margin-top: 10px; }
.proj-gallery h2 { font-family: heading; font-size: var(--font-heading); color: #000080; margin-bottom: 6px; border-bottom: 1px solid #808080; padding-bottom: 2px; }
.proj-gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.proj-gallery-item { aspect-ratio: 1; overflow: hidden; border: 2px solid; border-color: #808080 #dfdfdf #dfdfdf #808080; cursor: pointer; position: relative; }
.proj-gallery-item:hover { border-color: #000080 #4040c0 #4040c0 #000080; }
.proj-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.proj-locked-notice { background: #fff8e0; border: 2px solid #806000; padding: 6px 10px; font-size: var(--font-body); color: #806000; margin-bottom: 8px; }

/* Exit page */
body.page-exit #sidebar,
body.page-exit #main-content,
body.page-exit #scrollbar,
body.page-exit #footer { pointer-events: none; opacity: 0.5; }
body.page-exit { animation: none; }   /* freeze the scrolling background (now on <body>) */

.project-images {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.project-images .img-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: #808080;
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ===== PROJECT DETAIL INLINE STYLES ===== */
.back-link {
  display: inline-block;
  color: #000080;
  text-decoration: underline;
  margin-bottom: 8px;
}

.loading-text {
  padding: 20px;
  text-align: center;
  color: #808080;
}

.not-found-text {
  color: #808080;
  padding: 20px;
  text-align: center;
}

.proj-progress-bar {
  margin-bottom: 8px;
}

.clearfix {
  clear: both;
}

/* ===== PROJECT HISTORY LIST ===== */
.ph-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ph-count { color: #808080; }
.ph-sort { display: flex; align-items: center; gap: 6px; }
.ph-sort label { color: #000080; }

.ph-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ph-item {
  position: relative;
  background: #efeaf0;
  border: 2px solid #b9a9b8;
  color: #202020;
  margin-right: 24px;          /* free space on the right for the floating caret */
}
.ph-locked { opacity: 0.6; }

/* Outline colored by project status */
.ph-item.st-active     { border-color: #4a86c8; }   /* blue */
.ph-item.st-done       { border-color: #3fae6a; }   /* completed: green */
.ph-item.st-paused     { border-color: #d98a3a; }   /* orange */
.ph-item.st-planned    { border-color: #9a9aae; }   /* grey */
.ph-item.st-processing { border-color: #a86fc0; }   /* purple */
/* Cancelled: fade the whole tab (not just the outline) and grey its contents. */
.ph-item.st-cancelled  { border-color: #c9c9c9; opacity: 0.75; }
.ph-item.st-cancelled .ph-name,
.ph-item.st-cancelled .ph-tagline,
.ph-item.st-cancelled .ph-tag,
.ph-item.st-cancelled .ph-date,
.ph-item.st-cancelled .ph-date-l2 { color: #8a8a8a; }

/* Collapsed header row = the clickable toggle button */
.ph-head {
  position: relative;          /* anchors the progress bar at the bottom */
  width: 100%;
  box-sizing: border-box;
  height: 96px;                /* all tabs equal height */
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 10px 0;         /* tight top; 3-line tagline + bar fill the rest */
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ph-head:hover,
.ph-item.open .ph-head { background: #f6f1f7; }

.ph-date {
  flex: 0 0 72px;
  box-sizing: border-box;
  color: #808080;
  border-right: 1px solid #cbb9ca;
  padding-right: 8px;
  line-height: 1.35;
}
.ph-date-l1 { display: block; white-space: nowrap; }
.ph-date-l2 { display: block; color: #9a8fa0; }   /* year, slightly dimmer */
.ph-main { flex: 1; min-width: 0; }
.ph-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.ph-name {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
}
/* Tags: grey underlined "#tag" text under the title (no boxes). One line, small
   gap above (title -> tags); overflow fades off the right edge. */
.ph-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: -4px 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 90%, transparent 100%);
}
.ph-tag { flex: 0 0 auto; color: #808080; text-decoration: underline; white-space: nowrap; }
/* Bigger gap between tags and tagline; the tagline wraps up to three lines (to
   fill the taller tab), then ellipsizes. */
.ph-tagline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  color: #444;
  margin: 4px 0 0;
  overflow: hidden;
}

/* Progress "loading" bar pinned to the bottom edge of the tab. Retro chunky
   segmented look: a sunken grey track with blocky green segments. */
.ph-loadbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12px;
  background: #b7a7b6;
  box-shadow: inset 0 1px 0 #8f7f8e, inset 0 -1px 0 #d8ccd7;
  overflow: hidden;
  image-rendering: pixelated;
}
.ph-loadbar-fill {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg,
    #34b063 0, #34b063 5px, #1f7a42 5px, #1f7a42 6px, #b7a7b6 6px, #b7a7b6 8px);
}

/* Expand caret (rotates when the row is open) */
/* Caret floats in the free space to the right of the tab (positioned off the head's
   right edge, out past the border). */
.ph-caret {
  position: absolute;
  top: 50%;
  right: -15px;
  margin-top: -4px;            /* half the triangle height, to vertically center */
  width: 0; height: 0;
  border-left: 5px solid #7a6a79;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.12s;
}
.ph-item.open .ph-caret { transform: rotate(90deg); }

/* Expandable dropdown panel */
.ph-panel { display: none; border-top: 1px solid #cbb9ca; }
.ph-item.open .ph-panel { display: block; }
.ph-panel-inner { padding: 8px 10px 10px; }

/* Top block: status note (full width) with the date beneath it */
.ph-note { margin-bottom: 5px; }
.ph-note-label {
  font-family: heading;
  font-weight: bold;
  font-size: var(--font-heading);
  color: #000080;
  display: block;
  margin-bottom: 2px;
}
.ph-note-body { color: #202020; line-height: 1.5; }
.ph-dates { display: flex; flex-wrap: wrap; gap: 12px; color: #808080; }
.ph-rule { border: none; border-top: 1px solid #cbb9ca; margin: 9px 0; }

/* Lower block: status + explanation (2/3) on the left, photo carousel (1/3) right */
.ph-lower { display: flex; gap: 14px; align-items: flex-start; }
.ph-info { flex: 2; min-width: 0; }
.ph-desc { color: #202020; line-height: 1.5; }
.ph-carousel { flex: 1; min-width: 0; }
.ph-carousel-more {
  display: block;
  text-align: right;               /* link sits above the carousel, right-aligned */
  margin: 0 0 4px;
  font-size: var(--font-body);
  color: #000080;
  text-decoration: underline;
  cursor: pointer;
}
.ph-carousel-frame {
  position: relative;              /* anchors the overlay arrows */
  width: 100%;
  aspect-ratio: 4 / 3;             /* landscape frame */
  border: 2px solid;
  border-color: #808080 #dfdfdf #dfdfdf #808080;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
/* Scale to fit (letterboxed on the black frame) rather than cropping */
.ph-carousel-img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Prev/next arrows overlaid on the left/right edges of the image */
.ph-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.ph-carousel-arrow:hover { background: rgba(0, 0, 0, 0.78); }
.ph-carousel-arrow.ph-prev { left: 0; }
.ph-carousel-arrow.ph-next { right: 0; }
/* Thumbnail strip below the image */
.ph-carousel-thumbs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ph-carousel-thumb {
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid #b9a9b8;
  background: #000;
  overflow: hidden;
  cursor: pointer;
}
.ph-carousel-thumb.active { border-color: #000080; box-shadow: 0 0 0 1px #000080; }
.ph-carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* status chips */
.ph-status {
  flex: 0 0 auto;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 5px;
  border: 1px solid #b9a9b8;
  background: #e9e2ea;
  color: #808080;
}
.ph-status.st-active     { color: #1a5fb4; border-color: #a9c2e0; background: #e7eef8; }   /* blue */
.ph-status.st-done       { color: #128a3e; border-color: #9fcfa9; background: #e7f3e9; }   /* green */
.ph-status.st-paused     { color: #cc6a00; border-color: #e0c49f; background: #fcf1e3; }
.ph-status.st-planned    { color: #5a5a7a; border-color: #b9b9cf; background: #ececf3; }
.ph-status.st-processing { color: #7a1f9a; border-color: #cfa9df; background: #f4e7f8; }
.ph-status.st-cancelled  { color: #999999; border-color: #cccccc; background: #f0f0f0; }