/*
 * Contextual surface inheritance.
 * When a card communicates state through color, its nested panels should feel
 * like part of that same semantic object instead of falling back to neutral navy.
 */
:is(
  #tasksView .taskcard,
  #routeStepCard,
  #achievementsView .ll-achievement-card,
  #questsView .ll-quest-catalog-card,
  .ll-route-catalog-row
){
  --ll-context-inner:rgba(8,21,32,.9);
  --ll-context-inner-raised:rgba(11,27,40,.94);
  --ll-context-line:rgba(60,91,116,.5);
  --ll-context-accent:#4f7fa1;
}

/* Gold / ready / immediately actionable. */
:is(#tasksView .ll-task-state-ready,#routeStepCard.ll-task-state-ready){
  --ll-context-inner:rgba(45,37,15,.78);
  --ll-context-inner-raised:rgba(58,47,18,.72);
  --ll-context-line:rgba(243,198,93,.3);
  --ll-context-accent:#f3c65d;
}
#achievementsView .ll-achievement-card.status-available:not(.completed),
#questsView .ll-quest-catalog-card.status-available:not(.completed){
  --ll-context-inner:rgba(42,35,14,.78);
  --ll-context-inner-raised:rgba(53,43,16,.74);
  --ll-context-line:rgba(226,184,76,.28);
  --ll-context-accent:#d8b34e;
}

/* Blessing / confirmed / completed green. */
:is(#tasksView .ll-task-state-blessing,#routeStepCard.ll-task-state-blessing,.ll-route-catalog-row.ll-route-catalog-blessing-task),
#achievementsView .ll-achievement-card.completed,
#questsView .ll-quest-catalog-card.status-auto_completed,
#questsView .ll-quest-catalog-card.completed{
  --ll-context-inner:rgba(8,40,27,.8);
  --ll-context-inner-raised:rgba(12,51,34,.72);
  --ll-context-line:rgba(85,217,138,.27);
  --ll-context-accent:#55d98a;
}

/* Planned / future. */
#achievementsView .ll-achievement-card.status-planned:not(.completed),
#questsView .ll-quest-catalog-card.status-planned:not(.completed){
  --ll-context-inner:rgba(10,29,43,.82);
  --ll-context-inner-raised:rgba(13,38,56,.74);
  --ll-context-line:rgba(99,150,192,.28);
  --ll-context-accent:#6396c0;
}
#questsView .ll-quest-catalog-card.status-auto_planned:not(.completed),
.ll-route-catalog-row.status-future:not(.ll-route-catalog-blessing-task){
  --ll-context-inner:rgba(25,20,45,.8);
  --ll-context-inner-raised:rgba(34,27,58,.72);
  --ll-context-line:rgba(156,135,255,.27);
  --ll-context-accent:#9c87ff;
}

/* Blocked / unavailable. */
:is(#tasksView .ll-task-state-blocked,#routeStepCard.ll-task-state-blocked),
#achievementsView .ll-achievement-card.status-blocked:not(.completed),
#questsView .ll-quest-catalog-card.status-impossible:not(.completed){
  --ll-context-inner:rgba(48,18,25,.8);
  --ll-context-inner-raised:rgba(61,23,31,.72);
  --ll-context-line:rgba(237,116,128,.27);
  --ll-context-accent:#ed7480;
}

/* Deferred / unresolved use a softer muted contextual tint. */
.ll-route-catalog-row.status-deferred:not(.ll-route-catalog-blessing-task),
#questsView .ll-quest-catalog-card.status-unclassified:not(.completed){
  --ll-context-inner:rgba(24,28,35,.82);
  --ll-context-inner-raised:rgba(31,36,45,.74);
  --ll-context-line:rgba(132,151,170,.24);
  --ll-context-accent:#8497aa;
}

/* Route/current-task nested instrumentation follows the outer card state. */
#routeStepCard :is(
  .route-info-box,
  .ll-task-inputs,
  .ll-area-task-hint,
  .ll-nearby-achievements,
  .resource,
  .media-card,
  .route-media-card,
  .npc-location-card,
  .ll-route-prep-card,
  .ll-route-related-milestones,
  .ll-route-related-task,
  .ll-task-resource-card
){
  border-color:var(--ll-context-line)!important;
  background:linear-gradient(180deg,var(--ll-context-inner-raised),var(--ll-context-inner))!important;
}
#routeStepCard .route-section{
  border-top-color:var(--ll-context-line)!important;
}
#routeStepCard textarea{
  border-color:var(--ll-context-line)!important;
  background:color-mix(in srgb,var(--ll-context-inner) 82%,#06111c 18%)!important;
}

/* Media is part of the contextual task object too. The image itself remains
 * untouched; only its canvas/frame/caption inherit the semantic surface. */
#routeStepCard :is(.route-media-card,.media-card){
  overflow:hidden;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ll-context-accent) 7%,transparent)!important;
}
#routeStepCard :is(.route-media-card img,.media-card img){
  background:color-mix(in srgb,var(--ll-context-inner) 86%,#03080c 14%)!important;
}
#routeStepCard .route-media-card.primaryMedia{
  border-color:color-mix(in srgb,var(--ll-context-accent) 56%,var(--ll-context-line))!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ll-context-inner-raised) 88%,var(--ll-context-accent) 12%),var(--ll-context-inner))!important;
}
#routeStepCard :is(.route-media-caption,.route-media-source,.media-title){
  background:color-mix(in srgb,var(--ll-context-inner) 90%,transparent)!important;
}
#routeStepCard .route-media-caption{color:color-mix(in srgb,#dbe6ef 88%,var(--ll-context-accent) 12%)!important}
#routeStepCard .route-media-source{color:color-mix(in srgb,#8295a4 88%,var(--ll-context-accent) 12%)!important}
#routeStepCard .npc-location-meta>div{
  border-color:var(--ll-context-line)!important;
  background:color-mix(in srgb,var(--ll-context-inner-raised) 86%,transparent)!important;
}

/* Expandable task information stays inside the task's semantic surface. */
#tasksView .taskcard :is(
  .ll-task-inputs,
  .ll-task-details,
  .ll-task-resource-card,
  .resource,
  .media-card,
  details
){
  border-color:var(--ll-context-line)!important;
  background:linear-gradient(180deg,var(--ll-context-inner-raised),var(--ll-context-inner))!important;
}
#tasksView .taskcard .media-card img{
  background:color-mix(in srgb,var(--ll-context-inner) 86%,#03080c 14%)!important;
}

/* Achievement requirements should not become a neutral strip inside a colored achievement. */
#achievementsView .ll-achievement-card details{
  border-color:var(--ll-context-line)!important;
  background:linear-gradient(180deg,var(--ll-context-inner-raised),var(--ll-context-inner))!important;
  border-radius:9px;
  padding:7px 8px!important;
}

/* Quest detail expansion inherits quest state while individual semantic warnings can still override it. */
#questsView .ll-quest-catalog-card .ll-quest-card-details{
  border-color:var(--ll-context-line)!important;
  background:linear-gradient(180deg,var(--ll-context-inner-raised),var(--ll-context-inner))!important;
  padding:10px!important;
  border-radius:9px!important;
}
#questsView .ll-quest-catalog-card .ll-quest-detail-grid>div{
  border-color:var(--ll-context-line)!important;
  background:color-mix(in srgb,var(--ll-context-inner-raised) 86%,transparent)!important;
}

/* Route Catalog edit/details inherit active/future/deferred/Blessing context. */
.ll-route-catalog-row .ll-route-catalog-details{
  border-top-color:var(--ll-context-line)!important;
  background:linear-gradient(180deg,var(--ll-context-inner-raised),var(--ll-context-inner))!important;
}
.ll-route-catalog-row .ll-route-catalog-detail-grid>div{
  border-color:var(--ll-context-line)!important;
  background:color-mix(in srgb,var(--ll-context-inner-raised) 88%,transparent)!important;
}
.ll-route-catalog-row .ll-route-note-editor textarea{
  border-color:var(--ll-context-line)!important;
  background:color-mix(in srgb,var(--ll-context-inner) 84%,#06111c 16%)!important;
}

/* Keep contextual surfaces subtle: state color frames the information, it does not flood it. */
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  #routeStepCard textarea,
  #routeStepCard :is(.route-media-card img,.media-card img),
  #routeStepCard .npc-location-meta>div,
  #tasksView .taskcard .media-card img,
  #questsView .ll-quest-catalog-card .ll-quest-detail-grid>div,
  .ll-route-catalog-row .ll-route-catalog-detail-grid>div,
  .ll-route-catalog-row .ll-route-note-editor textarea{background:var(--ll-context-inner)!important}
}