/*
  Peters School of Business — Course Material Stylesheet
  NETW-0014 · Advanced Operating Systems · Assiniboine College
  (shared house style — same file used across NETW-0001 and NETW-0014)
  Based on Peters School Brand Standards Guide V4
  ─────────────────────────────────────────────────────────────────
  COLOUR PALETTE
    Primary purple  : #470A68  (Pantone 2617 C)
    Lilac           : #B996C3  (Pantone 2453 C)
    95% Black       : #282829
    Supporting green: #1D6960
    Supporting cyan : #88DBDF
    Supporting gold : #BC955C
    Page bg         : #F7F5F9  (warm off-white, purple-tinted)
    Card bg         : #FFFFFF
    Border          : #E8E2EE  (lilac-tinted grey)
    Body text       : #3D3547  (purple-tinted dark)
    Muted text      : #7B6F87

  TYPOGRAPHY (system-font fallback stack per brand guide p.16)
    Headlines  : Avenir Black, 'Century Gothic', Futura, sans-serif — ALL CAPS
    Subheads   : Rockwell, 'Rockwell Extra Bold', 'Courier New', serif
    Body copy  : Avenir, 'Avenir Next', Corbel, 'Century Gothic', sans-serif
    Monospace  : 'Courier New', Courier, monospace
*/

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

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  --purple       : #470A68;
  --purple-mid   : #6B2D8A;
  --purple-light : #EDE0F5;
  --purple-xlight: #F7F3FB;
  --lilac        : #B996C3;
  --lilac-light  : #E8DEEE;
  --lilac-xlight : #F5F0F8;
  --black95      : #282829;
  --green        : #1D6960;
  --green-light  : #D4EDEA;
  --cyan         : #88DBDF;
  --cyan-light   : #E3F7F8;
  --gold         : #BC955C;
  --gold-light   : #F5ECD9;
  --white        : #FFFFFF;
  --page-bg      : #F7F5F9;
  --card-bg      : #FFFFFF;
  --border       : #E2D9EC;
  --body-text    : #3D3547;
  --muted        : #7B6F87;
  --mono-bg      : #F0EBF5;

  --font-head    : Avenir, 'Avenir Next', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif;
  --font-sub     : Rockwell, 'Rockwell Extra Bold', Georgia, 'Times New Roman', serif;
  --font-body    : Avenir, 'Avenir Next', Corbel, 'Century Gothic', Calibri, sans-serif;
  --font-mono    : 'Courier New', Courier, monospace;

  --radius       : 10px;
  --radius-sm    : 6px;
  --shadow       : 0 1px 3px rgba(71,10,104,.06), 0 2px 8px rgba(71,10,104,.04);
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family    : var(--font-body);
  font-size      : 14px;
  line-height    : 1.6;
  color          : var(--body-text);
  background     : var(--page-bg);
  margin         : 0;
  padding        : 0;
}

.page-wrap {
  max-width : 940px;
  margin    : 0 auto;
  padding   : 0 24px 48px;
}

/* ── Page Header ────────────────────────────────────────────── */
.page-header {
  background    : var(--purple);
  margin        : 0 -24px 24px;   /* bleed past page-wrap padding */
  padding       : 20px 24px 18px;
  position      : relative;
  overflow      : hidden;
}

/* Stripe decorative element from brand guide */
.page-header::after {
  content    : '';
  position   : absolute;
  bottom     : -2px;
  left       : 0;
  right      : 0;
  height     : 6px;
  background : repeating-linear-gradient(
    90deg,
    var(--lilac)    0px,
    var(--lilac)    60%,
    var(--purple)   60%,
    var(--purple)   70%,
    var(--lilac-light) 70%,
    var(--lilac-light) 100%
  );
}

.page-header .school-tag {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .12em;
  text-transform : uppercase;
  color          : var(--lilac);
  margin         : 0 0 4px;
}

.page-header h1 {
  font-family    : var(--font-head);
  font-size      : 22px;
  font-weight    : 900;
  letter-spacing : .04em;
  text-transform : uppercase;
  color          : var(--white);
  margin         : 0 0 4px;
  line-height    : 1.2;
}

.page-header .subtitle {
  font-family : var(--font-body);
  font-size   : 13px;
  color       : var(--lilac);
  margin      : 0;
}

/* ── Timeline Bar ───────────────────────────────────────────── */
.timeline {
  display       : flex;
  border-radius : var(--radius);
  overflow      : hidden;
  margin-bottom : 18px;
  border        : 1px solid var(--border);
  box-shadow    : var(--shadow);
}

.seg {
  flex        : 1;
  padding     : 8px 6px;
  text-align  : center;
  font-family : var(--font-head);
  font-size   : 10px;
  font-weight : 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height : 1.4;
}

/* Preset segment colour schemes — override inline if needed */
.seg-recap   { background: var(--purple-light);  color: var(--purple); }
.seg-lecture { background: var(--lilac-light);   color: var(--purple); }
.seg-lab     { background: var(--green-light);   color: var(--green);  }
.seg-bonus   { background: var(--gold-light);    color: #7A5C1A;       }
.seg-debrief { background: var(--cyan-light);    color: #1A6568;       }
.seg-assess  { background: var(--purple);        color: var(--white);  }
.seg-review  { background: var(--lilac-xlight);  color: var(--purple); }

/* ── Content Blocks ─────────────────────────────────────────── */
.block {
  background    : var(--card-bg);
  border        : 1px solid var(--border);
  border-radius : var(--radius);
  padding       : 18px 20px;
  margin-bottom : 12px;
  box-shadow    : var(--shadow);
}

/* Left accent stripe by block type */
.block-recap   { border-left: 4px solid var(--lilac);  }
.block-lecture { border-left: 4px solid var(--purple); }
.block-lab     { border-left: 4px solid var(--green);  }
.block-bonus   { border-left: 4px solid var(--gold);   }
.block-debrief { border-left: 4px solid var(--cyan);   }
.block-assess  { border-left: 4px solid var(--purple); }
.block-overview{ border-left: 4px solid var(--purple); }

/* Block header row */
.bh {
  display     : flex;
  align-items : center;
  gap         : 10px;
  margin-bottom: 10px;
}

/* Badge (time label) */
.badge {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .06em;
  text-transform : uppercase;
  padding        : 3px 10px;
  border-radius  : 20px;
  white-space    : nowrap;
}

.badge-recap   { background: var(--purple-light); color: var(--purple); }
.badge-lecture { background: var(--lilac-light);  color: var(--purple); }
.badge-lab     { background: var(--green-light);  color: var(--green);  }
.badge-bonus   { background: var(--gold-light);   color: #7A5C1A;       }
.badge-debrief { background: var(--cyan-light);   color: #1A6568;       }
.badge-assess  { background: var(--purple);       color: var(--white);  }

/* Section label (e.g. "Recap · 10 min") */
.blabel {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : var(--muted);
}

/* Block title */
.bt {
  font-family : var(--font-sub);
  font-size   : 14px;
  font-weight : bold;
  color       : var(--black95);
  margin      : 0 0 6px;
}

/* Block description / intro paragraph */
.bd {
  font-size   : 13px;
  color       : var(--muted);
  margin      : 0 0 10px;
  line-height : 1.6;
}

/* ── Checklist (main bullet list) ───────────────────────────── */
ul.cl {
  list-style : none;
  padding    : 0;
  margin     : 0;
}

ul.cl li {
  font-size    : 13px;
  color        : var(--body-text);
  padding      : 6px 0;
  display      : flex;
  gap          : 10px;
  align-items  : flex-start;
  border-bottom: 1px solid #F3EFF8;
  line-height  : 1.55;
}

ul.cl li:last-child { border-bottom: none; }

.dot {
  width      : 14px;
  height     : 14px;
  border-radius: 50%;
  border     : 2px solid var(--lilac);
  flex-shrink: 0;
  margin-top : 2px;
}

/* ── Sub-section heading within a block ─────────────────────── */
.bsub {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : var(--purple);
  margin         : 14px 0 8px;
  padding-bottom : 4px;
  border-bottom  : 1px solid var(--lilac-light);
}

/* ── Tables ─────────────────────────────────────────────────── */
table {
  width           : 100%;
  border-collapse : collapse;
  font-size       : 12px;
  margin          : 10px 0 14px;
}

th {
  background  : var(--purple);
  color       : var(--white);
  font-family : var(--font-head);
  font-size   : 10px;
  font-weight : 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding     : 7px 10px;
  text-align  : left;
  border-bottom: 2px solid var(--purple-mid);
}

td {
  padding       : 7px 10px;
  border-bottom : 1px solid #F3EFF8;
  color         : var(--body-text);
  line-height   : 1.5;
  vertical-align: top;
}

tr:last-child td    { border-bottom: none; }
tr:nth-child(even) td { background: var(--purple-xlight); }

/* ── Callout Boxes ───────────────────────────────────────────── */
.info, .warn, .success, .tip {
  border-radius : 0 var(--radius-sm) var(--radius-sm) 0;
  padding       : 10px 14px;
  font-size     : 13px;
  margin-top    : 12px;
  line-height   : 1.55;
}

.info    { background: var(--purple-light); border-left: 3px solid var(--purple); color: var(--purple); }
.warn    { background: var(--gold-light);   border-left: 3px solid var(--gold);   color: #5C3D08; }
.success { background: var(--green-light);  border-left: 3px solid var(--green);  color: var(--green); }
.tip     { background: var(--cyan-light);   border-left: 3px solid var(--cyan);   color: #0E5558; }

/* ── Bonus Block ─────────────────────────────────────────────── */
.bonus {
  background    : var(--gold-light);
  border        : 1.5px dashed var(--gold);
  border-radius : var(--radius);
  padding       : 14px 16px;
  margin-top    : 10px;
}

.bonus-hdr {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : #7A5C1A;
  margin-bottom  : 8px;
}

/* ── Outcomes Grid ───────────────────────────────────────────── */
.outcomes {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(180px, 1fr));
  gap                   : 8px;
  margin-top            : 4px;
}

.outcome {
  background    : var(--purple-xlight);
  border        : 1px solid var(--lilac-light);
  border-top    : 3px solid var(--purple);
  border-radius : var(--radius-sm);
  padding       : 10px 12px;
  font-size     : 12px;
  color         : var(--muted);
  line-height   : 1.5;
}

.outcome strong {
  display     : block;
  font-family : var(--font-sub);
  font-size   : 12px;
  color       : var(--black95);
  margin-bottom: 3px;
}

/* ── Section Label (above outcomes, pills, etc.) ────────────── */
.sl {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .1em;
  text-transform : uppercase;
  color          : var(--lilac);
  margin         : 22px 0 10px;
}

/* ── Pills ───────────────────────────────────────────────────── */
.pills {
  display     : flex;
  gap         : 6px;
  flex-wrap   : wrap;
  margin-bottom: 16px;
}

.pill {
  font-family : var(--font-body);
  font-size   : 12px;
  padding     : 4px 10px;
  border-radius: 14px;
  background  : var(--white);
  color       : var(--purple);
  border      : 1px solid var(--lilac);
}

/* ── Monospace / Command Snippets ────────────────────────────── */
.mono, code {
  font-family   : var(--font-mono);
  font-size     : 11px;
  background    : var(--mono-bg);
  color         : var(--purple);
  padding       : 1px 5px;
  border-radius : 3px;
  border        : 1px solid var(--lilac-light);
}

pre {
  background    : var(--black95);
  color         : #E8D5F5;
  font-family   : var(--font-mono);
  font-size     : 12px;
  padding       : 12px 14px;
  border-radius : var(--radius-sm);
  overflow-x    : auto;
  margin        : 10px 0;
  line-height   : 1.6;
}

pre code {
  background  : transparent;
  color       : inherit;
  padding     : 0;
  border      : none;
  font-size   : inherit;
}

/* ── Flow Diagram (step-by-step horizontal flow) ─────────────── */
.flow {
  display     : flex;
  gap         : 4px;
  flex-wrap   : wrap;
  align-items : center;
  margin      : 12px 0;
}

.flow-step {
  border-radius : var(--radius-sm);
  padding       : 8px 10px;
  font-family   : var(--font-body);
  font-size     : 11px;
  font-weight   : bold;
  text-align    : center;
  flex          : 1;
  min-width     : 80px;
  line-height   : 1.4;
}

.flow-arrow {
  font-size   : 16px;
  color       : var(--lilac);
  flex-shrink : 0;
  font-weight : bold;
}

/* ── Navigation Buttons ─────────────────────────────────────── */
.btns {
  display   : flex;
  gap       : 8px;
  flex-wrap : wrap;
  margin-top: 22px;
}

.btn {
  font-family    : var(--font-head);
  font-size      : 11px;
  font-weight    : 900;
  letter-spacing : .06em;
  text-transform : uppercase;
  padding        : 8px 16px;
  border-radius  : var(--radius-sm);
  cursor         : pointer;
  text-decoration: none;
  display        : inline-block;
  border         : none;
}

.btn-primary {
  background : var(--purple);
  color      : var(--white);
}

.btn-primary:hover { background: var(--purple-mid); }

.btn-lab {
  background : var(--green-light);
  color      : var(--green);
}

.btn-secondary {
  background : var(--white);
  color      : var(--purple);
  border     : 1px solid var(--border);
}

.btn-secondary:hover { background: var(--purple-xlight); }

/* ── Assessment / Quiz styles ───────────────────────────────── */
.question {
  background    : var(--white);
  border        : 1px solid var(--border);
  border-left   : 4px solid var(--purple);
  border-radius : var(--radius-sm);
  padding       : 12px 14px;
  margin-bottom : 10px;
}

.question .q-num {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : var(--lilac);
  margin-bottom  : 4px;
}

.question .q-text {
  font-size   : 13px;
  color       : var(--black95);
  font-weight : bold;
  margin      : 0 0 8px;
}

.answer-line {
  border-bottom : 1px solid var(--border);
  margin        : 6px 0;
  height        : 24px;
}

/* ── Week Overview Card Grid ─────────────────────────────────── */
.day-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fit, minmax(160px, 1fr));
  gap                   : 8px;
  margin-top            : 10px;
}

.day-card {
  background    : var(--white);
  border        : 1px solid var(--border);
  border-top    : 3px solid var(--lilac);
  border-radius : var(--radius-sm);
  padding       : 10px 12px;
}

.day-card.highlight { border-top-color: var(--purple); }
.day-card.assess    { border-top-color: var(--gold); background: var(--gold-light); }

.day-card .day-label {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .08em;
  text-transform : uppercase;
  color          : var(--muted);
  margin-bottom  : 4px;
}

.day-card .day-title {
  font-family : var(--font-sub);
  font-size   : 12px;
  color       : var(--black95);
  font-weight : bold;
  margin      : 0 0 4px;
}

.day-card .day-topics {
  font-size   : 11px;
  color       : var(--muted);
  line-height : 1.5;
  margin      : 0;
}

/* ── Footer ─────────────────────────────────────────────────── */
.page-footer {
  margin-top   : 32px;
  padding-top  : 14px;
  border-top   : 2px solid var(--lilac-light);
  display      : flex;
  align-items  : center;
  justify-content: space-between;
  flex-wrap    : wrap;
  gap          : 8px;
}

.page-footer .footer-brand {
  font-family    : var(--font-head);
  font-size      : 10px;
  font-weight    : 900;
  letter-spacing : .1em;
  text-transform : uppercase;
  color          : var(--purple);
}

.page-footer .footer-info {
  font-size : 11px;
  color     : var(--muted);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .page-header h1  { font-size: 18px; }
  .timeline        { flex-wrap: wrap; }
  .seg             { flex: none; width: 50%; }
  .outcomes        { grid-template-columns: 1fr 1fr; }
  .day-grid        { grid-template-columns: 1fr 1fr; }
  .flow            { flex-direction: column; }
  .flow-arrow      { transform: rotate(90deg); }
}

@media print {
  body             { background: white; font-size: 12px; }
  .page-header     { margin: 0; }
  .block           { break-inside: avoid; box-shadow: none; }
  .btns            { display: none; }
}