/* ThinqShift: The Framework page. Tokens in tokens.css, shared nav/footer/layout in base.css. */

/* ─── DNA GRID (Non-Negotiables + 4Ds) ─── */
.dna-block { margin-bottom: 44px; }
.dna-block:last-child { margin-bottom: 0; }
.dna-kicker { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--lilac); margin-bottom: 16px; }
.dna-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dna-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.dna-card:hover { transform: translateY(-3px); border-color: var(--border2); background: rgba(136,39,171,0.13); }
.dna-card h4 { font-family: var(--font-display); font-weight: 600; color: var(--white); font-size: 0.98rem; margin-bottom: 8px; }
.dna-card p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
@media (max-width: 900px) { .dna-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dna-grid { grid-template-columns: 1fr; } }

/* ─── THE THINQSHIFT CUBE ───
   The real cube-mark.svg + face-*.svg dimension charts, reused as-is from
   the same asset used on Thinqee's home page (not redrawn); these ARE
   ThinqShift's own diagrams, just built into the Thinqee codebase first.
   Loaded via <object> so its internal <image href="face-*.svg"> references
   resolve relative to assets/framework/, same as on Thinqee. */
.cube-section { border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(53,0,105,0.3), transparent 40%, rgba(53,0,105,0.3)); }
.cube-mark-wrap { position: relative; display: inline-block; }
.cube-mark { width: min(380px, 100%); height: auto; filter: drop-shadow(0 16px 44px rgba(136,39,171,0.22)); animation: cube-glow 5s ease-in-out infinite; }
@keyframes cube-glow {
  0%, 100% { filter: drop-shadow(0 16px 44px rgba(136,39,171,0.22)); }
  50% { filter: drop-shadow(0 16px 54px rgba(136,39,171,0.4)); }
}
@media (prefers-reduced-motion: reduce) { .cube-mark { animation: none; } }

/* Each face is clickable: a transparent button clipped to that face's exact
   parallelogram (percentages of the 340x306 cube-mark viewBox), opening the
   full chart in a lightbox. */
.cube-face-btn { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(136,39,171,0); border: none; padding: 0; margin: 0; cursor: pointer; transition: background .2s ease; }
.cube-face-btn:hover, .cube-face-btn:focus-visible { background: rgba(136,39,171,0.2); }
.cube-face-btn:focus-visible { outline: none; }
.cube-face-top   { clip-path: polygon(50% 13.7%, 14.7% 31.4%, 50% 49%, 85.3% 31.4%); }
.cube-face-left  { clip-path: polygon(50% 49%, 14.7% 31.4%, 14.7% 75.8%, 50% 93.5%); }
.cube-face-right { clip-path: polygon(50% 49%, 85.3% 31.4%, 85.3% 75.8%, 50% 93.5%); }

/* ─── CUBE FACE LIGHTBOX ─── */
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(18,8,24,0.88); backdrop-filter: blur(4px); }
.lightbox-panel {
  position: relative; z-index: 1;
  max-width: min(760px, 92vw); max-height: 86vh; width: 100%;
  background: var(--card-solid); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 46px 22px 22px; box-shadow: var(--shadow), var(--shadow-glow);
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.lightbox-img { width: 100%; height: auto; max-height: 68vh; object-fit: contain; border-radius: calc(var(--radius) - 6px); }
.lightbox-caption { text-align: center; color: var(--muted); font-size: 0.9rem; }
.lightbox-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--purple-200); color: #fff; border: none; font-size: 1.3rem; line-height: 1;
  cursor: pointer; box-shadow: var(--shadow); z-index: 2; transition: transform .15s ease;
}
.lightbox-close:hover { transform: scale(1.08); }
@media (max-width: 480px) {
  .lightbox { padding: 14px; }
  .lightbox-panel { padding: 40px 14px 14px; max-height: 90vh; }
  .lightbox-img { max-height: 58vh; }
  .lightbox-close { top: 8px; right: 8px; width: 30px; height: 30px; font-size: 1.1rem; }
}

/* ─── WHOLE BRAIN THINKING QUADRANT (official Thinq360 diagnostic colors) ─── */
.quadrant-wrap { max-width: 760px; margin: 0 auto; }
.quadrant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quad-card { border-radius: var(--radius); padding: 24px 22px; background: var(--card-solid); border: 1px solid var(--border); border-top: 4px solid var(--q-color); transition: transform .2s ease, box-shadow .2s ease; }
.quad-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.3); }
.quad-card .quad-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--q-color); display: inline-block; margin-bottom: 10px; box-shadow: 0 0 12px var(--q-color); animation: quad-pulse 2.6s ease-in-out infinite; }
@keyframes quad-pulse { 0%, 100% { box-shadow: 0 0 8px var(--q-color); } 50% { box-shadow: 0 0 16px var(--q-color); } }
@media (prefers-reduced-motion: reduce) { .quad-card .quad-dot { animation: none; } }
.quad-card h4 { font-family: var(--font-display); font-weight: 600; color: var(--white); font-size: 1.02rem; margin-bottom: 6px; }
.quad-card p { color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.quad-analytical { --q-color: #0080C5; }
.quad-experimental { --q-color: #FCAF17; }
.quad-safekeeping { --q-color: #0DB14B; }
.quad-relational { --q-color: #ED1C24; }
@media (max-width: 560px) { .quadrant-grid { grid-template-columns: 1fr; } }

/* ─── 5 LEVELS OF THINKING (ladder) ─── */
.levels-ladder { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column-reverse; gap: 2px; }
.level-row { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: center; padding: 14px 18px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-sm); position: relative; }
.level-name { font-family: var(--font-display); font-weight: 600; color: var(--white); font-size: 0.95rem; }
.level-time { display: block; color: var(--amber-soft); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 3px; }
.level-desc { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.level-row:nth-child(1) { margin-left: 0; }
.level-row:nth-child(2) { margin-left: 14px; }
.level-row:nth-child(3) { margin-left: 28px; }
.level-row:nth-child(4) { margin-left: 42px; }
.level-row:nth-child(5) { margin-left: 56px; border-color: var(--border2); background: rgba(136,39,171,0.12); }
@media (max-width: 640px) {
  .level-row, .level-row:nth-child(1), .level-row:nth-child(2), .level-row:nth-child(3), .level-row:nth-child(4), .level-row:nth-child(5) { margin-left: 0; grid-template-columns: 1fr; gap: 4px; }
}

/* ─── AI ERA: Content Power vs Personal Power ─── */
.power-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.power-card { border-radius: var(--radius); padding: 28px 26px; border: 1px solid var(--border); }
.power-card.content { background: var(--card); }
.power-card.personal { background: linear-gradient(165deg, rgba(136,39,171,0.2), rgba(136,39,171,0.05)); border-color: var(--border2); }
.power-card .eyebrow { display: block; margin-bottom: 10px; }
.power-card h3 { margin-bottom: 10px; }
.power-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
@media (max-width: 760px) { .power-grid { grid-template-columns: 1fr; } }

.fw-footer-note { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 34px 0 0; }