/** Shopify CDN: Minification failed

Line 1176:9 Expected ":"

**/
/* ==========================================================
   TRESTLE™ Workspace
   ----------------------------------------------------------
   File        : trestle-workspace.css
   Module      : Workspace Components
   Version     : 1.0
   Status      : PRODUCTION

   MODULE 1
   ----------------------------------------------------------
   • Reset
   • Base
   • Sections
   • Cards
   • Buttons
   • Chips
   • Badges
   • Loader
   • Utilities
========================================================== */


/*==========================================================
RESET
==========================================================*/

.tr-workspace-page *,
.tr-workspace-page *::before,
.tr-workspace-page *::after{

    box-sizing:border-box;

}


/*==========================================================
BASE
==========================================================*/

.tr-workspace-page{

    background:var(--tr-color-background);

    color:var(--tr-text-body);

    font-family:var(--tr-font-family);

    font-size:var(--tr-font-body);

    line-height:var(--tr-line-height-body);

}


/*==========================================================
SECTION
==========================================================*/

.tr-workspace-section{

    width:100%;

}


/*==========================================================
CARD
==========================================================*/

.tr-workspace-card{

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    box-shadow:var(--tr-shadow-sm);

    padding:var(--tr-space-7);

    transition:
        transform var(--tr-transition-fast),
        box-shadow var(--tr-transition-fast);

}


.tr-workspace-card:hover{

    transform:translateY(-2px);

    box-shadow:var(--tr-shadow-md);

}


/*==========================================================
CARD HEADER
==========================================================*/

.tr-workspace-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:var(--tr-space-5);

}


.tr-workspace-card-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-h3);

    font-weight:var(--tr-font-weight-semibold);

    margin:0;

}


.tr-workspace-card-subtitle{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    margin-top:4px;

}


/*==========================================================
BUTTONS
==========================================================*/

.tr-workspace-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:var(--tr-button-height);

    padding:0 24px;

    border:none;

    border-radius:var(--tr-button-radius);

    cursor:pointer;

    text-decoration:none;

    transition:all var(--tr-transition-fast);

}


.tr-workspace-button-primary{

    background:var(--tr-color-primary);

    color:#ffffff;

}


.tr-workspace-button-primary:hover{

    transform:translateY(-1px);

    box-shadow:var(--tr-shadow-sm);

}


.tr-workspace-button-secondary{

    background:var(--tr-color-primary-light);

    color:var(--tr-color-primary);

}


.tr-workspace-button-outline{

    background:#ffffff;

    border:1px solid var(--tr-color-border);

    color:var(--tr-text-heading);

}


.tr-workspace-button:disabled{

    cursor:not-allowed;

    opacity:.50;

}


/*==========================================================
CHIPS
==========================================================*/

.tr-workspace-chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:var(--tr-radius-pill);

    background:var(--tr-color-primary-light);

    color:var(--tr-color-primary);

    font-size:var(--tr-font-caption);

    font-weight:var(--tr-font-weight-medium);

}


/*==========================================================
BADGES
==========================================================*/

.tr-workspace-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:28px;

    min-height:28px;

    padding:0 10px;

    border-radius:var(--tr-radius-pill);

    font-size:var(--tr-font-caption);

    font-weight:var(--tr-font-weight-semibold);

}


.tr-workspace-badge-success{

    background:#ECFDF3;

    color:var(--tr-color-success);

}


.tr-workspace-badge-warning{

    background:#FFF7E6;

    color:var(--tr-color-warning);

}


.tr-workspace-badge-danger{

    background:#FEF2F2;

    color:var(--tr-color-danger);

}


.tr-workspace-badge-info{

    background:#EFF6FF;

    color:var(--tr-color-info);

}


/*==========================================================
DIVIDER
==========================================================*/

.tr-workspace-divider{

    width:100%;

    height:1px;

    background:var(--tr-color-divider);

    margin:var(--tr-space-6) 0;

}


/*==========================================================
LOADER
==========================================================*/

.tr-workspace-loader{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:300px;

    color:var(--tr-text-light);

    font-size:var(--tr-font-body);

    font-weight:var(--tr-font-weight-medium);

}


/*==========================================================
VISIBILITY
==========================================================*/

.tr-workspace-hidden{

    display:none !important;

}


.tr-workspace-visible{

    display:block !important;

}


/*==========================================================
TEXT UTILITIES
==========================================================*/

.tr-workspace-text-center{

    text-align:center;

}


.tr-workspace-text-left{

    text-align:left;

}


.tr-workspace-text-right{

    text-align:right;

}


/*==========================================================
SPACING UTILITIES
==========================================================*/

.tr-workspace-mt-0{margin-top:0;}
.tr-workspace-mt-1{margin-top:var(--tr-space-1);}
.tr-workspace-mt-2{margin-top:var(--tr-space-2);}
.tr-workspace-mt-3{margin-top:var(--tr-space-3);}
.tr-workspace-mt-4{margin-top:var(--tr-space-4);}
.tr-workspace-mt-5{margin-top:var(--tr-space-5);}
.tr-workspace-mt-6{margin-top:var(--tr-space-6);}

.tr-workspace-mb-0{margin-bottom:0;}
.tr-workspace-mb-1{margin-bottom:var(--tr-space-1);}
.tr-workspace-mb-2{margin-bottom:var(--tr-space-2);}
.tr-workspace-mb-3{margin-bottom:var(--tr-space-3);}
.tr-workspace-mb-4{margin-bottom:var(--tr-space-4);}
.tr-workspace-mb-5{margin-bottom:var(--tr-space-5);}
.tr-workspace-mb-6{margin-bottom:var(--tr-space-6);}


/*==========================================================
FLEX UTILITIES
==========================================================*/

.tr-workspace-flex{

    display:flex;

}


.tr-workspace-flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.tr-workspace-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}


.tr-workspace-flex-column{

    display:flex;

    flex-direction:column;

}


/*==========================================================
COMMON STATES
==========================================================*/

.tr-workspace-disabled{

    opacity:.50;

    pointer-events:none;

}


.tr-workspace-active{

    border-color:var(--tr-color-primary);

    box-shadow:var(--tr-shadow-md);

}


.tr-workspace-selected{

    border:2px solid var(--tr-color-primary);

}


/*==========================================================
END OF MODULE 1
==========================================================*/
/*==========================================================
W001 HERO
==========================================================*/

.tr-workspace-hero{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#ffffff 0%,#faf8ff 100%);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-lg);

    box-shadow:var(--tr-shadow-md);

    padding:var(--tr-space-8);

}

.tr-workspace-hero-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:var(--tr-space-8);

}

.tr-workspace-hero-text{

    flex:1;

}

.tr-workspace-greeting{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    font-weight:var(--tr-font-weight-medium);

    margin-bottom:var(--tr-space-2);

}

.tr-workspace-member-name{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-display);

    font-weight:var(--tr-font-weight-bold);

    line-height:1.15;

    margin-bottom:var(--tr-space-6);

}

.tr-workspace-promise-highlight{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    background:var(--tr-color-primary-light);

    color:var(--tr-color-primary);

    border-radius:var(--tr-radius-pill);

    font-weight:var(--tr-font-weight-semibold);

}

.tr-workspace-journey{

    margin-top:var(--tr-space-6);

}

.tr-workspace-journey-label{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    margin-bottom:8px;

}

.tr-workspace-progress{

    width:100%;

    height:10px;

    background:var(--tr-color-divider);

    border-radius:999px;

    overflow:hidden;

}

.tr-workspace-progress-bar{

    /* Width controlled by JavaScript */

    height:100%;

    background:var(--tr-color-primary);

    border-radius:999px;

}

.tr-workspace-hero-image{

    width:320px;

    flex-shrink:0;

}

.tr-workspace-hero-image img{

    width:100%;

    display:block;

    border-radius:var(--tr-radius-md);

}


/*==========================================================
W002 TODAY'S PROMISE
==========================================================*/

.tr-workspace-promise{

    width:100%;

}

.tr-workspace-promise-card{

    background:#ffffff;

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:var(--tr-space-7);

}

.tr-workspace-promise-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-h2);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:var(--tr-space-5);

}

.tr-workspace-promise-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:16px;

}

.tr-workspace-promise-option{

    cursor:pointer;

    padding:18px;

    text-align:center;

    border:2px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    transition:all var(--tr-transition-fast);

}

.tr-workspace-promise-option:hover{

    border-color:var(--tr-color-primary);

    transform:translateY(-2px);

}

.tr-workspace-promise-selected{

    border-color:var(--tr-color-primary);

    background:var(--tr-color-primary-light);

}


/*==========================================================
W003 WHY TODAY
==========================================================*/

.tr-workspace-why-today{

    background:#ffffff;

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:var(--tr-space-7);

}

.tr-workspace-why-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-h2);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:var(--tr-space-4);

}

.tr-workspace-why-description{

    color:var(--tr-text-body);

    line-height:1.8;

    margin-bottom:var(--tr-space-5);

}

.tr-workspace-why-reason{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    background:var(--tr-color-primary-light);

    color:var(--tr-color-primary);

    border-radius:var(--tr-radius-pill);

    font-size:var(--tr-font-small);

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:991px){

.tr-workspace-hero-content{

    flex-direction:column;

}

.tr-workspace-hero-image{

    width:100%;

}

.tr-workspace-promise-list{

    grid-template-columns:repeat(2,1fr);

}

}

@media (max-width:767px){

.tr-workspace-member-name{

    font-size:2rem;

}

.tr-workspace-promise-list{

    grid-template-columns:1fr;

}

}
/*==========================================================
W004 QUICK ACTIONS
==========================================================*/

.tr-workspace-quick-actions{

    width:100%;

}

.tr-workspace-action-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

}

.tr-workspace-action-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:140px;

    padding:24px;

    background:#ffffff;

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    cursor:pointer;

    transition:all var(--tr-transition-fast);

}

.tr-workspace-action-card:hover{

    transform:translateY(-3px);

    border-color:var(--tr-color-primary);

    box-shadow:var(--tr-shadow-md);

}

.tr-workspace-action-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--tr-color-primary-light);

}

.tr-workspace-action-title{

    color:var(--tr-text-heading);

    font-weight:var(--tr-font-weight-medium);

    text-align:center;

}


/*==========================================================
W005 TRESTLE REMIND ME
==========================================================*/

.tr-workspace-remind-me{

    width:100%;

}

.tr-workspace-reminder-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.tr-workspace-reminder-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:16px 18px;

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-sm);

    transition:all var(--tr-transition-fast);

}

.tr-workspace-reminder-item:hover{

    border-color:var(--tr-color-primary);

    box-shadow:var(--tr-shadow-sm);

}

.tr-workspace-reminder-left{

    display:flex;

    align-items:center;

    gap:16px;

    flex:1;

    min-width:0;

}

.tr-workspace-reminder-time{

    min-width:60px;

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    font-weight:var(--tr-font-weight-medium);

}

.tr-workspace-reminder-text{

    flex:1;

    color:var(--tr-text-heading);

    font-size:var(--tr-font-body);

    word-break:break-word;

    line-height:1.6;

}

.tr-workspace-reminder-completed .tr-workspace-reminder-text{

    text-decoration:line-through;

    color:var(--tr-text-muted);

    opacity:.75;

}

.tr-workspace-reminder-actions{

    display:flex;

    align-items:center;

    gap:10px;

}

.tr-workspace-reminder-action{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border:none;

    background:transparent;

    border-radius:50%;

    cursor:pointer;

    transition:all var(--tr-transition-fast);

}

.tr-workspace-reminder-action:hover{

    background:var(--tr-color-primary-light);

}

.tr-workspace-reminder-edit{

    color:var(--tr-color-info);

}

.tr-workspace-reminder-done{

    color:var(--tr-color-success);

}

.tr-workspace-reminder-delete{

    color:var(--tr-color-danger);

}

.tr-workspace-add-reminder{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:20px;

    cursor:pointer;

    color:var(--tr-color-primary);

    font-weight:var(--tr-font-weight-medium);

}

.tr-workspace-reminder-counter{

    margin-top:16px;

    display:flex;

   justify-content:space-between;

   align-items:center;

    color:var(--tr-text-light);

    font-size:var(--tr-font-caption);

}

.tr-workspace-remind-me-card{

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:var(--tr-space-7);

    box-shadow:var(--tr-shadow-sm);

}

/*==========================================================
END OF W005
==========================================================*/
/*==========================================================
W006 CONTINUE YOUR JOURNEY
==========================================================*/

.tr-workspace-journey{

    width:100%;

}

.tr-workspace-journey-card{

    background:#ffffff;

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:32px;

}

.tr-workspace-journey-stage{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    margin-bottom:8px;

}

.tr-workspace-journey-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-h2);

    font-weight:600;

    margin-bottom:20px;

}

.tr-workspace-journey-progress{

    margin-bottom:20px;

}

.tr-workspace-journey-progress-bar{

    width:100%;

    height:10px;

    background:var(--tr-color-divider);

    border-radius:999px;

    overflow:hidden;

}

.tr-workspace-journey-progress-fill{

    style="width:62%"

    /* Width controlled by JavaScript */

    height:100%;

    background:var(--tr-color-primary);

}

.tr-workspace-journey-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.tr-workspace-journey-days{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:991px){

.tr-workspace-action-grid{

    grid-template-columns:repeat(3,1fr);

}

}

@media (max-width:767px){

.tr-workspace-action-grid{

    grid-template-columns:repeat(2,1fr);

}

.tr-workspace-journey-footer{

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}

}
/*==========================================================
END OF W006
==========================================================*/
/*==========================================================
W007 TODAY'S HEALTH
==========================================================*/

.tr-workspace-health{

    width:100%;

}

.tr-workspace-health-card{

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:var(--tr-space-7);

    box-shadow:var(--tr-shadow-sm);

}

.tr-workspace-health-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.tr-workspace-health-item{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-sm);

    transition:all var(--tr-transition-fast);

}

.tr-workspace-health-item:hover{

    border-color:var(--tr-color-primary);

    box-shadow:var(--tr-shadow-xs);

}

.tr-workspace-health-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    border-radius:50%;

    background:var(--tr-color-primary-light);

    flex-shrink:0;

}

.tr-workspace-health-details{

    flex:1;

}

.tr-workspace-health-label{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    margin-bottom:4px;

}

.tr-workspace-health-value{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-body);

    font-weight:var(--tr-font-weight-semibold);

}

.tr-workspace-health-status{

    margin-top:6px;

    font-size:var(--tr-font-caption);

    color:var(--tr-text-muted);

}


/*==========================================================
W008 TODAY'S INSIGHT
==========================================================*/

.tr-workspace-insight{

    width:100%;

}

.tr-workspace-insight-card{

    background:linear-gradient(135deg,#ffffff 0%,#faf8ff 100%);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:var(--tr-space-7);

    box-shadow:var(--tr-shadow-sm);

}

.tr-workspace-insight-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-h2);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:16px;

}

.tr-workspace-insight-text{

    color:var(--tr-text-body);

    line-height:1.8;

}

.tr-workspace-insight-highlight{

    margin-top:20px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 16px;

    background:var(--tr-color-primary-light);

    color:var(--tr-color-primary);

    border-radius:var(--tr-radius-pill);

}


/*==========================================================
W009 RECOMMENDATIONS
==========================================================*/

.tr-workspace-recommendations{

    width:100%;

}

.tr-workspace-recommendation-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.tr-workspace-recommendation-card{

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    overflow:hidden;

    transition:all var(--tr-transition-fast);

}

.tr-workspace-recommendation-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--tr-shadow-md);

}

.tr-workspace-recommendation-image{

    aspect-ratio:16/9;

    background:#f3f4f6;

}

.tr-workspace-recommendation-content{

    padding:20px;

}

.tr-workspace-recommendation-category{

    color:var(--tr-color-primary);

    font-size:var(--tr-font-caption);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:8px;

}

.tr-workspace-recommendation-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-body);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:10px;

}

.tr-workspace-recommendation-text{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    line-height:1.7;

}

.tr-workspace-recommendation-link{

    display:inline-block;

    margin-top:18px;

    color:var(--tr-color-primary);

    font-weight:var(--tr-font-weight-medium);

    text-decoration:none;

}


/*==========================================================
W010 EXPLORE
==========================================================*/

.tr-workspace-explore{

    width:100%;

}

.tr-workspace-explore-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.tr-workspace-explore-card{

    display:flex;

    gap:18px;

    padding:18px;

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    transition:all var(--tr-transition-fast);

}

.tr-workspace-explore-card:hover{

    border-color:var(--tr-color-primary);

    box-shadow:var(--tr-shadow-sm);

}

.tr-workspace-explore-image{

    width:96px;

    height:96px;

    border-radius:var(--tr-radius-sm);

    background:#f3f4f6;

    flex-shrink:0;

}

.tr-workspace-explore-content{

    flex:1;

}

.tr-workspace-explore-category{

    color:var(--tr-color-primary);

    font-size:var(--tr-font-caption);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:8px;

}

.tr-workspace-explore-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-body);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:8px;

}

.tr-workspace-explore-description{

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

    line-height:1.7;

}


/*==========================================================
MODULE 4 RESPONSIVE
==========================================================*/

@media (max-width:991px){

.tr-workspace-health-grid,
.tr-workspace-recommendation-grid,
.tr-workspace-explore-grid{

    grid-template-columns:1fr;

}

}

@media (max-width:767px){

.tr-workspace-health-item{

    align-items:flex-start;

}

.tr-workspace-explore-card{

    flex-direction:column;

}

.tr-workspace-explore-image{

    width:100%;

    height:180px;

}

}
/*==========================================================
END OF W007
==========================================================*/
/*==========================================================
W011 REFLECTION
==========================================================*/

.tr-workspace-reflection{

    width:100%;

}

.tr-workspace-reflection-card{

    background:var(--tr-color-surface);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:var(--tr-space-7);

    box-shadow:var(--tr-shadow-sm);

}

.tr-workspace-reflection-title{

    color:var(--tr-text-heading);

    font-size:var(--tr-font-h2);

    font-weight:var(--tr-font-weight-semibold);

    margin-bottom:var(--tr-space-3);

}

.tr-workspace-reflection-description{

    color:var(--tr-text-light);

    margin-bottom:var(--tr-space-6);

}

.tr-workspace-reflection-options{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}

.tr-workspace-reflection-option{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:110px;

    padding:20px;

    border:2px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    cursor:pointer;

    transition:all var(--tr-transition-fast);

}

.tr-workspace-reflection-option:hover{

    border-color:var(--tr-color-primary);

    transform:translateY(-2px);

}

.tr-workspace-reflection-selected{

    background:var(--tr-color-primary-light);

    border-color:var(--tr-color-primary);

}

.tr-workspace-reflection-note{

    margin-top:24px;

}

.tr-workspace-reflection-note textarea{

    width:100%;

    min-height:120px;

    resize:vertical;

}



/*==========================================================
W012 TODAY'S THOUGHT
==========================================================*/

.tr-workspace-thought{

    width:100%;

}

.tr-workspace-thought-card{

    background:linear-gradient(135deg,#faf8ff 0%,#ffffff 100%);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-lg);

    padding:40px;

    text-align:center;

    box-shadow:var(--tr-shadow-sm);

}

.tr-workspace-thought-quote{

    font-size:1.35rem;

    color:var(--tr-text-heading);

    line-height:1.8;

    font-weight:500;

}

.tr-workspace-thought-author{

    margin-top:24px;

    color:var(--tr-text-light);

    font-size:var(--tr-font-small);

}



/*==========================================================
PREMIUM UPGRADE CARD
==========================================================*/

.tr-workspace-upgrade{

    background:linear-gradient(135deg,#ffffff,#faf8ff);

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

    padding:32px;

    text-align:center;

}

.tr-workspace-upgrade-title{

    font-size:var(--tr-font-h2);

    font-weight:600;

    margin-bottom:12px;

}

.tr-workspace-upgrade-description{

    color:var(--tr-text-light);

    margin-bottom:24px;

}



/*==========================================================
EMPTY STATE
==========================================================*/

.tr-workspace-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:48px 24px;

}

.tr-workspace-empty-title{

    font-weight:600;

    margin-bottom:12px;

}

.tr-workspace-empty-description{

    color:var(--tr-text-light);

}



/*==========================================================
LOADING STATE
==========================================================*/

.tr-workspace-loading{

    min-height:160px;

    border-radius:var(--tr-radius-md);

    background:#f4f5f8;

    animation:trWorkspacePulse 1.5s infinite;

}

@keyframes trWorkspacePulse{

0%{

opacity:.45;

}

50%{

opacity:1;

}

100%{

opacity:.45;

}

}



/*==========================================================
ERROR STATE
==========================================================*/

.tr-workspace-error{

    padding:32px;

    text-align:center;

    border:1px solid var(--tr-color-border);

    border-radius:var(--tr-radius-md);

}

.tr-workspace-error-title{

    color:var(--tr-color-danger);

    font-weight:600;

    margin-bottom:12px;

}

.tr-workspace-error-description{

    color:var(--tr-text-light);

}



/*==========================================================
MODULE 5 RESPONSIVE
==========================================================*/

@media (max-width:767px){

.tr-workspace-reflection-options{

    justify-content:center;

}

.tr-workspace-reflection-option{

    width:100%;

}

.tr-workspace-thought-card{

    padding:28px;

}

}