/* ============================================================================
   Shared pathway-card + popup component styling.
   Loaded by dashboard.html, manager.html and demo-learner.html so a pathway
   tile and its popup look and behave identically everywhere on the platform.
   Visual language matches the existing premium card system (.library-module-card)
   and the existing badge-detail-overlay popup, rather than inventing a new one.
   ============================================================================ */

.pathway-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;width:100%;}
@media(max-width:640px){.pathway-card-grid{grid-template-columns:1fr;}}

/* v241: v240 added a min-height here to make every card "uniform" — but content length varies
   a lot between cards (a two-line title/desc vs. a one-liner), so a fixed floor just turned
   into dead space under the short ones. Reverted: a card is exactly as tall as its own
   content again. The count badge moving to its own line below the title (below) already gives
   every card the same predictable internal structure without forcing the same overall height. */
.pathway-card{position:relative;display:flex;align-items:flex-start;gap:.9rem;text-align:left;width:100%;border:1px solid #E4DED2;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#FFFCF4 100%);padding:1rem 1.1rem;cursor:pointer;font-family:var(--font);box-shadow:0 8px 24px rgba(39,70,64,.055);transition:transform .12s ease,box-shadow .15s ease;}
.pathway-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(39,70,64,.11);}
.pathway-card-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:#FDF6E3;color:#7A5418;font-size:21px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(232,200,106,.25);}
.pathway-card-copy{min-width:0;flex:1;}
/* v241: was a wrapping row (title text + count badge side by side, badge only dropping to its
   own line when the title happened to be long enough to force it) — inconsistent depending on
   title length, and part of what read as "not uniform". Now a column: the count badge always
   sits directly under the title, every time, regardless of how long the title is. */
.pathway-card-title{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;color:#24493F;font-size:16px;font-weight:950;line-height:1.15;}
.pathway-card-count{font-size:11px;font-weight:950;background:#EAF1EE;color:#24493F;border-radius:999px;padding:.18rem .55rem;}
.pathway-card-desc{display:block;margin-top:.22rem;color:#6a675f;font-size:12.5px;font-weight:650;line-height:1.35;}
.pathway-card-progress{font-size:11px;color:#8a7d64;font-weight:950;text-transform:uppercase;letter-spacing:.04em;margin-top:.28rem;}
.pathway-card-attention-dot{position:absolute;top:.75rem;right:.85rem;width:10px;height:10px;border-radius:50%;background:var(--danger,#C0392B);box-shadow:0 0 0 3px rgba(192,57,43,.18);}

/* Recede a pathway card whose contents are entirely locked, so the handful of
   genuinely available pathways (e.g. a single live demo module) stand out
   without the rest looking broken or out of place. Subtle by design. */
.pathway-card.pathway-card-dim{filter:blur(.4px);opacity:.6;}
.pathway-card.pathway-card-dim:hover{opacity:.8;transform:none;box-shadow:0 8px 24px rgba(39,70,64,.055);}

/* v240: toolbox cards (renderToolboxPathwayCard) are an <a>, not a <button> like a pathway
   tile — .pathway-card itself doesn't fight either tag, but the site-wide `a{...}` /
   `a:hover{text-decoration:underline}` rules in app.css would otherwise underline the card's
   text and recolour it like a normal link. Reset both here. */
.pathway-card.toolbox-pathway-card{text-decoration:none;color:inherit;}
.pathway-card.toolbox-pathway-card:hover{text-decoration:none;}
/* v241: this used to be position:absolute, floating on top of the card instead of taking up
   its own space — a long title wraps to fill the card's full width and the star just sat on
   top of (hid) part of it. Now a normal third flex child of .pathway-card (after the icon and
   the copy block), so .pathway-card-copy's own width shrinks to leave it room and titles wrap
   fully within that narrower column instead of running underneath the button. */
.toolbox-pathway-fav{flex:0 0 auto;align-self:flex-start;border:1px solid #E3DED2;background:#fff;color:#C9970C;border-radius:999px;width:32px;height:32px;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;padding:0;}
.toolbox-pathway-fav:hover{background:#FFFBED;border-color:#E8C86A;}
.toolbox-pathway-fav.is-fav{background:#FFF4C7;color:#9A681C;border-color:#E8C86A;}

/* "Needs attention" pinned card gets a distinct warm accent so it reads as
   the one card that surfaces urgency, without turning every other card red. */
.pathway-card.pathway-card-attention{border-color:#E8C86A;background:linear-gradient(135deg,#FFFBED 0%,#fff 100%);}
.pathway-card.pathway-card-attention .pathway-card-icon{background:#FFF3D6;color:#8A5A00;}
.pathway-card.pathway-card-attention .pathway-card-desc{color:#8A5A00;}

/* Popup — same visual language as .badge-detail-overlay (centred card, blurred
   dark backdrop, top accent strip) so every "open something" moment on the
   platform feels like part of one product. */
/* v230 fix: this comment always said "centred card" but align-items was actually
   flex-start, so the popup opened pinned to the top instead of dead-center like
   .badge-detail-overlay. Now matches that exact recipe. */
.pathway-group-popup-overlay{position:fixed;inset:0;z-index:10030;display:flex;align-items:center;justify-content:center;padding:2rem 1.25rem;overflow-y:auto;}
.pathway-group-popup-backdrop{position:fixed;inset:0;background:rgba(10,28,24,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:-1;}
.pathway-group-popup-card{position:relative;width:min(94vw,900px);max-height:none;background:linear-gradient(170deg,#FFFDF6 0%,#F8F6F1 60%,#F3ECDE 100%);border:1px solid rgba(185,130,71,.3);border-radius:26px;padding:1.75rem;box-shadow:0 40px 100px rgba(0,0,0,.38);margin-bottom:2rem;}
.pathway-group-popup-card::before{content:'';position:absolute;inset:0 0 auto 0;height:9px;border-radius:26px 26px 0 0;background:var(--pathway-accent-grad,linear-gradient(90deg,#B98247,#E8C86A,#A7B1BC));}
.pathway-group-popup-close{position:absolute;top:1.1rem;right:1.1rem;border:none;background:rgba(28,56,50,.06);color:var(--green,#24493F);width:36px;height:36px;border-radius:999px;font-size:22px;line-height:1;cursor:pointer;}
.pathway-group-popup-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.25rem;padding-top:.35rem;}
.pathway-group-popup-icon{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#F6F1E7);box-shadow:inset 0 0 0 1px rgba(28,56,50,.08);font-size:26px;flex:0 0 auto;}
.pathway-group-popup-head h2{margin:0;font-size:21px;color:var(--green-dark,#193D33);}
.pathway-group-popup-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
@media(max-width:640px){
  .pathway-group-popup-overlay{padding:1rem .65rem;}
  .pathway-group-popup-card{padding:1.1rem;border-radius:20px;}
  .pathway-group-popup-body{grid-template-columns:1fr;}
  .pathway-group-popup-head h2{font-size:18px;}
}