/* ============================================================================
   Vorkurs icons: the six learning types, drawn from circle, square and
   triangle. Each icon is an SVG used as a mask, so it takes the text colour
   (white on the cards, black on cream) and scales with font-size, the same
   way a Font Awesome glyph does. Use: <i class="lt-icon lt-acquisition"></i>
   ============================================================================ */
.lt-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--lt-icon) center / contain no-repeat;
  mask: var(--lt-icon) center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* No Font Awesome glyph when the element also carries "fas" */
.lt-icon::before {
  content: none !important;
}

.lt-acquisition { --lt-icon: url("../icons/learning-types/acquisition.svg"); }
.lt-inquiry { --lt-icon: url("../icons/learning-types/inquiry.svg"); }
.lt-discussion { --lt-icon: url("../icons/learning-types/discussion.svg"); }
.lt-practice { --lt-icon: url("../icons/learning-types/practice.svg"); }
.lt-production { --lt-icon: url("../icons/learning-types/production.svg"); }
.lt-collaboration { --lt-icon: url("../icons/learning-types/collaboration.svg"); }

/* ============================================================================
   Tool tiles (tool guide). A square in the brand colour with a two-letter
   symbol, or a feature glyph with the platform symbol in the corner.
   Size, colour and ink are set per tile by js/data/toolIcons.js.
   ============================================================================ */
.tool-tile {
  --tile-size: 48px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tile-size);
  height: var(--tile-size);
  background-color: var(--tile-color, #1B2A4A);
  color: var(--tile-ink, #FFFFFF);
  border: 2px solid #111111;
  box-shadow: 3px 3px 0 #111111;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.tool-tile-symbol {
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.38);
  line-height: 1;
  letter-spacing: 0.01em;
}

.tool-glyph {
  display: block;
  width: calc(var(--tile-size) * 0.52);
  height: calc(var(--tile-size) * 0.52);
  background-color: currentColor;
  -webkit-mask: var(--tg) center / contain no-repeat;
  mask: var(--tg) center / contain no-repeat;
}

.tool-tile-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  padding: 2px 3px;
  background: #111111;
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

.tg-announce { --tg: url("../icons/tools/announce.svg"); }
.tg-attendance { --tg: url("../icons/tools/attendance.svg"); }
.tg-audio { --tg: url("../icons/tools/audio.svg"); }
.tg-auto { --tg: url("../icons/tools/auto.svg"); }
.tg-board { --tg: url("../icons/tools/board.svg"); }
.tg-book { --tg: url("../icons/tools/book.svg"); }
.tg-cloud { --tg: url("../icons/tools/cloud.svg"); }
.tg-files { --tg: url("../icons/tools/files.svg"); }
.tg-generic { --tg: url("../icons/tools/generic.svg"); }
.tg-groups { --tg: url("../icons/tools/groups.svg"); }
.tg-image { --tg: url("../icons/tools/image.svg"); }
.tg-interactive { --tg: url("../icons/tools/interactive.svg"); }
.tg-modules { --tg: url("../icons/tools/modules.svg"); }
.tg-open { --tg: url("../icons/tools/open.svg"); }
.tg-page { --tg: url("../icons/tools/page.svg"); }
.tg-peer { --tg: url("../icons/tools/peer.svg"); }
.tg-poll { --tg: url("../icons/tools/poll.svg"); }
.tg-portfolio { --tg: url("../icons/tools/portfolio.svg"); }
.tg-present { --tg: url("../icons/tools/present.svg"); }
.tg-quiz { --tg: url("../icons/tools/quiz.svg"); }
.tg-self { --tg: url("../icons/tools/self.svg"); }
.tg-sort { --tg: url("../icons/tools/sort.svg"); }
.tg-talk { --tg: url("../icons/tools/talk.svg"); }
.tg-task { --tg: url("../icons/tools/task.svg"); }
.tg-video { --tg: url("../icons/tools/video.svg"); }

/* ============================================================================
   Storyboard vocabulary: phases, session elements and their types, group
   size and participation mode. Same technique as .lt-icon.
   Use: <i class="vk-icon vk-phase-before"></i> (classes from js/utils/vorkursIcons.js)
   ============================================================================ */
.vk-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--vk-icon) center / contain no-repeat;
  mask: var(--vk-icon) center / contain no-repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.vk-icon::before {
  content: none !important;
}

.vk-phase-before { --vk-icon: url("../icons/storyboard/phase-before.svg"); }
.vk-phase-during { --vk-icon: url("../icons/storyboard/phase-during.svg"); }
.vk-phase-after { --vk-icon: url("../icons/storyboard/phase-after.svg"); }
.vk-element-break { --vk-icon: url("../icons/storyboard/element-break.svg"); }
.vk-time-class { --vk-icon: url("../icons/storyboard/time-class.svg"); }
.vk-time-workload { --vk-icon: url("../icons/storyboard/time-workload.svg"); }
.vk-element-info { --vk-icon: url("../icons/storyboard/element-info.svg"); }
.vk-element-eval { --vk-icon: url("../icons/storyboard/element-eval.svg"); }
.vk-info-announcement { --vk-icon: url("../icons/storyboard/info-announcement.svg"); }
.vk-info-reminder { --vk-icon: url("../icons/storyboard/info-reminder.svg"); }
.vk-info-instructions { --vk-icon: url("../icons/storyboard/info-instructions.svg"); }
.vk-info-progress { --vk-icon: url("../icons/storyboard/info-progress.svg"); }
.vk-info-resource { --vk-icon: url("../icons/storyboard/info-resource.svg"); }
.vk-info-other { --vk-icon: url("../icons/storyboard/info-other.svg"); }
.vk-eval-diagnostic { --vk-icon: url("../icons/storyboard/eval-diagnostic.svg"); }
.vk-eval-pulse { --vk-icon: url("../icons/storyboard/eval-pulse.svg"); }
.vk-eval-session { --vk-icon: url("../icons/storyboard/eval-session.svg"); }
.vk-eval-course { --vk-icon: url("../icons/storyboard/eval-course.svg"); }
.vk-group-1 { --vk-icon: url("../icons/storyboard/group-1.svg"); }
.vk-group-2 { --vk-icon: url("../icons/storyboard/group-2.svg"); }
.vk-group-3 { --vk-icon: url("../icons/storyboard/group-3.svg"); }
.vk-group-6 { --vk-icon: url("../icons/storyboard/group-6.svg"); }
.vk-group-all { --vk-icon: url("../icons/storyboard/group-all.svg"); }
.vk-mode-campus { --vk-icon: url("../icons/storyboard/mode-campus.svg"); }
.vk-mode-campus-own { --vk-icon: url("../icons/storyboard/mode-campus-own.svg"); }
.vk-mode-screen { --vk-icon: url("../icons/storyboard/mode-screen.svg"); }
.vk-mode-screen-own { --vk-icon: url("../icons/storyboard/mode-screen-own.svg"); }
.vk-mode-hybrid { --vk-icon: url("../icons/storyboard/mode-hybrid.svg"); }

/* Phase headings: the theme colours icons gold, which is too faint for an
   outline icon on cream, so the phase icon follows the navy heading text */
.phase-title i.vk-icon {
  color: var(--bh-navy, #1B2A4A) !important;
  width: 1.4em;
  height: 1.4em;
  vertical-align: -0.3em;
}

/* Time type button: icon and a short word, so it reads at a glance */
.btn-time-type {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.btn-time-type .vk-icon {
  width: 20px;
  height: 20px;
}

.btn-time-type .time-type-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}