/*
 * Laptop Lakehouse tutorial (inc/devhub-tutorial.php). Loaded right after
 * devhub-pages.css, on pages that hold the tutorial's parts, its classes or
 * a block style / code block it styles (dremio_tutorial_enqueue_style()),
 * and in the block editor canvas (dremio_devhub_editor_styles()). It extends
 * what devhub-pages.css keeps: the Author block and the Developer Hub
 * components.
 */

/* ==========================================================================
   Laptop Lakehouse tutorial (inc/devhub-tutorial.php, tutorial-*; Figma
   3489:3219 "Collapsed" and 3468:71935 "All Open", 1280px). The px values
   are the Figma's unless noted.
   ========================================================================== */
/* The hero (inc/devhub-sections.php, lab-*; the px values are the Figma's):
   the Page Hero's wave at 62% over the Figma's dark gradient and purple glow
   (the overlay is 38% of them). It ends 70px under the text. */
.devhub-hero.lab-hero {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding-bottom: 70px;
}
.lab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--dev-v2-lab-band-bg);
  opacity: 0.38;
}
/* The text in a 520px column, the terminal 437px wide, 36px in from the right */
.lab-hero__card {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 437px);
  column-gap: 34px;
  justify-content: space-between;
  margin-top: 30px;
}
.lab-hero__text {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
.lab-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* The Page Hero's title (.devhub-hero__title), semibold, 32px under the
   badges */
.lab-hero__title {
  margin: 32px 0 0;
  font-weight: 600;
}
.lab-hero__intro {
  margin: 22px 0 0;
  color: var(--dev-v2-color-muted);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line-height);
}
/* Author and reading time, 92px under the intro */
.lab-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 92px;
}
/* The terminal and stack art: its exported shadows bleed 40px each side,
   26px above the terminal (top at the Figma's 115px) and 42px below the
   stack cards. The margins sit on the image: core's flow layout zeroes the
   figure's bottom margin (last child). */
.lab-hero__art {
  align-self: start;
  margin-right: 36px;
}
/* The image is the terminal and stack with their shadows around them: the
   terminal (1082px image: 101px in, 875px wide) fills the column, as in the
   Figma, and the shadows bleed past it. */
.lab-hero__art img {
  display: block;
  width: calc(100% * 1082 / 875);
  max-width: none;
  height: auto;
  margin: -7px 0 -42px calc(100% * -101 / 875);
}

/* The site card's corners (.integration-card), on every tutorial card */
:is(.tutorial-body, .tutorial-part) {
  --tutorial-radius: 10.25px;
}
/* The body: the sidebar (228px) and the article column, 24px apart */
.tutorial-body {
  padding: 48px 0 120px;
}
.tutorial-layout {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}
.tutorial-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* The notice and the callout keep 24px between them and the parts */
.tutorial-main > :not(.tutorial-part) {
  margin-bottom: 12px;
}

/* The sidebar: sticky under the top of the window while the article
   scrolls (CSS only) */
.tutorial-nav {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tutorial-progress {
  padding: 16px 8px 14px;
  border: 1px solid var(--dev-v2-color-divider);
  border-radius: var(--tutorial-radius);
  background: var(--color-slate-900);
}
.tutorial-progress__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--color-white);
  font-size: var(--body-base-size);
  font-weight: 600;
  line-height: var(--body-base-line-height);
}
.tutorial-progress__count {
  padding: 3px 8px;
  border-radius: var(--dev-v2-radius-pill);
  background: var(--dev-v2-color-secondary-border);
  font-size: var(--dev-v2-font-size-10);
  font-weight: 600;
  line-height: 14px;
}
.tutorial-progress__track {
  height: 6px;
  margin-top: 12px;
  border-radius: var(--dev-v2-radius-pill);
  background: var(--dev-v2-tutorial-track);
}
.tutorial-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--dev-v2-tutorial-progress);
  transition: width 0.3s ease;
}
.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* A step card: a link row with the site's card hover and focus ring
   (theme.css); the open part's card is solid purple */
a.tutorial-step {
  --hover-ring-inset: 0;
  --hover-ring-radius: var(--tutorial-radius);
  --hover-ring-width: 1px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border: 1px solid var(--dev-v2-tutorial-tint-stroke);
  border-radius: var(--tutorial-radius);
  background-color: var(--dev-v2-tutorial-tint);
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-12);
  font-weight: 600;
  line-height: 15px;
  text-decoration: none;
  transition: background 0.3s ease;
}
a.tutorial-step.is-current {
  background-color: var(--color-purple-900);
}
.tutorial-step__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--dev-v2-tutorial-chip);
  color: var(--color-purple-200);
  font-size: var(--dev-v2-font-size-10);
  font-weight: 700;
  line-height: 1;
}

/* Revision notice and Final Step (Card dev v2 and Card dev v2 large, with
   a class hook): the purple tint, its stroke, the site card's corners and
   the light purple label pill */
:is(.tutorial-notice, .tutorial-final) {
  --card-v2-fill: var(--dev-v2-tutorial-tint);
  --card-v2-shadow: none;
  border-radius: var(--tutorial-radius);
}
:is(.tutorial-notice, .tutorial-final)::before {
  background: var(--dev-v2-tutorial-tint-stroke);
}
:is(.tutorial-notice__label, .tutorial-final__label) {
  width: fit-content;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--dev-v2-radius-pill);
  background: var(--color-purple-200);
  color: var(--color-slate-900);
  font-size: var(--dev-v2-font-size-10);
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tutorial-notice {
  padding: 16px;
}
.tutorial-notice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
}
.tutorial-notice__title {
  margin: 0;
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-13);
  font-weight: 600;
  line-height: 20px;
}
.tutorial-notice__text {
  margin: 10px 0 0;
  color: var(--dev-v2-color-muted);
  font-size: var(--dev-v2-font-size-12);
  line-height: 20px;
}

/* Inline code and links in the tutorial's text: Pink 300, as the Figma
   (the reward callout: the Slack link plain, the email address underlined) */
.tutorial-main code {
  padding: 0;
  background: none;
  color: var(--dev-v2-color-code-inline);
  font-family: inherit;
  font-size: inherit;
  word-break: break-word;
}
.tutorial-main :is(p, li, td) a {
  color: var(--dev-v2-color-code-inline);
  text-decoration: none;
}
.tutorial-main :is(p, li, td) a:is([href^="mailto:"], :hover) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A part: a card whose summary row is the toggle (the site's card hover and
   focus ring); the open part's content on a darker panel */
.tutorial-part {
  border: 1px solid var(--dev-v2-color-stroke);
  border-radius: var(--tutorial-radius);
  background: var(--dev-v2-color-page);
}
.tutorial-part__summary {
  --hover-ring-inset: -1px;
  --hover-ring-radius: var(--tutorial-radius);
  --hover-ring-width: 1px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--tutorial-radius);
  cursor: pointer;
  list-style: none;
  transition: background 0.3s ease;
}
.tutorial-part__summary::-webkit-details-marker {
  display: none;
}
.tutorial-part[open] > .tutorial-part__summary {
  --hover-ring-radius: var(--tutorial-radius) var(--tutorial-radius) 0 0;
  border-bottom: 1px solid var(--dev-v2-color-divider);
  border-radius: var(--tutorial-radius) var(--tutorial-radius) 0 0;
}
.tutorial-part__pill {
  flex: none;
  padding: 4px 8px;
  border-radius: var(--dev-v2-radius-pill);
  background: var(--color-purple-700);
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-10);
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tutorial-part[open] .tutorial-part__pill {
  background: var(--color-purple-900);
  color: var(--color-purple-200);
}
.tutorial-part__title {
  flex: 1;
  margin: 0;
  color: var(--color-white);
  font-size: var(--body-lg-size);
  font-weight: 600;
  line-height: var(--body-lg-line-height);
}
.tutorial-part__time {
  flex: none;
  color: var(--color-gray-100);
  font-size: var(--dev-v2-font-size-11);
  line-height: 16px;
}
.tutorial-part__caret {
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--color-gray-100);
  -webkit-mask: url("../../figma-assets/chevron-down.svg") center / contain no-repeat;
  mask: url("../../figma-assets/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.tutorial-part[open] .tutorial-part__caret {
  transform: rotate(180deg);
}
.tutorial-part__panel {
  display: flow-root;
  padding: 24px;
  border-radius: 0 0 var(--tutorial-radius) var(--tutorial-radius);
  background: var(--dev-v2-tutorial-panel);
  color: var(--dev-v2-color-muted);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line-height);
}
.tutorial-part__panel > * {
  margin: 24px 0 0;
}
.tutorial-part__panel > :first-child {
  margin-top: 0;
}
/* A list right under its lead-in paragraph */
.tutorial-part__panel > p + .wp-block-list {
  margin-top: 0;
}
.tutorial-part__panel .wp-block-list {
  padding-left: 24px;
}
/* Sections (H3, Figma Heading 5) and steps (H4, Subtitle 2): the panel's
   own headings, not a card's title inside it */
.tutorial-part__panel > h3 {
  margin-top: 32px;
  color: var(--dev-v2-color-muted);
  font-size: 20px; /* Figma Heading 5 */
  font-weight: 500;
  line-height: 28px;
}
.tutorial-part__panel > h4 {
  color: var(--dev-v2-color-muted);
  font-size: var(--body-lg-size);
  font-weight: 500;
  line-height: var(--body-lg-line-height);
}
.tutorial-part__panel > :is(h3, h4) + * {
  margin-top: 16px;
}

/* Checkpoint (Group style): a green bar, a teal check and the capture to
   take in Gray 200 (the Figma's character styles) */
.is-style-dremio-checkpoint {
  position: relative;
  padding: 14px 16px 14px 40px;
  border-left: 2px solid var(--color-green-200);
  background: var(--dev-v2-checkpoint-fill);
  color: var(--color-gray-200);
  font-size: var(--dev-v2-font-size-12);
  line-height: 19px;
}
.is-style-dremio-checkpoint::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 16px;
  height: 16px;
  background: var(--color-teal-400);
  -webkit-mask: url("../../figma-assets/devhub/check.svg") center / contain no-repeat;
  mask: url("../../figma-assets/devhub/check.svg") center / contain no-repeat;
}
.is-style-dremio-checkpoint p {
  margin: 0;
}
.is-style-dremio-checkpoint strong {
  color: var(--color-green-200);
  font-weight: 600;
}

/* Note (Group style): a teal tint behind Blue 200 text, its bold lead-in
   white (Figma 3468:72084's character styles; the node's own fill, Green
   200, colours none of its text) */
.is-style-dremio-note {
  padding: 12px 16px;
  background: var(--dev-v2-note-fill);
  color: var(--color-blue-200);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}
.is-style-dremio-note p {
  margin: 0;
}
.is-style-dremio-note strong {
  color: var(--color-white);
  font-weight: 600;
}

/* Table, dark striped (Table style): the Figma table, rows on Slate 900
   and the page colour in turn */
.is-style-dremio-table-dark table {
  width: 100%;
  border: 1px solid var(--dev-v2-color-divider);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--dev-v2-radius-card);
  overflow: hidden;
  color: var(--color-gray-100);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}
.is-style-dremio-table-dark :is(th, td) {
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--dev-v2-color-divider);
  text-align: left;
  vertical-align: middle;
}
.is-style-dremio-table-dark th {
  padding-block: 12px;
  background: var(--dev-v2-color-page);
  font-size: var(--dev-v2-font-size-12);
  font-weight: 600;
  line-height: 18px;
}
.is-style-dremio-table-dark tbody tr:nth-child(odd) td {
  background: var(--color-slate-900);
}
.is-style-dremio-table-dark tbody tr:last-child td {
  border-bottom: 0;
}
/* Phones: each row a card, its cells under the header labels
   (data-label, dremio_render_dark_table()) */
@media (max-width: 767.98px) {
  .is-style-dremio-table-dark thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .is-style-dremio-table-dark :is(table, tbody, tr, td) {
    display: block;
  }
  .is-style-dremio-table-dark tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--dev-v2-color-divider);
  }
  .is-style-dremio-table-dark tbody tr:last-child {
    border-bottom: 0;
  }
  .is-style-dremio-table-dark tbody tr:nth-child(odd) td {
    background: none;
  }
  .is-style-dremio-table-dark tbody tr:nth-child(odd) {
    background: var(--color-slate-900);
  }
  .is-style-dremio-table-dark td {
    padding: 4px 16px;
    border: 0;
  }
  .is-style-dremio-table-dark td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--dev-v2-color-meta);
    font-size: var(--dev-v2-font-size-12);
    font-weight: 600;
    line-height: 18px;
  }
}

/* Code (the CodeMirror Blocks plugin's block): the box, size and colours of
   the lab's demo page (dremio-dev-mock), in the system monospace (as
   dremio.com: no code web font), lines wrapped, as tall as the code. SQL is
   highlighted (keywords and types teal, strings green, comments grey);
   YAML and shell stay one colour, as on the demo page. The plugin's <pre>
   (no JS) and its editor (JS) look the same. */
.wp-block-codemirror-blocks-code-block.code-block {
  margin-bottom: 0;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror {
  height: auto;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--dev-v2-code-stroke);
  border-radius: 8px;
  background: var(--dev-v2-code-fill);
  color: var(--color-gray-200);
  font-family: var(--bs-font-monospace);
  font-size: var(--body-base-size);
  line-height: 1.6; /* 22.4px, the demo page's */
  white-space: pre-wrap;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror :is(pre, span) {
  color: inherit;
  font: inherit;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror[data-setting*='"mode":"sql"'] ~ .CodeMirror :is(.cm-keyword, .cm-builtin) {
  color: var(--color-teal-400);
  font-weight: 600;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror[data-setting*='"mode":"sql"'] ~ .CodeMirror .cm-string {
  color: var(--color-green-200);
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror[data-setting*='"mode":"sql"'] ~ .CodeMirror .cm-comment {
  color: var(--dev-v2-color-placeholder);
  font-style: italic;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror-lines {
  padding: 0;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror pre.CodeMirror-line {
  padding: 0;
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror-cursor {
  border-left-color: var(--color-gray-200);
}
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror-selected,
.wp-block-codemirror-blocks-code-block.code-block .CodeMirror-focused .CodeMirror-selected {
  background: var(--dev-v2-color-divider);
}

/* The plugin's "copied" notice: no copy button here, so never shown */
.CodeMirror-notice:empty {
  display: none;
}

/* Part 4's link cards: the site's link cards, the Figma's smaller type */
.tutorial-cards .devhub-link-card__title {
  font-size: var(--body-lg-size);
  font-weight: 600;
  line-height: var(--body-lg-line-height);
}
.tutorial-cards .devhub-link-card__text {
  color: var(--dev-v2-color-muted);
  font-size: var(--body-base-size);
  line-height: var(--body-base-line-height);
}

/* Final Step: the shared rules are with the revision notice */
.tutorial-final {
  padding: 24px;
}
.tutorial-final__title {
  margin: 12px 0 0;
  color: var(--color-white);
  font-size: var(--dev-v2-font-size-24);
  font-weight: 500;
  line-height: 32px;
}
.tutorial-final__text {
  margin: 8px 0 0;
  font-size: var(--dev-v2-font-size-12);
  line-height: 20px;
}
.tutorial-final .wp-block-buttons {
  margin-top: 20px;
}

/* Tablets and phones (below Bootstrap's lg, 992px; owner, 2026-10-23): no
   sidebar, the article full width (tutorial.js reads the sidebar's display,
   so this query is the only place the breakpoint lives); the hero stacks */
@media (max-width: 991.98px) {
  .tutorial-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .tutorial-nav {
    display: none;
  }
  .devhub-hero.lab-hero {
    padding-bottom: 48px;
  }
  /* Columns stacked, the art full width under the text without its shadow
     bleed (clipped) */
  .lab-hero__card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    margin-top: 24px;
    overflow: hidden;
  }
  .lab-hero__text {
    padding-top: 0;
  }
  .lab-hero__meta {
    padding-top: 40px;
  }
  .lab-hero__art {
    margin-right: 0;
  }
  /* Full width: the drawing (x 58-1029, y to 834 of the image) lines up
     with the text */
  .lab-hero__art img {
    width: calc(100% * 1082 / 971);
    margin: 0 0 calc(100% * -76 / 971) calc(100% * -58 / 971);
  }
  .tutorial-body {
    padding: 32px 0 96px;
  }
}
@media (max-width: 767.98px) {
  .tutorial-part__summary {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 16px;
  }
  .tutorial-part__title {
    flex-basis: 100%;
    order: 3;
  }
  .tutorial-part__time {
    margin-left: auto;
  }
  .tutorial-part__panel {
    padding: 20px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-progress__bar,
  a.tutorial-step,
  .tutorial-part__summary,
  .tutorial-part__caret {
    transition: none;
  }
}