/* ============================================================
   BIM RAG portfolio subpage — work15.css
   Visual language matches work13 (Neural Floorplan):
   white background, Helvetica/Arial, black headings,
   muted gray body, blue accent, thin borders, small radii.
   ============================================================ */

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

main {
  font-size: clamp(10px, 1.8vw, 18px);
  font-family: Helvetica, Arial, sans-serif;
  max-width: 1000px;
  width: 97%;
  margin: 10px auto;
  box-sizing: border-box;
}

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

.header {
  font-family: Helvetica, Arial, sans-serif;
  background: #ffffffb9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1400px;
  width: 97%;
  z-index: 1000;
}

.header #name {
  margin: 20px 0;
  font-size: clamp(14px, 2.3vw, 20px);
}

#name a { color: inherit; text-decoration: none; }
#name a:visited { color: inherit; }

.subpage {
  background: transparent;
  font-size: clamp(9px, 1.8vw, 18px);
  text-align: left;
  border: none;
  color: #6d6d6d;
}

.nav {
  display: flex;
  gap: clamp(1px, 2vw, 20px);
  align-items: center;
}

.nav .subpage {
  cursor: pointer;
  transition: transform 0.2s;
}

.nav .subpage:hover { transform: translateY(3px); }

.header.hidden { transform: translateY(-120%); }

.header.animate,
.header.animate.hidden { transition: transform 1s ease-in-out; }

/* Visible keyboard focus */
a:focus-visible,
.subpage:focus-visible {
  outline: 2px solid #0051ff;
  outline-offset: 2px;
}

/*-----------------------------------------------------------------*/
/* Hero & Intro                                                     */
/*-----------------------------------------------------------------*/

.main-image {
  aspect-ratio: 12 / 5;
  background: #dfe4ea url('title.png') no-repeat center 30%;
  background-size: cover;
  margin-bottom: 20px;
}

@media (max-width: 640px) {
  .main-image { aspect-ratio: 4 / 3; }
}

.title {
  color: black;
  font-size: clamp(20px, 5vw, 50px);
  font-weight: bold;
}

.intro {
  margin: 50px 0 80px 0;
  font-size: clamp(12px, 2.1vw, 21px);
  color: #6d6d6d;
}

.intro .subtitle {
  display: block;
  margin: 14px 0 4px 0;
  font-size: clamp(12px, 1.8vw, 18px);
  line-height: 1.5;
  color: #4a4a4a;
  max-width: 46em;
}

#github {
  color: #0051ff;
  margin: 10px 0 14px 0;
  text-decoration: none;
}

#github:hover { color: #333; }
a:has(#github) { text-decoration: none; }

.intro .meta {
  font-size: clamp(10px, 1.5vw, 15px);
  line-height: 1.9;
  color: #6d6d6d;
}

.intro .meta .cat {
  color: #0051ff;
  font-weight: bold;
}

/*-----------------------------------------------------------------*/
/* Section Titles & Body Text                                       */
/*-----------------------------------------------------------------*/

.section-title {
  font-size: clamp(12px, 2.5vw, 25px);
  font-weight: bold;
  margin: 90px 0 20px 0;
  color: black;
}

.subsection-title {
  font-size: clamp(11px, 2vw, 20px);
  font-weight: bold;
  margin: 44px 0 14px 0;
  color: #222;
}

.text {
  font-size: clamp(10px, 1.6vw, 16px);
  line-height: 1.65;
  color: #545454;
  text-align: justify;
}

.text + .text { margin-top: 14px; }

.text a { color: #0051ff; text-decoration: none; }
.text a:hover { text-decoration: underline; }

.text code, code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.88em;
  background: #f2f2f2;
  padding: 1px 4px;
  border-radius: 2px;
  color: #333;
}

.tight-list {
  margin: 12px 0 0 20px;
  padding: 0;
  font-size: clamp(10px, 1.5vw, 15px);
  color: #545454;
  line-height: 1.7;
}
.tight-list li { margin-bottom: 8px; }

/*-----------------------------------------------------------------*/
/* Callouts — principle / rule                                      */
/*-----------------------------------------------------------------*/

.callout {
  border: 1px solid #cdd9f2;
  background: #f5f8ff;
  padding: 14px 20px;
  margin: 24px 0;
  border-radius: 4px;
  font-size: clamp(11px, 1.7vw, 17px);
  line-height: 1.55;
  color: #2a2a2a;
}

.callout.rule {
  border-color: #f0d3b8;
  background: #fff7ef;
}

.callout .lead {
  display: block;
  font-size: clamp(8px, 1.1vw, 11px);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: bold;
  color: #9a9aa2;
  margin-bottom: 6px;
}

/*-----------------------------------------------------------------*/
/* Numbered pipeline list (title | description)                     */
/*-----------------------------------------------------------------*/

.pipeline-list {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  counter-reset: pipeline-counter;
}

.pipeline-list li {
  display: grid;
  grid-template-columns: 2.4em clamp(120px, 22%, 210px) 1fr;
  gap: 0 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid #f0f0f0;
  counter-increment: pipeline-counter;
}

.pipeline-list li:last-child { border-bottom: none; }

.pipeline-list li::before {
  content: counter(pipeline-counter, decimal-leading-zero);
  font-weight: bold;
  color: #ccc;
  font-size: clamp(9px, 1.1vw, 11px);
  padding-top: 1px;
}

.pl-title {
  font-size: clamp(10px, 1.5vw, 15px);
  font-weight: bold;
  color: #222;
  line-height: 1.45;
}

.pl-desc {
  font-size: clamp(9px, 1.35vw, 13px);
  color: #666;
  line-height: 1.55;
}

@media (max-width: 640px) {
  .pipeline-list li {
    grid-template-columns: 2.4em 1fr;
    grid-template-rows: auto auto;
    gap: 0 10px;
  }
  .pl-title { grid-column: 2; grid-row: 1; }
  .pl-desc  { grid-column: 2; grid-row: 2; margin-top: 2px; }
}

/*-----------------------------------------------------------------*/
/* Content boxes (code chip lists, schema)                          */
/*-----------------------------------------------------------------*/

.arch-box {
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: clamp(9px, 1.35vw, 13px);
  color: #444;
  line-height: 1.6;
}

.arch-box b {
  font-size: clamp(10px, 1.45vw, 14px);
  color: #111;
  display: block;
  margin-bottom: 10px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip-row code {
  background: #eef2f7;
  border: 1px solid #dbe2ea;
  color: #33465c;
  font-size: clamp(8px, 1.15vw, 12px);
  padding: 3px 8px;
}

/*-----------------------------------------------------------------*/
/* Tables — responsive wrapper                                      */
/*-----------------------------------------------------------------*/

.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 18px 0;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(9px, 1.4vw, 13px);
  min-width: 520px;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
  color: #545454;
  vertical-align: top;
  line-height: 1.45;
}

.data-table th {
  color: #222;
  font-weight: bold;
  border-bottom: 1.5px solid #d8d8d8;
  white-space: nowrap;
}

.data-table td.num,
.data-table th.num { text-align: right; white-space: nowrap; }

.data-table tbody tr:hover { background: #fafafa; }

.data-table caption {
  caption-side: bottom;
  text-align: left;
  font-size: clamp(8px, 1.15vw, 11px);
  color: #999;
  padding-top: 8px;
  line-height: 1.5;
}

/* Compact key/value technical table */
.tech-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: clamp(9px, 1.4vw, 13px);
}

.tech-table tbody tr { border-bottom: 1px solid #eee; }
.tech-table tbody tr:first-child { border-top: 1px solid #e0e0e0; }

.tech-table td {
  padding: 7px 12px;
  color: #545454;
  vertical-align: top;
  line-height: 1.45;
}

.tech-table td:first-child {
  font-weight: bold;
  color: #333;
  width: 30%;
  white-space: nowrap;
}

/*-----------------------------------------------------------------*/
/* Pipeline flowchart container                                     */
/*-----------------------------------------------------------------*/

.pipeline-flowchart {
  width: 100%;
  margin: 20px 0 6px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
}

.pipeline-flowchart svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 900px;
}

.diagram-note {
  font-size: clamp(8px, 1.15vw, 11px);
  color: #aaa;
  text-align: center;
  margin: 4px 0 14px 0;
}

.diagram-summary {
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 8px 0 0 0;
  font-size: clamp(9px, 1.35vw, 13px);
  color: #555;
  line-height: 1.65;
}
.diagram-summary summary {
  cursor: pointer;
  font-weight: bold;
  color: #333;
}
.diagram-summary[open] summary { margin-bottom: 8px; }

/* Legend for diagram categories */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0 0;
  font-size: clamp(8px, 1.2vw, 12px);
  color: #555;
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i {
  width: 13px; height: 13px; border-radius: 3px;
  border: 1.5px solid; display: inline-block; flex: none;
}
.lg-sql   { background: #e8f0fe; border-color: #2563eb; }
.lg-rag   { background: #e7f5f2; border-color: #0d9488; }
.lg-graph { background: #f1ebfb; border-color: #7c3aed; }
.lg-llm   { background: #fdf1e3; border-color: #b45309; }
.lg-det   { background: #f4f4f5; border-color: #71717a; }
.lg-store { background: #eef1f5; border-color: #8a9bb0; }

/*-----------------------------------------------------------------*/
/* Placeholder image frame                                          */
/*-----------------------------------------------------------------*/

.placeholder-frame {
  border: 1.5px dashed #cfcfcf;
  border-radius: 4px;
  background: #fbfbfb;
  padding: clamp(24px, 5vw, 48px) 20px;
  margin: 22px 0;
  text-align: center;
  color: #9a9aa2;
}

.placeholder-frame .ph-tag {
  font-size: clamp(8px, 1.1vw, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: bold;
  color: #b0b0b8;
}

.placeholder-frame .ph-desc {
  font-size: clamp(9px, 1.4vw, 14px);
  color: #888;
  margin-top: 10px;
  line-height: 1.55;
}

/*-----------------------------------------------------------------*/
/* Version evolution timeline (v1 -> v4)                            */
/*-----------------------------------------------------------------*/

.version-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0;
}

@media (max-width: 860px) { .version-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .version-grid { grid-template-columns: 1fr; } }

.version-card {
  border: 1px solid #e2e2e6;
  border-radius: 4px;
  padding: 16px 16px 18px;
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
}

.version-card .vtag {
  font-size: clamp(11px, 1.7vw, 16px);
  font-weight: bold;
  color: #0051ff;
}

.version-card.current .vtag { color: #166534; }
.version-card.current { border-color: #bfe3cd; background: #f6fdf8; }

.version-card .vname {
  font-size: clamp(9px, 1.3vw, 12px);
  color: #333;
  font-weight: bold;
  margin: 4px 0 10px 0;
  line-height: 1.4;
}

.version-card .vbody {
  font-size: clamp(9px, 1.3vw, 12px);
  color: #5a5a5a;
  line-height: 1.55;
}

.version-card .vweak {
  margin-top: 10px;
  font-size: clamp(8px, 1.2vw, 11px);
  color: #a05a2c;
  line-height: 1.5;
}
.version-card.current .vweak { color: #6b7280; }

/*-----------------------------------------------------------------*/
/* Benchmark: unassessed marker + verdict bars                      */
/*-----------------------------------------------------------------*/

.unassessed {
  display: inline-block;
  font-size: clamp(8px, 1.1vw, 11px);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  color: #6b7280;
  background: repeating-linear-gradient(
    45deg, #f0f0f2, #f0f0f2 5px, #e6e6ea 5px, #e6e6ea 10px);
  border: 1px solid #dcdce2;
}

.verdict-bars {
  display: grid;
  grid-template-columns: clamp(28px, 6vw, 40px) 1fr;
  gap: 10px 12px;
  align-items: center;
  margin: 18px 0 6px 0;
  max-width: 560px;
}

.verdict-bars .vb-label {
  font-size: clamp(9px, 1.4vw, 13px);
  font-weight: bold;
  color: #333;
}

.verdict-bars .vb-track {
  display: flex;
  height: clamp(18px, 3vw, 22px);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #e4e4e8;
}

.verdict-bars .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(7px, 1.1vw, 10px);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}
/* Neutral, non-green palette: correctness is NOT implied */
.seg-pass    { background: #3b6fd4; }
.seg-partial { background: #9db4d8; color: #22314a; }
.seg-fail    { background: #d8dbe0; color: #4a4a4a; }
.seg-review  { background: #b9a06b; }
.seg-unassessed {
  color: #6b7280;
  background: repeating-linear-gradient(
    45deg, #eef0f2, #eef0f2 6px, #e2e5e9 6px, #e2e5e9 12px);
}

.bench-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0 0;
  font-size: clamp(8px, 1.2vw, 11px);
  color: #555;
}
.bench-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bench-legend i { width: 13px; height: 13px; border-radius: 2px; flex: none; }

.fixed-list {
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(9px, 1.4vw, 14px);
  color: #444;
}
.fixed-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.55;
}
.fixed-list li:last-child { border-bottom: none; }
.fixed-list b { color: #166534; }

/*-----------------------------------------------------------------*/
/* Screenshots — figures                                            */
/*-----------------------------------------------------------------*/

.shot-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
@media (max-width: 640px) { .shot-2col { grid-template-columns: 1fr; } }

figure.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

figure.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #e4e4e8;
  border-radius: 4px;
  background: #f4f6f8;
}

figure.shot figcaption {
  font-size: clamp(9px, 1.35vw, 13px);
  color: #666;
  line-height: 1.5;
}

figure.shot figcaption b { color: #333; }

.shot-wide { margin: 22px 0; }

/*-----------------------------------------------------------------*/
/* Note strip (screenshot provenance / caveats)                     */
/*-----------------------------------------------------------------*/

.note-strip {
  background: #f6f7f9;
  border: 1px solid #e6e8ec;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 20px 0;
  font-size: clamp(9px, 1.35vw, 13px);
  color: #5a5a5a;
  line-height: 1.6;
}

/*-----------------------------------------------------------------*/
/* Section separator                                                */
/*-----------------------------------------------------------------*/

.section-separator {
  border: none;
  border-top: 2px solid #c8c8c8;
  margin: 110px 0 50px 0;
}

/*-----------------------------------------------------------------*/
/* References                                                       */
/*-----------------------------------------------------------------*/

.references-list {
  margin: 20px 0 0 20px;
  padding: 0;
  font-size: clamp(9px, 1.3vw, 13px);
  color: #555;
  line-height: 1.7;
}

.references-list li + li { margin-top: 16px; }
.references-list a { color: #0051ff; text-decoration: none; word-break: break-word; }
.references-list a:hover { text-decoration: underline; }

.adoption-note {
  border: 1px solid #e2e2e6;
  background: #fafafa;
  padding: 12px 18px;
  margin: 22px 0 0 0;
  border-radius: 4px;
  font-size: clamp(9px, 1.4vw, 14px);
  color: #555;
  line-height: 1.6;
}

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

.footer {
  font-size: clamp(10px, 1.5vw, 15px);
  line-height: 1.5;
  height: 160px;
  margin: 90px 0 0 0;
  color: #636363;
}

/*-----------------------------------------------------------------*/
/* Reduced motion                                                   */
/*-----------------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
  .header.animate,
  .header.animate.hidden { transition: none; }
  .nav .subpage { transition: none; }
}