/* ═══════════════════════════════════════════════════════════════
   THE GOOD HARVEST — gh_skeleton
   The shared loading skeleton. Replaces the spinner that used to sit
   in each page's loading slot with a grey shape the size of the
   content that is coming, so the page does not jump when data lands.

   SELF-CONTAINED ON PURPOSE, for the same reason css/gh_dialog.css is:
   good-harvest-staff.html links no css/gh_styles.css and defines its
   own conflicting --gold/--cream inline. The palette is therefore
   declared on .gh-skel rather than inherited, and a skeleton looks the
   same on every page that shows one.

   USAGE. A skeleton keeps the id of the loading element it replaces, so
   the page's existing `style.display = 'none'` still hides it and no
   page's JavaScript had to change:

     <div class="gh-skel" id="courseLoading" aria-hidden="true"> … </div>

   The visible "Loading…" text became grey bars, so every skeleton also
   carries an .gh-skel__sr line that keeps the announcement for screen
   readers. The bars themselves are aria-hidden.
   ═══════════════════════════════════════════════════════════════ */

/* THE SLOT DECLARES NO `display`, DELIBERATELY. The slot element belongs
   to the page, and the page is what hides it — good-harvest-staff.html
   does it with `classList.add('hide')` against its own
   `.hide{display:none}`. This file is linked after that page's inline
   <style>, so a `display:flex` here would have the same specificity and
   win on order, and that skeleton would never come down. The layout
   therefore lives on .gh-skel__shapes, which this component owns
   outright, and the slot keeps whatever display the page gives it. */
.gh-skel {
  --gsk-base:  #E4DFD5;
  --gsk-sheen: #F4F1EB;
  --gsk-card:  #FFFFFF;
  --gsk-line:  rgba(0,0,0,0.05);
  --gsk-r-sm:  6px;
  --gsk-r-md:  12px;
  --gsk-r-lg:  18px;

  width: 100%;
}

.gh-skel__shapes {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* A skeleton that must become grid items of the grid it is dropped into
   (the hub's #courseGrid holds its loading slot inside .courses__grid).
   Both boxes disappear and the cards are laid out by the page's own
   grid. Every slot that uses this is hidden by an inline display:none
   or replaced wholesale via innerHTML, so neither rule is in the way. */
.gh-skel--contents,
.gh-skel__shapes--contents { display: contents; }

/* ── The shimmer ──────────────────────────────────────────────── */
.gh-skel__bar,
.gh-skel__circle {
  background: var(--gsk-base);
  background-image: linear-gradient(
    90deg,
    var(--gsk-base) 0%,
    var(--gsk-sheen) 50%,
    var(--gsk-base) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: gh-skel-sheen 1.4s ease-in-out infinite;
  border-radius: var(--gsk-r-sm);
  flex: none;
}

@keyframes gh-skel-sheen {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* Motion is decoration here — the shape already says "loading". A user
   who has asked the OS for less motion keeps the shape and loses only
   the sweep. */
@media (prefers-reduced-motion: reduce) {
  .gh-skel__bar,
  .gh-skel__circle {
    animation: none;
    background-image: none;
  }
}

/* ── Primitives ───────────────────────────────────────────────── */
.gh-skel__bar    { height: 0.75rem; width: 100%; }
.gh-skel__bar--title  { height: 1.35rem; width: 60%; border-radius: var(--gsk-r-sm); }
.gh-skel__bar--sub    { height: 0.85rem; width: 40%; }
.gh-skel__bar--w90 { width: 90%; }
.gh-skel__bar--w75 { width: 75%; }
.gh-skel__bar--w60 { width: 60%; }
.gh-skel__bar--w45 { width: 45%; }
.gh-skel__bar--w30 { width: 30%; }
.gh-skel__bar--w20 { width: 20%; }
.gh-skel__bar--chip   { height: 1.75rem; width: 6.5rem; border-radius: 999px; }
.gh-skel__bar--btn    { height: 2.5rem; width: 9rem;   border-radius: 999px; }
.gh-skel__bar--input  { height: 2.75rem; width: 100%;  border-radius: var(--gsk-r-md); }
.gh-skel__bar--cover  { height: 170px;  width: 100%;   border-radius: 0; }
.gh-skel__bar--block  { height: 420px; width: 100%; border-radius: var(--gsk-r-md); }

.gh-skel__circle { border-radius: 50%; width: 2.75rem; height: 2.75rem; }
.gh-skel__circle--sm { width: 2rem; height: 2rem; }
.gh-skel__circle--lg { width: 3.5rem; height: 3.5rem; }

/* Screen readers still hear what the bars mean. Mirrors the .sr-only in
   css/gh_styles.css, restated here because this file stands alone. */
.gh-skel__sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Composites ───────────────────────────────────────────────── */

/* A course / resource / training card: cover, then title and two lines. */
.gh-skel__card {
  background: var(--gsk-card);
  border: 1px solid var(--gsk-line);
  border-radius: var(--gsk-r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gh-skel__card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* A table row: cells on one line, the first wider than the rest. */
.gh-skel__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--gsk-line);
}
.gh-skel__row:last-child { border-bottom: 0; }
.gh-skel__row .gh-skel__bar { flex: 1 1 0; }
.gh-skel__row .gh-skel__bar--lead { flex: 2 2 0; }

/* A list item with a leading circle — lessons, activity entries. */
.gh-skel__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--gsk-card);
  border: 1px solid var(--gsk-line);
  border-radius: var(--gsk-r-md);
  padding: 1.15rem 1.25rem;
}
.gh-skel__item-text {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* A stat tile — icon square plus two short bars. */
.gh-skel__stat {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--gsk-card);
  border: 1px solid var(--gsk-line);
  border-radius: var(--gsk-r-md);
  padding: 1.25rem;
}
.gh-skel__stat-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* A panel/card wrapper for skeleton rows, so the rows sit on white the
   way the real table does rather than floating on the page ground. */
.gh-skel__panel {
  background: var(--gsk-card);
  border: 1px solid var(--gsk-line);
  border-radius: var(--gsk-r-md);
  overflow: hidden;
}
.gh-skel__panel-head {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--gsk-line);
}

/* ── Layout helpers ───────────────────────────────────────────── */
.gh-skel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .gh-skel__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .gh-skel__grid { grid-template-columns: repeat(3, 1fr); }
}

.gh-skel__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.gh-skel__inline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}