/* ============================================================
   Toolbox Minute — marketing CSS
   Page furniture + device-framed UI mockups for the public
   marketing pages. Loaded AFTER tbm-theme.css. All classes are
   prefixed .tm-mk-* (mockups) or .tm-mkt-* (marketing layout) so
   they never collide with the app theme.

   The mockups are pure CSS/HTML so the pages look finished today.
   To drop in a REAL screenshot later, replace the inner mockup
   markup with:  <img src="~/img/marketing/xyz.png" class="tm-mk-shot" />
   (the .tm-mk-shot rule sizes it to the frame).
   ============================================================ */

/* ------------------------------------------------------------
   1. Marketing layout helpers
   ------------------------------------------------------------ */
.tm-mkt-hero { background: var(--surface-inverse); color: var(--text-inverse); }
.tm-mkt-lead { color: var(--text-inverse-muted); max-width: 38rem; }
.tm-mkt-kicker { color: var(--tm-yellow-300); }

/* Section spacing rhythm */
.tm-mkt-section { margin-bottom: 2.5rem; }
@media (min-width: 992px) { .tm-mkt-section { margin-bottom: 4rem; } }

/* A soft, sunken band to separate sections */
.tm-mkt-band { background: var(--surface-sunken); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }

/* Feature list with a check glyph */
.tm-mkt-checks { list-style: none; padding-left: 0; margin: 0; }
.tm-mkt-checks li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; }
.tm-mkt-checks li [data-lucide] { position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem; color: var(--status-pass); }

/* Numbered step marker (big) */
.tm-mkt-stepnum {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 3rem; height: 3rem; border-radius: var(--radius-md);
  background: var(--surface-inverse); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
}
.tm-mkt-stepnum.is-signal { background: var(--signal); color: var(--tm-blue-900); }

/* Spec / data table used for OSHA + settings reference grids */
.tm-mkt-spec td, .tm-mkt-spec th { padding: .55rem .75rem; }
.tm-mkt-spec code { font-family: var(--font-mono); font-size: .82em; color: var(--tm-blue-700); }

/* Pricing card emphasis */
.tm-price-amt { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1; color: var(--text-heading); }
.tm-price-card.is-featured { border-color: var(--action-primary); box-shadow: var(--shadow-raised); }
.tm-price-card.is-featured .card-header { background: var(--surface-inverse); color: #fff; }
/* Prominent included-employee count on the base plan */
.tm-price-included { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; color: var(--text-heading); }
.tm-addon-price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1; color: var(--text-heading); }

/* Add-on cards: navy header band + a blue/grey striped top (secondary to the base plan's blue/yellow) */
.tm-addon-card { border: 1px solid var(--border-strong, #C3CDD6); box-shadow: none; }
.tm-addon-card .card-header { background: var(--surface-inverse); color: #fff; border-bottom: 0; }
.tm-stripe-blue-grey { position: relative; }
.tm-stripe-blue-grey::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--hazard-stripe-h, 5px);
  background: repeating-linear-gradient(135deg, var(--tm-gray-400) 0 10px, var(--tm-blue-900) 10px 20px);
  border-top-left-radius: inherit; border-top-right-radius: inherit;
}

/* Plan row: a big "+" between the base plan and each add-on; base wider, add-ons narrower on desktop */
.tm-plus { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--text-muted); line-height: 1; }
@media (min-width: 992px) {
  .tm-plan-base  { flex: 0 0 380px; }
  .tm-plan-addon { flex: 0 0 300px; }
}

/* Code/endpoint chip */
.tm-mkt-endpoint { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: .86rem; }
.tm-mkt-verb { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .04em; padding: .2em .6em; border-radius: var(--radius-sm); color: #fff; }
.tm-mkt-verb.get { background: var(--status-pass); }
.tm-mkt-verb.post { background: var(--action-brand); }
.tm-mkt-path { color: var(--text-heading); }

/* Code block (request/response samples) */
.tm-mkt-code {
  background: var(--tm-blue-900); color: #DCE8F2; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: .82rem; line-height: 1.5;
  padding: 1rem 1.1rem; overflow-x: auto; margin: 0;
}
.tm-mkt-code .k { color: var(--tm-yellow-300); }   /* keys */
.tm-mkt-code .s { color: #9AD7A6; }                /* strings */
.tm-mkt-code .c { color: #7FA8C9; }                /* comments */

/* Documentation call-out card (Integrations → Developers hand-off) */
.tm-mkt-doccard { background: var(--tm-blue-50); border-color: var(--border-default); }
.tm-mkt-doclink {
  align-items: flex-start; padding: .85rem 1rem;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-default, #fff); color: var(--text-body);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tm-mkt-doclink:hover { border-color: var(--tm-blue-400); box-shadow: var(--shadow-overlay); transform: translateY(-1px); color: var(--text-body); }
.tm-mkt-doclink [data-lucide] { width: 1.4rem; height: 1.4rem; color: var(--action-brand); flex: none; margin-top: .1rem; }
.tm-mkt-doclink .fw-semibold { color: var(--text-heading); }

/* "Also in Spanish" sticker — floats over any lesson/video element (parent must be position-relative) */
.tm-lang-badge {
  position: absolute; top: .7rem; right: .7rem; z-index: 4;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32rem .72rem; border: 2px solid #fff; border-radius: 999px;
  background: var(--tm-yellow-300); color: var(--tm-blue-900);
  font-family: var(--font-body); font-weight: 800; font-size: .76rem;
  letter-spacing: .01em; line-height: 1; white-space: nowrap;
  box-shadow: var(--shadow-overlay); cursor: pointer;
  transform: rotate(-3deg); transition: transform .15s ease, box-shadow .15s ease;
}
.tm-lang-badge:hover, .tm-lang-badge:focus-visible {
  transform: rotate(-3deg) scale(1.07);
  box-shadow: 0 .55rem 1.1rem rgba(0, 0, 0, .22); outline: none;
}
.tm-lang-badge [data-lucide] { width: 1rem; height: 1rem; }

/* Home hero: a bit larger, nudged down and to the left of the corner */
.tm-lang-badge--home {
  top: 2.25rem; right: 3rem;
  padding: .42rem .95rem; font-size: .9rem; gap: .45rem;
}
.tm-lang-badge--home [data-lucide] { width: 1.15rem; height: 1.15rem; }

/* Curriculum hero: big right-side callout */
.tm-lang-badge--callout {
  top: 2.5rem; right: 2.5rem;
  padding: .65rem 1.2rem; font-size: 1.1rem; gap: .55rem; border-width: 3px;
}
.tm-lang-badge--callout [data-lucide] { width: 1.4rem; height: 1.4rem; }
@media (max-width: 991.98px) {
  .tm-lang-badge--callout { top: 1.25rem; right: 1.25rem; padding: .5rem 1rem; font-size: .95rem; }
  .tm-lang-badge--callout [data-lucide] { width: 1.2rem; height: 1.2rem; }
}

/* Product nav dropdown (sits under the navy app bar) */
.tm-mkt-menu {
  --bs-dropdown-border-color: var(--border-default);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-link-active-bg: var(--tm-blue-50);
  --bs-dropdown-link-active-color: var(--tm-blue-800);
  --bs-dropdown-link-hover-bg: var(--tm-blue-50);
  box-shadow: var(--shadow-overlay); padding: .35rem; margin-top: .4rem;
}
.tm-mkt-menu .dropdown-item { display: flex; align-items: center; gap: .55rem; border-radius: var(--radius-sm); font-weight: 500; color: var(--text-body); padding: .5rem .7rem; }
.tm-mkt-menu .dropdown-item [data-lucide] { width: 1.05rem; height: 1.05rem; color: var(--action-brand); flex: none; }
.tm-mkt-menu .dropdown-item:hover [data-lucide] { color: var(--tm-blue-700); }

/* ------------------------------------------------------------
   2. Device frames
   ------------------------------------------------------------ */
.tm-mk { position: relative; }

/* Desktop browser window */
.tm-mk-browser {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-overlay); overflow: hidden;
}
.tm-mk-browser-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; background: var(--tm-gray-100);
  border-bottom: 1px solid var(--border-default);
}
.tm-mk-dots { display: inline-flex; gap: .3rem; }
.tm-mk-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--tm-gray-300); }
.tm-mk-url {
  flex: 1; min-width: 0; margin-left: .35rem;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted);
  padding: .2rem .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-mk-url [data-lucide] { width: .8rem; height: .8rem; vertical-align: -.1em; margin-right: .3rem; color: var(--status-pass); }
.tm-mk-browser-body { background: var(--surface-page); }

/* Phone frame */
.tm-mk-phone {
  width: 230px; max-width: 100%; margin-inline: auto;
  border: 9px solid var(--tm-blue-900); border-radius: 34px;
  background: var(--tm-blue-900); box-shadow: var(--shadow-overlay);
  padding: 0; position: relative;
}
.tm-mk-phone::before { /* notch */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 84px; height: 16px; background: var(--tm-blue-900); border-radius: 0 0 12px 12px; z-index: 2;
}
.tm-mk-phone-screen {
  border-radius: 25px; overflow: hidden; background: var(--surface-page);
  min-height: 420px; display: flex; flex-direction: column;
}

/* A real screenshot dropped into either frame fills the body */
.tm-mk-shot { display: block; width: 100%; height: auto; }

/* Image placeholder slot (dashed) — for when no mockup/screenshot exists yet */
.tm-mk-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 220px; padding: 1.5rem; text-align: center;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
  color: var(--text-muted); background: var(--surface-sunken);
}
.tm-mk-slot [data-lucide] { width: 2rem; height: 2rem; color: var(--tm-gray-400); }

/* ------------------------------------------------------------
   3. Mini-UI building blocks (compose inside a frame body)
   ------------------------------------------------------------ */
.tm-mk-app { display: flex; min-height: 300px; font-size: .8rem; }

/* Admin left nav rail (navy) */
.tm-mk-rail { flex: none; width: 56px; background: var(--surface-inverse); padding: .6rem .4rem; display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.tm-mk-rail .tm-mk-railitem { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-inverse-muted); }
.tm-mk-rail .tm-mk-railitem.active { background: var(--action-brand); color: #fff; }
.tm-mk-rail .tm-mk-railitem [data-lucide] { width: 1.05rem; height: 1.05rem; }

/* Main panel */
.tm-mk-main { flex: 1; min-width: 0; padding: .85rem 1rem; }
.tm-mk-h { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--text-heading); font-size: 1rem; margin: 0; }
.tm-mk-sub { color: var(--text-muted); font-size: .72rem; }

/* Stat tiles */
.tm-mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tm-mk-tile { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: .55rem .6rem; }
.tm-mk-tile .v { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1; color: var(--text-heading); }
.tm-mk-tile .v.is-mono { font-family: var(--font-mono); }
.tm-mk-tile .l { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: .15rem; }

/* Bar chart (heights via inline style) */
.tm-mk-bars { display: flex; align-items: flex-end; gap: .3rem; height: 70px; padding-top: .25rem; }
.tm-mk-bar { flex: 1; background: var(--tm-blue-200); border-radius: 3px 3px 0 0; min-width: 4px; }
.tm-mk-bar.is-signal { background: var(--signal); }

/* Mini table rows */
.tm-mk-tbl { width: 100%; border-collapse: collapse; }
.tm-mk-tbl th { text-align: left; font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: .3rem .4rem; border-bottom: 1.5px solid var(--border-strong); }
.tm-mk-tbl td { padding: .35rem .4rem; border-bottom: 1px solid var(--border-default); color: var(--text-body); }
.tm-mk-tbl .tm-mono { font-family: var(--font-mono); }

/* Pills inside mockups */
.tm-mk-pill { display: inline-flex; align-items: center; gap: .25em; font-size: .6rem; font-weight: 600; border-radius: var(--radius-pill); padding: .15em .55em; }
.tm-mk-pill.pass { background: var(--status-pass-bg); color: #14663A; }
.tm-mk-pill.due  { background: var(--status-due-bg); color: var(--tm-yellow-700); }

/* Phone lesson player mock */
.tm-mk-player { background: var(--tm-blue-900); color: #fff; flex: 1; display: flex; flex-direction: column; }
.tm-mk-player-top { padding: .6rem .75rem; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: .82rem; }
.tm-mk-player-top em { font-style: normal; color: var(--signal); }
.tm-mk-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; }
.tm-mk-playbtn { width: 54px; height: 54px; border-radius: 50%; background: var(--action-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-raised); }
.tm-mk-playbtn [data-lucide] { width: 1.6rem; height: 1.6rem; }
.tm-mk-timecode { font-family: var(--font-mono); font-weight: 700; color: var(--signal); font-size: 1.15rem; }
.tm-mk-player-foot { padding: .75rem; }
.tm-mk-progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.tm-mk-progress > i { display: block; height: 100%; background: var(--signal); border-radius: 999px; }

/* Quiz option chips (phone) */
.tm-mk-opt { display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-sm); padding: .5rem .65rem; margin-top: .4rem; font-size: .76rem; color: #EAF1F7; }
.tm-mk-opt.correct { background: rgba(30,138,76,.22); border-color: var(--status-pass); }

/* Scale the whole app mock down on small screens so it stays readable */
@media (max-width: 575.98px) {
  .tm-mk-tiles { grid-template-columns: repeat(3, 1fr); }
  .tm-mk-app { font-size: .72rem; }
}