/* PodsCool — the teacher card, shared (js/marketplace/teacher-card.js).

   One card, two pages: Browse Teachers (teachers.html) and the home page's "Newest teachers" row.
   Victor, 2026-11-07, via the home page session: "need to update the teacher cards too on homepage".
   A copy would drift, because this design kept moving all day, so both pages load this file and
   render teacherCardHTML. The card carries its own color tokens and needs nothing from the page;
   the page decides only the width of the column it sits in (it is built for 280px and up).

   Loaded with its own ?v= key. Change it here and bump that key on BOTH pages. */

/* NO BACKDROP-FILTER ANYWHERE ON THE CARD (Victor, 2026-11-11: blank cards for 1-3 seconds while scrolling,
   both ways). Browse Teachers drew 630 live backdrop blurs across 57 cards plus a 44px filter over each
   full-size wash photo, and the GPU re-rasterized them every time a card came back on screen. The soft
   look is now a TINY copy of the picture stretched in a canvas (teacher-card.js, softenCard), and the
   small glass pieces are translucent fills: everything under them is already soft. */

/* A FLOOR UNDER THE HEIGHT. A teacher with no bio and no credentials collapsed the card to a stub
   (Victor: "make the card a little taller...looks stupid"). Then: "Bring the bio up to like right
   under the photo and you can make the bio a little bit taller now". So the glass panel starts right
   under the photo and grows (flex: 1) into the spare height, down to the pod boxes. */
/* CLIP, NOT HIDDEN. The blurred cover reaches past the card's edges on purpose, and overflow:hidden
   still makes the card a scroll container: focusing a pod icon with the keyboard, or any
   scrollIntoView, scrolled the card's insides up by ~140px and slid the photo out of sight.
   overflow:clip crops the same and cannot scroll. hidden stays first as the fallback. */
/* THE COVER, THE FACE AND THE GLASS (Victor, 2026-11-07: "a cover banner ... their profile photo
   goes in a circle on top left, with banner of theirs ... Use the apple glass").

   The cover fills the whole card: the teacher's banner crisp, or, with no banner, their own photo
   blurred into a wash (the storefront header's treatment, so the two rhyme). Their photo sits in a
   glass-ringed circle at the top left. The words float on a Liquid Glass panel inset from the card's
   edges with concentric corners: translucent white, the cover blurred and saturated through it,
   a bright specular rim along the top edge, and a soft shadow lifting it off the cover. */
.bt-card {
  --bt-ink: #1d1d1f; --bt-ink-2: #424245; --bt-muted: #6e6e73; --bt-tile: #f5f5f7; --bt-ease: cubic-bezier(.3, .7, .2, 1);
  --bt-glass-tint: rgba(255, 255, 255, .5);
  position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-direction: column;
  min-height: 600px; padding: 12px; border-radius: 30px; background: #dcdce2; color: var(--bt-ink); text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .5s var(--bt-ease), box-shadow .5s var(--bt-ease);
}
.bt-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .5); }
.bt-card[hidden] { display: none; }

.bt-cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.bt-cover--banner { object-position: 50% 35%; transition: transform .8s var(--bt-ease); }
.bt-card:hover .bt-cover--banner { transform: scale(1.04); }
/* No banner: the photo, scaled past the edges so the blur never shows a hard border. */
/* max-width: none, because the site-wide img { max-width: 100% } clamped the width to the card's
   while inset still pulled it 25% left - the blur sat off-center with a bare strip on the right
   (Victor, 2026-11-07: "the background blur image looks like it's more to the left"). */
/* The wash is a canvas: the photo drawn ~16px wide (the old 150% oversize as a zoom), stretched to the card. */
.bt-cover--wash { inset: 0; width: 100%; height: 100%; }
.bt-cover--brand { background: radial-gradient(120% 80% at 10% 0%, #c9bdf3, transparent 60%), radial-gradient(120% 90% at 100% 30%, #c4dcb8, transparent 60%), #e9e6f3; }

.bt-card__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 8px 12px; }
/* The glass ring: a translucent collar with a bright inner rim, so the circle reads on any cover. */
.bt-ring {
  display: block; padding: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 8px 24px -8px rgba(0, 0, 0, .35);
}
.bt-face { display: block; width: 116px; height: 116px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.bt-face--i { display: grid; place-items: center; background: linear-gradient(135deg, #b3a2e8, #a3c893); color: #fff; font: 600 40px var(--head); letter-spacing: -.02em; }
.bt-example {
  margin-top: 6px; padding: 6px 12px; border-radius: 980px; font-size: 12px; font-weight: 600; color: var(--bt-ink);
  background: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* MESSAGE, a glass pill in the top right corner, above the card-wide link (Victor, 2026-11-10: a glass button
   there, then "make the icon larger so users know what it is. OR write it out. Message"). Icon and word. */
.bt-msg {
  position: absolute; top: 22px; right: 22px; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 16px 0 13px; border-radius: 980px; color: var(--bt-ink); text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  background: rgba(255, 255, 255, .74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 22px -8px rgba(0, 0, 0, .35);
  transition: transform .25s var(--bt-ease), background .25s var(--bt-ease);
}
.bt-msg:hover { transform: scale(1.05); background: rgba(255, 255, 255, .88); }
/* Signed in only: teacher-card.js adds .pc-signed-in to <html> once Firebase knows there's a user. */
html:not(.pc-signed-in) .bt-msg { display: none; }
.bt-msg:focus-visible { outline: 3px solid rgba(0, 113, 227, .55); outline-offset: 2px; }
.bt-msg svg { flex: 0 0 auto; }

/* The storefront link covers the whole card; the pod links below sit above it. */
.bt-card__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.bt-card__link:focus-visible { outline: 3px solid rgba(0, 113, 227, .55); outline-offset: -3px; }

/* Liquid Glass. The ::before is the specular sheen: light caught on the top-left of the slab. */
/* The panel's backdrop-filter makes it a stacking context, so the pod icons inside it cannot rise
   above the card's storefront link on their own. The panel is lifted above the link and lets clicks
   fall through it, and only the icons take them back. */
.bt-glass {
  position: relative; z-index: 4; pointer-events: none; flex: 1 1 auto; padding: 20px 22px 18px; border-radius: 22px;
  overflow: hidden; overflow: clip;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 255, 255, .45),
    inset 0 -1px 1px rgba(255, 255, 255, .3),
    0 14px 34px -16px rgba(0, 0, 0, .28);
}
/* Under the words, bottom to top: the soft banner (a banner card's canvas, lined up with the card by
   teacher-card.js), then the white tint that used to sit over a live blur. A wash card has no canvas: its
   cover is already the soft photo, and the tint sits straight on it. */
.bt-glass__bg { position: absolute; z-index: -2; display: block; max-width: none; }
.bt-glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), var(--bt-glass-tint));
}
.bt-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140% 70% at 0% 0%, rgba(255, 255, 255, .55), transparent 55%);
  mix-blend-mode: soft-light;
}
.bt-name { margin: 0; display: flex; align-items: center; gap: 7px; font-family: var(--head); font-size: 27px; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; color: var(--bt-ink); }
.bt-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 14px; color: var(--bt-ink-2); }
.bt-dot { color: var(--bt-muted); }
.bt-rate span { color: #f5a623; }
.bt-rate--new { color: var(--green-ink, #5f8149); font-weight: 600; }
.bt-blurb { margin: 12px 52px 0 0; font-size: 16px; line-height: 1.45; letter-spacing: -.01em; color: var(--bt-ink); }
.bt-more { color: #0066cc; font-weight: 500; white-space: nowrap; }

/* Their featured pods as iOS app icons under the bio: a squircle of the pod's picture with the soft
   lift iOS gives an icon. They sit above the card's storefront link, so each opens its own pod. */
/* The shelf: one small frosted-grey box per pod, the three spread evenly across the card's width,
   each box the pod's link with its icon centred. The shelf itself passes clicks through to the
   storefront link; only the boxes take them. */
.bt-shelf { position: relative; z-index: 4; pointer-events: none; margin: 10px 0 0; }
/* A small, quiet title for the three ("something above it small and not loud. a title for the 3
   pods"): white over the card's own colors, with a soft shadow so it reads on any cover. */
.bt-shelf__t { margin: 0 0 6px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* No photo, no banner: the cover is the pale brand gradient, where white "Pods" all but vanished (1.3:1). */
.bt-card:has(.bt-cover--brand) .bt-shelf__t { color: var(--bt-ink-2); text-shadow: none; }
/* ONE LONG GLASS CASE FOR THE THREE (Victor, 2026-11-09: "1 long glass container ... for the 3 pods at the bottom",
   apple.com's "Most viewed" row): the tiles sit inside a single frosted bar with a lit rim */
.bt-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px; list-style: none;
  border-radius: 26px; background: rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .28), 0 12px 28px -18px rgba(0, 0, 0, .45); }
.bt-app {
  pointer-events: auto; display: grid; place-items: center; height: 68px; border-radius: 18px; text-decoration: none;
  background: rgba(242, 242, 247, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 8px 20px -14px rgba(0, 0, 0, .35);
  transition: transform .3s var(--bt-ease), background-color .2s;
}
/* THE PICTURE FILLS ITS BOX (Victor, 2026-11-08: "the pictures need to fill these boxes more"): a
   6px frosted edge, not a 46px icon floating in the middle. */
.bt-app { padding: 6px; }
.bt-app__icon {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 13px; overflow: hidden;
  background: linear-gradient(150deg, #f1f2f6, #e2e5ec);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 3px 8px -3px rgba(0, 0, 0, .35);
}
/* A BOX IS NEVER BLANK WHILE ITS PICTURE IS SLOW OR GONE (Victor, 2026-11-12: "nothing is loading..."): the UAT
   demo pods' photos come from picsum.photos, and when that host times out every shelf read as a row of empty
   white boxes. The box now carries a soft tint and a small book mark of its own; a photo that arrives covers
   it, and one that never does (alt="" draws no broken-image icon) leaves the mark showing. */
.bt-app__icon::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v15H5.5A1.5 1.5 0 0 1 4 17.5Z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v15h5.5a1.5 1.5 0 0 0 1.5-1.5Z'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.bt-app__icon > * { position: relative; z-index: 1; }
/* A photo that FAILS draws Chrome's broken-image icon over all of that. Chrome paints ::before/::after on an img
   only once it has failed, so these repaint the same tint and mark over the icon and never touch a loaded one. */
.bt-app__icon img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, #f1f2f6, #e2e5ec); }
.bt-app__icon img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v15H5.5A1.5 1.5 0 0 1 4 17.5Z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v15h5.5a1.5 1.5 0 0 0 1.5-1.5Z'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.bt-app:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .82); }
.bt-app:focus-visible { outline: 3px solid rgba(0, 113, 227, .55); outline-offset: 2px; }
.bt-app__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* THE PEEK: a glass card above a pod box, on hover (pointer devices) or keyboard focus. It sits in
   the card's own space above the shelf, so the card's clip never cuts it; the outer two boxes anchor
   it to their outside edge so it never reaches past the card. It never takes clicks itself. */
.bt-apps > li { position: relative; }
.bt-peek {
  position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 6; width: 250px; padding: 14px 16px 15px; border-radius: 18px;
  pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 6px) scale(.97); transform-origin: 50% 100%;
  background: rgba(255, 255, 255, .95);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 18px 40px -16px rgba(0, 0, 0, .45);
  transition: opacity .2s var(--bt-ease), transform .3s var(--bt-ease), visibility 0s linear .3s;
}
.bt-apps > li:first-child .bt-peek { left: 0; transform: translate(0, 6px) scale(.97); transform-origin: 20% 100%; }
.bt-apps > li:last-child .bt-peek { left: auto; right: 0; transform: translate(0, 6px) scale(.97); transform-origin: 80% 100%; }
@media (hover: hover) {
  .bt-apps > li:hover .bt-peek { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: .12s, .12s, 0s; }
  .bt-apps > li:first-child:hover .bt-peek, .bt-apps > li:last-child:hover .bt-peek { transform: translate(0, 0) scale(1); }
}
.bt-apps > li:focus-within .bt-peek { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.bt-apps > li:first-child:focus-within .bt-peek, .bt-apps > li:last-child:focus-within .bt-peek { transform: translate(0, 0) scale(1); }
.bt-peek__t { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--bt-ink); }
.bt-peek__s { margin: 3px 0 0; font-size: 12.5px; color: var(--bt-ink-2); }
.bt-peek__d { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--bt-ink); }
@media (prefers-reduced-motion: reduce) { .bt-peek { transition: opacity .15s, visibility 0s linear .15s; } }

.bt-app__glyph { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(29, 29, 31, .72); }
.bt-credline { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 0; font-size: 14px; line-height: 1.3; }
.bt-cred, .bt-edu { display: flex; align-items: center; gap: 7px; min-width: 0; }
.bt-cred { color: var(--green-ink, #5f8149); font-weight: 600; }
.bt-edu { color: var(--bt-ink-2); }
.bt-cred svg, .bt-edu svg { flex: 0 0 auto; }
.bt-cred span, .bt-edu span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-fnd { display: inline-flex; align-items: center; gap: 5px; color: #8a5a00; font-weight: 600; }
.bt-fnd .tb-mark { width: 13px; height: 13px; }

.bt-card:hover .bt-more { text-decoration: underline; }

/* Apple's round arrow, in glass, bottom right of the panel. The card is the link; this only says so. */
.bt-arrow {
  position: absolute; right: 16px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--bt-ink);
  background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(0, 0, 0, .3);
  transition: transform .35s var(--bt-ease);
}
.bt-card:hover .bt-arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .bt-card { min-height: 540px; border-radius: 28px; padding: 10px; }
  .bt-glass { border-radius: 20px; padding: 18px 18px 20px; }
  .bt-face { width: 100px; height: 100px; }
  .bt-name { font-size: 25px; }
}