/*
 * Unboxed Home — one continuous, scrollable canvas. Scoped exclusively to
 * #rank-tab so Progress, Dashboard, Budget, Settings and their modals keep
 * their existing surfaces. Sections remain in the DOM for all interactions.
 * Loaded after theme-assignments.css to supersede previous boxed styling.
 */
#rank-tab .rank-container {
    gap: 10px !important;
    align-content: start !important;
    padding-inline: clamp(12px, 3.5vw, 22px) !important;
    padding-top: 6px !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
}
#rank-tab .rank-content {
    flex: 0 0 auto !important;
    gap: 0 !important;
    padding: 0 !important;
}
#rank-tab .rank-content .rank-title-card,
#rank-tab .rank-content .rank-orb-card,
#rank-tab .input-section.home-entry-panel,
#rank-tab .comparison-panel,
#rank-tab .journey-section,
#rank-tab .rank-music-player.rank-music-component,
#rank-tab .comparison-body .comparison-rank-card,
#rank-tab .home-entry-panel .info-display,
#rank-tab .home-entry-panel .info-display > .info-item {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
/* Discard shiny glass overlays, inset glows and accent blobs on old cards.
   Do not touch the actual rank emblem's own click/charge effects. */
#rank-tab .rank-title-card::before,
#rank-tab .rank-title-card::after,
#rank-tab .rank-orb-card::before,
#rank-tab .rank-orb-card::after,
#rank-tab .home-entry-panel::before,
#rank-tab .home-entry-panel::after,
#rank-tab .home-entry-panel .info-display::before,
#rank-tab .home-entry-panel .info-display::after,
#rank-tab .comparison-panel::before,
#rank-tab .comparison-panel::after,
#rank-tab .comparison-rank-card::before,
#rank-tab .comparison-rank-card::after,
#rank-tab .journey-section::before,
#rank-tab .journey-section::after,
#rank-tab .rank-music-player.rank-music-component::before,
#rank-tab .rank-music-player.rank-music-component::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

/* Current rank text and emblem sit directly against the page background. */
#rank-tab .rank-title-card {
    padding: 5px 0 0 !important;
    margin: 0 !important;
}
#rank-tab .rank-title-card .rank-name-large {
    margin: 0 !important;
    line-height: 1.12 !important;
}
#rank-tab .rank-content .rank-orb-card {
    position: relative;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 0 4px !important;
    margin: 0 !important;
    overflow: visible !important;
}
/* Use one compact emblem, keeping the existing progress ring and music
   controls. The emblem itself is deliberately NOT flattened. */
#rank-tab .rank-orb-card .progress-circle {
    width: min(288px, 73vw) !important;
    height: min(288px, 73vw) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    margin-inline: auto !important;
}
#rank-tab .rank-orb-card .rank-display img {
    max-width: 100% !important;
    max-height: min(270px, 69vw) !important;
    width: min(270px, 69vw) !important;
}
#rank-tab .rank-orb-card .rank-music-toggle {
    right: clamp(3px, 5vw, 35px) !important;
    top: 4px !important;
}
/* The optional music player is content, not another glass card. */
#rank-tab .rank-music-player.rank-music-component {
    padding: 4px 3px 6px !important;
    margin: 0 !important;
}

/* Summary and logging: no outer frame or 2x2 mini-card frames.
   Retain the central streak control and the log form. */
#rank-tab .input-section.home-entry-panel {
    padding: 2px 0 4px !important;
    margin: 0 !important;
    gap: 10px !important;
    min-height: 0 !important;
    overflow: visible !important;
}
#rank-tab .home-entry-panel .info-display {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(64px, 20vw, 92px) !important;
    row-gap: 14px !important;
    padding: 12px 0 !important;
    margin: 0 0 4px !important;
    overflow: visible !important;
}
#rank-tab .home-entry-panel .info-display > .info-item {
    min-width: 0 !important;
    min-height: 49px !important;
    padding: 4px 0 !important;
    gap: 3px !important;
    text-align: center !important;
    align-content: center !important;
}
#rank-tab .home-entry-panel .info-label {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.18 !important;
    font-size: 9px !important;
}
#rank-tab .home-entry-panel .info-value {
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1.12 !important;
}
#rank-tab .home-entry-panel .input-actions {
    margin-top: 2px !important;
}

/* Streak: solid, flat/matte circle with no gloss, haze, halo or shadow.
   Existing role choices are honoured: Secondary fill, Primary outline
   and number, monochrome flame. Still opens the streak calendar. */
#rank-tab .home-entry-panel #streakOrb {
    isolation: isolate;
    display: flex !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 6 !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--theme-primary, #00D4FF) !important;
    background: var(--theme-secondary, #05070D) !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
    color: var(--theme-primary, #00D4FF) !important;
    -webkit-text-fill-color: var(--theme-primary, #00D4FF) !important;
    transition: transform 160ms ease, border-color 160ms ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}
#rank-tab .home-entry-panel #streakOrb::before,
#rank-tab .home-entry-panel #streakOrb::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
#rank-tab .home-entry-panel #streakOrb > .streak-orb-flame {
    filter: grayscale(1) brightness(0) invert(1) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
#rank-tab .home-entry-panel #streakOrb > strong {
    color: var(--theme-primary, #00D4FF) !important;
    -webkit-text-fill-color: var(--theme-primary, #00D4FF) !important;
    text-shadow: none !important;
}
#rank-tab .home-entry-panel #streakOrb:active {
    transform: translate(-50%, -50%) scale(.96) !important;
    filter: none !important;
}
#rank-tab .home-entry-panel #streakOrb:focus-visible {
    outline: 2px solid var(--ui-special-text, #FFFFFF) !important;
    outline-offset: 4px !important;
}

/* Rank comparison: keep the images, text, arrow and progress fill;
   remove the side-by-side card outlines. */
#rank-tab .comparison-panel {
    padding: 10px 0 6px !important;
    margin: 0 !important;
    overflow: visible !important;
}
#rank-tab .comparison-body {
    gap: clamp(4px, 2vw, 14px) !important;
    align-items: center !important;
}
#rank-tab .comparison-body .comparison-rank-card {
    min-width: 0 !important;
    padding: 5px 2px !important;
}
#rank-tab .comparison-arrow {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}
#rank-tab .journey-section {
    padding: 10px 0 2px !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* The background, emblem colours and all typography tokens still come
   from separate UI Theme controls. No global palette values are changed. */
@media (max-width: 380px) {
    #rank-tab .rank-container {
        gap: 8px !important;
    }
    #rank-tab .home-entry-panel .info-display {
        column-gap: 65px !important;
        row-gap: 10px !important;
    }
    #rank-tab .home-entry-panel #streakOrb {
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
    }
    #rank-tab .rank-orb-card .progress-circle {
        width: min(272px, 75vw) !important;
        height: min(272px, 75vw) !important;
    }
    #rank-tab .rank-orb-card .rank-display img {
        width: min(248px, 68vw) !important;
        max-height: min(248px, 68vw) !important;
    }
}

/* Rank emblem without its former progress-ring frame — 2026-10-13.
   Keep #progressCircle as the existing touch/hold target for Spotify. */
#rank-tab .rank-orb-card .progress-circle {
    width: min(340px, 86vw) !important;
    height: min(340px, 86vw) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
#rank-tab .rank-orb-card .progress-circle::before,
#rank-tab .rank-orb-card .progress-circle::after {
    content: none !important;
}
#rank-tab .rank-orb-card .rank-display {
    width: 100% !important;
    height: 100% !important;
}
#rank-tab .rank-orb-card .rank-display img {
    width: min(328px, 83vw) !important;
    max-width: min(328px, 83vw) !important;
    max-height: min(328px, 83vw) !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: contain !important;
}
#rank-tab .rank-orb-card .rank-progress-percent {
    position: absolute;
    right: clamp(9px, 3vw, 20px);
    bottom: 8px;
    z-index: 45;
    display: inline-block;
    min-width: 48px;
    padding: 5px 9px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .63);
    color: var(--theme-primary, #fff);
    font: 800 16px/1.1 system-ui, sans-serif;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
    pointer-events: none;
}
/* Spotify is at top-left. Emblem display options sit at top-right. */
#rank-tab .rank-orb-card #rankSpotifyToggle {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(0,0,0,.72) !important;
}
#rank-tab .rank-orb-card #rankAnimationToggle {
    top: 11px !important;
    left: auto !important;
    right: 10px !important;
}
#rank-tab .rank-orb-card #rankRomanNumeralToggle {
    top: 46px !important;
    left: auto !important;
    right: 10px !important;
}
@media (max-width: 360px) {
    #rank-tab .rank-orb-card #rankSpotifyToggle {top: 8px !important;left: 8px !important;right: auto !important;}
    #rank-tab .rank-orb-card #rankAnimationToggle {top: 8px !important;right: 8px !important;left: auto !important;}
    #rank-tab .rank-orb-card #rankRomanNumeralToggle {top: 41px !important;right: 8px !important;left: auto !important;}
    #rank-tab .rank-orb-card .rank-progress-percent {font-size: 14px;right: 8px;bottom: 6px;}
}
/* Separate the adjacent full-width Settings buttons so both are easy to tap. */
#settings-tab #openThemeLegendBtn + #openComponentThemeMapperSettings {
    display: block;
    margin-top: 18px !important;
}

/* Smaller emblem with a thin black edge-masking ring ABOVE the image.
   This is purely cosmetic, not the removed rank-progress circle. */
#rank-tab .rank-orb-card {
  --rank-emblem-edge-size:min(304px,77vw);
}
#rank-tab .rank-orb-card .rank-display img {
  width:var(--rank-emblem-edge-size)!important;
  max-width:var(--rank-emblem-edge-size)!important;
  max-height:var(--rank-emblem-edge-size)!important;
}
/* Sits outside the animated spin wrappers; never rotates or steals taps. */
#rank-tab .rank-orb-card .rank-display::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:var(--rank-emblem-edge-size);
  height:var(--rank-emblem-edge-size);
  transform:translate(-50%,-50%);
  border:4px solid #000;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px #000;
  background:transparent;
  z-index:15;
  pointer-events:none;
}