/* ============================================================================
   cu-eng-theme.css
   Faculty of Engineering, Chulalongkorn University - HTML theme for web apps,
   documents and print/PDF deliverables.

   Identity source: eng.chula.ac.th, and the CU Engineering lecture deck
   (00 - CU Engineering Lecture Template / gen_template.js), whose geometry
   this sheet reproduces in CSS:

     maroon #941114 | ink #231F20 | grey #727070 | line #D9D9D9 | fill #F5F5F5
     Sarabun | white ground | 0.07in maroon top band | 0.16in bottom band
     0.9in side margins | 9pt grey course footer

   NOT the university brand sheet: that one is Chula Pink #DE5C8E with
   Chulalongkorn / Chulacharas New, and lives in
   ../../html_presentation_CU_template_v1/css/chula-theme.css. Use this sheet
   for Faculty of Engineering work; use that one for university-brand work.

   Single theme by design. The deck specifies a white ground, so this sheet
   paints every colour explicitly and stays light in any viewer theme.

   Load order:
     css/fonts.css  ->  css/cu-eng-theme.css  ->  your page styles

   Everything is prefixed .cu- so it can sit beside other stylesheets.
   ============================================================================ */

/* ------------------------------------------------------------------ TOKENS */

:root {
  /* --- palette ---------------------------------------------------------- */
  --cu-maroon:      #941114;   /* primary - the identity colour             */
  --cu-maroon-deep: #6E0D0F;   /* pressed / hover on maroon                 */
  --cu-maroon-wash: #F7EAEA;   /* 8% tint - fills, current-row highlight    */
  --cu-on-maroon:   #FFFFFF;   /* text on a maroon fill                     */
  --cu-ink:         #231F20;   /* body + headings                           */
  --cu-grey:        #727070;   /* secondary text, captions, footers         */
  --cu-line:        #D9D9D9;   /* structural rules                          */
  --cu-line-soft:   #ECEAEA;   /* internal rules (table rows, grid cells)   */
  --cu-fill:        #F5F5F5;   /* inert panels, table headers               */
  --cu-ground:      #FFFFFF;   /* page                                      */
  --cu-surface:     #FFFFFF;   /* cards, tables, panels                     */

  /* --- type ------------------------------------------------------------- */
  --cu-font: 'Sarabun', 'Noto Sans Thai', 'Segoe UI', system-ui, sans-serif;

  --cu-size-h1:    clamp(30px, 4.4vw, 44px);   /* deck: 40pt title          */
  --cu-size-h2:    25px;                       /* deck: 25pt slide title    */
  --cu-size-h3:    18px;
  --cu-size-body:  16px;                       /* deck: 16pt body           */
  --cu-size-small: 13px;
  --cu-size-micro: 11px;                       /* uppercase labels          */
  --cu-size-foot:  12px;                       /* deck: 9pt footer          */

  /* --- geometry --------------------------------------------------------- */
  --cu-margin:     clamp(20px, 6.75vw, 84px);  /* deck: 0.9in of 13.333in   */
  --cu-band-top:   7px;                        /* deck: 0.07in of 7.5in     */
  --cu-band-bot:   12px;                       /* deck: 0.16in of 7.5in     */
  --cu-measure:    68ch;                       /* comfortable reading width */
  --cu-gap:        26px;

  --cu-ring:       var(--cu-maroon);
}

/* -------------------------------------------------------------------- BASE */

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

body {
  margin: 0;
  background: var(--cu-ground);
  color: var(--cu-ink);
  font-family: var(--cu-font);
  font-size: var(--cu-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--cu-maroon-wash); color: var(--cu-ink); }
:focus-visible { outline: 2px solid var(--cu-ring); outline-offset: 2px; }

a { color: var(--cu-maroon); text-underline-offset: 2px; }
a:hover { color: var(--cu-maroon-deep); }

img, svg, video { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ FRAME */
/* The deck's maroon bands. .cu-band-top is fixed for apps; add
   .cu-band-top--static in a document that scrolls as one sheet.            */

.cu-band-top {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--cu-band-top);
  background: var(--cu-maroon);
  z-index: 40;
}
.cu-band-top--static { position: static; }

.cu-band-bottom { height: var(--cu-band-bot); background: var(--cu-maroon); }

.cu-page {
  padding: calc(var(--cu-band-top) + 34px) var(--cu-margin) 0;
}
.cu-page--narrow { max-width: 1000px; margin-inline: auto; }

/* --------------------------------------------------------------- MASTHEAD */
/* The TITLE master: wordmark, maroon course line, big bold title, grey sub. */

.cu-masthead { display: flex; flex-direction: column; gap: var(--cu-gap); }

.cu-wordmark {
  height: 26px;
  width: auto;
  display: block;
  align-self: flex-start;   /* or a flex parent stretches the image */
}
.cu-wordmark--lg { height: 34px; }

.cu-eyebrow {
  margin: 0;
  color: var(--cu-maroon);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
}

.cu-title {
  margin: 4px 0 0;
  font-size: var(--cu-size-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.cu-sub {
  margin: 10px 0 0;
  color: var(--cu-grey);
  font-size: 17px;
  max-width: var(--cu-measure);
}

/* ---------------------------------------------------------------- SECTIONS */

.cu-sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 1.5px solid var(--cu-ink);
  padding-bottom: 7px;
  margin: 0 0 18px;
}
.cu-sec-head h2 {
  margin: 0;
  font-size: var(--cu-size-h2);
  font-weight: 700;
  line-height: 1.2;
}
.cu-sec-head p { margin: 0; color: var(--cu-grey); font-size: var(--cu-size-small); }

/* The SECTION master's big maroon numeral. Use it for a real sequence or a
   headline figure - not as decoration. */
.cu-numeral {
  font-size: 40px;
  font-weight: 700;
  color: var(--cu-maroon);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cu-numeral--xl { font-size: 66px; }

.cu-label {
  font-size: var(--cu-size-micro);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cu-grey);
}

/* ------------------------------------------------------------------ PROSE */
/* Wrap document body copy in .cu-prose. Do not use it for app chrome.      */

.cu-prose { max-width: var(--cu-measure); }
.cu-prose > * + * { margin-top: 1em; }
.cu-prose h2 { font-size: var(--cu-size-h2); font-weight: 700; margin-top: 1.8em; line-height: 1.25; }
.cu-prose h3 { font-size: var(--cu-size-h3); font-weight: 700; margin-top: 1.5em; }
.cu-prose p, .cu-prose li { line-height: 1.62; }
.cu-prose ul, .cu-prose ol { padding-left: 1.3em; }
.cu-prose li + li { margin-top: .35em; }
.cu-prose blockquote {
  margin-inline: 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--cu-maroon);
  color: var(--cu-grey);
}
.cu-prose code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .92em;
  background: var(--cu-fill);
  padding: 1px 5px;
}
.cu-lede { font-size: 18px; color: var(--cu-grey); max-width: var(--cu-measure); }

/* ------------------------------------------------------------------ TILES */
/* Summary row. Put the headline number before the detail.                  */

.cu-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--cu-line);
  border: 1px solid var(--cu-line);
}
.cu-tile { background: var(--cu-surface); padding: 16px 20px 18px; }
.cu-tile dt { margin: 0 0 6px; }
.cu-tile dd { margin: 0; }
.cu-tile-big {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.cu-tile-small { font-size: 14px; color: var(--cu-grey); margin-top: 2px; }

.cu-meter {
  height: 6px;
  background: var(--cu-fill);
  border: 1px solid var(--cu-line);
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
.cu-meter > i { position: absolute; inset: 0 auto 0 0; background: var(--cu-maroon); }

/* ------------------------------------------------------------------ CARDS */

.cu-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }

.cu-card {
  background: var(--cu-surface);
  border: 1px solid var(--cu-line);
  padding: 18px 20px 20px;
}
.cu-card h3 { margin: 0 0 6px; font-size: var(--cu-size-h3); font-weight: 700; }
.cu-card p { margin: 0; color: var(--cu-grey); font-size: 14.5px; }

/* A left maroon rule marks a card that carries a caution or a key point. */
.cu-card--rule { border-left: 3px solid var(--cu-maroon); }
.cu-card--muted { background: var(--cu-fill); }

.cu-callout {
  border: 1px solid var(--cu-line);
  border-left: 3px solid var(--cu-maroon);
  background: var(--cu-maroon-wash);
  padding: 14px 18px;
}
.cu-callout--quiet { background: var(--cu-fill); border-left-color: var(--cu-grey); }

/* ------------------------------------------------------------------- TAGS */
/* Five states that differ by fill AND border AND label, never by hue alone -
   the identity is one hue plus neutrals, so form carries the distinction.  */

.cu-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--cu-maroon);
  color: var(--cu-maroon);
  background: var(--cu-maroon-wash);
  vertical-align: 2px;
}
.cu-tag--solid   { background: var(--cu-maroon); color: var(--cu-on-maroon); }
.cu-tag--outline { background: var(--cu-surface); border-style: dashed; }
.cu-tag--muted   { background: var(--cu-fill); border-color: var(--cu-line); color: var(--cu-grey); }
.cu-tag--dotted  { background: var(--cu-fill); border-color: var(--cu-grey); border-style: dotted; color: var(--cu-grey); }

.cu-legend { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 0 0 22px; }
.cu-legend > span { display: flex; align-items: center; gap: 8px; font-size: var(--cu-size-small); color: var(--cu-grey); }

.cu-mark { width: 26px; height: 15px; flex: none; border: 1px solid var(--cu-maroon); background: var(--cu-maroon-wash); }
.cu-mark--solid   { background: var(--cu-maroon); }
.cu-mark--outline { background: var(--cu-surface); border-style: dashed; }
.cu-mark--muted   { background: var(--cu-fill); border-color: var(--cu-grey); }
.cu-mark--dotted  { background: var(--cu-fill); border-color: var(--cu-grey); border-style: dotted; }

/* ---------------------------------------------------------------- BUTTONS */

.cu-btn {
  appearance: none;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border: 1px solid var(--cu-maroon);
  background: var(--cu-maroon);
  color: var(--cu-on-maroon);
  cursor: pointer;
}
.cu-btn:hover { background: var(--cu-maroon-deep); border-color: var(--cu-maroon-deep); }
.cu-btn--ghost { background: var(--cu-surface); color: var(--cu-maroon); }
.cu-btn--ghost:hover { background: var(--cu-maroon-wash); color: var(--cu-maroon-deep); }

/* ------------------------------------------------------------------- TABS */

.cu-tabs {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--cu-line);
  position: sticky;
  top: var(--cu-band-top);
  background: var(--cu-ground);
  z-index: 30;
}
.cu-tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 10px 2px 11px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--cu-grey);
  cursor: pointer;
}
.cu-tab:hover { color: var(--cu-ink); }
.cu-tab[aria-selected="true"] { color: var(--cu-ink); border-bottom-color: var(--cu-maroon); }

/* ------------------------------------------------------------------ TABLE */

.cu-tablewrap { overflow-x: auto; border: 1px solid var(--cu-line); background: var(--cu-surface); }

.cu-table { border-collapse: collapse; width: 100%; }
.cu-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cu-grey);
  padding: 11px 16px;
  background: var(--cu-fill);
  border-bottom: 1px solid var(--cu-line);
  white-space: nowrap;
}
.cu-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cu-line-soft);
  vertical-align: top;
  font-size: 15px;
}
.cu-table tbody tr:last-child td { border-bottom: none; }
.cu-table tbody tr.is-current td { background: var(--cu-maroon-wash); }
.cu-table tbody tr.is-past td { color: var(--cu-grey); }
.cu-num { font-variant-numeric: tabular-nums; text-align: right; }

/* -------------------------------------------------------------- KEY/VALUE */

.cu-kv { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.cu-kv > div { border-top: 1px solid var(--cu-line-soft); padding-top: 12px; }
.cu-kv dt { margin: 0 0 4px; }
.cu-kv dd { margin: 0; font-size: 15px; }

/* ----------------------------------------------------------------- FIGURE */
/* The FIGURE_RIGHT master: content left, figure + caption right.           */

.cu-split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: start; }
.cu-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

.cu-figure { margin: 0; }
.cu-figure > img { display: block; width: 100%; border: 1px solid var(--cu-line); }
.cu-figure figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--cu-grey);
}
.cu-figure--placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  background: var(--cu-fill);
  border: 1px solid var(--cu-line);
  color: var(--cu-grey);
  font-size: 13px;
}

/* ----------------------------------------------------------------- DRAWER */

.cu-scrim {
  position: fixed; inset: 0;
  background: rgba(35, 31, 32, .34);
  z-index: 45;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.cu-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.cu-drawer {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(420px, 92vw);
  background: var(--cu-surface);
  border-left: 1px solid var(--cu-line);
  padding: 30px 28px;
  overflow-y: auto;
  z-index: 50;
  transform: translateX(100%);
  visibility: hidden;                /* keeps it out of the tab order */
  transition: transform .18s ease, visibility 0s linear .18s;
}
.cu-drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  box-shadow: -18px 0 42px -30px rgba(0, 0, 0, .5);
  transition: transform .18s ease, visibility 0s;
}
.cu-drawer-close {
  position: absolute; top: 16px; right: 18px;
  appearance: none; background: none; border: none;
  font: inherit; font-size: 22px; line-height: 1; color: var(--cu-grey); cursor: pointer;
}
.cu-drawer-close:hover { color: var(--cu-ink); }

/* ----------------------------------------------------------------- FOOTER */
/* The deck's 9pt grey course footer, plus the standing signature.          */

.cu-footer {
  margin-top: 64px;
  padding: 16px 0 20px;
  border-top: 1px solid var(--cu-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--cu-size-foot);
  color: var(--cu-grey);
}

.cu-sign { white-space: nowrap; }
.cu-sign b { color: var(--cu-ink); font-weight: 700; }

/* ------------------------------------------------------------- UTILITIES */

.cu-stack   { display: flex; flex-direction: column; gap: var(--cu-gap); }
.cu-row     { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cu-scroll  { overflow-x: auto; }
.cu-grey    { color: var(--cu-grey); }
.cu-maroon  { color: var(--cu-maroon); }
.cu-tabular { font-variant-numeric: tabular-nums; }
.cu-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- RESPONSIVE */

@media (max-width: 720px) {
  .cu-split, .cu-two-col { grid-template-columns: 1fr; gap: 22px; }
  .cu-tabs { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cu-drawer, .cu-scrim { transition: none; }
}

/* ------------------------------------------------------------------ PRINT */
/* Portrait A4 by default. For a landscape deliverable, add this rule inside
   the page's own style element (or pass --landscape to build/make-pdf.py):
       @page { size: A4 landscape; }
   Never write a closing style tag inside a CSS comment: the HTML parser ends
   the style element at the first one it sees, which silently truncates this
   sheet as soon as the page is bundled by build/inline.py.                  */

@page { size: A4; margin: 14mm 15mm; }

@media print {
  html, body {
    background: #FFFFFF;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 11.5pt;
  }

  .cu-page { padding: 0; }
  .cu-band-top { display: none; }        /* the page margin is the frame */
  .cu-band-bottom { display: none; }
  .cu-tabs, .cu-drawer, .cu-scrim, .cu-btn { display: none !important; }

  /* show every panel of a tabbed app when it prints as one document */
  .cu-print-all [hidden] { display: revert !important; }

  .cu-card, .cu-callout, .cu-tile, .cu-figure, .cu-tablewrap { break-inside: avoid; }
  .cu-table thead { display: table-header-group; }
  .cu-table tbody tr { break-inside: avoid; }
  .cu-sec-head { break-after: avoid; }
  .cu-title, .cu-prose h2, .cu-prose h3 { break-after: avoid; }

  .cu-break-before { break-before: page; }
  .cu-break-after  { break-after: page; }
  .cu-no-print     { display: none !important; }
  .cu-print-only   { display: revert !important; }

  a { color: var(--cu-ink); text-decoration: none; }
  .cu-footer { margin-top: 28px; }
}

.cu-print-only { display: none; }