:root {
  /* Environment */
  --hk-bg-warm: #fff8e8;

  /* Institutional */
  --hk-white: #ffffff;
  --hk-navy: #000080;
  --hk-ink: #161a1d;

  /* Client / theme colours */
  --hk-cyan: #6bcadc;
  --hk-cyan-bright: #27b8eb;
  --hk-purple: #b367a9;
  --hk-amber: #fbb116;

  /* Tints derived from the palette (backgrounds only) */
  --hk-cyan-tint: #e6f6f9;
  --hk-cyan-badge: #d3eff5;
  --hk-purple-tint: #f6ecf4;
  --hk-purple-badge: #ecd6e8;
  --hk-amber-tint: #fff1cf;
  --hk-amber-badge: #ffe7a8;
  --hk-navy-tint: #f0f0fa;
  --hk-navy-badge: #dcdcf2;

  /* Neutrals */
  --hk-line: #d9d3c3;
  --hk-shadow: 0 4px 12px rgba(22, 26, 29, 0.08);

  /* Roles: components use these, so dark mode only has to swap them.
     The brand colours above stay the same in both modes. */
  --hk-page: var(--hk-bg-warm);       /* page background */
  --hk-surface: var(--hk-white);      /* box / card background */
  --hk-text: var(--hk-ink);           /* body text */
  --hk-accent: var(--hk-navy);        /* headings, links, accent borders, arrows */
  --hk-fill: var(--hk-navy);          /* solid fills: buttons, badges, table header */
  --hk-on-fill: var(--hk-white);      /* text on --hk-fill */
  --hk-fill-hover: var(--hk-ink);     /* button hover */
  --hk-on-bright: var(--hk-ink);      /* text on cyan, purple and amber fills */
  --hk-feedback-bg: var(--hk-navy);   /* revealed feedback panel */
  --hk-feedback-text: var(--hk-white);
  --hk-5e-backdrop: var(--hk-cyan);
  --hk-warm-tint: var(--hk-bg-warm);  /* note box */
  --hk-example-bg: #f0f0f0;           /* example post */
  --hk-avatar-bg: #ececec;            /* behind avatar images; same in dark mode
                                         so dark line art stays visible */

  /* Shared focus indicator */
  --hk-focus: 3px solid var(--hk-accent);
}

/* DARK MODE
   Follows the reader's system setting. hkps.js also checks the page
   behind the components (Open edX has its own dark mode) and sets
   data-hk-theme on <html> to match. To force a mode, put
   data-hk-theme="light" on <html>, or data-hk-theme="dark" on <html> or on
   any wrapper (give that wrapper background: var(--hk-page)).
   Every text/background pair below meets WCAG AA (4.5:1). */
@media (prefers-color-scheme: dark) {
  :root:not([data-hk-theme="light"]) {
    color-scheme: dark;

    --hk-page: #14171c;
    --hk-surface: #1e232b;
    --hk-text: #e8eaee;
    --hk-accent: #aab4ff;
    --hk-fill: #aab4ff;
    --hk-on-fill: #10132a;
    --hk-fill-hover: #cdd3ff;
    --hk-feedback-bg: #2b3080;
    --hk-feedback-text: #ffffff;
    --hk-5e-backdrop: #1d5561;
    --hk-warm-tint: #2a2416;
    --hk-example-bg: #262c35;

    --hk-cyan-tint: #16343b;
    --hk-cyan-badge: #1d4650;
    --hk-purple-tint: #33222f;
    --hk-purple-badge: #4a2f45;
    --hk-amber-tint: #3a2e12;
    --hk-amber-badge: #54411a;
    --hk-navy-tint: #22264a;
    --hk-navy-badge: #31366a;

    --hk-line: #4a5260;
    --hk-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  }
}

[data-hk-theme="dark"] {
  color-scheme: dark;

  --hk-page: #14171c;
  --hk-surface: #1e232b;
  --hk-text: #e8eaee;
  --hk-accent: #aab4ff;
  --hk-fill: #aab4ff;
  --hk-on-fill: #10132a;
  --hk-fill-hover: #cdd3ff;
  --hk-feedback-bg: #2b3080;
  --hk-feedback-text: #ffffff;
  --hk-5e-backdrop: #1d5561;
  --hk-warm-tint: #2a2416;
  --hk-example-bg: #262c35;

  --hk-cyan-tint: #16343b;
  --hk-cyan-badge: #1d4650;
  --hk-purple-tint: #33222f;
  --hk-purple-badge: #4a2f45;
  --hk-amber-tint: #3a2e12;
  --hk-amber-badge: #54411a;
  --hk-navy-tint: #22264a;
  --hk-navy-badge: #31366a;

  --hk-line: #4a5260;
  --hk-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  --hk-focus: 3px solid var(--hk-accent);
}

[data-hk-theme="light"] {
  color-scheme: light;
}

/* TEXT INSIDE COMPONENTS
   Open edX colours p, li, span… directly (e.g. white in its dark mode),
   which would ignore the box's own text colour and give white text on a
   white box. Make that text follow the box instead. :where() keeps this at
   ID-level specificity only, so component rules with :not(#hk-none) and
   !important still win. */
:where(.panel, .quad-block, .quad-item, .hk-box, .hk-box2, .hk-box3, .hk-box4,
  .hk-prompt, table.hk-fixed, .hk-feedback, .hk-expand, .hk-accordion,
  .hk-tabs__panel, .hk-example-post, .hk-example-reply, .teaching-insight, .note-box, .discussion-task,
  .teaching-ideas, .classroom, .learning-outcome, .summary-box, .thinking-box,
  .hk-quote, .hk-view, .hk-5e)
  :where(p, li, dt, dd, span, em, strong, b, i, small, cite, blockquote,
  figcaption, label, td):not(#hk-none) {
  color: inherit;
}

/* HEADINGS */

:is(h1, h2, h3, h4, h5, h6):not([class]):not(#hk-none) {
  color: var(--hk-accent);
  font-family: inherit;
  line-height: 1.25;
  margin: 0.5em 0 1em;
  text-transform: none;
  letter-spacing: normal;
  font-style: normal;
}

h1:not([class]):not(#hk-none) {
  font-size: 2rem;
  font-weight: 800;
  margin-top: 0;
}

h2:not([class]):not(#hk-none) {
  font-size: 1.5rem;
  font-weight: 700;
}

h3:not([class]):not(#hk-none) {
  font-size: 1.25rem;
  font-weight: 700;
}

h4:not([class]):not(#hk-none) {
  font-size: 1.05rem;
  font-weight: 700;
}

h5:not([class]):not(#hk-none) {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

h6:not([class]):not(#hk-none) {
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
}

/* Heading directly after a heading: keep them close */
:is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6):not([class]):not(#hk-none) {
  margin-top: 0.75em;
}

/* Heading as the first thing in a box (callouts, cards, prompts):
   no top margin, so it lines up with the callout badge */
:is(h1, h2, h3, h4, h5, h6):first-child:not(#hk-none) {
  margin-top: 0;
}

/* ============================
   FLOW ROW (panels + arrows)
   ============================ */

:root {
  --c-found: var(--hk-accent);
  --c-current: var(--hk-cyan-bright);
  --c-adv: var(--hk-purple);

  --w: 330px;
  --h: 320px;

  --arrow-w: 60px;
}

/* ROW LAYOUT */
.flow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* tight spacing */
  margin: 4rem 0;
}

/* PANEL BOXES */
.panel {
  width: var(--w);
  min-height: var(--h);
  background: var(--hk-surface);
  color: var(--hk-text);
  border-radius: 12px;
  border: 3px solid var(--hk-line);
  padding: 2.2rem 1.4rem 1.4rem; /* space for floating heading */
  box-sizing: border-box;
  position: relative; /* allows floating title */
}

.panel-foundations {
  border-color: var(--c-found);
}
.panel-current {
  border-color: var(--c-current);
}
.panel-advanced {
  border-color: var(--c-adv);
}

/* FLOATING TITLE BADGES */
.panel h3 {
  position: absolute;
  top: 0;
  left: 1.2rem;

  transform: translateY(-50%);
  z-index: 5;

  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;

  /* Allow wrapping but keep badge tidy */
  white-space: normal;
  width: calc(100% - 2.4rem); /* never wider than panel */
  max-width: 100%;

  box-sizing: border-box;
}

/* Text colour lives with the background so contrast always passes */
.title-found {
  background: var(--hk-fill);
  color: var(--hk-on-fill);
}
.title-current {
  background: var(--c-current);
  color: var(--hk-on-bright);
}
.title-adv {
  background: var(--c-adv);
  color: var(--hk-on-bright);
}

/* LISTS */
.panel ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

/* ARROWS */
.arrow {
  width: var(--arrow-w);
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hk-accent); /* use fill/stroke="currentColor" in the SVG */
}

.arrow svg {
  width: 100%;
  height: 100%;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .flow-row {
    flex-direction: column;
    gap: 1rem;
  }
  .arrow {
    display: none;
  }
  .panel {
    width: 100%;
    min-height: auto;
  }
}

/* ============================
   STACKED QUADRANT PANELS
   Brand classes: q-navy, q-cyan, q-bright, q-purple, q-amber
   Legacy aliases: q-green → cyan, q-blue → bright cyan, q-magenta → purple
   ============================ */

:root {
  --q-width: 100%;
  --q-min-h: 160px;
}

/* Container to hold all stacked blocks */
.quad-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space between blocks */
  margin: 2rem 0;
}

/* One block */
.quad-block {
  width: var(--q-width);
  min-height: var(--q-min-h);
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 3px solid var(--hk-line);
  border-radius: 12px;
  padding: 2.2rem 1.4rem 1.4rem;
  position: relative;
  box-sizing: border-box;
}

/* Colour variants */
.q-navy {
  border-color: var(--hk-accent);
}
.q-cyan,
.q-green {
  border-color: var(--hk-cyan);
}
.q-bright,
.q-blue {
  border-color: var(--hk-cyan-bright);
}
.q-purple,
.q-magenta {
  border-color: var(--hk-purple);
}
.q-amber {
  border-color: var(--hk-amber);
}

/* Floating title badge */
.quad-block h3 {
  position: absolute;
  top: 0;
  left: 1.2rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  white-space: normal;
  line-height: 1.25;
  width: calc(100% - 2.4rem);
  box-sizing: border-box;
}

/* Title colours */
.q-title-navy {
  background: var(--hk-fill);
  color: var(--hk-on-fill);
}
.q-title-cyan,
.q-title-green {
  background: var(--hk-cyan);
  color: var(--hk-on-bright);
}
.q-title-bright,
.q-title-blue {
  background: var(--hk-cyan-bright);
  color: var(--hk-on-bright);
}
.q-title-purple,
.q-title-magenta {
  background: var(--hk-purple);
  color: var(--hk-on-bright);
}
.q-title-amber {
  background: var(--hk-amber);
  color: var(--hk-on-bright);
}

/* Bullet lists */
.quad-block ul {
  margin: 0.2rem 0 0;
  padding-left: 1.2rem;
}

/* ============================
   Grid panels
   ============================ */

/* Wrapper for the 2×2 grid */
.quad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem; /* space between the four boxes */
  align-items: start;
  margin: 3.5rem 0;
}

/* Individual quadrant block */
.quad-item {
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 3px solid var(--hk-line);
  border-radius: 12px;
  padding: 2.2rem 1.4rem 1.2rem; /* room for floating badge */
  position: relative;
  box-sizing: border-box;
  min-height: 160px; /* keeps them visually even; adjust as needed */
}

/* Colour borders */
.quad-item--navy {
  border-color: var(--hk-accent);
}
.quad-item--cyan,
.quad-item--green {
  border-color: var(--hk-cyan);
}
.quad-item--bright,
.quad-item--blue {
  border-color: var(--hk-cyan-bright);
}
.quad-item--purple,
.quad-item--magenta {
  border-color: var(--hk-purple);
}
.quad-item--amber {
  border-color: var(--hk-amber);
}

/* Floating title badge (same style as the panels) */
.quad-item > h3 {
  position: absolute;
  top: 0;
  left: 1.2rem;
  transform: translateY(-50%);
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;

  /* wrap nicely on two lines if needed */
  width: calc(100% - 2.4rem);
  white-space: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* Title colours */
.quad-title--navy {
  background: var(--hk-fill);
  color: var(--hk-on-fill);
}
.quad-title--cyan,
.quad-title--green {
  background: var(--hk-cyan);
  color: var(--hk-on-bright);
}
.quad-title--bright,
.quad-title--blue {
  background: var(--hk-cyan-bright);
  color: var(--hk-on-bright);
}
.quad-title--purple,
.quad-title--magenta {
  background: var(--hk-purple);
  color: var(--hk-on-bright);
}
.quad-title--amber {
  background: var(--hk-amber);
  color: var(--hk-on-bright);
}

/* Content list */
.quad-item ul {
  margin: 0.2rem 0 0;
  padding-left: 1.2rem;
}

/* Responsive: stack to single column on small screens */
@media (max-width: 900px) {
  .quad-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem; /* keep room for the floating badges */
  }
}

/* ==== GRID SYSTEM ==== */

.hk-container {
  margin-left: auto;
  margin-right: auto;
}

.hk-row {
  position: relative;
  width: 100%;
}

.hk-row [class^="col"] {
  float: left;
  margin: 1.2rem 1rem;
  min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  width: 96%;
}

.col-1-sm {
  width: 4.33%;
}
.col-2-sm {
  width: 12.66%;
}
.col-3-sm {
  width: 21%;
}
.col-4-sm {
  width: 29.33%;
}
.col-5-sm {
  width: 37.66%;
}
.col-6-sm {
  width: 46%;
}
.col-7-sm {
  width: 54.33%;
}
.col-8-sm {
  width: 62.66%;
}
.col-9-sm {
  width: 71%;
}
.col-10-sm {
  width: 79.33%;
}
.col-11-sm {
  width: 87.66%;
}
.col-12-sm {
  width: 96%;
}

.hk-row::after {
  content: "";
  display: table;
  clear: both;
}

.hidden-sm {
  display: none;
}

@media only screen and (min-width: 33.75em) {
  /* 540px */
  .hk-container {
    /* width: 80%; */
  }
}

@media only screen and (min-width: 45em) {
  /* 720px */

  .col-1 {
    width: 4.33%;
  }
  .col-2 {
    width: 12.66%;
  }
  .col-3 {
    width: 21%;
  }
  .col-4 {
    width: 29.33%;
  }
  .col-5 {
    width: 37.66%;
  }
  .col-6 {
    width: 46%;
  }
  .col-7 {
    width: 54.33%;
  }
  .col-8 {
    width: 62.66%;
  }
  .col-9 {
    width: 71%;
  }
  .col-10 {
    width: 79.33%;
  }
  .col-11 {
    width: 87.66%;
  }
  .col-12 {
    width: 96%;
  }

  .hidden-sm {
    display: block;
  }
}

@media only screen and (min-width: 60em) {
  /* 960px */
  .hk-container {
    /* width: 75%; max-width: 60rem; */
  }
}

/* TEXT BLOCK */
.text-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media screen and (min-width: 768px) {
  .text-block {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==== NEW GRID SYSTEM TEST ==== */

.hk-roweven {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hk-roweven [class^="col"] {
  flex: 1 1 calc(33.33% - 2rem);
  min-width: 150px;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 540px) {
  .hk-roweven [class^="col"] {
    flex: 1 1 calc(25% - 2rem);
  }
}

@media only screen and (min-width: 960px) {
  .hk-roweven [class^="col"] {
    flex: 1 1 calc(20% - 2rem);
  }
}

/* ==== ROW2 SYSTEM ==== */

.hk-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.hk-row2 .col {
  box-sizing: border-box;
}

/* ==== CONTENT BOXES ==== */

.hk-box {
  border-left: 6px solid var(--hk-purple); /* accent colour */
  background: var(--hk-surface);
  color: var(--hk-text);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  box-shadow: var(--hk-shadow);
  margin-bottom: 1.5rem;
}

.hk-box2 {
  background: var(--hk-surface);
  color: var(--hk-text);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  box-shadow: var(--hk-shadow);
  margin-bottom: 1.5rem;
}

.hk-box3 {
  background: var(--hk-surface);
  border-top: 6px solid var(--hk-accent);
  color: var(--hk-text);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  box-shadow: var(--hk-shadow);
  margin-bottom: 1.5rem;
}

/* Example post with a reply: follows a .discussion-task callout.
   <div class="hk-example-post">
     <h3>Example post</h3>
     <p>…</p>
     <div class="hk-example-reply">
       <h3>Example reply</h3>
       <p>…</p>
     </div>
   </div>
   The reply is indented like a forum thread, with the discussion colour on
   its edge. Leave the reply out if there isn't one. */
.hk-example-post {
  background: var(--hk-example-bg);
  color: var(--hk-text);
  border: 1px solid var(--hk-line);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
}
.hk-example-reply {
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 1px solid var(--hk-line);
  border-left: 4px solid var(--hk-cyan-bright);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 0 1.5rem;
}
:is(.hk-example-post, .hk-example-reply) > :first-child:not(#hk-none) {
  margin-top: 0;
}
:is(.hk-example-post, .hk-example-reply) > :last-child:not(#hk-none) {
  margin-bottom: 0;
}
@media (max-width: 540px) {
  .hk-example-reply {
    margin-left: 0.5rem;
  }
}

/* Image with text: image takes 25%, text the rest. No border.
   <div class="hk-box4">
     <div class="hk-box4__media"><img src="…" alt="…"></div>
     <div class="hk-box4__text"><h3>…</h3><p>…</p></div>
   </div>
   Add .hk-box4--right to put the image on the right. */
.hk-box4 {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 0;
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  box-shadow: var(--hk-shadow);
  margin-bottom: 1.5rem;
}
.hk-box4--right {
  flex-direction: row-reverse;
}
.hk-box4__media {
  flex: 0 0 25%;
  margin: 0;
}
.hk-box4__media img:not(#hk-none) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 6px;
}
.hk-box4__text {
  flex: 1 1 0;
  min-width: 0; /* lets long words wrap instead of overflowing */
}
.hk-box4__text > :first-child:not(#hk-none) {
  margin-top: 0;
}
.hk-box4__text > :last-child:not(#hk-none) {
  margin-bottom: 0;
}

/* Narrow screens: image above the text */
@media (max-width: 540px) {
  .hk-box4,
  .hk-box4--right {
    flex-direction: column;
  }
  .hk-box4__media {
    flex-basis: auto;
    width: 100%;
  }
}

/* Prompt box: thin border, no shadow. For prompt + hint activities.
   <div class="hk-prompt">
     <h3>Prompt</h3>
     <p>Question…</p>
     <button class="hk-btn" data-hk-toggle …>Hint</button>
     <div class="hk-feedback">…</div>
   </div> */
.hk-prompt {
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 1px solid var(--hk-line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.hk-prompt > :first-child {
  margin-top: 0;
}
.hk-prompt > h3:first-child,
.hk-prompt > h3:first-child:not([class]):not(#hk-none) {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hk-accent);
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* The question: the main thing in the box */
.hk-prompt > p:not(#hk-none) {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--hk-text);
  margin: 0 0 0.75rem;
}

/* Hint button: lighter outline style, sized to the question */
.hk-prompt .hk-btn {
  min-height: 40px;
  padding: 6px 14px;
  margin: 0;
  font-size: 0.95rem;
  background: var(--hk-surface);
  color: var(--hk-accent);
  border: 2px solid var(--hk-accent);
}
.hk-prompt button.hk-btn:hover,
.hk-prompt button.hk-btn:focus,
.hk-prompt button.hk-btn:active,
.hk-prompt .hk-btn[aria-expanded="true"] {
  background: var(--hk-navy-tint);
  background-image: none;
  color: var(--hk-accent);
  border-color: var(--hk-accent);
  box-shadow: none;
  text-shadow: none;
}

/* Hint area: navy tint with a navy rule, not a solid navy block */
.hk-prompt .hk-feedback {
  background: var(--hk-navy-tint);
  color: var(--hk-text);
  border-left: 4px solid var(--hk-accent);
  border-radius: 6px;
  margin-top: 0.75rem;
  font-size: 1rem;
}
.hk-prompt div.hk-feedback p,
.hk-prompt div.hk-feedback li,
.hk-prompt div.hk-feedback span,
.hk-prompt div.hk-feedback em,
.hk-prompt div.hk-feedback strong {
  color: var(--hk-text) !important;
}
.hk-prompt .hk-feedback a {
  color: var(--hk-accent);
}
.hk-prompt div.hk-feedback p:not(#hk-none) {
  font-size: 1rem;
  margin: 0.25rem 0;
}

/* ==== TABLE ====
   <table class="hk-fixed">
     <caption>Table 3 · Title</caption>          (optional)
     <thead><tr><th>…</th></tr></thead>
     <tbody><tr><th scope="row">…</th><td>…</td></tr></tbody>
   </table>
   :not(#hk-none) lifts these above Open edX's own table styles. */

/* Table layout */
table.hk-fixed:not(#hk-none) {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--hk-surface);
  color: var(--hk-text);
  font-size: 1rem;
  line-height: 1.5;
  box-shadow: var(--hk-shadow);
}

/* Caption: reads like a small navy heading above the table */
table.hk-fixed:not(#hk-none) caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  color: var(--hk-accent);
  padding: 0 0 0.5rem;
}

/* All cells */
table.hk-fixed:not(#hk-none) td,
table.hk-fixed:not(#hk-none) th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  vertical-align: top;
  text-align: left;
  border: 1px solid var(--hk-line);
  padding: 10px 14px;
}

/* Header row: solid navy, white bold text, amber rule underneath */
table.hk-fixed:not(#hk-none) thead th {
  background-color: var(--hk-fill);
  color: var(--hk-on-fill);
  border-color: var(--hk-fill);

  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  vertical-align: bottom;
  padding: 12px 14px;
}
table.hk-fixed:not(#hk-none) thead th * {
  color: inherit;
  margin: 0;
}

/* Row headings (first column <th scope="row">) */
table.hk-fixed:not(#hk-none) tbody th {
 
  color: var(--hk-accent);
  font-weight: 700;
}

/* Cell paragraphs: no extra gaps */
table.hk-fixed:not(#hk-none) td > p:first-child,
table.hk-fixed:not(#hk-none) th > p:first-child {
  margin-top: 0;
}
table.hk-fixed:not(#hk-none) td > p:last-child,
table.hk-fixed:not(#hk-none) th > p:last-child {
  margin-bottom: 0;
}

/* Striped rows */
table.hk-fixed:not(#hk-none) tbody tr:nth-child(even) {
  background: var(--hk-cyan-tint);
}

/* ============================
   BUTTONS & FOCUS
   ============================ */

/* Larger, accessible toggle button */
.hk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px; /* comfortable touch target */
  padding: 10px 18px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 12px 0;
  background: var(--hk-fill);
  color: var(--hk-on-fill);
  border: 2px solid transparent; /* visible in Windows high-contrast mode */
  border-radius: 6px;
  cursor: pointer;
}
.hk-btn:hover {
  background: var(--hk-fill-hover);
}

/* Strong focus indicator for keyboard users */
.hk-btn:focus-visible,
.hk-link-btn:focus-visible {
  outline: var(--hk-focus);
  outline-offset: 3px;
}

/* Text-style button (e.g. "Show more") */
.hk-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--hk-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hk-link-btn:hover {
  text-decoration-thickness: 2px;
}

/* Chevron icon: <span class="hk-chevron" aria-hidden="true"></span>
   Rotates automatically inside any control with aria-expanded="true" */
.hk-chevron {
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 200ms ease;
}
[aria-expanded="true"] > .hk-chevron {
  transform: translateY(25%) rotate(-135deg);
}

/* ============================
   CLICK-TO-REVEAL FEEDBACK
   ============================ */

.hk-feedback {
  background: var(--hk-feedback-bg);
  color: var(--hk-feedback-text);
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 8px;

  /* Animation-friendly collapsed state */
  display: block; /* must be block to animate height */
  max-height: 0; /* collapsed */
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 300ms ease,
    opacity 250ms ease,
    transform 250ms ease;

  box-sizing: border-box;
  white-space: normal; /* allow multi-line */
}
.hk-feedback strong {
  color: var(--hk-feedback-text);
}
.hk-feedback a {
  color: var(--hk-feedback-text);
}

/* Open state applied via JS (max-height set to content height) */
.hk-feedback.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   EXPANDABLE AREA ("Show more")
   ============================ */

.hk-expand {
  background: var(--hk-surface);
  color: var(--hk-text);
  border-radius: 8px;
  padding: 1.2rem 1.5rem 0.6rem;
  box-shadow: var(--hk-shadow);
  margin: 1.5rem 0;
}
.hk-expand > :first-child {
  margin-top: 0;
}
.hk-expand__more {
  overflow: hidden;
  transition: max-height 300ms ease;
}

/* ============================
   ACCORDION
   ============================ */

.hk-accordion {
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 1px solid var(--hk-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem 0;
}

.hk-accordion__heading {
  margin: 0;
  font-size: 1rem;
}
.hk-accordion__heading + .hk-accordion__panel + .hk-accordion__heading,
.hk-accordion__panel + .hk-accordion__heading {
  border-top: 1px solid var(--hk-line);
}

.hk-accordion__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 1.25rem;
  background: none;
  border: 0;
  border-left: 6px solid transparent;
  font: inherit;
  font-weight: 700;
  color: var(--hk-text);
  text-align: left;
  cursor: pointer;
}
.hk-accordion__trigger:hover {
  background: var(--hk-cyan-tint);
}
.hk-accordion__trigger[aria-expanded="true"] {
  background: var(--hk-cyan-tint);
  border-left-color: var(--hk-cyan-bright);
}
.hk-accordion__trigger:focus-visible {
  outline: var(--hk-focus);
  outline-offset: -3px;
}

.hk-accordion__panel {
  overflow: hidden;
  transition: max-height 300ms ease;
}
.hk-accordion__body {
  padding: 0.75rem 1.25rem 1.1rem 1.6rem;
}
.hk-accordion__body > :first-child {
  margin-top: 0;
}
.hk-accordion__body > :last-child {
  margin-bottom: 0;
}

/* ============================
   TABS
   ============================ */

.hk-tabs {
  margin: 1.5rem 0;
}

.hk-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 3px solid var(--hk-accent);
}

.hk-tabs__tab {
  position: relative; /* anchors the amber strip on the active tab */
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  background: var(--hk-surface);
  color: var(--hk-text);
  border: 1px solid var(--hk-line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hk-tabs__tab:hover {
  background: var(--hk-cyan-tint);
}
.hk-tabs__tab[aria-selected="true"] {
  background: var(--hk-fill);
  border-color: var(--hk-fill);
  color: var(--hk-on-fill);
}
/* Amber cue on the active tab: sits over the top border so it lines up
   with the tab's outer edge and rounded corners */
.hk-tabs__tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--hk-amber);
  border-radius: 6px 6px 0 0;
}
.hk-tabs__tab:focus-visible {
  outline: var(--hk-focus);
  outline-offset: 3px;
}

.hk-tabs__panel {
  background: var(--hk-surface);
  color: var(--hk-text);
  padding: 1.25rem 1.5rem;
  border-radius: 0 0 8px 8px;
  box-shadow: var(--hk-shadow);
}
.hk-tabs__panel > :first-child {
  margin-top: 0;
}
.hk-tabs__panel > :last-child {
  margin-bottom: 0;
}
.hk-tabs__panel:focus-visible {
  outline: var(--hk-focus);
  outline-offset: 2px;
}

/* Collapsed regions must stay out of layout even where display is set */
.hk-feedback[hidden],
.hk-expand__more[hidden],
.hk-accordion__panel[hidden],
.hk-tabs__panel[hidden] {
  display: none;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hk-feedback,
  .hk-expand__more,
  .hk-accordion__panel,
  .hk-chevron {
    transition: none !important;
  }
}

/* Windows high-contrast / forced colours */
@media (forced-colors: active) {
  .hk-tabs__tab[aria-selected="true"] {
    outline: 3px solid Highlight;
    outline-offset: -3px;
  }
  .hk-accordion__trigger[aria-expanded="true"] {
    border-left-color: Highlight;
  }
}

/* Optional: hidden text helper for accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 1px 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================
   CALLOUT BOXES
   Type                Class                Colour        Icon
   Discussion          .discussion-task     bright cyan   💬
   Learning outcome    .learning-outcome    navy          📖
   Summary             .summary-box         navy tint     📝
   Teaching ideas      .teaching-ideas      amber         💡
   Teaching insight    .teaching-insight    amber         🔎
   Note                .note-box            warm tint     (!)
   Stop and think      .thinking-box        cyan          ❓

   <div class="teaching-ideas">
     <div class="teaching-ideas-content">
       <strong>Title</strong>
       <p>Body…</p>
     </div>
   </div>

   Older names still work: .classroom → Teaching ideas,
   .learning-outcome.soft → Summary, .teaching-insight.soft → Note.
   ============================ */

/* Shared layout for all callouts */
:is(.discussion-task, .learning-outcome, .summary-box, .teaching-ideas,
  .classroom, .teaching-insight, .note-box, .thinking-box) {
  --callout-accent: var(--hk-line);
  --callout-badge: var(--hk-cyan-badge);

  position: relative;
  background: var(--hk-surface);
  color: var(--hk-text);
  border-left: 6px solid var(--callout-accent);
  border-radius: 6px;
  padding: 1rem 1.25rem 1rem 3.75rem; /* left = badge offset + badge + gap */
  margin: 2rem 0;
  line-height: 1.5;
  box-shadow: var(--hk-shadow);
}

/* Circular icon badge, centred on the first line of text
   (top padding 1rem + half a 1.5 line-height − half the badge) */
:is(.discussion-task, .learning-outcome, .summary-box, .teaching-ideas,
  .classroom, .teaching-insight, .note-box, .thinking-box)::before {
  position: absolute;
  top: calc(1rem + 0.75em - 16px);
  left: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: var(--callout-badge);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Inner content: no extra indent, tidy vertical rhythm */
:is(.discussion-task-content, .learning-outcome-content, .summary-box-content,
  .teaching-ideas-content, .classroom-content, .teaching-insight-content,
  .note-box-content, .thinking-box-content) {
  padding: 0;
}
:is(.discussion-task-content, .learning-outcome-content, .summary-box-content,
  .teaching-ideas-content, .classroom-content, .teaching-insight-content,
  .note-box-content, .thinking-box-content) > :not(#hk-none) {
  margin: 0.5rem 0 0;
}
:is(.discussion-task-content, .learning-outcome-content, .summary-box-content,
  .teaching-ideas-content, .classroom-content, .teaching-insight-content,
  .note-box-content, .thinking-box-content) > :first-child:not(#hk-none) {
  margin-top: 0;
}
/* A leading <strong> acts as the callout title */
:is(.discussion-task-content, .learning-outcome-content, .summary-box-content,
  .teaching-ideas-content, .classroom-content, .teaching-insight-content,
  .note-box-content, .thinking-box-content) > strong:first-child {
  display: block;
}
:is(.discussion-task-content, .learning-outcome-content, .summary-box-content,
  .teaching-ideas-content, .classroom-content, .teaching-insight-content,
  .note-box-content, .thinking-box-content) :is(ul, ol) {
  padding-left: 1.2rem;
}

:is(.discussion-task, .learning-outcome, .summary-box, .teaching-ideas,
  .classroom, .teaching-insight, .note-box, .thinking-box) a {
  color: var(--hk-accent);
  text-decoration: underline;
}
:is(.discussion-task, .learning-outcome, .summary-box, .teaching-ideas,
  .classroom, .teaching-insight, .note-box, .thinking-box) a:focus-visible {
  outline: var(--hk-focus);
  outline-offset: 2px;
}

/* Discussion box */
.discussion-task {
  --callout-accent: var(--hk-cyan-bright);
  --callout-badge: var(--hk-cyan-badge);
}
.discussion-task::before {
  content: "💬" / ""; /* decorative: empty alt text for screen readers */
}

/* Learning outcome */
.learning-outcome {
  --callout-accent: var(--hk-accent);
  --callout-badge: var(--hk-navy-badge);
}
.learning-outcome::before {
  content: "📖" / "";
}

/* Summary box (was .learning-outcome.soft) */
.summary-box,
.learning-outcome.soft {
  --callout-accent: var(--hk-accent);
  --callout-badge: var(--hk-navy-badge);
  background: var(--hk-navy-tint);
}
.summary-box::before,
.learning-outcome.soft::before {
  content: "📝" / "";
}

/* Teaching ideas (was .classroom) */
.teaching-ideas,
.classroom {
  --callout-accent: var(--hk-amber);
  --callout-badge: var(--hk-amber-badge);
}
.teaching-ideas::before,
.classroom::before {
  content: "💡" / "";
}

/* Teaching insight */
.teaching-insight {
  --callout-accent: var(--hk-amber);
  --callout-badge: var(--hk-amber-badge);
}
.teaching-insight::before {
  content: "🔎" / "";
}

/* Note (was .teaching-insight.soft): a solid amber (!) badge */
.note-box,
.teaching-insight.soft {
  --callout-accent: var(--hk-amber);
  --callout-badge: var(--hk-amber);
  background: var(--hk-warm-tint);
}
.note-box::before,
.teaching-insight.soft::before {
  content: "!" / "";
  color: var(--hk-on-bright);
  font-size: 18px;
  font-weight: 800;
}

/* Stop and think */
.thinking-box {
  --callout-accent: var(--hk-cyan);
  --callout-badge: var(--hk-cyan-badge);
}
.thinking-box::before {
  content: "❓" / "";
}

/* Older tinted versions, kept for existing pages */
.discussion-task.soft,
.thinking-box.soft {
  background: var(--hk-cyan-tint);
}
.classroom.soft {
  background: var(--hk-amber-tint);
}

/* Quote box */
.hk-quote {
  position: relative;
  background: var(--hk-surface);
  color: var(--hk-text);
  border-left: 6px solid var(--hk-purple);
  border-radius: 6px;
  padding: 1rem 1.25rem 1rem 3.75rem; /* matches the callout boxes */
  margin: 2rem 0;
  box-shadow: var(--hk-shadow);
}

/* Decorative quote badge — same size and position as the callout badges,
   centred on the first line of the quote (1.15rem × 1.55 line-height) */
.hk-quote::before {
  position: absolute;
  top: calc(1rem + 0.89rem - 16px);
  left: 1rem;
  width: 32px;
  height: 32px;
  content: ""; /* no text, so nothing for screen readers to announce */
  border-radius: 50%;
  background: var(--hk-purple-badge)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath fill='%23B367A9' d='M0 13.5V8.2C0 4.4 2.3 1.4 6.4 0l.9 1.6C5.1 2.6 4 4.3 3.9 6.3H7v7.2zm9 0V8.2C9 4.4 11.3 1.4 15.4 0l.9 1.6c-2.2 1-3.3 2.7-3.4 4.7H16v7.2z'/%3E%3C/svg%3E")
    center / 15px no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.hk-quote blockquote:not(#hk-none) {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 500;
}
.hk-quote blockquote p {
  margin: 0 0 0.6rem;
}
.hk-quote blockquote p:last-child {
  margin-bottom: 0;
}

/* Attribution line */
.hk-quote figcaption {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.hk-quote figcaption::before {
  content: "— ";
  content: "— " / "";
}
.hk-quote cite {
  font-style: italic;
  font-weight: 400;
}

/* Variant with tinted background */
.hk-quote.soft {
  background: var(--hk-purple-tint);
}

.hk-quote a {
  color: var(--hk-accent);
  text-decoration: underline;
}
.hk-quote a:focus-visible {
  outline: var(--hk-focus);
  outline-offset: 2px;
}

/* ============================
   PERSPECTIVES — one concept, three views
   <section class="hk-concept">
     <h3 class="hk-concept__title">Concept</h3>
     <div class="hk-views">
       <article class="hk-view hk-view--teacher|student|scientist">
         <div class="hk-view__avatar"><img src="/static/avatar-teacher.png" alt=""></div>
           (the silhouette shows until the image loads, or if it is missing)
         <div class="hk-view__header">
           <p class="hk-view__label">Teacher</p>
           <h4 class="hk-view__title">…</h4>
         </div>
         <div class="hk-view__body">…</div>
       </article>
     </div>
   </section>
   ============================ */

.hk-concept {
  margin: 2rem 0;
}
.hk-concept__title {
  margin: 0 0 1rem;
  color: var(--hk-accent);
  font-size: 1.25rem;
}

/* Views stack one above the other — content is often long */
.hk-views {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hk-view {
  --view-accent: var(--hk-line);
  --view-tint: var(--hk-surface);
  --avatar-size: 112px;

  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--view-tint);
  color: var(--hk-text);
  border: 2px solid var(--view-accent);
  border-top-width: 8px;
  border-radius: 12px;
  padding: 1rem 1.25rem 1.25rem;
  line-height: 1.5;
  box-sizing: border-box;
}

/* Avatar */
.hk-view__avatar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  border: 3px solid var(--view-accent);
  background: var(--hk-avatar-bg);
  overflow: hidden;
  box-sizing: border-box;
}
.hk-view__avatar img:not(#hk-none) {
  display: block;
  max-width: none;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Legacy empty placeholder (no image): dashed ring */
.hk-view__avatar--placeholder {
  border-style: dashed;
}

/* Header keeps clear of the avatar and is at least as tall as it */
.hk-view__header {
  min-height: var(--avatar-size);
  padding-right: calc(var(--avatar-size) + 0.75rem);
  margin-bottom: 0.9rem;
}

.hk-view__label:not(#hk-none) {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: var(--view-accent);
  color: var(--hk-on-bright); /* ink passes AA on purple, amber and cyan */
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hk-view__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* White content panel highlights the view on the tinted box */
.hk-view__body {
  position: relative;
  flex: 1; /* equal-height panels across a row */
  background: var(--hk-surface);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.hk-view__body > * {
  margin: 0.5rem 0 0;
}
.hk-view__body > :first-child {
  margin-top: 0;
}
.hk-view__body ul,
.hk-view__body ol {
  padding-left: 1.2rem;
}
.hk-view__body a {
  color: var(--hk-accent);
  text-decoration: underline;
}
.hk-view__body a:focus-visible {
  outline: var(--hk-focus);
  outline-offset: 2px;
}

/* Colour variants */
.hk-view--teacher {
  --view-accent: var(--hk-purple);
  --view-tint: var(--hk-purple-tint);
}
.hk-view--student {
  --view-accent: var(--hk-amber);
  --view-tint: var(--hk-amber-tint);
}
.hk-view--scientist {
  --view-accent: var(--hk-cyan-bright);
  --view-tint: var(--hk-cyan-tint);
}

/* Student box with teachers responses */
.hk-view__body > .hk-says + .hk-says {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hk-line);
}

.hk-says {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem 1.5rem;
  align-items: start;
}

/* Speech bubble */
/* :not(#hk-none) beats Open edX's
   ".xmodule_display.xmodule_HtmlBlock blockquote { margin: 1em 40px }" */
.hk-says__quote:not(#hk-none) {
  position: relative;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--hk-amber-tint);
  border: 2px solid var(--hk-amber);
  border-radius: 16px 16px 16px 4px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
}
.hk-says__quote p:not(#hk-none) {
  margin: 0;
}

/* Teacher response */
.hk-says__response {
  border-left: 4px solid var(--hk-purple);
  padding: 0.5rem 0 0.5rem 0.8rem;
}
.hk-says__response > :not(#hk-none) {
  margin: 0.4rem 0 0;
}
.hk-says__response > :first-child:not(#hk-none) {
  margin-top: 0;
}

@media (max-width: 640px) {
  .hk-says {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hk-view {
    --avatar-size: 80px;
  }
}

/* Choice question */
.hk-choice__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hk-prompt .hk-choice__btn {
  min-width: 8rem;
  justify-content: center;
}
.hk-prompt button.hk-btn.hk-choice__btn[aria-pressed="true"],
.hk-prompt button.hk-btn.hk-choice__btn[aria-pressed="true"]:hover,
.hk-prompt button.hk-btn.hk-choice__btn[aria-pressed="true"]:focus,
.hk-prompt button.hk-btn.hk-choice__btn[aria-pressed="true"]:active {
  background: var(--hk-fill);
  color: var(--hk-on-fill);
  border-color: var(--hk-fill);
}
.hk-choice__btn[data-hk-result]::after {
  font-weight: 800;
}
.hk-choice__btn[data-hk-result="correct"]::after {
  content: "✓" / "";
}
.hk-choice__btn[data-hk-result="incorrect"]::after {
  content: "✗" / "";
}

/* ============================
    Make button work with the platform's focus
   ============================ */

/* Filled button */
button.hk-btn:focus,
button.hk-btn:active {
  background-color: var(--hk-fill);
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
}
button.hk-btn:hover {
  background-color: var(--hk-fill-hover);
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
}

/* Text-style button ("Show more") */
button.hk-link-btn:hover,
button.hk-link-btn:focus,
button.hk-link-btn:active {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
}

/* Accordion triggers */
button.hk-accordion__trigger:focus,
button.hk-accordion__trigger:active {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
}
button.hk-accordion__trigger:hover,
button.hk-accordion__trigger[aria-expanded="true"]:hover,
button.hk-accordion__trigger[aria-expanded="true"]:focus,
button.hk-accordion__trigger[aria-expanded="true"]:active {
  background-color: var(--hk-cyan-tint);
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}
button.hk-accordion__trigger:hover {
  border-color: transparent;
}
button.hk-accordion__trigger[aria-expanded="true"]:hover,
button.hk-accordion__trigger[aria-expanded="true"]:focus,
button.hk-accordion__trigger[aria-expanded="true"]:active {
  border-color: transparent;
  border-left-color: var(--hk-cyan-bright);
}

/* Tabs */
button.hk-tabs__tab:focus,
button.hk-tabs__tab:active {
  background-color: var(--hk-surface);
  background-image: none;
  border-color: var(--hk-line);
  box-shadow: none;
  text-shadow: none;
}
button.hk-tabs__tab:hover {
  background-color: var(--hk-cyan-tint);
  background-image: none;
  border-color: var(--hk-line);
  box-shadow: none;
  text-shadow: none;
}
button.hk-tabs__tab[aria-selected="true"]:hover,
button.hk-tabs__tab[aria-selected="true"]:focus,
button.hk-tabs__tab[aria-selected="true"]:active {
  background-color: var(--hk-fill);
  background-image: none;
  border-color: var(--hk-fill);
  color: var(--hk-on-fill);
  box-shadow: none;
  text-shadow: none;
}

/* Fix for text inside the navy feedback box: the platform colours p/li directly,
   so pass the box's white text down explicitly */
div.hk-feedback p,
div.hk-feedback li,
div.hk-feedback span,
div.hk-feedback em,
div.hk-feedback h3,
div.hk-feedback h4,
div.hk-feedback h5 {
  color: var(--hk-feedback-text) !important;
}

/* Flawed Activity - Table Header */

#flawed-activity thead th {
    background-color: var(--hk-fill) !important;
    color: var(--hk-on-fill) !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px;
}
/* Flawed Activity Review – table border */
.xmodule_display.xmodule_HtmlBlock table.hk-fixed.hk-flaw-activity td,
.xmodule_display.xmodule_HtmlBlock table.hk-fixed.hk-flaw-activity th {
  border-color: var(--hk-line);
}