:root {
    --tk-surface: #ffffff;
    --tk-shadow: rgba(0, 0, 0, 0.12);
}


.tk-v2-token-expandable-wrapper {
    display: inline-flex;
    height: 128px;
    align-items: center;
}

.tk-v2-token-pill {
    display: flex;
    align-items: center;
    background: transparent; 
    border-radius: 80px;
    max-width: 128px;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.tk-v2-token-hex {
    min-width: 128px;
    width: 128px;
    height: 128px;
    z-index: 2;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
    transition: transform 0.3s ease;
}

.tk-v2-token-drawer {
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.4s ease;
    background: #FFF;
    height: 90px;
    display: flex;
    align-items: center;
    border-radius: 0 45px 45px 0;
    /* Pulling it closer to the hex edge */
    margin-left: -40px; 
    padding-left: 45px;
}

.tk-v2-text-group {
    display: flex;
    flex-direction: column;
    padding-right: 30px;
}

.tk-v2-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #1a1a1a;
    text-transform: uppercase;
}

.tk-v2-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: #777;
}

/* Hover Physics */
.tk-v2-token-pill:hover {
    max-width: 500px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
}

.tk-v2-token-pill:hover .tk-v2-token-drawer {
    width: auto;
    opacity: 1;
    margin-left: -30px;
}

.tk-v2-token-pill:hover .tk-v2-token-hex {
    transform: scale(1.05) rotate(-4deg);
}

.tk-v2-token-initial {
    font-size: 64px;
    font-weight: 950;
    fill: rgba(0,0,0,0.75);
}





.tk-v7-medallion-container {
    width: 200px; /* Sized up to show the detail of the wider ring */
    height: 200px;
    display: inline-block;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.45));
}

.tk-v7-medallion-svg {
    width: 100%;
    height: 100%;
}

.tk-v7-medallion-engraving {
    font-size: 9.5px;
    font-weight: 900;
    fill: rgba(0,0,0,0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    /* Clean 'struck' metal effect */
    text-shadow: 0.5px 0.5px 0px rgba(255,255,255,0.7);
}

.tk-v7-jewel-label {
    font-size: 12px; /* Substantially larger as requested */
    dominant-baseline: hanging;
}

.tk-v7-medallion-core-val {
    font-size: 28px; /* Balanced for the slightly smaller core */
    font-weight: 950;
    fill: rgba(0,0,0,0.85);
    letter-spacing: -1px;
}





.tk-v7-ribbon-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.tk-v7-ribbon-head {
    width: 115px; 
    height: 115px;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* THE RADIAL PLEAT LOGIC */
.tk-v7-pleat-ring {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    /* alternating shades of the base color to simulate folds */
    background: repeating-conic-gradient(
        from 0deg,
        rgba(0,0,0,0.2) 0deg 4.5deg,
        rgba(255,255,255,0.1) 4.5deg 9deg
    ), var(--anno-v2-color);
    
    /* Edge darkening falloff */
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.3),
        0 8px 15px rgba(0,0,0,0.5);
    z-index: 1;
}

.tk-v7-rosette-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2; /* Sits on top of pleats */
    overflow: visible;
}

.tk-v7-ribbon-text-wrapper {
    position: relative;
    z-index: 11;
    width: 72px;
    text-align: center;
}

.tk-v7-ribbon-title {
    font-size: 0.65rem;
    line-height: 1.1;
    display: block;
}

/* TAIL: Existing logic preserved */
.tk-v7-ribbon-tail {
    z-index: 1;
    margin-top: -55px; 
    min-width: 58px;
    background: var(--anno-v2-color);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 93%, 0 100%);
    box-shadow: inset 0 45px 35px -10px rgba(0,0,0,0.8); 
}

.tk-v7-tail-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to right, 
        rgba(0,0,0,0.2) 0%, 
        rgba(255,255,255,0.18) 50%, 
        rgba(0,0,0,0.2) 100%);
}

.tk-v7-tail-value {
    font-size: 0.8rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2.5px;
    padding: 20px 0;
}

/* Heirloom Trophy Polish */
.tk-annotation-trophy-pill {
    background-color: #fffef9;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.1);
}

/* Updated Jewel/Trophy Pill - Dense and Tactile */
.tk-annotation-trophy-pill {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.05) 100%);
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.1s ease-in-out;
}

.tk-annotation-trophy-pill:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 3px 6px rgba(0,0,0,0.15);
}

.tk-token-embossed {
    border: 1px solid rgba(0,0,0,0.1) !important;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 3px 6px rgba(0,0,0,0.15);
}

/* The Container Layouts */
.tk-trophy-pedestal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    padding: 1.5rem;
    background: radial-gradient(circle at center, var(--tk-surface) 0%, #fdfdfd 100%);
    border-radius: 1rem;
}

.tk-ribbon-rail {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding-top: 0;
    margin-top: -10px; /* Pulls ribbons over the top edge of a card */
}

.tk-token-cluster {
    display: flex;
    padding-left: 10px;
}

.tk-token-cluster .cluster-item {
    margin-left: -12px;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.tk-token-cluster .cluster-item:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 10;
    margin-right: 12px;
}

/* The Architect's Polish */
.tk-annotation {
    transition: all 0.2s ease-in-out;
    cursor: default;
    user-select: none;
    border: 1px solid rgba(255,255,255,0.1);
}

.tk-annotation:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Glass effect for premium feel */
.tk-glass {
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 15px 0 rgba(0,0,0,0.1);
}

/* Metallic Shine for Tokens/Medallions */
.tk-shine {
    background: linear-gradient(145deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
}

.tk-highlight {
  font-weight: 700;
  color: #191970;
}

.tk-full-height {
   height:100vh;
}

.tk-three-quarter-height {
   height:75vh;
}

li.list-group-item h1 {
  margin-bottom: 0;
}

li.list-group-item h2 {
  margin-bottom: 0;
}

li.list-group-item h3 {
  margin-bottom: 0;
}

li.list-group-item h4 {
  margin-bottom: 0;
}

li.list-group-item h5 {
  margin-bottom: 0;
}

li.list-group-item h6 {
  margin-bottom: 0;
}

.tk-small {
  font-size: .75em;
}

.tk-smaller {
  font-size: .5em;
}

.tk-smallest {
  font-size: .25em;
}

.tk-countdown-wrapper {
  vertical-align: top; /* Adjust the vertical alignment */
  position: relative; /* Context for absolute positioning */
  top: 0.35em; /* Adjust the top value as needed */
  left: 0.15em; /* Adjust the left value to create some space after the title */
}

#tk-countdown {
  display: inline-block;
  width: 1.5em; /* Fixed width to accommodate the widest number */
  text-align: center;
}

.tk-truncate-multiline {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* Adjust based on line-height and font-size */
}

/* Wrapper div to control truncation with ellipsis */
.tk-truncation-wrapper {
  position: relative;
  max-width: 200px;  /* Adjust to desired width */
  height: 1.2em;  /* Restrict height to a single line */
  overflow: hidden;  /* Hide overflowing content */
  text-overflow: ellipsis !important;  /* Show ellipsis when content overflows */
  white-space: nowrap;  /* Prevent line wrapping */
  cursor: pointer;  /* Indicate clickability */
  display: inline-block;  /* Ensure it behaves properly within the table cell */
}

/* Hide the More... indicator when expanded */
.tk-truncation-wrapper.expanded::after {
  display: none;
}

/* Expanded state when clicked */
.tk-truncation-wrapper.expanded {
  max-width: none;  /* Remove width restriction */
  max-height: none;  /* Allow height to expand naturally */
  height: auto;  /* Let the height adjust to fit content */
  overflow: auto;  /* Enable scrolling if content is too large */
  white-space: pre-wrap;  /* Wrap lines to fit the available width */
  background-color: transparent !important;  /* Prevent blue highlight from affecting this cell */
  color: inherit;  /* Keep original text color (e.g., red for code) */
}

/* Code block styling within the preformatted text */
.tk-truncation-wrapper pre {
  margin: 0;  /* Remove default margin */
  padding: 0;  /* Remove default padding */
  overflow: visible;  /* Allow content to be visible */
  white-space: pre;  /* Keep preformatted text but adjust wrapping if needed */
}

/* Code styling with syntax highlight color */
.tk-truncation-wrapper code {
  color: red;  /* Restore the red color for the code text */
  display: inline;  /* Keep the code inline within the preformatted text */
}

/* Code styling with syntax highlight color */
.tk-truncation-wrapper.expanded pre code {
  color: white;  /* Restore the red color for the code text */
}

td.tk-table-cell-truncate {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;     /* Set a fixed max-width suitable for your table */
}

td.tk-table-cell-truncate.expanded {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;  /* Remove the max-width to display full content */
}

.tk-break-word {
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
}

.tk-social-share-card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #343a40;
  padding: 15px;
}

.tk-social-share-card-footer {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 15px;
}

.tk-btn-xs {
  padding: 0.125rem 0.25rem;
  font-size: 0.65rem !important;
  line-height: 1;
  border-radius: 0.2rem;
}

/* Extra small devices (less than 576px) */
@media (max-width: 575.98px) {
    td.tk-table-cell-truncate {
        max-width: 110px;  /* Smaller width for portrait phones */
    }
}

/* Small devices (576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    td.tk-able-cell-truncate {
        max-width: 180px;  /* Width for landscape phones */
    }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    td.tk-table-cell-truncate {
        max-width: 250px;  /* Width for tablets */
    }
}

/* Large devices (992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    td.tk-table-cell-truncate {
        max-width: 350px;  /* Width for desktops */
    }
}

/* Extra large devices (1200px and up) */
@media (min-width: 1200px) {
    td.tk-table-cell-truncate {
        max-width: 400px;  /* Larger width for large desktops */
    }
}

/* Add this to your stylesheet for the Ribbon shape */
.tk-ribbon-tail {
  clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0% 0%);
  padding-right: 1.5rem !important;
}